@import url('./estimate-report.css');
@import url('./diagnostic.css');

:root {
  --color-canvas: #fbfaf6;
  --color-surface: #ffffff;
  --color-primary: #10245f;
  --color-primary-2: #243f87;
  --color-copy: #33446e;
  --color-muted: #7a849c;
  --color-gold: #b88922;
  --color-gold-soft: #f7efd9;
  --color-blue: #2563eb;
  --color-blue-soft: #edf3ff;
  --color-success: #178957;
  --color-error: #d85c55;
  --color-line: #dde3ee;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --sidebar-width: 276px;
  --card-radius: 12px;
  --card-border: 1px solid var(--color-line);
  --content-width: 1440px;
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, .2);
  --shadow: 0 8px 24px rgba(20, 35, 78, .08);

  /* Existing imported SAT views use these aliases. */
  --navy: var(--color-primary);
  --navy-2: var(--color-primary-2);
  --blue: var(--color-blue);
  --green: var(--color-success);
  --orange: var(--color-gold);
  --red: var(--color-error);
  --ink: #18243f;
  --muted: var(--color-muted);
  --line: var(--color-line);
  --canvas: var(--color-canvas);
  --card: var(--color-surface);
  --radius: var(--card-radius);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--color-canvas); }
body { margin: 0; min-height: 100vh; color: var(--color-copy); background: var(--color-canvas); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
h1, h2, h3 { color: var(--color-primary); font-family: var(--font-display); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; }

.app-shell, .portal-shell { min-height: 100vh; display: flex; }
.standalone-app { width: 100%; display: block; }
.sidebar, .portal-rail { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: var(--sidebar-width); min-height: 100vh; flex-direction: column; overflow-y: auto; border-right: 1px solid #e8e8e5; background: rgba(255, 255, 255, .97); }
.sidebar-brand { display: block; padding: 30px 26px 18px; text-decoration: none; }
.portal-rail > .brand-lockup { min-height: 118px; padding: 28px 32px 16px; }
.rail-is-collapsed .brand-slogan { display: none; }
.brand-lockup { display: flex; align-items: flex-start; gap: 12px; color: var(--color-primary); }
.brand-lockup strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.04; letter-spacing: -.025em; white-space: nowrap; }
.brand-lockup small { display: block; }
.brand-role { margin-top: 3px; color: var(--color-gold); font: 700 11px/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.brand-slogan { margin-top: 4px; color: var(--color-muted);
  font: 400 11.5px/1.35 var(--font-ui); white-space: normal; }
.portal-rail .brand-slogan { max-width: 170px; }
.brand-tagline { margin-top: 7px; color: #6b7898; font: 700 8px/1.5 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.brand-mark { display: grid; width: 32px; height: 28px; grid-template-columns: 1fr 1fr; flex: 0 0 auto; margin-top: 1px; }
.brand-mark i { display: block; border: 2px solid var(--color-gold); background: #fffaf0; }
.brand-mark i:first-child { border-right-width: 1px; border-radius: 3px 1px 9px 2px; transform: skewY(8deg); }
.brand-mark i:last-child { border-left-width: 1px; border-radius: 1px 3px 2px 9px; transform: skewY(-8deg); }
.brand-lockup.compact strong { font-size: 18px; }
.brand-lockup.compact .brand-mark { width: 27px; height: 24px; }

.nav-list, .portal-nav { display: grid; gap: 4px; padding: 15px 20px; }
.nav-list::before, .portal-nav::before { content: "LEARN"; padding: 4px 13px 7px; color: #a5acbd; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.portal-nav::before { display: none; }
.nav-item, .portal-nav-item { position: relative; display: flex; width: 100%; min-height: 56px; align-items: center; gap: 15px; padding: 11px 16px; border: 0; border-radius: 9px; color: var(--color-primary); background: transparent; font-family: var(--font-display); text-align: left; font-size: 17px; font-weight: 500; transition: color .16s ease, background-color .16s ease, transform .16s ease; }
.nav-item img { width: 21px; height: 21px; object-fit: contain; filter: grayscale(1) sepia(.3) saturate(2.2) hue-rotate(180deg); }
.nav-item:hover, .portal-nav-item:hover { color: var(--color-primary); background: #f5f6fa; transform: translateX(2px); }
.nav-item.active, .portal-nav-item.is-active { color: var(--color-primary); background: #eef0f9; font-weight: 700; }
.nav-item.active::before, .portal-nav-item.is-active::before { content: ""; position: absolute; left: 0; width: 3px; height: 24px; border-radius: 99px; background: var(--color-primary); }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--color-primary); font-family: var(--font-display); }
.portal-settings { margin: 0 20px 22px; width: calc(100% - 40px); }

.workspace, .portal-main { width: calc(100% - var(--sidebar-width)); min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar, .mobile-header { display: none; }
#main-content, .portal-content { min-height: 100vh; padding: 20px 20px 24px; outline: none; }
.portal-content > * { width: min(100%, var(--content-width)); margin-inline: auto; }
.mobile-bottom-nav, .sidebar-backdrop { display: none; }

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h1 { margin: 0; font-size: clamp(34px, 3vw, 48px); line-height: 1.02; letter-spacing: -.035em; }
.section-heading p { max-width: 720px; margin: 8px 0 0; color: var(--color-muted); font-size: 14px; line-height: 1.6; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.grid { display: grid; gap: 16px; }
.card { border: var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); box-shadow: none; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--color-line); }
.card-header h2 { margin: 0; font-size: 20px; }
.card-body { padding: 20px; }
.stats-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); margin-bottom: 18px; }
.stat-card { min-height: 112px; padding: 20px; }
.stat-card span { color: var(--color-muted); font-size: 12px; font-weight: 700; }
.stat-card strong { display: block; margin-top: 12px; color: var(--color-primary); font-family: var(--font-display); font-size: 31px; }
.stat-card small { color: var(--color-muted); font: 600 12px/1 var(--font-ui); }

.btn { min-height: 42px; padding: 9px 17px; border: 1px solid #cbd4e3; border-radius: 8px; color: var(--color-primary); background: white; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(20, 36, 80, .1); }
.btn-primary { border-color: var(--color-primary); color: white; background: var(--color-primary); }
.btn-outline { border-color: #d4b56e; color: #8b6315; background: #fffdf7; }
.btn-danger { border-color: #f2c5c1; color: var(--color-error); background: #fff0ee; }
.btn-sm { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border: var(--card-border); border-radius: 10px; background: white; }
.input, .select, .textarea { min-width: 150px; padding: 10px 12px; border: 1px solid #cbd4e3; border-radius: 8px; color: var(--ink); background: white; outline: none; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-blue); box-shadow: var(--focus-ring); }
.toolbar .input { margin-left: auto; }
.tabs { display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--color-line); }
.tab { padding: 11px 4px; border: 0; border-bottom: 3px solid transparent; color: var(--color-muted); background: transparent; font-weight: 700; }
.tab.active { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; color: var(--color-primary-2); background: var(--color-blue-soft); font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.green { color: var(--color-success); background: #eaf7f0; }
.badge.orange { color: #926213; background: var(--color-gold-soft); }
.badge.red { color: var(--color-error); background: #fff0ee; }
.muted { color: var(--color-muted); }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 14px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); background: #fafbfc; font-size: 11px; font-weight: 800; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 14px; border-bottom: 1px solid #eef1f5; font-size: 13px; vertical-align: middle; }
.data-table tr:hover td { background: #fcfcfa; }
.empty { display: grid; min-height: 230px; place-items: center; color: var(--color-muted); text-align: center; }
.empty-icon { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 12px; border-radius: 50%; color: var(--color-primary); background: #f0f2f8; }

.paper-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.paper-card { padding: 22px; }
.paper-card h3 { margin: 12px 0 8px; font-size: 20px; }
.paper-card p { min-height: 42px; color: var(--color-muted); font-size: 13px; line-height: 1.55; }
.paper-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 10px; left: 8px; width: 2px; background: #ccd5e6; }
.timeline-group { position: relative; margin-bottom: 26px; }
.timeline-group::before { content: ""; position: absolute; left: -25px; top: 4px; width: 10px; height: 10px; border: 3px solid #edf0f7; border-radius: 50%; background: var(--color-primary); }
.timeline-date { margin-bottom: 10px; color: var(--color-primary); font-weight: 800; }
.assignment-card { max-width: 430px; padding: 22px; border-left: 4px solid var(--color-gold); }
.assignment-meta { display: grid; gap: 8px; color: var(--color-muted); font-size: 13px; }
.assignment-meta b { color: var(--color-gold); }

/* Full-length test library — approved 4ULearning SAT v2 composition. */
.full-tests-screen { color: var(--color-primary); font-family: var(--font-display); }
.full-tests-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; min-height: 104px; padding: 4px 14px 16px; }
.full-tests-heading h1 { margin: 0; font-size: 54px; line-height: .98; letter-spacing: -.035em; }
.full-tests-heading p { margin: 8px 0 0; font-size: 20px; }
.full-tests-heading blockquote { min-width: 345px; margin: 10px 0 0; padding-left: 34px; border-left: 1px solid #cbd4e4; font-size: 18px; line-height: 1.35; }
.full-tests-layout { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 14px; }
.recommended-test, .test-library-card, .full-test-side-card { border: 1px solid #d8e0ed; border-radius: 8px; background: #fff; }
.recommended-test { position: relative; min-height: 255px; padding: 48px 16px 15px; }
.recommended-label { position: absolute; top: 14px; left: 16px; padding: 7px 14px; border-radius: 5px; color: #10245f; background: #fae7a8; font-weight: 700; }
.recommended-summary { display: grid; grid-template-columns: 1.45fr .72fr 1fr; min-height: 142px; }
.recommended-title { display: flex; gap: 14px; align-items: flex-start; padding: 12px 20px 8px 4px; border-right: 1px solid #d8e0ed; }
.test-feature-icon, .test-status-icon, .full-test-side-card header > span { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #b27a09; background: #fcf6e9; }
.recommended-title h2 { margin: 0; font-size: 28px; }.recommended-title p { margin: 6px 0 10px; color: #53658f; font-size: 15px; }
.scoring-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 7px; color: #057a4c; background: #e5f6ed; font-size: 13px; }.scoring-status .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: white; background: #10a06d; }
.readiness-score { display: grid; justify-items: center; align-content: center; gap: 8px; border-right: 1px solid #d8e0ed; }.readiness-score > b { font-size: 14px; }.readiness-score span { display: grid; width: 92px; height: 92px; place-items: center; border: 8px solid #18a66d; border-top-color: #e5e9f1; border-radius: 50%; }.readiness-score strong { font-size: 28px; }
.recommended-summary dl { display: grid; align-content: center; gap: 16px; margin: 0; padding-left: 27px; }.recommended-summary dl > div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: flex-start; }.recommended-summary dd { margin: 0; }.recommended-summary dd b,.recommended-summary dd small { display: block; font-weight: 500; }.recommended-summary dd small { margin-top: 4px; color: #53658f; }
.recommended-start { width: 41%; margin-top: -3px; }.test-primary-button { display: flex; align-items: center; justify-content: center; gap: 9px; border-color: #17327a; color: white; background: linear-gradient(135deg,#17327a,#244a9b); font-family: var(--font-display); font-size: 16px; font-weight: 500; }.test-primary-button .icon { width: 20px; }
.test-filter-tabs { display: flex; gap: 12px; margin: 24px 0 14px; }.test-filter-tabs button { min-width: 118px; padding: 11px 20px; border: 1px solid #cbd6e8; border-radius: 6px; color: var(--color-primary); background: white; font-family: var(--font-display); font-size: 15px; }.test-filter-tabs .is-active { border-color: #e5e9f2; background: #e9edf8; font-weight: 700; }
.test-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.test-library-card { display: flex; min-height: 230px; flex-direction: column; padding: 14px; }.test-library-card header { display: flex; align-items: center; gap: 10px; }.test-library-card header h3 { margin: 0; font-size: 17px; }.test-library-card .test-status-icon { width: 34px; height: 34px; color: #0b8f60; background: #e8f7f0; }.test-library-card .test-status-icon.warm { color: #b77d0b; background: #fff6dd; }.test-status-icon .icon { width: 19px; }.test-state { display: inline-flex; align-items: center; align-self: center; gap: 5px; margin: 8px 0; padding: 4px 10px; border-radius: 99px; background: #eef1f9; font-size: 12px; }.test-state .icon { width: 14px; height: 14px; }.test-state.is-complete { color: #06764b; background: #e5f6ed; }.test-state.is-progress { color: #8b5d00; background: #fff2d3; }.test-scores { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2px; }.test-scores p { margin: 0; padding: 0 10px 7px 0; border-bottom: 1px solid #e3e7ef; }.test-scores p + p { padding-left: 12px; border-left: 1px solid #e3e7ef; }.test-scores strong,.test-scores small { display: block; }.test-scores strong { font-size: 24px; }.test-scores small { color: #50618a; font-size: 11px; }.test-library-card time { margin: auto 0 8px; color: #5e6e94; font-size: 12px; }.test-library-card > p { margin: 12px 0 8px; color: #52638e; line-height: 1.45; }.test-library-card > p small { font-size: 12px; }.test-library-card .scoring-status { justify-content: center; margin-top: 8px; padding: 5px; }.test-progress-copy { color: var(--color-primary)!important; }.test-progress-bar { display: block; height: 8px; border-radius: 99px; background: linear-gradient(to right,#c88e15 var(--progress),#e8ebf1 var(--progress)); }.test-outline-button,.test-muted-button { margin-top: auto; border-color: #c48a15; color: #8a5b00; background: white; font-family: var(--font-display); }.test-muted-button { border-color: #cbd2df; color: #8b94aa; background: #f7f8fa; }
.full-tests-aside { display: grid; align-content: start; gap: 14px; }.full-test-side-card { padding: 18px; }.full-test-side-card header { display: flex; gap: 12px; align-items: flex-start; }.full-test-side-card header > span { width: 44px; height: 44px; color: var(--color-primary); background: #eef2fa; }.full-test-side-card header h2 { margin: 0; font-size: 20px; }.full-test-side-card header p { margin: 4px 0 0; color: #617099; font-size: 13px; }.readiness-list { display: grid; gap: 17px; margin: 18px 0; padding: 17px 10px; border: 1px solid #dce3ed; border-radius: 8px; list-style: none; }.readiness-list li { display: flex; align-items: flex-start; gap: 10px; }.readiness-list li > .icon { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: white; background: #13a26c; }.readiness-list p,.next-planned-test p { margin: 0; }.readiness-list b,.readiness-list small,.next-planned-test b,.next-planned-test span,.next-planned-test small { display: block; }.readiness-list small,.next-planned-test small { color: #617099; }.readiness-list li > span { margin-left: auto; font-size: 22px; }.next-planned-test { display: flex; gap: 12px; align-items: flex-start; padding: 16px 4px 0; border-top: 1px solid #dce3ed; }.next-planned-test button { align-self: center; margin-left: auto; padding: 8px 18px; border: 1px solid #244a9b; border-radius: 5px; color: var(--color-primary); background: white; font-family: var(--font-display); }.test-tips header > span.warm { color: #ad770d; background: #fff5de; }.test-tips ul { display: grid; gap: 18px; padding: 16px 0; border-bottom: 1px solid #dce3ed; list-style: none; }.test-tips li { display: flex; gap: 12px; }.test-tips button { display: flex; gap: 8px; align-items: center; padding: 5px 0; border: 0; color: var(--color-primary); background: transparent; font-family: var(--font-display); }.test-tips button .icon { width: 17px; }
.freshness-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:3px 0 7px;padding:5px 9px;border:1px solid #cfd8ea;border-radius:99px;color:#24447f;background:#f2f5fb;font-size:11px;font-weight:700}.freshness-badge small{color:#647498;font-size:10px;font-weight:500}.freshness-badge.is-some-exposure{border-color:#e8ca89;color:#805a0a;background:#fff8e8}.freshness-badge.is-review-influenced,.score-confidence.is-review-influenced{border-color:#e7b9b9;color:#9b3838;background:#fff0f0}.recommended-title .freshness-badge{margin-top:7px}.freshness-explainer{margin:10px 8px 0;color:#596b94;font-size:12px;line-height:1.45}.cadence-card>p{color:#586a93;font-size:13px;line-height:1.45}.cadence-card ul{display:grid;gap:9px;margin:13px 0;padding:0;list-style:none}.cadence-card li{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid #e5e9f0;font-size:12px}.cadence-card li time{color:#617099}.cadence-card .btn{width:100%}.score-confidence{display:inline-flex;margin-left:8px;padding:4px 8px;border:1px solid #bfd9c9;border-radius:99px;color:#147247;background:#edf8f1;font-size:11px;vertical-align:middle}.score-confidence.is-some-exposure{border-color:#e8ca89;color:#805a0a;background:#fff8e8}
.exam-popup-fallback { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(16,36,95,.46); }.exam-popup-fallback > div { width: min(440px,100%); padding: 28px; border-radius: 12px; background: white; box-shadow: var(--shadow); }.exam-popup-fallback strong { color: var(--color-primary); font: 700 22px/1.2 var(--font-display); }.exam-popup-fallback p { color: var(--color-muted); }.exam-popup-fallback .btn { display: block; width: 100%; margin-top: 10px; text-align: center; text-decoration: none; }
@media (max-width: 1450px) { .full-tests-layout { grid-template-columns: 1fr; }.full-tests-aside { grid-template-columns: 1fr 1fr; }.test-card-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .full-tests-heading { display: block; }.full-tests-heading h1 { font-size: 38px; }.full-tests-heading blockquote { min-width: 0; margin-top: 18px; }.recommended-summary { grid-template-columns: 1fr; }.recommended-title,.readiness-score { border-right: 0; border-bottom: 1px solid #d8e0ed; }.readiness-score { padding: 15px; }.recommended-summary dl { padding: 18px 8px; }.recommended-start { width: 100%; margin: 0; }.test-card-grid,.full-tests-aside { grid-template-columns: 1fr; } }

/* Reports, progress and mistake review share the approved evidence-dashboard language. */
.report-screen,.progress-screen,.mistakes-screen{color:var(--color-primary);font-family:var(--font-display)}.report-heading,.progress-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:2px 14px 12px}.report-heading h1,.progress-heading h1,.mistakes-screen>header h1{margin:0;font-size:50px;line-height:1}.report-heading p,.progress-heading p,.mistakes-screen>header p{margin:7px 0 0;color:#596b98;font-size:20px}.report-heading>div:last-child{display:flex;gap:12px}.report-action{display:flex;gap:10px;align-items:center;border-color:#c88b15;color:var(--color-primary);font-family:var(--font-display);font-weight:500}.report-action.is-gold{color:white;background:linear-gradient(135deg,#ad7100,#d29718)}.report-tabs{display:flex;gap:18px;margin-bottom:16px;border-bottom:1px solid var(--color-line)}.report-tabs button{padding:10px 24px;border:0;border-bottom:3px solid transparent;color:var(--color-primary);background:transparent;font-family:var(--font-display);font-size:17px}.report-tabs .is-active{border-bottom-color:#173a96;font-weight:700}.report-card,.progress-card{padding:14px;border:1px solid #d9e1ee;border-radius:8px;background:white}.report-card h2,.progress-card h2{margin:0 0 8px;font-size:21px}.report-top-grid{display:grid;grid-template-columns:1.15fr .95fr;gap:10px}.score-panel>div{display:grid;grid-template-columns:1.4fr .8fr .8fr;align-items:center}.score-panel>div>strong{display:grid;min-height:110px;place-items:center;padding:10px;border-radius:6px;background:#eef2fc;font-size:66px}.score-panel>div>strong small{font-size:15px;font-weight:500}.score-panel>div>span{display:grid;justify-items:center;gap:5px;padding:9px;border-left:1px solid var(--color-line)}.score-panel>div>span em{font-size:44px;font-style:normal;font-weight:700}.score-panel>div>span small{color:#1d4ca8}.score-panel>p{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--color-line);color:#53689a;font-size:13px}.performance-panel>div{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.performance-panel span{display:grid;min-height:130px;justify-items:center;align-content:center;border:1px solid #dee4ee;border-radius:7px}.performance-panel .icon{width:38px;height:38px;padding:8px;border-radius:50%;color:white;background:#14a16d}.performance-panel .performance-incorrect .icon{background:#eb4545}.performance-panel .performance-omitted .icon{background:#c88d1b}.performance-panel span b{font-size:39px}.performance-panel span small{font-size:15px}.report-dashboard-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:10px;margin-top:10px}.report-domain-row{display:grid;grid-template-columns:1.35fr 1.2fr 40px;gap:10px;align-items:center;margin:8px 0;font-size:13px}.report-domain-row i{height:10px;border-radius:10px;background:#e5e8ef}.report-domain-row i b{display:block;height:100%;border-radius:10px;background:#173b92}.report-domain-row i b.gold{background:#c58a14}.mini-line-chart{position:relative;height:175px;border-left:1px solid #dce2ec;border-bottom:1px solid #dce2ec;background:repeating-linear-gradient(0deg,transparent 0 34px,#eef1f5 35px)}.mini-line-chart i{position:absolute;left:8%;right:9%;top:68%;height:2px;background:#1947b5;transform:rotate(-9deg);transform-origin:left}.mini-line-chart span{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;border-radius:50%;background:#1947b5}.mini-line-chart span.gold{background:#c48a17}.mini-line-chart>b{display:inline-block;margin:145px 7% 0;font-size:12px}.timing-table table{width:100%;border-collapse:collapse;font-size:12px}.timing-table td,.timing-table th{padding:5px;border-bottom:1px solid #edf0f5;text-align:left}.lost-points>div{display:flex;align-items:center;justify-content:center;gap:26px}.lost-points>div>span{display:grid;width:110px;height:110px;place-items:center;border:18px solid #ec343a;border-top-color:#c99116;border-radius:50%;font-size:26px}.lost-points>div>span small{text-align:center;font-size:10px}.lost-points p{line-height:2}.error-pattern-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}.error-pattern-list li{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #e0e5ee;border-radius:5px;font-size:12px}.error-pattern-list li b{margin-left:auto}.report-bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.report-bottom-grid p{display:flex;gap:12px;margin:0}.report-bottom-grid p b,.report-bottom-grid p small{display:block}.report-bottom-grid ol,.report-bottom-grid ul{display:grid;gap:6px;margin:0;padding-left:26px;font-size:12px}
.progress-heading button{display:flex;align-items:center;gap:12px;padding:12px 20px;border:1px solid #bdcce5;border-radius:6px;color:var(--color-primary);background:white}.progress-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:10px}.progress-main,.progress-side{display:grid;align-content:start;gap:10px}.score-progress>p,.domain-mastery>p,.timing-chart>p,.weekly-chart>p{margin:0;color:#5c6e9b}.progress-line-chart{position:relative;height:200px;margin:18px 35px 0;border-left:1px solid #dce2ec;border-bottom:1px solid #dce2ec;background:repeating-linear-gradient(0deg,transparent 0 44px,#e9edf3 45px)}.progress-line-chart i{position:absolute;left:10%;right:10%;top:62%;height:3px;background:#162f82;transform:rotate(-7deg);transform-origin:left}.progress-line-chart>span{position:absolute;left:var(--x);top:var(--y);z-index:1;font-weight:700}.progress-line-chart>span:after{content:"";display:block;width:13px;height:13px;margin:3px auto;border-radius:50%;background:#162f82}.progress-line-chart em{position:absolute;right:-20px;top:8px;color:#9a670d;font-style:normal}.domain-mastery>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.domain-mastery section{position:relative;min-height:140px;padding:12px;border:1px solid #dce3ee;border-radius:7px}.domain-mastery section>span{float:left;margin-right:8px;padding:7px;border:1px solid #dce3ee;border-radius:6px}.domain-mastery h3{min-height:33px;margin:0;font-size:13px}.domain-mastery section>b{font-size:29px}.domain-mastery section>em{margin-left:8px;color:#07875a;font-size:11px;font-style:normal}.domain-mastery section>small,.domain-mastery section>i{display:block;margin-top:6px;color:#5b6e9c;font-style:normal}.domain-mastery section>i{color:#183d93;letter-spacing:3px}.progress-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.progress-metrics article{display:flex;gap:12px;min-height:125px;padding:15px;border:1px solid #d9e1ee;border-radius:8px;background:white}.progress-metrics article>.icon{width:48px;height:48px;padding:10px;border:1px solid #dce3ee;border-radius:7px}.progress-metrics p{margin:0}.progress-metrics p b,.progress-metrics p small{display:block}.progress-metrics p b{font-size:42px}.progress-metrics p small{color:#168d60}.timing-chart>div{height:145px;background:linear-gradient(170deg,transparent 48%,#173a92 49% 50%,transparent 51%),linear-gradient(166deg,transparent 50%,#c58b16 51% 52%,transparent 53%),repeating-linear-gradient(0deg,transparent 0 35px,#e8ecf2 36px)}.weekly-chart>div{display:flex;height:110px;align-items:flex-end;justify-content:space-around;border-bottom:1px solid #dce2ed}.weekly-chart i{width:18px;background:linear-gradient(#203f91,#11295f)}.recently-mastered{margin-top:10px}.recently-mastered>div{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.recently-mastered p{display:flex;gap:10px;margin:0;padding:10px;border:1px solid #dfe5ee;border-radius:6px}.recently-mastered p>.icon{padding:5px;border-radius:50%;color:white;background:#159967}.recently-mastered p b,.recently-mastered p small{display:block}.recently-mastered p small{color:#5d6e98}
.mistakes-screen>header{padding:2px 14px 20px}.mistake-layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:16px}.mistake-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}.mistake-metrics article{display:grid;min-height:145px;grid-template-columns:58px 55px 1fr;align-items:center;padding:20px;border:1px solid #d9e1ee;border-radius:8px;background:white}.mistake-metrics article>span{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;font:700 24px var(--font-ui)}.mistake-metrics .red{color:white;background:#ef4d4d}.mistake-metrics .gold{color:#b67d0c;background:#fff4d8}.mistake-metrics .green{color:#159969;background:#e8f7f0}.mistake-metrics article>b{font-size:40px}.mistake-metrics p{margin:0;font-size:19px;font-weight:700}.mistake-metrics p small{display:block;margin-top:7px;color:#617099;font-size:14px;font-weight:400}.mistake-queue{padding:0 16px 14px;border:1px solid #d9e1ee;border-radius:8px;background:white}.mistake-queue>nav{display:flex;border-bottom:1px solid #d9e1ee}.mistake-queue>nav button{flex:1;padding:17px;border:0;border-bottom:3px solid transparent;color:var(--color-primary);background:transparent;font-family:var(--font-display);font-size:16px}.mistake-queue>nav .is-active{border-bottom-color:#153c9b;font-weight:700}.mistake-filters{display:flex;align-items:center;gap:8px;padding:17px 0}.mistake-filters button,.mistake-filters select{padding:9px 14px;border:1px solid #cfdaea;border-radius:6px;color:var(--color-primary);background:white}.mistake-filters button.is-active{border-color:#173d9f}.mistake-filters label{margin-left:auto}.mistake-row{display:grid;grid-template-columns:60px 1.5fr .9fr 90px 135px;align-items:center;gap:10px;margin-bottom:10px;padding:14px 14px;border:1px solid #dce3ed;border-radius:7px}.mistake-row>div:first-child span{display:block;padding:4px;border-radius:4px;background:#e9f0ff;font-size:11px}.mistake-row>div:first-child strong{display:block;margin-top:10px}.mistake-row h3{margin:0;font-size:17px}.mistake-row p{margin:4px 0;color:#5c6e9a;font-size:12px}.mistake-row small{display:block;color:#64749a}.mistake-row>div:nth-child(3){display:grid;gap:5px;padding-left:14px;border-left:1px solid #e1e5ed}.mistake-row em{width:28px;padding:4px;border-radius:4px;color:#c73f3f;background:#ffe5e5;text-align:center}.mistake-row>button{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border:1px solid #c58a15;border-radius:6px;color:#9a6507;background:#fff;font-weight:700}.mistake-row>button .icon{width:17px}.mistake-queue>footer{display:flex;justify-content:space-between;color:#5f709a}.mistake-queue>footer button{display:flex;gap:6px;border:0;color:var(--color-primary);background:transparent}.mistake-pattern{padding:18px;border:1px solid #d9e1ee;border-radius:8px;background:white}.mistake-pattern h2{margin:0 -18px 20px;padding:0 18px 16px;border-bottom:1px solid #d9e1ee}.mistake-pattern h3{font-size:20px}.mistake-pattern>p{font-size:17px;line-height:1.4}.mistake-pattern>div{padding:13px;border-radius:7px;background:#f3f4fa}.mistake-pattern li{margin:8px 0}.error-bars{display:flex!important;height:150px;align-items:flex-end;justify-content:space-around;padding:10px!important;background:white!important}.error-bars span{display:grid;justify-items:center}.error-bars i{width:40px;grid-row:1;background:#1a377e}.error-bars span:first-child i{background:#eb4242}.error-bars b{grid-row:1;align-self:start}.error-bars small{max-width:70px;text-align:center}.mistake-pattern>section{margin-top:30px;padding:12px;border-radius:7px;background:#e8f7f0}.mistake-pattern>section h3{margin:0}.mistake-pattern>section p{margin-bottom:0}
@media(max-width:1300px){.report-dashboard-grid{grid-template-columns:1fr 1fr}.report-bottom-grid{grid-template-columns:1fr}.progress-layout,.mistake-layout{grid-template-columns:1fr}.mistake-pattern{display:none}.mistake-row{grid-template-columns:55px 1.5fr 1fr 120px}.mistake-row time{display:none}.full-tests-heading blockquote{display:none}}
@media(max-width:760px){.report-heading,.progress-heading{display:block}.report-heading h1,.progress-heading h1,.mistakes-screen>header h1{font-size:38px}.report-heading>div:last-child{display:grid;margin-top:15px}.report-top-grid,.report-dashboard-grid,.report-bottom-grid{grid-template-columns:1fr}.score-panel>div{grid-template-columns:1fr 1fr}.score-panel>div>strong{grid-column:1/-1}.performance-panel>div,.progress-metrics,.domain-mastery>div,.recently-mastered>div,.mistake-metrics{grid-template-columns:1fr 1fr}.mistake-metrics article{grid-template-columns:45px 45px 1fr;padding:12px}.mistake-filters{overflow-x:auto}.mistake-row{grid-template-columns:50px 1fr}.mistake-row>div:nth-child(3),.mistake-row>button{grid-column:2}.mistake-row time{display:none}.report-tabs{overflow-x:auto}.report-tabs button{white-space:nowrap}}

.calendar { overflow-x: auto; }
.calendar-grid { display: grid; min-width: 780px; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.calendar-cell { min-height: 100px; padding: 8px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: white; }
.calendar-cell.header { min-height: 38px; color: var(--color-primary); background: #f6f7fa; font-weight: 800; text-align: center; }
.calendar-cell.today { background: #fffaf0; }
.date-number { color: var(--color-muted); font-size: 11px; }
.calendar-event { margin-top: 6px; padding: 6px; border: 1px solid #cfe8da; border-left: 4px solid var(--color-success); border-radius: 6px; color: #376050; background: #fbfffc; font-size: 11px; }

.practice-page { max-width: 1220px; margin: 0 auto; }
.practice-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 16px; }
.practice-top .timer { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; text-align: center; }
.practice-tools { text-align: right; }
.question-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
.question-card { min-height: 520px; padding: 28px; }
.question-number { margin-bottom: 18px; color: var(--color-blue); font-weight: 800; }
.question-prompt { color: #1f2937; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.65; white-space: pre-line; }
.question-image { display: block; width: min(430px, 100%); max-height: 310px; object-fit: contain; margin: 18px auto; }
.choices { display: grid; gap: 12px; margin-top: 25px; }
.choice { display: grid; width: 100%; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 13px; border: 1px solid #cbd2dc; border-radius: 8px; color: #263248; background: white; text-align: left; }
.choice:hover { border-color: var(--color-blue); }
.choice.selected { border-color: var(--color-blue); background: var(--color-blue-soft); box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); }
.choice-letter { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #8e98aa; border-radius: 50%; font-weight: 800; }
.choice-content { display: grid; gap: 10px; }
.choice-option-image { display: block; width: auto; max-width: min(240px, 100%); max-height: 260px; object-fit: contain; }
.palette { position: sticky; top: 24px; align-self: start; padding: 18px; }
.palette h3 { margin: 0 0 14px; font-size: 16px; }
.palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.palette-btn { min-height: 35px; border: 1px solid #cbd4e3; border-radius: 6px; background: white; font-size: 11px; }
.palette-btn.current { border-color: var(--color-blue); color: white; background: var(--color-blue); }
.palette-btn.answered { border-color: var(--color-success); color: var(--color-success); }
.palette-btn.review { box-shadow: inset 0 -3px 0 var(--color-gold); }
.practice-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.result-score { display: grid; width: 150px; height: 150px; place-items: center; margin: 12px auto 24px; border: 10px solid #e8edf7; border-radius: 50%; color: var(--color-primary); font: 700 38px/1 var(--font-display); }

.history-actions { display: flex; min-width: 238px; flex-wrap: wrap; gap: 7px; }
.history-detail-page .practice-top { grid-template-columns: 1fr auto 1fr; }
.history-detail-page .practice-top > :last-child { text-align: right; }
.source-question-text { white-space: normal; }
.history-detail-page .palette-grid { grid-template-columns: repeat(4, 1fr); }
.history-detail-page .palette-btn { min-height: 34px; font-size: 10px; }
.detailed-report-page { display: grid; gap: 18px; }
.report-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--color-muted); font-size: 13px; }
.report-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.report-panel .card-body, .report-module .card-body { padding: 0; }
.detailed-report-table th, .detailed-report-table td { text-align: center; }
.detailed-report-table th:first-child, .detailed-report-table td:first-child { text-align: left; }
.capability-list, .report-modules { display: grid; gap: 12px; }
.capability-item { padding: 14px 16px; border: 1px solid #dde4ef; border-left: 4px solid var(--color-primary); border-radius: 8px; background: #fcfcfb; line-height: 1.65; }
.report-answer-correct { color: var(--color-success); font-weight: 800; }
.report-answer-wrong { color: var(--color-error); font-weight: 800; }
.report-readonly-note { text-align: center; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(16, 28, 58, .52); }
.dialog { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: var(--card-border); border-radius: 14px; background: white; box-shadow: 0 18px 48px rgba(20, 35, 78, .18); }
.dialog-header, .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; }
.dialog-header { border-bottom: 1px solid var(--color-line); }
.dialog-footer { justify-content: flex-end; border-top: 1px solid var(--color-line); }
.dialog-header h2 { margin: 0; font-size: 20px; }
.dialog-body { padding: 20px; }
.icon-btn, .icon-button { min-width: 44px; min-height: 44px; border: 0; color: var(--color-primary); background: transparent; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; }
.field .input, .field .select, .field .textarea { width: 100%; }
.toast-root { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; gap: 8px; }
.toast { padding: 12px 17px; border-radius: 8px; color: white; background: var(--color-primary); box-shadow: var(--shadow); }

.onboarding-shell { display: grid; min-height: calc(100vh - 100px); place-items: center; padding: 24px; }
.onboarding-card, .readiness-card { width: min(100%, 620px); padding: clamp(28px, 5vw, 54px); border: var(--card-border); border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 24px 70px rgba(27, 42, 83, .1); }
.onboarding-card.wide, .readiness-card { width: min(100%, 780px); }
.onboarding-card h1, .readiness-card h1 { margin: 5px 0 12px; font-size: clamp(36px, 5vw, 55px); line-height: .98; letter-spacing: -.045em; }
.onboarding-card > p:not(.eyebrow), .readiness-card > div > p:not(.eyebrow) { color: var(--color-muted); line-height: 1.65; }
.eyebrow { margin: 0; color: var(--color-gold); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.onboarding-form { display: grid; gap: 16px; margin-top: 28px; }
.onboarding-form label { display: grid; gap: 7px; color: var(--color-copy); font-size: 12px; font-weight: 750; }
.onboarding-form .btn { margin-top: 5px; }
.onboarding-form.goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboarding-form.goals label:last-of-type { grid-column: 1 / -1; }
.onboarding-form.goals .btn { grid-column: 1 / -1; }
.form-note { margin: 16px 0 0; color: var(--color-muted); font-size: 12px; text-align: center; }
.readiness-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.readiness-summary article { padding: 18px; border: var(--card-border); border-radius: 10px; background: #fcfcfa; text-align: center; }
.readiness-summary strong, .readiness-summary span { display: block; }
.readiness-summary strong { color: var(--color-primary); font: 700 32px/1 var(--font-display); }
.readiness-summary span { margin-top: 6px; color: var(--color-muted); font-size: 11px; }
.module-sequence { display: grid; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; }
.module-sequence li { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--color-line); }
.module-sequence b { color: var(--color-primary); }
.module-sequence span { color: var(--color-muted); font-size: 13px; text-align: right; }
.readiness-card > .btn { width: 100%; }
.payer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.payer-option { min-height: 150px; padding: 22px; border: 1px solid #d4b56e; border-radius: 12px; color: var(--color-primary); background: #fffdf7; text-align: left; }
.payer-option:hover { box-shadow: 0 12px 30px rgba(44, 50, 78, .1); transform: translateY(-2px); }
.payer-option b, .payer-option span { display: block; }
.payer-option b { font: 700 20px/1.2 var(--font-display); }
.payer-option span { margin-top: 10px; color: var(--color-muted); font-size: 13px; line-height: 1.55; }

.student-screen { max-width: 1440px; margin: 0 auto; }
.student-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.student-page-heading h1 { margin: 4px 0 7px; font-size: clamp(38px, 4vw, 54px); line-height: 1; letter-spacing: -.045em; }
.student-page-heading > div > p:last-child { max-width: 760px; margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.6; }
.dashboard-screen { color: #17317a; font-family: var(--font-display); }
.dashboard-heading { display: flex; min-height: 88px; align-items: flex-start; justify-content: space-between; gap: 24px; }
.dashboard-heading h1 { margin: -7px 0 0; color: #0c2b87; font-size: clamp(42px, 4vw, 58px); line-height: 1; letter-spacing: -.035em; }
.dashboard-heading > div > p { margin: 5px 0 0; color: #526fb9; font-size: 22px; }
.dashboard-motto { margin: 0 10px 0 0; padding: 5px 0 5px 30px; border-left: 1px solid #b7c2db; color: #3155ad; font-size: 18px; line-height: 1.25; }
.dashboard-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 14px; }
.dashboard-metric, .dashboard-card, .plan-task, .plan-rationale { border: 1px solid #d9e0ec; border-radius: 8px; background: rgba(255,255,255,.84); box-shadow: 0 1px 5px rgba(33,55,102,.025); }
.dashboard-metric { display: flex; min-height: 158px; align-items: flex-start; gap: 14px; padding: 17px 18px; }
.metric-icon, .feature-icon { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #0c2b87; background: #edf3ff; }
.metric-icon.is-warm, .feature-icon.warm { color: #c56324; background: #fff7e8; }
.metric-icon .icon, .feature-icon .icon { width: 29px; height: 29px; stroke-width: 2; }
.dashboard-metric p { margin: 2px 0 1px; color: #0c2b87; font-size: 16px; font-weight: 700; }
.dashboard-metric strong { display: block; color: #0c2b87; font-size: 40px; line-height: 1.05; white-space: nowrap; }
.dashboard-metric small { display: block; margin-top: 6px; color: #4f6ab1; font-size: 13px; line-height: 1.2; }
.dashboard-primary-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: 12px; }
.dashboard-left-column, .dashboard-right-column { display: grid; align-content: start; gap: 12px; }
.dashboard-card { padding: 16px; }
.focus-card { min-height: 377px; }
.focus-card .focus-task { min-height: 286px; }
.dashboard-card h2 { margin: 0; color: #0c2b87; font-size: 24px; line-height: 1.1; }
.dashboard-card > p, .focus-card > header p { margin: 5px 0 12px; color: #536fb5; font-size: 14px; line-height: 1.35; }
.focus-card > header { margin-bottom: 12px; }
.focus-task { border: 1px solid #d9e0ec; border-radius: 7px; padding: 15px 16px 12px; background: #fff; }
.focus-task-title, .focus-task-action, .dashboard-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.focus-task-title > div { flex: 1; }
.focus-task-title h3 { margin: 0; color: #0c2b87; font-size: 22px; }
.focus-task-title p { margin: 3px 0 0; color: #2e57b6; font-size: 14px; }
.recommendation-pill { align-self: flex-start; padding: 6px 13px; border-radius: 999px; color: #9a5700; background: #fff5d9; font-size: 12px; }
.focus-task-action { padding: 13px 0 14px; border-bottom: 1px solid #d9e0ec; }
.focus-task-action > p { max-width: 62%; margin: 0; color: #4d68a7; font-size: 14px; line-height: 1.35; }
.focus-task-action .btn { min-width: 206px; justify-content: center; }
.btn .icon, .text-action .icon { width: 16px; height: 16px; vertical-align: middle; }
.focus-evidence { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 12px; }
.focus-evidence > div { display: flex; min-width: 0; gap: 10px; padding: 0 12px; border-right: 1px solid #d9e0ec; }
.focus-evidence > div:first-child { padding-left: 0; }
.focus-evidence > div:last-child { border-right: 0; }
.focus-evidence .icon { width: 25px; height: 25px; flex: 0 0 auto; color: #0c2b87; }
.focus-evidence span, .focus-evidence small, .focus-evidence b, .focus-evidence em { display: block; }
.focus-evidence small { color: #526fae; font-size: 10px; }
.focus-evidence b { margin: 2px 0; color: #0c2b87; font-size: 15px; }
.focus-evidence em { color: #526fae; font-size: 11px; font-style: normal; }
.dashboard-lower-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.dashboard-lower-grid > .dashboard-card { min-height: 288px; }
.dashboard-card-heading { align-items: flex-start; }
.text-action { padding: 4px 0; border: 0; color: var(--color-primary-2); background: transparent; font-size: 12px; font-weight: 800; text-align: left; }
.text-action:hover { color: var(--color-gold); }
.priority-table { margin-top: 8px; }
.priority-table > div { display: grid; grid-template-columns: minmax(0, 1.6fr) 68px 74px; align-items: center; gap: 8px; min-height: 34px; border-bottom: 1px solid #e2e7f0; font-size: 12px; }
.priority-table > div:last-child { border-bottom: 0; }
.priority-table .priority-header { min-height: 25px; color: #526fae; font-size: 10px; }
.priority-table > div > span:first-child { display: flex; min-width: 0; align-items: center; gap: 9px; }
.priority-table .icon { width: 22px; height: 22px; color: #0c2b87; }
.priority-table b { overflow: hidden; color: #15327e; text-overflow: ellipsis; white-space: nowrap; }
.priority-table strong { color: #15327e; }
.priority-table em { justify-self: stretch; padding: 4px 8px; border-radius: 999px; text-align: center; font-style: normal; }
.priority-high { color: #d63f31; background: #ffe9e5; }
.priority-medium { color: #94630b; background: #fff4d9; }
.review-row { display: grid; grid-template-columns: 46px 42px 1fr; align-items: center; gap: 8px; padding: 6px 0; }
.review-row .feature-icon { width: 42px; height: 42px; }
.review-row .feature-icon .icon { width: 24px; height: 24px; }
.review-row > strong { color: #0c2b87; font-size: 32px; }
.review-row p, .review-row b, .review-row small { display: block; margin: 0; }
.review-row b { color: #0c2b87; font-size: 13px; }
.review-row small { color: #536fb5; font-size: 11px; }
.trend-card { min-height: 365px; }
.score-trend { display: flex; min-height: 222px; align-items: flex-end; gap: 12px; padding: 8px 5px 0; border-bottom: 1px solid #d9e0ec; }
.trend-column { display: grid; height: 205px; min-width: 28px; flex: 1; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 4px; }
.trend-column span { width: min(38px, 65%); min-height: 8px; border-radius: 6px 6px 2px 2px; background: #12317e; }
.trend-column b { color: #0c2b87; font-size: 11px; }
.trend-column small { color: #526fae; font-size: 9px; }
.empty-copy { margin: auto; color: var(--color-muted); }
.trend-summary { display: grid; grid-template-columns: 52px 1fr 1.2fr; align-items: center; gap: 10px; padding-top: 10px; }
.trend-summary > b, .trend-summary > b small, .trend-summary > div strong, .trend-summary > div small { display: block; }
.trend-summary > b { color: #0c2b87; font-size: 16px; }
.trend-summary small { margin-top: 2px; color: #536fb5; font-size: 10px; font-weight: 400; }
.trend-summary > div i, .week-progress { position: relative; display: block; height: 9px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: #dfe4ed; }
.trend-summary > div i::after, .week-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress); border-radius: inherit; background: #20915d; }
.week-card > p { margin-bottom: 10px; }
.week-card { min-height: 173px; }
.week-dots { display: flex; align-items: center; justify-content: space-around; margin: 4px 0 8px; }
.week-dots span { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #aeb8cc; border-radius: 50%; color: white; }
.week-dots span.is-done { border-color: #20915d; background: #20915d; }
.week-dots .icon { width: 15px; height: 15px; }
.week-card > small { display: block; margin-top: 8px; color: #536fb5; font-size: 11px; }
.upcoming-card > div:last-child { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.upcoming-card { min-height: 120px; }
.upcoming-card p { flex: 1; margin: 0; }
.upcoming-card p b, .upcoming-card p strong, .upcoming-card p small { display: block; }
.upcoming-card p b { color: #0c2b87; font-size: 14px; }
.upcoming-card p strong, .upcoming-card p small { color: #536fb5; font-size: 11px; font-weight: 400; }
.btn-compact { min-height: 36px; padding: 7px 18px; border-color: #28469a; border-radius: 4px; color: #0c2b87; background: white; font-family: var(--font-display); }

.study-plan-screen { color: #17317a; font-family: var(--font-display); }
.study-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.study-plan-heading h1 { margin: -5px 0 2px; color: #0c2b87; font-size: 50px; line-height: 1; letter-spacing: -.03em; }
.study-plan-heading p { margin: 0; color: #536fb5; font-size: 20px; }
.plan-controls { display: flex; align-items: center; gap: 12px; }
.plan-control { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 8px 15px; border: 1px solid #d9e0ec; border-radius: 7px; color: #17317a; background: white; font-family: var(--font-display); font-size: 15px; }
.plan-control .icon, .plan-controls .btn .icon { width: 21px; height: 21px; }
.weekly-plan-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(320px, .9fr); gap: 18px; }
.plan-week, .plan-side-panel { display: grid; align-content: start; gap: 8px; }
.plan-day-row { display: grid; min-height: 90px; grid-template-columns: 82px minmax(0, 1fr); overflow: hidden; border: 1px solid #d9e0ec; border-radius: 8px; background: rgba(255,255,255,.86); }
.plan-date { padding: 21px 16px; color: #17317a; }
.plan-date b, .plan-date span { display: block; }
.plan-date b { font-size: 20px; }
.plan-date span { margin-top: 3px; color: #526fae; font-size: 13px; }
.plan-day-task { display: grid; grid-template-columns: 52px minmax(150px, .85fr) minmax(320px, 1.75fr) 112px; align-items: center; gap: 12px; margin: 7px; padding: 10px 10px 10px 12px; border: 1px solid #e1e6ef; border-radius: 7px; background: white; }
.plan-task-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #12358c; background: #eff3fb; }
.plan-task-icon .icon { width: 27px; height: 27px; }
.plan-task-name b, .plan-task-name span, .plan-task-name em { display: block; }
.plan-task-name b { color: #17317a; font-size: 15px; }
.plan-task-name span { margin-top: 2px; color: #526fae; font-size: 13px; }
.plan-task-name em { width: max-content; margin-top: 7px; padding: 4px 10px; border-radius: 999px; color: #d94f48; background: #fff0ee; font-size: 10px; font-style: normal; }
.plan-task-name em .icon { width: 11px; height: 11px; vertical-align: -2px; }
.plan-day-task dl { display: grid; grid-template-columns: 1.2fr 1fr 1.25fr; margin: 0; }
.plan-day-task dl > div { min-height: 52px; padding: 1px 12px; border-left: 1px solid #e1e6ef; }
.plan-day-task dt { color: #526fae; font-size: 10px; }
.plan-day-task dd { margin: 3px 0 0; color: #17317a; font-size: 12px; line-height: 1.25; }
.plan-day-task dd .icon { width: 17px; height: 17px; vertical-align: -4px; }
.plan-day-task > .btn { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-display); }
.plan-rest-copy { display: flex; align-items: center; gap: 18px; margin: 7px; padding: 12px; border-radius: 7px; background: #f5f6f8; }
.plan-rest-copy p, .plan-rest-copy b, .plan-rest-copy span { display: block; margin: 0; }
.plan-rest-copy b { color: #334b83; font-size: 14px; }
.plan-rest-copy span { margin-top: 4px; color: #6478a8; font-size: 13px; }
.plan-side-panel { gap: 12px; }
.plan-side-card { padding: 19px; border: 1px solid #d9e0ec; border-radius: 8px; background: rgba(255,255,255,.86); }
.plan-side-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #0c2b87; font-size: 23px; }
.plan-side-card h2 .icon { width: 27px; height: 27px; color: #b88922; }
.plan-side-card p { margin: 0; color: #526fae; font-size: 15px; line-height: 1.45; }
.plan-side-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.plan-side-heading strong { color: #0c2b87; font-size: 16px; }
.plan-progress { position: relative; display: block; height: 14px; margin: 9px 0 13px; overflow: hidden; border-radius: 999px; background: #e0e5ee; }
.plan-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress); border-radius: inherit; background: #20915d; }
.plan-status-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: #526fae; font-size: 13px; }
.plan-status-list li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; }
.plan-status-list li > span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: white; }
.plan-status-list .done { background: #20915d; }
.plan-status-list .active { background: #c89419; }
.plan-status-list .pending { background: #ed5a52; font-family: var(--font-ui); }
.plan-status-list .icon { width: 13px; height: 13px; }
.plan-skill-list { display: grid; gap: 11px; }
.plan-skill-list > div { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 1fr) 34px; align-items: center; gap: 8px; color: #284997; font-size: 12px; }
.plan-skill-list i { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: #e1e5ec; }
.plan-skill-list i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress); border-radius: inherit; background: #299568; }
.plan-skill-list > div:nth-child(3) i::after { background: #cf9417; }
.plan-skill-list > div:nth-child(4) i::after { background: #6d83b7; }
.placeholder-card { min-height: 320px; display: grid; place-items: center; padding: 22px; border: var(--card-border); border-radius: var(--card-radius); background: white; text-align: center; }
.placeholder-card p { max-width: 520px; color: var(--color-muted); line-height: 1.65; }

@media (max-width: 1399px) {
  .weekly-plan-grid { grid-template-columns: 1fr; }
  .plan-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  :root { --sidebar-width: 88px; }
  .sidebar-brand { padding: 24px 18px 18px; }
  .sidebar-brand .brand-lockup > span:last-child { display: none; }
  .portal-rail > .brand-lockup { min-height: 82px; justify-content: center; padding: 24px 12px 14px; }
  .portal-rail > .brand-lockup > span:last-child { display: none; }
  .portal-rail > .brand-lockup .brand-mark { width: 38px; height: 33px; }
  .sidebar-brand .brand-mark { width: 38px; height: 33px; }
  .nav-list, .portal-nav { gap: 8px; padding-inline: 12px; }
  .nav-list::before, .portal-nav::before { display: none; }
  .nav-item, .portal-nav-item { min-height: 54px; justify-content: center; padding: 10px; }
  .nav-item span, .portal-nav-item span { position: absolute; left: calc(100% + 10px); z-index: 5; display: none; padding: 7px 10px; border-radius: 7px; color: white; background: var(--color-primary); white-space: nowrap; box-shadow: var(--shadow); }
  .nav-item:hover span, .portal-nav-item:hover span { display: block; }
  .portal-settings span { display: none; }
  .portal-settings { width: calc(100% - 24px); margin-inline: 12px; justify-content: center; }
  #main-content, .portal-content { padding: 30px 28px 56px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .dashboard-heading h1 { font-size: 44px; }
  .dashboard-motto { display: none; }
  .dashboard-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .dashboard-right-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trend-card { grid-column: 1 / -1; }
  .study-plan-heading { align-items: stretch; flex-direction: column; }
  .plan-controls { flex-wrap: wrap; }
  .weekly-plan-grid { grid-template-columns: 1fr; }
  .plan-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .adaptive-heading blockquote { display: none; }
  :root { --sidebar-width: 0px; }
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sidebar, .portal-rail { width: min(82vw, 300px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow); }
  body.sidebar-open .sidebar, body.sidebar-open .portal-rail { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(12, 24, 50, .4); }
  .sidebar-brand .brand-lockup > span:last-child { display: block; }
  .portal-rail > .brand-lockup { min-height: 92px; justify-content: flex-start; padding: 24px 20px 12px; }
  .portal-rail > .brand-lockup > span:last-child { display: block; }
  .nav-item, .portal-nav-item { justify-content: flex-start; }
  .nav-item span, .portal-nav-item span { position: static; display: block; padding: 0; color: inherit; background: transparent; box-shadow: none; }
  .workspace, .portal-main { width: 100%; margin-left: 0; }
  .topbar, .mobile-header { position: sticky; top: 0; z-index: 25; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--color-line); background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); }
  .mobile-header .brand-lockup { align-items: center; }
  .mobile-header .brand-lockup strong { font-size: 20px; }
  .mobile-header .brand-tagline, .mobile-header .brand-slogan { display: none; }
  .mobile-header-actions { position: absolute; right: 14px; display: flex; align-items: center; gap: 10px; }
  .notification-button { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 0; color: var(--color-primary); background: transparent; }
  .notification-button b { position: absolute; top: -2px; right: -2px; display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #fff; background: #d94b43; font: 700 10px/1 var(--font-ui); }
  .mobile-avatar { width: 40px; height: 40px; border: 0; }
  .mobile-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; width: 100vw; max-width: 100vw; height: calc(68px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; padding: 4px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--color-line); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
  .mobile-nav-item { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; border-radius: 8px; color: #56678d; background: transparent; font: 600 10px/1.1 var(--font-display); }
  .mobile-nav-item .icon { width: 21px; height: 21px; }
  .mobile-nav-item.is-active { color: var(--color-primary); background: #eef0f9; }
  /* Reading a lesson: the site's own chrome steps out of the way, and the
     lesson's Back/Continue bar takes the bottom of the screen. */
  body.lesson-is-open .mobile-bottom-nav,
  body.lesson-is-open .student-session-bar,
  body.lesson-is-open .portal-foot,
  body.lesson-is-open .page-crumb { display: none; }
  body.lesson-is-open #main-content,
  body.lesson-is-open .portal-content { padding: 12px 10px 0; }
  body.lesson-is-open .lesson-full { min-height: calc(100vh - 118px); }
  body.lesson-is-open .ls-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 36;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-line); background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px); }
  body.lesson-is-open .ls-shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .page-brand { display: flex; min-width: 0; align-items: center; gap: 10px; }
  #page-title { display: none; }
  .mobile-menu { display: inline-grid; place-items: center; color: var(--color-primary); }
  /* The bottom bar is fixed, so the last card on a page needs room under
     it: 32px of padding left the final button half behind the bar. */
  #main-content, .portal-content { min-height: calc(100vh - 64px);
    padding: 22px 16px calc(68px + env(safe-area-inset-bottom) + 26px); }
  .section-heading { flex-direction: column; gap: 14px; }
  .section-heading h1 { font-size: 35px; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1 1 auto; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { min-height: 98px; padding: 15px; }
  .stat-card strong { font-size: 26px; }
  .toolbar { align-items: stretch; }
  .toolbar .input { width: 100%; margin-left: 0; }
  .paper-grid, .question-layout, .report-overview-grid { grid-template-columns: 1fr; }
  .question-card { min-height: auto; padding: 18px; }
  .question-prompt { font-size: 17px; }
  .palette { position: static; }
  .practice-top { grid-template-columns: 1fr auto; gap: 8px; }
  .practice-tools { grid-column: 1 / -1; text-align: left; }
  .practice-nav { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 10px; border: var(--card-border); border-radius: 10px; background: rgba(255, 255, 255, .96); }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .data-table { min-width: 680px; }
  .history-actions { min-width: 210px; }
  .history-detail-page .practice-top { grid-template-columns: 1fr; }
  .history-detail-page .practice-top > :last-child { text-align: left; }
  .report-meta { display: grid; gap: 7px; }
  .toast-root { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 12px; }
  .onboarding-shell { min-height: auto; padding: 0; }
  .onboarding-card, .readiness-card { padding: 28px 20px; border-radius: 14px; }
  .onboarding-form.goals, .payer-grid { grid-template-columns: 1fr; }
  .onboarding-form.goals label:last-of-type, .onboarding-form.goals .btn { grid-column: auto; }
  .readiness-summary { gap: 7px; }
  .readiness-summary article { padding: 14px 8px; }
  .module-sequence li { display: grid; gap: 4px; }
  .module-sequence span { text-align: left; }
  .student-page-heading { display: grid; }
  .student-page-heading .btn { width: 100%; }
  .dashboard-heading { min-height: auto; margin-bottom: 18px; }
  .dashboard-heading h1 { font-size: 35px; }
  .dashboard-heading > div > p { font-size: 17px; }
  .dashboard-summary-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 82vw); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .dashboard-summary-grid::-webkit-scrollbar { display: none; }
  .dashboard-summary-grid > * { scroll-snap-align: start; }
  .dashboard-primary-grid, .dashboard-lower-grid, .dashboard-right-column, .weekly-plan-grid { grid-template-columns: 1fr; }
  .dashboard-metric { min-height: 112px; }
  .dashboard-metric strong { font-size: 34px; }
  .focus-task-action { align-items: stretch; flex-direction: column; }
  .focus-task-action > p { max-width: none; }
  .focus-task-action .btn { width: 100%; }
  .student-screen, .dashboard-card, .focus-task { width: 100%; max-width: 100%; min-width: 0; }
  .focus-task-title { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: flex-start; }
  .focus-task-title > div { min-width: 0; }
  .focus-task-title .recommendation-pill { grid-column: 2; width: max-content; max-width: 100%; margin-top: 6px; }
  .focus-evidence { grid-template-columns: 1fr; gap: 12px; }
  .focus-evidence > div { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #d9e0ec; }
  .focus-evidence > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .insight-card.span-2 { grid-column: auto; }
  .next-action, .insight-card { padding: 20px; }
  .score-orbit { min-height: 210px; }
  .skill-list > div { grid-template-columns: minmax(120px, 1fr) minmax(80px, .7fr); }
  .skill-list em { display: none; }
  .study-plan-heading h1 { font-size: 36px; }
  .study-plan-heading p { font-size: 16px; }
  .plan-controls { display: grid; grid-template-columns: 1fr; }
  .plan-control, .plan-controls .btn { width: 100%; justify-content: center; }
  .plan-side-panel { grid-template-columns: 1fr; }
  .plan-day-row { grid-template-columns: 64px minmax(0, 1fr); }
  .plan-date { padding: 16px 10px; }
  .plan-date b { font-size: 17px; }
  .plan-day-task { grid-template-columns: 42px minmax(0, 1fr); }
  .plan-day-task dl { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .plan-day-task dl > div { min-height: auto; padding: 8px 0; border-top: 1px solid #e1e6ef; border-left: 0; }
  .plan-day-task > .btn { grid-column: 1 / -1; }
  .plan-rest-copy { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* A superscript should lift, not stretch the line it is on. The browser's
   own `sup` uses `vertical-align: super`, which grows the line box; this
   keeps the rhythm of a paragraph of explanation even when every other
   sentence has an exponent in it. */
sup { font-size: .72em; line-height: 0; vertical-align: baseline;
  position: relative; top: -.45em; }
sub { font-size: .72em; line-height: 0; vertical-align: baseline;
  position: relative; bottom: -.22em; }

/* Adaptive Practice and Vocabulary — approved 4ULearning SAT visual system. */
.adaptive-screen,
.vocabulary-screen { max-width: 100%; overflow-x: clip; color: var(--color-copy); }
.adaptive-heading,
.vocabulary-screen > header { display: flex; min-height: 105px; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 14px; padding: 8px 2px 0; }
.adaptive-heading h1,
.vocabulary-screen > header h1 { margin: 0; color: var(--color-primary); font-size: 48px; line-height: 1; letter-spacing: -.035em; }
.adaptive-heading p,
.vocabulary-screen > header p { margin: 8px 0 0; color: #68789d; font-family: var(--font-display); font-size: 18px; }
.adaptive-heading blockquote,
.vocabulary-screen > header blockquote { margin: 6px 8px 0 0; color: #8b6315; font-family: var(--font-display); font-size: 16px; font-style: italic; line-height: 1.45; text-align: right; }
.adaptive-layout { display: grid; grid-template-columns: minmax(620px, 1.64fr) minmax(350px, .78fr); gap: 16px; align-items: start; }
/* The Study Coach is off for the beta. One column, and the question takes the
   width the two of them shared -- not a column with a hole beside it. */
.adaptive-layout.is-single-column { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.adaptive-question,
.study-coach,
.coach-composer,
.vocab-metrics article,
.vocab-review,
.vocab-layout > aside article { border: 1px solid #d9e0ec; border-radius: 9px; background: rgba(255,255,255,.96); }
.adaptive-question { display: flex; min-height: 664px; flex-direction: column; padding: 24px 30px 20px; overflow: hidden; }
.adaptive-question > header > p { margin: 0 0 18px; color: #3e5ca4; font: 600 14px/1.2 var(--font-display); }
.adaptive-question > header > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.adaptive-question > header b { color: #183579; font: 600 13px/1.2 var(--font-display); }
.adaptive-question > header span { display: flex; min-width: 260px; gap: 5px; }
.adaptive-question > header i { height: 6px; flex: 1; border-radius: 999px; background: #e2e6ee; }
.adaptive-question > header i.is-done { background: #2d61d8; }
.adaptive-passage { min-height: 90px; flex: 1 1 auto; margin: 24px 0 20px; padding: 25px 27px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dce2ed; border-radius: 7px; color: #1d315d; background: #fff; font: 18px/1.72 var(--font-display); }
.adaptive-passage:empty { display: none; }
.adaptive-passage b { padding: 0 2px; border-bottom: 2px solid #c28a18; color: #10245f; }
/* The stem is read, not announced. Bluebook sets the question text at the
   same size as the answer choices and in the ordinary weight, which is
   what a long passage needs; a heavier, larger stem makes every question
   look like a headline and tires the eye over a hundred of them. It stays
   an <h2> for the outline, and the type says what it is. */
.adaptive-question > h2 { margin: 0 0 18px; color: #16294f; font-size: 17px; font-weight: 400; line-height: 1.62; white-space: pre-line; }
.adaptive-question > h2 strong, .adaptive-question > h2 b { font-weight: 600; }
.adaptive-choices { display: grid; gap: 10px; }
.adaptive-grid-response { display: grid; gap: 8px; padding: 17px; border: 1px solid #d7deea; border-radius: 7px; background: #fbfcfe; }
.adaptive-grid-response > span { color: #173677; font: 700 13px/1.2 var(--font-display); }
.adaptive-grid-response > input { min-height: 48px; padding: 8px 12px; border: 1px solid #aebbd0; border-radius: 6px; color: #173677; background: white; font-size: 18px; }
.adaptive-grid-response > small { color: #74819c; font: 11px/1.4 var(--font-display); }
.adaptive-inline-error { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #efc5c1; border-radius: 6px; color: #9b3932; background: #fff6f5; font: 12px/1.45 var(--font-display); }
.adaptive-choices > button { display: grid; min-height: 55px; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid #d7deea; border-radius: 7px; color: #243761; background: white; text-align: left; }
.adaptive-choices > button > b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #aeb9cc; border-radius: 50%; color: #153170; font-family: var(--font-ui); font-size: 13px; }
.adaptive-choices > button > span { font: 17px/1.5 var(--font-display); }
.adaptive-choices > button > em { color: inherit; font: 800 19px/1 var(--font-ui); text-align: right; }
.adaptive-choices > button:hover,
.adaptive-choices > button.is-selected { border-color: #3158ad; background: #f3f6fd; box-shadow: 0 0 0 1px #3158ad inset; }
.adaptive-choices > button.is-correct { border-color: #178957; background: #eff9f4; box-shadow: 0 0 0 1px #178957 inset; }
.adaptive-choices > button.is-wrong { border-color: #d85c55; background: #fff3f1; box-shadow: 0 0 0 1px #d85c55 inset; }
.adaptive-question > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.adaptive-question > footer button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 8px 15px; border: 0; border-radius: 6px; color: #1e4da8; background: transparent; font-family: var(--font-display); font-weight: 600; }
.adaptive-question > footer button:last-child { min-width: 176px; justify-content: center; color: white; background: var(--color-primary); }
.adaptive-question > footer button:disabled { opacity: .35; cursor: not-allowed; }
.adaptive-question > footer .icon { width: 17px; height: 17px; }
.study-coach { position: sticky; top: 18px; min-height: 664px; overflow: hidden; }
.study-coach > header { display: flex; height: 70px; align-items: center; gap: 10px; padding: 0 23px; border-bottom: 1px solid #e1e6ee; background: #fcfbf7; }
.study-coach > header .icon { width: 27px; height: 27px; color: var(--color-gold); }
.study-coach > header h2 { margin: 0; font-size: 24px; }
.coach-close { display: none; margin-left: auto; border: 0; color: #52648b; background: transparent; font-size: 28px; }
.study-coach > nav { display: grid; height: 54px; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid #dfe4ed; }
.study-coach > nav button { position: relative; border: 0; color: #697798; background: white; font: 600 13px/1 var(--font-display); }
.study-coach > nav button.is-active { color: #10245f; }
.study-coach > nav button.is-active::after { content: ""; position: absolute; right: 13px; bottom: -1px; left: 13px; height: 3px; background: #b88922; }
.coach-vocab,
.coach-strategy,
.coach-mistake { padding: 20px 23px 24px; }
.coach-vocab > div:first-child { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.coach-vocab h3,
.coach-strategy h3,
.coach-mistake h3 { margin: 0; color: #10245f; font-size: 27px; }
.coach-vocab > div:first-child button { border: 0; color: #285fce; background: transparent; font-size: 12px; }
.coach-vocab > div:first-child span { grid-column: 1 / -1; width: max-content; padding: 4px 9px; border-radius: 999px; color: #9a6413; background: #fff4d8; font-size: 10px; font-weight: 800; }
.coach-vocab dl,
.coach-mistake dl { margin: 14px 0 16px; }
.coach-vocab dl > div,
.coach-mistake dl > div { padding: 12px 0; border-bottom: 1px solid #e2e6ed; }
.coach-vocab dt,
.coach-mistake dt { margin-bottom: 4px; color: #214180; font: 700 12px/1.2 var(--font-display); }
.coach-vocab dd,
.coach-mistake dd { margin: 0; color: #54688f; font: 14px/1.45 var(--font-display); }
.coach-vocab > button,
.coach-mistake > button { width: 100%; min-height: 41px; border: 1px solid #c79a39; border-radius: 6px; color: #8e6416; background: #fffdf7; font-family: var(--font-display); font-weight: 600; }
.coach-strategy > p,
.coach-mistake > p { margin: 6px 0 16px; color: #64749a; font: 14px/1.4 var(--font-display); }
.coach-strategy ol { margin: 0; padding: 0; list-style: none; counter-reset: coach; }
.coach-strategy li { position: relative; min-height: 54px; padding: 7px 0 10px 42px; border-bottom: 1px solid #e2e6ed; counter-increment: coach; }
.coach-strategy li::before { content: counter(coach); position: absolute; left: 0; top: 7px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: white; background: #1c3982; font-size: 12px; font-weight: 700; }
.coach-strategy li b,
.coach-strategy li span { display: block; }
.coach-strategy li b { color: #193576; font: 600 13px/1.25 var(--font-display); }
.coach-strategy li span { margin-top: 3px; color: #68789a; font: 12px/1.35 var(--font-display); }
.coach-strategy section,
.coach-strategy aside,
.coach-mistake > aside { margin-top: 15px; padding: 13px 14px; border-radius: 6px; font: 13px/1.45 var(--font-display); }
.coach-strategy section { color: #21457e; background: #eef4ff; }
.coach-strategy section p { margin: 5px 0 0; }
.coach-strategy aside { color: #8f6210; background: #fff7df; }
.coach-mistake > aside { color: #9c3c34; background: #fff0ee; }
.coach-composer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 13px; padding: 12px; }
.coach-composer label { display: grid; min-height: 42px; grid-template-columns: 22px 1fr 34px; align-items: center; padding: 0 8px 0 13px; border: 1px solid #d7deea; border-radius: 6px; color: #c49326; background: white; }
.coach-composer input { min-width: 0; border: 0; outline: none; color: #20366d; background: transparent; }
.coach-composer label button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; color: white; background: #1a367e; }
.coach-composer > button { min-height: 42px; padding: 8px 14px; border: 1px solid #d4dce9; border-radius: 6px; color: #234487; background: #fff; font: 600 12px/1 var(--font-display); }
.coach-composer small { grid-column: 1 / -1; padding: 2px 2px 0; color: #8a94aa; font: 11px/1.3 var(--font-display); }
.coach-mobile-handle { display: none; }

/* Secure, phase-aware practice coaching. */
.attempt-status { width: max-content; margin: -36px 2px 14px auto; padding: 7px 12px; border: 1px solid #cad6e8; border-radius: 999px; color: #23427f; background: #f6f8fc; font: 700 11px/1 var(--font-display); }
.attempt-status.supported { border-color: #dfbd6d; color: #875f13; background: #fff8e8; }
.attempt-status.repair { border-color: #b9c8e1; color: #3d568a; background: #edf3fc; }
.adaptive-state-card { display: grid; min-height: 430px; place-items: center; align-content: center; padding: 42px; border: 1px solid #d9e0ec; border-radius: 9px; color: #51658f; background: rgba(255,255,255,.96); text-align: center; }
.adaptive-state-card h2 { margin: 14px 0 0; color: #10245f; font-size: 30px; }
.adaptive-state-card p { max-width: 500px; margin: 9px 0 22px; font: 15px/1.55 var(--font-display); }
.adaptive-launch-card { gap: 0; }
.adaptive-launch-card p { margin-bottom: 20px; }
.adaptive-difficulty-options { display: grid; width: min(680px,100%); grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.adaptive-difficulty-options > button { display: grid; min-height: 78px; align-content: center; gap: 7px; padding: 13px 15px; border: 1px solid #d1dbea; border-radius: 8px; color: #27457f; background: #fbfcff; text-align: left; transition: border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.adaptive-difficulty-options > button:hover { border-color: #7794cb; background: #f5f8ff; }
.adaptive-difficulty-options > button[aria-pressed="true"] { border-color: #2456b8; color: #153a83; background: #edf3ff; box-shadow: inset 0 0 0 1px #2456b8; }
.adaptive-difficulty-options > button:focus-visible,.adaptive-start-button:focus-visible { outline: 3px solid #e7b541; outline-offset: 2px; }
.adaptive-difficulty-options b { font: 700 16px/1.1 var(--font-display); }
.adaptive-difficulty-options small { color: #697a9a; font: 12px/1.25 var(--font-display); }
.adaptive-start-button { min-width: 210px; min-height: 46px; margin-top: 19px; padding: 10px 20px; border: 0; border-radius: 7px; color: white; background: #193c85; font: 700 14px/1 var(--font-display); }
.adaptive-start-button:hover:not(:disabled) { background: #2456b8; }
.adaptive-start-button:disabled { cursor: not-allowed; color: #8793a9; background: #e9edf4; }
.adaptive-state-mark { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: #9b6a10; background: #fff4d8; font: 800 20px/1 var(--font-display); }
.adaptive-choices > button:disabled { cursor: default; }
.coach-hints { display: grid; gap: 8px; margin-top: 16px; }
.coach-hints article { padding: 12px 14px; border-left: 3px solid #bc891e; border-radius: 4px; color: #455b88; background: #fff9ea; font-family: var(--font-display); }
.coach-hints b { color: #8c6113; font-size: 12px; }
.coach-hints p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.answer-result { margin-top: 16px; padding: 14px 16px; border: 1px solid; border-radius: 7px; font-family: var(--font-display); }
.answer-result.is-correct { border-color: #a8d6c2; color: #176441; background: #eff9f4; }
.answer-result.is-wrong { border-color: #ecc1bd; color: #8b3530; background: #fff3f1; }
.answer-result p { margin: 5px 0 0; color: #42577f; font-size: 13px; line-height: 1.45; }
.coach-locked { display: grid; min-height: 430px; place-items: center; align-content: center; padding: 32px 25px; text-align: center; }
.coach-locked > span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #d3dbe8; border-radius: 50%; color: #9a6c18; background: #fff8e7; font-weight: 800; }
.coach-locked h3 { margin: 13px 0 0; color: #10245f; font-size: 24px; }
.coach-locked p { max-width: 280px; margin: 8px 0 0; color: #64749a; font: 14px/1.5 var(--font-display); }
.coach-vocab > h3 { margin: 0; }
.coach-vocab > p { margin: 6px 0 15px; color: #64749a; font: 13px/1.45 var(--font-display); }
.coach-vocab > article { padding: 14px 0; border-top: 1px solid #e2e6ed; }
.coach-vocab > article header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-vocab > article header b { color: #10245f; font-size: 20px; }
.coach-vocab > article header button { border: 0; color: #285fce; background: transparent; font-size: 11px; }
.coach-vocab > article > span { display: inline-block; margin-top: 8px; padding: 4px 8px; border-radius: 999px; color: #94620f; background: #fff4d8; font: 800 9px/1 var(--font-display); }
.coach-vocab > article > p { margin: 9px 0 0; color: #52658d; font: 13px/1.5 var(--font-display); }
.vocabulary-save { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; margin-top: 11px; padding: 7px 11px; border: 1px solid #c79a39; border-radius: 6px; color: #79540f; background: #fffdf7; font: 600 11px/1.25 var(--font-display); cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.vocabulary-save:hover:not(:disabled) { border-color: #9f7118; background: #fff5dc; transform: translateY(-1px); }
.vocabulary-save:focus-visible,
.vocab-record button:focus-visible,
.vocab-load-error button:focus-visible { outline: 3px solid #6d91df; outline-offset: 2px; }
.vocabulary-save:disabled { color: #426b58; border-color: #b7d4c4; background: #f0f8f3; cursor: default; }
.vocabulary-save-error,
.vocabulary-load-error { padding: 9px 11px; border: 1px solid #efc5c1; border-radius: 6px; color: #963c36; background: #fff6f5; font: 12px/1.45 var(--font-display); }
.vocabulary-preview-only { display: block; margin-top: 10px; color: #75819b; font: 11px/1.4 var(--font-display); }
.coach-vocab > .vocabulary-save-error,
.coach-vocab > .vocabulary-load-error { margin: 10px 0; }
.vocab-action-error { padding: 9px 11px; border-left: 3px solid #c3544d; color: #963c36 !important; background: #fff6f5; }
.vocab-source-list { display: grid; gap: 8px; margin: 12px 0 4px; }
.vocab-source { padding: 10px 12px; border-left: 3px solid #b88922; border-radius: 0 6px 6px 0; background: #fcf8ed; }
.vocab-source > small { display: flex; align-items: center; gap: 6px; color: #677798; font: 600 11px/1.35 var(--font-display); }
.vocab-source > small .icon { width: 14px; height: 14px; color: #927020; }
.vocab-source > p { margin: 6px 0 0; color: #314878; font: 13px/1.5 var(--font-display); }
.vocab-record > button { min-height: 36px; margin-top: 14px; padding: 7px 12px; border: 1px solid #d7baba; border-radius: 6px; color: #8d4541; background: #fffafa; font: 600 11px/1.2 var(--font-display); }
.vocab-record > button:hover:not(:disabled) { border-color: #bc746f; background: #fff2f1; }
.vocab-record > button:disabled { opacity: .7; }
.vocab-empty-state { padding-block: 28px; }
.vocab-empty-state h2 { margin: 0; color: #173677; font-size: 20px; }
.vocab-empty-state p { margin-bottom: 0; }
.vocab-load-error { margin-bottom: 14px; }
.vocab-load-error p { margin: 0 0 8px; color: inherit; font: inherit; }
.vocab-load-error button { min-height: 34px; padding: 6px 11px; border: 1px solid #c79a39; border-radius: 5px; color: #79540f; background: #fffdf7; font: 600 11px/1.2 var(--font-display); }
.coach-strategy .coach-lesson-link { width: 100%; min-height: 42px; margin-top: 16px; border: 1px solid #c79a39; border-radius: 6px; color: #8e6416; background: #fffdf7; font: 600 12px/1 var(--font-display); }
.coach-reply { grid-column: 1 / -1; margin: 2px 0; padding: 10px 12px; border-left: 3px solid #bf8c22; color: #344c7c; background: #f7f9fd; font: 12px/1.45 var(--font-display); }

.skill-lesson-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; background: rgba(8,22,58,.32); backdrop-filter: blur(2px); }
.skill-lesson { display: grid; width: min(760px,88vw); height: 100%; grid-template-rows: auto 1fr auto; color: #243864; background: #fff; box-shadow: -22px 0 55px rgba(9,25,68,.2); }
.skill-lesson > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 27px 32px 20px; border-bottom: 1px solid #dde3ed; background: #fcfbf7; }
.skill-lesson > header small { color: #a47215; font: 800 10px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.skill-lesson > header h2 { margin: 6px 0 0; color: #10245f; font-size: 34px; line-height: 1.08; }
.skill-lesson > header button { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid #cbd5e4; border-radius: 50%; color: #385184; background: #fff; font-size: 25px; }
.skill-lesson-scroll { overflow-y: auto; padding: 28px 32px 42px; }
.skill-lesson-scroll section { padding: 0 0 25px; }
.skill-lesson-scroll section + section { padding-top: 24px; border-top: 1px solid #e0e5ed; }
.skill-lesson h3 { margin: 0 0 11px; color: #10245f; font-size: 23px; }
.skill-lesson p,
.skill-lesson li,
.skill-lesson dd { color: #50648d; font: 15px/1.58 var(--font-display); }
.skill-lesson ul,
.skill-lesson ol { display: grid; gap: 9px; margin: 0; padding-left: 22px; }
.skill-lesson dl { display: grid; gap: 9px; margin: 0; }
.skill-lesson dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 10px 12px; border-radius: 6px; background: #f6f8fc; }
.skill-lesson dt { color: #1e3d80; font: 700 14px/1.45 var(--font-display); }
.skill-lesson dd { margin: 0; }
.lesson-traps { margin-bottom: 24px; padding: 19px 20px !important; border: 1px solid #edcf91 !important; border-radius: 7px; background: #fff9eb; }
.lesson-example { padding: 22px !important; border: 1px solid #cfd9e9 !important; border-radius: 7px; background: #f6f9ff; }
.lesson-example blockquote { margin: 0 0 13px; padding: 14px 16px; border-left: 3px solid #bd8a20; color: #2f487a; background: white; font: 15px/1.55 var(--font-display); }
.lesson-checklist { padding: 0 !important; list-style: none; }
.lesson-checklist li { position: relative; padding-left: 30px; }
.lesson-checklist li::before { content: '✓'; position: absolute; left: 0; top: 1px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: white; background: #173779; font-size: 11px; }
.skill-lesson > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 32px; border-top: 1px solid #dce3ed; background: #fcfbf7; }
.skill-lesson > footer span { color: #697798; font: 11px/1.4 var(--font-display); }
.skill-lesson > footer button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 5px; color: white; background: #102f90; font: 600 12px/1 var(--font-display); }

.vocab-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.vocab-metrics article { display: flex; min-height: 88px; align-items: center; gap: 17px; padding: 18px 22px; }
.vocab-metrics .icon { width: 34px; height: 34px; color: #b88922; }
.vocab-metrics b { color: #10245f; font: 700 30px/1 var(--font-display); }
.vocab-metrics small { display: block; margin-top: 4px; color: #68789d; font: 500 12px/1.2 var(--font-display); }
.vocab-filters { display: grid; grid-template-columns: minmax(300px,1fr) repeat(3,minmax(150px,.3fr)); gap: 9px; margin-bottom: 14px; }
.vocab-filters label,
.vocab-filters select { min-height: 43px; border: 1px solid #d7deea; border-radius: 7px; color: #405782; background: white; }
.vocab-filters label { display: flex; align-items: center; gap: 9px; padding: 0 14px; }
.vocab-filters input { width: 100%; border: 0; outline: 0; background: transparent; }
.vocab-filters select { padding: 0 11px; font-size: 12px; }
.vocab-layout { display: grid; grid-template-columns: minmax(580px,1.55fr) minmax(330px,.75fr); gap: 14px; align-items: start; }
.vocab-review { padding: 20px 25px 22px; }
.vocab-record-list { display: grid; gap: 14px; }
.vocab-record h2 { margin: 0; color: #10245f; font-size: 22px; }
.vocab-record > small { display: block; margin-top: 8px; color: #74819c; font-family: var(--font-display); }
.vocab-record-count { color: #68789d; font: 500 14px/1.4 var(--font-display); }
.vocab-review > header,
.vocab-layout > aside article > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid #e0e5ed; }
.vocab-review > header h2,
.vocab-layout > aside h2 { margin: 0; font-size: 22px; }
.vocab-review > header span { color: #66769a; font-family: var(--font-display); font-size: 12px; }
.vocab-word { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.vocab-word h3 { margin: 0; font-size: 34px; }
.vocab-word button { border: 0; color: #2563eb; background: transparent; }
.vocab-word span { color: #76839e; font-family: var(--font-display); }
.vocab-review > p { color: #4b608b; font: 15px/1.55 var(--font-display); }
.vocab-review > p > b { display: inline-block; padding: 4px 9px; border-radius: 999px; color: #966410; background: #fff4d6; font-size: 10px; }
.vocab-review h4 { margin: 18px 0 4px; color: #173677; font: 700 13px/1.2 var(--font-display); }
.vocab-review blockquote { margin: 7px 0 0; padding: 14px 16px; border-left: 3px solid #b88922; color: #314878; background: #fcf8ed; font: 14px/1.45 var(--font-display); }
.vocab-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 17px 0; }
.vocab-details section { min-height: 99px; padding: 13px; border: 1px solid #e0e5ed; border-radius: 6px; background: #fbfcfe; }
.vocab-details b { color: #173677; font: 700 12px/1.2 var(--font-display); }
.vocab-details p { margin: 7px 0 0; color: #5d6e92; font: 12px/1.45 var(--font-display); }
.vocab-review > small { display: flex; align-items: center; gap: 7px; color: #74819c; font-family: var(--font-display); }
.vocab-review > small .icon { width: 15px; height: 15px; }
.vocab-review > footer { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e0e5ed; }
.vocab-review > footer button { min-height: 43px; border: 1px solid #d6deea; border-radius: 6px; color: #23417e; background: white; font: 600 12px/1 var(--font-display); }
.vocab-layout > aside { display: grid; gap: 14px; }
.vocab-layout > aside article { padding: 18px; }
.vocab-layout > aside header button { border: 0; color: #b07812; background: transparent; font: 600 11px/1 var(--font-display); }
.vocab-layout > aside article > p { display: grid; min-height: 49px; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid #e5e8ef; }
.vocab-layout > aside article > p:last-child { border-bottom: 0; }
.vocab-layout > aside article > p > b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: #173679; font-size: 10px; }
.vocab-layout > aside article > p > strong { color: #173679; font: 600 13px/1.2 var(--font-display); }
.vocab-layout > aside article > p > strong small { display: block; margin-top: 2px; color: #77849e; font-size: 10px; font-weight: 400; }
.vocab-layout > aside article > p > em { padding: 3px 7px; border-radius: 999px; color: #996612; background: #fff5da; font-size: 9px; font-style: normal; }
.vocab-layout > aside article > p > span { grid-column: 2 / -1; margin-top: -9px; color: #8791a6; font: 9px/1 var(--font-display); }

@media (min-width: 1200px) {
  .adaptive-layout { grid-template-columns: minmax(620px, 1.64fr) minmax(350px, .78fr); }
  .adaptive-question,
  .study-coach { height: clamp(560px, calc(100dvh - 170px), 760px); min-height: 0; }
}

@media (min-width: 768px) and (max-height: 800px) {
  .adaptive-heading { min-height: 78px; margin-bottom: 8px; }
  .adaptive-heading h1 { font-size: 40px; }
  .adaptive-heading p { margin-top: 4px; font-size: 16px; }
  .adaptive-heading blockquote { margin-top: 2px; font-size: 14px; }
  .adaptive-passage { margin-block: 14px; padding: 18px 22px; font-size: 17px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-layout { grid-template-columns: 1fr; }
  .adaptive-question { height: clamp(520px, calc(100dvh - 180px), 720px); min-height: 0; padding-inline: 22px; }
  .study-coach { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(420px, 48vw); max-width: 420px; min-height: 100vh; border-radius: 0; box-shadow: -18px 0 45px rgba(12,28,72,.18); transform: translateX(105%); transition: transform .22s ease; overflow-y: auto; }
  .coach-is-open .study-coach { transform: translateX(0); }
  .coach-close { display: block; }
  .coach-mobile-handle { position: fixed; right: 22px; bottom: 24px; z-index: 50; display: block; min-height: 44px; padding: 9px 18px; border: 1px solid #c69b40; border-radius: 999px; color: white; background: #10245f; box-shadow: var(--shadow); font-family: var(--font-display); }
  .coach-is-open .coach-mobile-handle { display: none; }
  .adaptive-heading blockquote,
  .vocabulary-screen > header blockquote { display: none; }
  .vocab-layout { grid-template-columns: minmax(0,1.4fr) minmax(290px,.72fr); }
  .vocab-filters { grid-template-columns: minmax(240px,1fr) repeat(3,minmax(120px,.3fr)); }
  .skill-lesson { width: min(420px, 52vw); max-width: 420px; }
}

@media (max-width: 900px) {
  .adaptive-heading,
  .vocabulary-screen > header { min-height: auto; }
  .adaptive-heading h1,
  .vocabulary-screen > header h1 { font-size: 40px; }
  .adaptive-layout { grid-template-columns: 1fr; }
  .adaptive-question { min-height: 0; }
  .vocab-layout { grid-template-columns: 1fr; }
  .vocab-layout > aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vocab-filters { grid-template-columns: 1fr 1fr; }
  .attempt-status { margin-top: -22px; }
}

@media (max-width: 767px) {
  .adaptive-heading h1,
  .vocabulary-screen > header h1 { font-size: 32px; }
  .adaptive-heading p,
  .vocabulary-screen > header p { font-size: 15px; }
  .adaptive-heading { margin-bottom: 6px; padding-top: 0; }
  .adaptive-heading p { margin-top: 4px; }
  .adaptive-launch-card { min-height: 0; padding: 24px 17px; }
  .adaptive-launch-card h2 { font-size: 24px; }
  .adaptive-difficulty-options { grid-template-columns: 1fr; gap: 7px; }
  .adaptive-difficulty-options > button { min-height: 58px; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; padding: 10px 13px; }
  .adaptive-difficulty-options small { text-align: right; }
  .adaptive-start-button { width: 100%; }
  .adaptive-skill-link { margin-top: 5px; }
  .attempt-status { margin: 0 0 7px; padding-block: 5px; }
  .adaptive-question { padding: 12px 15px 13px; }
  .adaptive-question > header > p { margin-bottom: 10px; }
  .adaptive-question > header > div { align-items: center; flex-direction: row; gap: 12px; }
  .adaptive-question > header b { flex: 0 0 auto; }
  .adaptive-question > header span { width: auto; min-width: 0; flex: 1; }
  .adaptive-passage { min-height: 0; max-height: 160px; margin: 12px 0; padding: 13px 16px; font-size: 15px; line-height: 1.5; }
  .adaptive-question > h2 { margin-bottom: 12px; font-size: 16px; line-height: 1.58; }
  .adaptive-choices { gap: 6px; }
  .adaptive-choices > button { min-height: 44px; padding: 6px 10px; }
  .adaptive-choices > button > span { font-size: 16px; line-height: 1.45; }
  .adaptive-question > footer { align-items: center; flex-direction: row; margin-top: 11px; }
  .adaptive-question > footer button { width: auto; flex: 1; justify-content: center; padding-inline: 8px; }
  .adaptive-question > footer button:last-child { min-width: 0; }
  .adaptive-screen { padding-bottom: 8px; }
  .study-coach { position: fixed; top: auto; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); left: 0; width: 100%; max-width: none; min-height: 0; max-height: 73vh; z-index: 60; border-radius: 16px 16px 0 0; box-shadow: 0 -15px 40px rgba(12,28,72,.17); transform: translateY(calc(100% + 90px)); transition: transform .22s ease; overflow-y: auto; }
  .coach-is-open .study-coach { transform: translateY(0); }
  .coach-close { display: block; }
  .coach-composer { margin-bottom: 2px; }
  .coach-mobile-handle { position: static; display: block; width: 100%; min-height: 44px; margin: 0 0 7px; padding: 7px 16px; border: 1px solid #c69b40; border-radius: 7px; color: white; background: #10245f; box-shadow: none; font-family: var(--font-display); }
  .coach-is-open .coach-mobile-handle { display: none; }
  .vocab-metrics { grid-template-columns: repeat(3,1fr); gap: 7px; }
  .vocab-metrics article { min-height: 78px; justify-content: center; gap: 8px; padding: 10px 5px; text-align: center; }
  .vocab-metrics .icon { width: 24px; height: 24px; }
  .vocab-metrics b { font-size: 23px; }
  .vocab-metrics small { font-size: 9px; }
  .vocab-filters { grid-template-columns: 1fr; }
  .vocab-filters select { display: none; }
  .vocab-review { padding: 18px 15px; }
  .vocab-details { grid-template-columns: 1fr; }
  .vocab-review > footer { grid-template-columns: repeat(2,1fr); }
  .vocab-layout > aside { grid-template-columns: 1fr; }
  .attempt-status { margin: 0 0 10px; }
  .adaptive-state-card { min-height: 360px; padding: 28px 18px; }
  .skill-lesson { width: 100%; height: 100%; }
  .skill-lesson > header { padding: 20px 18px 16px; }
  .skill-lesson > header h2 { font-size: 27px; }
  .skill-lesson-scroll { padding: 22px 18px 34px; }
  .skill-lesson dl > div { grid-template-columns: 1fr; gap: 3px; }
  .skill-lesson > footer { align-items: stretch; flex-direction: column; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); }
  .skill-lesson > footer button { width: 100%; }
}

/* Billing, family support, coach, and settings surfaces. */
.support-screen { color: #14317d; font-family: var(--font-display); }
.support-heading { display: flex; min-height: 94px; align-items: flex-start; justify-content: space-between; gap: 24px; }
.support-heading h1 { margin: 0; color: #0b2881; font-size: 48px; line-height: 1; letter-spacing: -.035em; }
.support-heading p { margin: 7px 0 0; color: #4c67ae; font-size: 20px; line-height: 1.3; }
.support-heading > small { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: #536ba9; font-size: 13px; }
.support-heading blockquote { max-width: 390px; margin: 0; padding-left: 28px; border-left: 1px solid #d6deeb; color: #4560a6; font-size: 17px; line-height: 1.45; }
.support-card { border: 1px solid #d7dfeb; border-radius: 7px; background: rgba(255,255,255,.96); }
.support-card h2 { margin: 0; color: #0b2881; font-size: 29px; line-height: 1.05; }
.support-card > p { color: #506cac; font-size: 16px; line-height: 1.42; }
.primary-button,
.secondary-button,
.gold-button,
.gold-outline { min-height: 45px; padding: 9px 20px; border-radius: 5px; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.primary-button { border: 1px solid #102f90; color: white; background: #102f90; }
.secondary-button { border: 1px solid #25479b; color: #102f80; background: white; }
.gold-button { width: 100%; border: 1px solid #ba8214; color: white; background: linear-gradient(90deg,#bd8618,#d4a437,#b77c0c); }
.gold-outline { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; border: 1px solid #c89022; color: #a46900; background: linear-gradient(90deg,#fffdf8,#fff3d6); }
.gold-outline .icon,
.secondary-button .icon { width: 16px; height: 16px; vertical-align: -3px; }
.link-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: #0b2881; background: transparent; font-family: var(--font-display); text-decoration: underline; }
.link-button .icon { width: 16px; height: 16px; }

.checkout-grid,
.request-grid { display: grid; grid-template-columns: minmax(420px,.98fr) minmax(500px,1.05fr); gap: 18px; align-items: stretch; }
.membership-card,
.payment-card,
.request-form-card,
.guardian-preview { min-height: 720px; padding: 25px; }
.membership-card > section { position: relative; margin-top: 25px; padding: 26px 24px 21px; border: 1px solid #cad5e5; border-radius: 7px; }
.membership-card > section > span { position: absolute; top: 24px; right: 24px; padding: 8px 16px; border-radius: 999px; color: #96630a; background: #fff3d7; font: 600 12px/1 var(--font-display); }
.membership-card h3 { margin: 0; color: #0b2881; font-size: 34px; line-height: 1.08; }
.membership-card h3 b { font-size: 38px; }
.membership-card h4 { margin: 21px 0 13px; color: #102d7d; font-size: 16px; }
.membership-card hr,
.request-form-card hr { margin: 22px 0; border: 0; border-top: 1px solid #d8e0ec; }
.membership-card ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; color: #405fa7; font-size: 15px; }
.membership-card li { display: flex; align-items: center; gap: 13px; }
.membership-card li .icon { width: 23px; height: 23px; padding: 4px; border-radius: 50%; color: white; background: #bd8618; stroke-width: 2.4; }
.payment-card > p,
.request-form-card > p,
.guardian-preview > p { margin: 4px 0 18px; }
.account-summary { display: flex; align-items: center; gap: 18px; margin: 15px 0 16px; padding: 13px 18px; border: 1px solid #d5dceb; border-radius: 6px; background: #f5f6fb; }
.account-summary .icon { width: 28px; height: 28px; }
.account-summary p,
.account-summary b,
.account-summary span { display: block; margin: 0; }
.account-summary span { margin-top: 2px; color: #455fa1; font-size: 12px; }
.payment-card form,
.request-form-card form { display: grid; gap: 13px; }
.payment-card form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.payment-card label,
.request-form-card label { display: grid; gap: 6px; color: #102e7a; font-size: 13px; font-weight: 700; }
.payment-card input:not([type=checkbox]),
.request-form-card input:not([type=checkbox]),
.request-form-card select { width: 100%; min-height: 44px; padding: 9px 13px; border: 1px solid #bfcce0; border-radius: 5px; color: #38569c; background: white; font-family: var(--font-display); }
.receipt-check { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; justify-content: flex-start; gap: 10px !important; font-weight: 400 !important; }
.receipt-check input { width: 19px; height: 19px; accent-color: #13328b; }
.receipt-check span small { display: block; margin-top: 4px; color: #6075a8; font-weight: 400; }
.renew-copy { margin: 14px 0 12px !important; color: #5a71aa !important; font-size: 12px !important; }
.payment-card > footer { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #dce3ec; color: #5d71a3; font-size: 11px; }
.payment-card > footer .icon { width: 20px; height: 20px; }
.request-form-card h3 { margin: 0; color: #112f7c; font-size: 16px; }
.selected-plan { display: flex; align-items: center; gap: 18px; padding: 13px 16px; border: 1px solid #cdd7e7; border-radius: 6px; }
.selected-plan .icon { width: 49px; height: 49px; padding: 12px; border-radius: 50%; color: #b47707; background: #fff4da; }
.selected-plan p,
.selected-plan b,
.selected-plan span { display: block; margin: 0; }
.selected-plan b { color: #0c2c81; font-size: 18px; }
.selected-plan span { margin-top: 3px; color: #4965a5; font-size: 14px; }
.request-form-card form > footer { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 12px; }
.guardian-preview > section { padding: 20px; border: 1px solid #c9d4e5; border-radius: 7px; }
.guardian-preview > section > h3 { margin: 0; color: #0b2c82; font-size: 20px; }
.guardian-preview > section > h4 { margin: 15px 0 9px; color: #0b2c82; font-size: 23px; }
.guardian-preview > section > p { margin: 6px 0; color: #4e68a6; line-height: 1.35; }
.guardian-preview dl { margin: 16px 0; padding: 12px 14px; border-radius: 6px; background: #f4f6fa; }
.guardian-preview dl > div { display: grid; grid-template-columns: 112px 1fr; padding: 3px 0; }
.guardian-preview dt { font-weight: 700; }
.guardian-preview dd { margin: 0; }
.guardian-preview aside { display: flex; gap: 12px; align-items: flex-start; margin: 13px 0 17px; }
.guardian-preview aside .icon { width: 37px; height: 37px; padding: 8px; border-radius: 50%; color: #b97c08; background: #fff4dc; }
.guardian-preview aside p,
.guardian-preview aside b,
.guardian-preview aside span { display: block; margin: 0; }
.guardian-preview aside span { color: #5a70a6; font-size: 12px; line-height: 1.35; }
.safe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.safe-grid p { display: grid; grid-template-columns: 40px 1fr; gap: 3px 12px; margin: 0; padding: 11px; border-right: 1px solid #dae1eb; }
.safe-grid p:last-child { border-right: 0; }
.safe-grid .icon { grid-row: 1 / 3; width: 38px; height: 38px; padding: 8px; border-radius: 50%; color: #b97c08; background: #fff4dc; }
.safe-grid span { color: #5d72a7; font-size: 11px; }

.settings-tabs { display: flex; justify-content: space-between; gap: 12px; margin: -7px 0 20px; border-bottom: 1px solid #d8e0ea; }
.settings-tabs button { min-height: 48px; padding: 8px 20px; border: 0; border-bottom: 3px solid transparent; color: #4e66a3; background: transparent; font-family: var(--font-display); font-size: 14px; }
.settings-tabs button.is-active { border-bottom-color: #16368e; color: #0b2b80; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: minmax(620px,1.7fr) minmax(300px,.85fr); gap: 16px; align-items: start; }
.settings-panel { padding: 22px 24px; }
.settings-panel > p { margin: 5px 0 17px; }
.settings-panel > hr { margin: 15px 0; border: 0; border-top: 1px solid #dbe2ec; }
.settings-panel h3 { margin: 0; color: #102f7c; font-size: 18px; }
.timing-setting { display: grid; grid-template-columns: 160px 1fr; gap: 8px 20px; }
.timing-setting h3 { grid-row: 1 / 4; }
.timing-setting label { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.timing-setting input { width: 19px; height: 19px; accent-color: #153893; }
.setting-group { display: grid; grid-template-columns: 160px 1fr; gap: 20px; }
.setting-group > div { display: grid; gap: 8px; }
.setting-toggle { display: grid; grid-template-columns: 1fr 46px; align-items: center; }
.setting-toggle input { position: absolute; opacity: 0; }
.setting-toggle i { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #cbd3e2; }
.setting-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .15s ease; }
.setting-toggle input:checked + i { background: #13388f; }
.setting-toggle input:checked + i::after { transform: translateX(18px); }
.settings-panel > footer { display: flex; gap: 12px; margin-top: 21px; }
.settings-panel > footer button { min-width: 230px; }
.settings-save-note { margin: 0 auto 0 0; color: #61718f; font-size: 13px; }
.settings-grid > aside { display: grid; gap: 16px; }
.info-card { display: grid; grid-template-columns: 50px 1fr; align-items: center; padding: 20px; }
.info-card > .icon { width: 40px; height: 40px; color: #b27604; }
.info-card h2 { font-size: 24px; }
.info-card p,
.info-card button,
.info-card small { grid-column: 1 / -1; }
.info-card p { margin: 9px 0 0; }
.info-card em { font-style: italic; }
.info-card button { margin-top: 15px; }
.info-card small { margin-top: 15px; padding-top: 12px; border-top: 1px solid #dbe2eb; color: #687aa5; }

.summary-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.summary-cards article { display: flex; min-height: 103px; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid #d8e0eb; border-radius: 7px; background: white; }
.summary-cards article > .icon,
.summary-cards article.alert { color: #158c56; }
.summary-cards article > .icon,
.summary-cards article.alert::before { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: #e4f5ec; }
.summary-cards article p,
.summary-cards article b { display: block; margin: 0; }
.summary-cards article p { color: #27488e; }
.summary-cards article b { margin-top: 2px; color: #0c2b82; font-size: 30px; }
.guardian-grid { display: grid; grid-template-columns: 1.1fr 1.08fr .66fr; gap: 14px; }
.guardian-grid > div,
.guardian-grid > aside { display: grid; gap: 14px; }
.chart-card { min-height: 230px; padding: 16px; }
.chart-card h2,
.compact-card h2,
.side-card h2 { margin: 0; font-size: 18px; }
.line-chart { position: relative; height: 165px; margin-top: 12px; overflow: hidden; border-left: 1px solid #d6dfeb; border-bottom: 1px solid #d6dfeb; background: repeating-linear-gradient(to right,transparent 0,transparent 65px,#e5e9f0 66px),repeating-linear-gradient(to bottom,transparent 0,transparent 38px,#e5e9f0 39px); }
.line-chart i { position: absolute; left: 0; bottom: 35px; width: 100%; height: 3px; background: #2861d7; transform: rotate(-8deg); }
.line-chart b { position: absolute; right: 10px; top: 12px; padding: 4px 8px; border: 1px solid #2b61d0; border-radius: 4px; color: #173c96; background: white; }
.mini-bars { display: flex; height: 165px; align-items: flex-end; gap: 18px; padding: 18px 8px 0; border-bottom: 1px solid #d6dfeb; }
.mini-bars > span { display: grid; height: 100%; flex: 1; grid-template-rows: 1fr auto; align-items: end; justify-items: center; }
.mini-bars i { width: 32px; height: var(--value); border-radius: 4px 4px 0 0; background: #8bd2ac; }
.mini-bars span:last-child i { background: #21955e; }
.mini-bars small { margin-top: 4px; color: #5e73a7; font-size: 9px; white-space: nowrap; }
.compact-card { min-height: 150px; padding: 16px; }
.compact-card > div { display: flex; align-items: center; gap: 15px; margin-top: 14px; }
.compact-card > div > .icon { width: 45px; height: 45px; padding: 11px; border-radius: 50%; color: #b77b0a; background: #fff4dc; }
.compact-card p,
.compact-card p b,
.compact-card p span,
.compact-card p small { display: block; margin: 0; }
.compact-card p { flex: 1; }
.compact-card p span,
.compact-card p small { margin-top: 3px; color: #4d68a3; }
.consistency { display: grid !important; grid-template-columns: repeat(7,1fr); gap: 8px !important; }
.consistency i { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #b9c5d8; border-radius: 50%; color: white; background: #edf0f5; font: 800 9px/1 var(--font-ui); }
.consistency i.is-done { border-color: #1b955e; background: #1b955e; }
.side-card { padding: 17px; }
.side-card dl { margin: 12px 0 16px; }
.side-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e2e6ee; }
.side-card dd { margin: 0; }
.side-card > p { display: flex; gap: 10px; }
.side-card > p .icon { width: 35px; height: 35px; padding: 8px; border-radius: 50%; color: #168c58; background: #e6f6ed; }
.side-card > p b,
.side-card > p small { display: block; }
.side-card > p small { margin-top: 4px; color: #5c72a5; }
.skills-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.skills-pair article,
.class-snapshot { padding: 14px 18px; border: 1px solid #d8e0eb; border-radius: 7px; background: white; }
.skills-pair h2,
.class-snapshot h2 { margin: 0 0 10px; font-size: 20px; }
.skills-pair p { display: grid; grid-template-columns: minmax(140px,1fr) minmax(100px,.9fr) 40px; align-items: center; gap: 10px; margin: 8px 0; }
.skills-pair p i,
.class-snapshot article i { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: #e0e5ed; }
.skills-pair p i::after,
.class-snapshot article i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); border-radius: inherit; background: #25945f; }
.skills-pair p i.gold::after,
.class-snapshot article i.gold::after { background: #ca941b; }
.privacy-note { display: flex; align-items: center; gap: 18px; margin-top: 14px; padding: 14px 18px; border: 1px solid #d8e0eb; border-radius: 7px; background: white; color: #4e67a1; font-size: 13px; }
.privacy-note .icon { width: 31px; height: 31px; color: #b57808; }

.coach-screen .support-heading > div:last-child { display: flex; gap: 14px; }
.coach-screen .support-heading > div:last-child button { min-width: 180px; width: auto; }
.coach-summary article:nth-child(3) > .icon { color: #b77b09; background: #fff3d4; }
.coach-summary article:nth-child(4) > .icon { color: #153a90; background: #e9eef9; }
.coach-summary article.alert::before { content: "!"; display: grid; place-items: center; color: white; background: #ef5b55; font: 800 24px/1 var(--font-ui); }
.coach-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 14px; }
.student-table,
.assignments-card { padding: 14px 16px; }
.student-table > header,
.assignments-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid #dce3ec; }
.student-table > header h2,
.assignments-card > header h2 { margin: 0; font-size: 22px; }
.student-table > header button,
.assignments-card > header button { display: flex; align-items: center; gap: 6px; border: 0; color: #183a8e; background: transparent; font-family: var(--font-display); }
.student-table > header .icon,
.assignments-card > header .icon { width: 15px; height: 15px; }
.student-table > .table-head,
.student-table > div { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr 72px; align-items: center; gap: 14px; min-height: 58px; border-bottom: 1px solid #e2e7ee; }
.student-table > .table-head { min-height: 34px; color: #6274a4; font-size: 11px; }
.student-table > div > span:first-child { display: flex; align-items: center; gap: 11px; }
.student-table > div > span:first-child i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #15367f; background: #e7edfa; font-style: normal; }
.student-table > div > span:nth-child(2) { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.student-table > div > span:nth-child(2) > b { grid-column: 1 / -1; }
.student-table em { position: relative; display: block; height: 9px; overflow: hidden; border-radius: 999px; background: #e0e4ec; }
.student-table em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); border-radius: inherit; background: #2b9a64; }
.student-table em.red::after { background: #ed5d55; }
.student-table small { font-weight: 700; }
.student-table .secondary-button { min-height: 33px; padding: 4px 14px; }
.assignments-card > div { display: grid; min-height: 76px; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; border-bottom: 1px solid #e1e6ed; }
.assignments-card > div > .icon { width: 39px; height: 39px; padding: 10px; border-radius: 50%; color: #178b58; background: #e5f5ed; }
.assignments-card p,
.assignments-card b,
.assignments-card span { display: block; margin: 0; }
.assignments-card span { margin-top: 4px; color: #506ba3; }
.assignments-card > .gold-outline { margin-top: 12px; }
.class-snapshot { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 14px; }
.class-snapshot h2 { grid-column: 1 / -1; }
.class-snapshot article { display: grid; min-width: 0; padding-right: 15px; border-right: 1px solid #dde3eb; }
.class-snapshot article:last-child { border-right: 0; }
.class-snapshot article span { min-height: 35px; }
.class-snapshot article b { font-size: 28px; }
.class-snapshot article i { margin-top: 7px; }

@media (max-width: 1199px) {
  .checkout-grid,
  .request-grid { grid-template-columns: 1fr; }
  .membership-card,
  .payment-card,
  .request-form-card,
  .guardian-preview { min-height: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid > aside { grid-template-columns: 1fr 1fr; }
  .guardian-grid { grid-template-columns: 1fr 1fr; }
  .guardian-grid > aside { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .coach-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .support-heading { min-height: auto; margin-bottom: 18px; }
  .support-heading h1 { font-size: 34px; }
  .support-heading p { font-size: 16px; }
  .support-heading > small,
  .support-heading blockquote { display: none; }
  .membership-card,
  .payment-card,
  .request-form-card,
  .guardian-preview { padding: 19px 16px; }
  .membership-card > section { padding: 20px 16px; }
  .membership-card > section > span { position: static; display: inline-block; margin-bottom: 12px; }
  .payment-card form > div,
  .request-form-card form > footer,
  .safe-grid { grid-template-columns: 1fr; }
  .settings-tabs { overflow-x: auto; justify-content: flex-start; }
  .settings-tabs button { flex: 0 0 auto; padding-inline: 12px; }
  .timing-setting,
  .setting-group { grid-template-columns: 1fr; }
  .settings-panel > footer { flex-direction: column; }
  .settings-panel > footer button { width: 100%; min-width: 0; }
  .settings-save-note { margin-right: auto; }
  .settings-grid > aside,
  .summary-cards,
  .guardian-grid,
  .guardian-grid > aside,
  .skills-pair,
  .class-snapshot { grid-template-columns: 1fr; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .summary-cards article { min-height: 88px; gap: 9px; padding: 12px; }
  .summary-cards article > .icon,
  .summary-cards article.alert::before { width: 39px; height: 39px; padding: 9px; }
  .summary-cards article p { font-size: 11px; }
  .summary-cards article b { font-size: 23px; }
  .guardian-grid > aside { grid-column: auto; }
  .skills-pair p { grid-template-columns: 1fr; }
  .privacy-note { align-items: flex-start; }
  .coach-screen .support-heading { display: block; }
  .coach-screen .support-heading > div:last-child { margin-top: 14px; }
  .coach-screen .support-heading > div:last-child button { min-width: 0; flex: 1; padding-inline: 9px; font-size: 12px; }
  .student-table { overflow-x: auto; }
  .student-table > .table-head,
  .student-table > div { min-width: 690px; }
  .class-snapshot h2 { grid-column: auto; }
  .class-snapshot article { padding: 8px 0; border-right: 0; border-bottom: 1px solid #dde3eb; }
}

/* Question Bank and preserved records follow the approved 4ULearning visual system. */
.question-bank-heading { display: flex; min-height: 92px; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.question-bank-heading h1 { margin: 0; color: var(--color-primary); font-family: var(--font-display); font-size: clamp(36px, 3vw, 54px); line-height: 1; }
.question-bank-heading p { margin: 8px 0 0; color: #67769a; font-family: var(--font-display); font-size: 19px; }
.question-bank-heading blockquote { max-width: 390px; margin: 0; color: #51648e; font-family: var(--font-display); font-size: 17px; font-style: italic; line-height: 1.5; text-align: right; }
.question-bank-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.question-bank-summary article { display: flex; min-height: 104px; align-items: center; gap: 17px; padding: 20px 24px; border: var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: 0 7px 18px rgba(22, 41, 86, .04); }
.question-bank-summary .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; color: var(--color-primary); background: #eef1fb; }
.question-bank-summary p, .question-bank-summary b, .question-bank-summary span { display: block; margin: 0; }
.question-bank-summary b { color: var(--color-primary); font-family: var(--font-display); font-size: 30px; }
.question-bank-summary span { color: #607198; font-size: 13px; }
.question-bank-card { overflow: hidden; border: var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: 0 8px 24px rgba(22, 41, 86, .045); }
.question-bank-card > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-bottom: 1px solid #e2e6ee; }
.question-bank-card h2 { margin: 0 0 6px; color: var(--color-primary); font-family: var(--font-display); font-size: 25px; }
.question-bank-card header p { max-width: 700px; margin: 0; color: #68779a; }
.question-bank-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 20px 28px; background: #fbfbfd; }
.question-bank-filters label { color: var(--color-primary); font-size: 12px; font-weight: 700; }
.question-bank-filters select, .question-bank-filters input { width: 100%; min-height: 42px; margin-top: 7px; padding: 0 12px; border: 1px solid #d7deea; border-radius: 7px; color: #34466e; background: #fff; font: inherit; }
.question-bank-row { display: grid; grid-template-columns: 1.05fr 1.2fr 1.2fr 1.55fr .7fr 72px; align-items: center; gap: 14px; min-height: 68px; padding: 10px 28px; border-top: 1px solid #e4e8ef; color: #41537c; font-size: 13px; }
.question-bank-row.is-head { min-height: 42px; color: #7885a4; background: #f7f8fb; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.question-bank-row b, .question-bank-row small { display: block; }
.question-bank-row b { color: var(--color-primary); }
.question-bank-row small { margin-top: 3px; color: #8a95ae; }
.question-bank-row em { display: inline-block; padding: 5px 10px; border-radius: 99px; font-size: 11px; font-style: normal; font-weight: 700; }
.question-bank-row .difficulty-easy { color: #19724a; background: #e6f6ed; }
.question-bank-row .difficulty-medium { color: #8d6410; background: #fff3d8; }
.question-bank-row .difficulty-hard { color: #9b3e38; background: #feecea; }
.question-bank-row > button { min-height: 34px; padding: 0 10px; border: 1px solid #aeb9d1; border-radius: 7px; color: var(--color-primary); background: #fff; font-weight: 700; cursor: pointer; }
.history-question-card { position: relative; padding: 28px; }
.history-question-card > p { max-width: 780px; min-height: 260px; white-space: pre-wrap; line-height: 1.75; }
.history-question-card > footer { display: flex; max-width: 780px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.history-question-card > aside { position: absolute; inset: 28px 28px auto auto; width: 280px; padding: 20px; border: 1px solid #e0e5ed; border-radius: 8px; background: #fbfbfd; }
.history-question-card > aside p { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0; }
.history-question-card > aside b { color: var(--color-primary); }
.history-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.history-module-grid article { display: grid; gap: 6px; padding: 22px; border: var(--card-border); border-radius: var(--card-radius); background: #fff; }
.history-module-grid span, .history-module-grid small { color: #73809d; }
.history-module-grid b { color: var(--color-primary); font-family: var(--font-display); font-size: 19px; }

@media (max-width: 1199px) {
  .question-bank-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-bank-table { overflow-x: auto; }
  .question-bank-row { min-width: 910px; }
  .history-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .question-bank-heading { min-height: auto; margin-bottom: 18px; }
  .question-bank-heading h1 { font-size: 34px; }
  .question-bank-heading p { font-size: 16px; }
  .question-bank-heading blockquote { display: none; }
  .question-bank-summary { grid-template-columns: 1fr; }
  .question-bank-summary article { min-height: 82px; padding: 15px 18px; }
  .question-bank-card > header { align-items: stretch; flex-direction: column; padding: 20px 16px; }
  .question-bank-filters { grid-template-columns: 1fr; padding: 16px; }
  .history-module-grid { grid-template-columns: 1fr; }
  .history-question-card > aside { position: static; width: auto; margin-top: 20px; }
}

/* Detailed SAT Skill Map — official hierarchy with honest evidence states. */
.adaptive-skill-link { margin-top: 13px; padding: 0; border: 0; color: #a67316; background: transparent; font: 700 12px/1.2 var(--font-display); text-decoration: underline; text-underline-offset: 4px; }
.progress-heading-actions { display: flex; gap: 9px; }
.skill-map-screen { color: #33446e; }
.skill-map-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 17px; padding: 8px 2px 0; }
.skill-map-heading small { color: #a67416; font: 800 11px/1.2 var(--font-display); letter-spacing: .1em; }
.skill-map-heading h1 { margin: 6px 0 0; color: #10245f; font-size: 48px; line-height: 1; letter-spacing: -.035em; }
.skill-map-heading p { margin: 9px 0 0; color: #68789d; font: 17px/1.4 var(--font-display); }
.skill-map-heading aside { display: grid; min-width: 175px; justify-items: center; padding: 16px 20px; border: 1px solid #d8e0ec; border-radius: 8px; background: #fff; }
.skill-map-heading aside b { color: #10245f; font-size: 31px; }
.skill-map-heading aside span { color: #69799c; font: 11px/1.2 var(--font-display); }
.skill-map-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 11px; }
.skill-map-tabs button { display: flex; min-height: 58px; align-items: center; gap: 12px; padding: 11px 19px; border: 1px solid #d5deeb; border-radius: 8px; color: #51658f; background: #fff; font: 700 14px/1.2 var(--font-display); }
.skill-map-tabs button.is-active { border-color: #1f428f; color: #10245f; background: #f2f5fc; box-shadow: 0 0 0 1px #1f428f inset; }
.skill-map-tabs .icon { width: 23px; height: 23px; }
.skill-map-legend { display: flex; min-height: 45px; align-items: center; gap: 18px; margin-bottom: 12px; padding: 9px 15px; border: 1px solid #dde3ec; border-radius: 7px; background: #fbfcfe; }
.skill-map-legend span { display: flex; align-items: center; gap: 6px; color: #52658d; font: 11px/1 var(--font-display); }
.skill-map-legend i { width: 9px; height: 9px; border-radius: 50%; background: #b8c1d2; }
.skill-map-legend i.developing { background: #c99328; }
.skill-map-legend i.needs-focus { background: #d65b53; }
.skill-map-legend i.strong { background: #178b59; }
.skill-map-legend p { margin: 0 0 0 auto; color: #8290aa; font: 10px/1.3 var(--font-display); }
.skill-domain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
.skill-domain-card { overflow: hidden; border: 1px solid #d8e0ec; border-radius: 9px; background: rgba(255,255,255,.97); }
.skill-domain-card > header { display: flex; min-height: 80px; align-items: center; gap: 13px; padding: 15px 19px; border-bottom: 1px solid #dfe5ee; background: #fcfbf7; }
.skill-domain-card > header > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #a87517; background: #fff3d6; }
.skill-domain-card > header .icon { width: 21px; height: 21px; }
.skill-domain-card > header small { color: #8e6b27; font: 800 9px/1.1 var(--font-display); letter-spacing: .08em; }
.skill-domain-card > header h2 { margin: 3px 0 0; color: #10245f; font-size: 21px; line-height: 1.15; }
.official-skill + .official-skill { border-top: 1px solid #e2e7ef; }
.official-skill > button { display: flex; width: 100%; min-height: 61px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px; border: 0; color: #173574; background: #fff; text-align: left; }
.official-skill > button small,
.official-skill > button b { display: block; }
.official-skill > button small { margin-bottom: 3px; color: #8a96ad; font: 700 9px/1 var(--font-display); text-transform: uppercase; }
.official-skill > button b { font: 700 13px/1.3 var(--font-display); }
.official-skill > button em { color: #6b7894; font-style: normal; transform: rotate(-90deg); }
.official-skill.is-open > button em { transform: rotate(0); }
.micro-skill-list { padding: 0 12px 12px; }
.micro-skill-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 13px 9px; border-top: 1px solid #e8ebf1; }
.micro-skill-row h3 { margin: 0; color: #233f7b; font: 700 13px/1.25 var(--font-display); }
.micro-skill-row p { margin: 4px 0 0; color: #8290a9; font: 10px/1.35 var(--font-display); }
.skill-state { width: max-content; padding: 5px 8px; border-radius: 999px; color: #536386; background: #eef1f6; font: 800 9px/1 var(--font-display); }
.skill-state.early-signal,
.skill-state.developing { color: #895f10; background: #fff3d8; }
.skill-state.needs-focus,
.skill-state.review-due { color: #943e37; background: #feebe9; }
.skill-state.strong { color: #176b48; background: #e7f6ef; }
.micro-skill-row > button { grid-column: 1 / -1; min-height: 36px; border: 1px solid #b9c6dc; border-radius: 6px; color: #173b88; background: #fff; font: 700 11px/1 var(--font-display); }
.micro-skill-row > button:hover { border-color: #1f479c; background: #f4f7fd; }

@media (max-width: 1199px) {
  .skill-domain-grid { grid-template-columns: 1fr; }
  .skill-domain-card { max-width: none; }
}

@media (max-width: 767px) {
  .progress-heading-actions { align-items: stretch; flex-direction: column; margin-top: 15px; }
  .progress-heading-actions button { justify-content: center; }
  .skill-map-heading { display: block; }
  .skill-map-heading h1 { font-size: 36px; }
  .skill-map-heading p { font-size: 15px; }
  .skill-map-heading aside { display: flex; min-width: 0; align-items: baseline; justify-content: flex-start; gap: 8px; margin-top: 14px; }
  .skill-map-tabs { grid-template-columns: 1fr; }
  .skill-map-tabs button { min-height: 48px; }
  .skill-map-legend { align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; }
  .skill-map-legend p { width: 100%; margin: 0; }
  .skill-domain-card > header { padding: 14px; }
  .skill-domain-card > header h2 { font-size: 19px; }
  .official-skill > button { min-height: 54px; padding-inline: 14px; }
  .micro-skill-list { padding-inline: 7px; }
  .micro-skill-row { grid-template-columns: 1fr; }
  .skill-state { grid-row: 2; }
  .micro-skill-row > button { min-height: 44px; }
}

/* Administrator-only source register. Private rows are fetched after authorization. */
.admin-source-access { padding: 22px 25px; }
.admin-source-access > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-source-access label { display: grid; gap: 7px; color: #173574; font: 700 12px/1.2 var(--font-display); }
.admin-source-access input { min-height: 44px; padding: 9px 12px; border: 1px solid #c7d2e3; border-radius: 6px; color: #334b7d; background: #fff; font: 13px/1 var(--font-display); }
.admin-source-access footer { display: flex; gap: 10px; margin-top: 16px; }
.admin-source-access footer button { width: auto; }
.admin-source-access > p { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid #bd8a20; color: #435a88; background: #f7f9fd; font: 12px/1.4 var(--font-display); }
.admin-source-table { margin-top: 14px; overflow: hidden; }
.admin-source-table > header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 22px; border-bottom: 1px solid #dce3ed; background: #fcfbf7; }
.admin-source-table > header span { color: #6a7998; font: 11px/1 var(--font-display); }
.admin-source-row { display: grid; grid-template-columns: 1fr 1fr 1.7fr .7fr; gap: 14px; align-items: center; min-height: 70px; padding: 11px 22px; border-top: 1px solid #e4e8ef; color: #40557f; font: 12px/1.35 var(--font-display); }
.admin-source-row.is-head { min-height: 39px; border-top: 0; color: #7b87a0; background: #f7f8fb; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-source-row b,
.admin-source-row small { display: block; }
.admin-source-row b { color: #173574; }
.admin-source-row small { margin-top: 4px; color: #8490a7; }
.admin-source-row code { color: #8c6216; font-size: 10px; }
.admin-source-empty { display: grid; min-height: 310px; place-items: center; align-content: center; padding: 34px; text-align: center; }
.admin-source-empty > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #9b6b14; background: #fff4d9; font-size: 22px; }
.admin-source-empty h3 { margin: 14px 0 0; color: #10245f; font-size: 23px; }
.admin-source-empty p { max-width: 520px; margin: 8px 0 0; color: #68799d; font: 13px/1.5 var(--font-display); }

.admin-auth-shell { position: relative; display: grid; min-height: min(760px, calc(100vh - 96px)); place-items: center; overflow: hidden; padding: 54px 28px; border: 1px solid #d9e1ec; border-radius: 12px; background: radial-gradient(circle at 18% 12%, rgba(194, 148, 50, .13), transparent 26%), linear-gradient(145deg, #fdfcf8 0%, #f4f6fa 100%); }
.admin-auth-shell::before { position: absolute; inset: 24px; border: 1px solid rgba(184, 137, 34, .2); border-radius: 9px; content: ''; pointer-events: none; }
.admin-auth-card { position: relative; z-index: 1; display: grid; width: min(480px, 100%); gap: 18px; padding: 46px 48px; border: 1px solid #d7dfeb; border-top: 4px solid #b88922; border-radius: 10px; background: rgba(255, 255, 255, .97); box-shadow: 0 24px 65px rgba(16, 36, 95, .13); }
.admin-auth-card.is-loading { justify-items: center; text-align: center; }
.admin-auth-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #e3ca91; border-radius: 50%; color: #9a6d16; background: #fff8e8; }
.admin-auth-mark .icon { width: 27px; height: 27px; }
.admin-auth-card > small { color: #a27219; font: 800 10px/1.2 var(--font-ui); letter-spacing: .16em; }
.admin-auth-card h1 { margin: -6px 0 0; color: #10245f; font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -.035em; }
.admin-auth-card > p { margin: -7px 0 4px; color: #62739a; font: 15px/1.55 var(--font-display); }
.admin-auth-card label { display: grid; gap: 8px; color: #29447f; font: 700 12px/1.2 var(--font-display); }
.admin-auth-card input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #c8d3e3; border-radius: 7px; color: #243d73; background: #fff; outline: 0; font: 14px/1 var(--font-display); }
.admin-auth-card input:focus { border-color: #294f9f; box-shadow: var(--focus-ring); }
.admin-auth-submit { min-height: 50px; margin-top: 3px; border: 1px solid #102f7b; border-radius: 7px; color: #fff; background: #102f7b; font: 800 13px/1 var(--font-display); box-shadow: 0 10px 22px rgba(16, 47, 123, .16); }
.admin-auth-submit:disabled { opacity: .58; cursor: wait; }
.admin-auth-secondary { min-height: 46px; border: 1px solid #c8d3e3; border-radius: 7px; color: #243d73; background: #fff; font: 800 13px/1 var(--font-display); }
.admin-auth-link { justify-self: center; border: 0; color: #20478f; background: transparent; font: 700 12px/1.4 var(--font-display); text-decoration: underline; text-underline-offset: 3px; }
.admin-auth-secondary:disabled, .admin-auth-link:disabled { opacity: .58; cursor: wait; }
.admin-auth-card .admin-auth-note { margin: 0; padding-top: 15px; border-top: 1px solid #e1e6ee; color: #77839b; font-size: 11px; text-align: center; }
.admin-auth-error { padding: 11px 13px; border: 1px solid #e5bdb8; border-left: 4px solid #ae4a42; border-radius: 6px; color: #7e302b; background: #fff8f7; font: 700 12px/1.4 var(--font-display); }
.admin-auth-progress { width: 46px; height: 3px; overflow: hidden; border-radius: 999px; background: #e4e8ef; }
.admin-auth-progress::after { display: block; width: 55%; height: 100%; border-radius: inherit; background: #b88922; animation: admin-auth-progress 1.1s ease-in-out infinite alternate; content: ''; }
@keyframes admin-auth-progress { to { transform: translateX(82%); } }

@media (max-width: 900px) {
  .admin-source-table { overflow-x: auto; }
  .admin-source-row { min-width: 820px; }
}

@media (max-width: 767px) {
  .admin-source-access { padding: 18px 15px; }
  .admin-source-access > div { grid-template-columns: 1fr; }
  .admin-source-access footer { align-items: stretch; flex-direction: column; }
  .admin-source-access footer button { width: 100%; }
}

/* Administrator Question Review — approved 4ULearning navy, gold, and paper-white system. */
.admin-question-review { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; color: var(--color-copy); }
.admin-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin: 2px 0 20px; }
.admin-review-heading > div { min-width: 0; }
.admin-review-heading small { color: var(--color-gold); font: 800 10px/1.2 var(--font-ui); letter-spacing: .16em; }
.admin-review-heading h1 { margin: 7px 0 0; font-size: clamp(38px, 3.2vw, 54px); line-height: .98; letter-spacing: -.035em; }
.admin-review-heading p { max-width: 760px; margin: 9px 0 0; color: #62739a; font: 16px/1.5 var(--font-display); }
.admin-review-persistence { display: flex; min-width: 0; align-items: stretch; justify-content: space-between; gap: 12px; margin: -4px 0 14px; padding: 11px 13px; border: 1px solid #dce3ed; border-radius: 9px; background: #fcfbf7; }
.admin-review-storage { display: flex; min-width: 0; align-items: center; gap: 10px; color: #1f437f; }
.admin-review-storage > .icon { flex: 0 0 auto; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #e8f6ef; }
.admin-review-storage.is-unavailable { color: #9b3e38; }
.admin-review-storage.is-unavailable > .icon { background: #fff0ee; }
.admin-review-storage.is-unknown { color: #6a7792; }
.admin-review-storage.is-unknown > .icon { background: #edf0f5; }
.admin-review-storage span { display: grid; min-width: 0; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.admin-review-storage small { color: #647493; font: 700 10px/1.2 var(--font-ui); letter-spacing: .035em; }
.admin-review-storage b { color: currentColor; font: 800 12px/1.2 var(--font-display); }
.admin-review-storage em { grid-column: 1 / -1; overflow: hidden; margin-top: 2px; color: #78859d; font: 10px/1.35 var(--font-display); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.admin-review-save-state { display: flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #d8e0eb; border-radius: 7px; color: #21704e; background: #fff; font: 800 11px/1 var(--font-display); }
.admin-review-save-state .icon { width: 16px; height: 16px; }
.admin-review-save-state.is-unsaved { border-color: #d8bc7e; color: #8c6216; background: #fffaf0; }
.admin-review-principal { display: flex; min-width: min(320px, 100%); align-items: center; justify-content: flex-end; gap: 13px; }
.admin-review-principal > span { display: grid; min-width: 0; gap: 3px; text-align: right; }
.admin-review-principal b { overflow: hidden; color: #183777; font: 800 12px/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.admin-review-principal small { overflow: hidden; color: #7a879f; font: 10px/1.2 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.admin-review-field input,
.admin-review-field select,
.admin-review-field textarea,
.admin-review-filters input,
.admin-review-filters select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cbd5e4; border-radius: 7px; color: #283f72; background: #fff; outline: 0; }
.admin-review-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.admin-review-field input:focus,
.admin-review-field select:focus,
.admin-review-field textarea:focus,
.admin-review-filters input:focus,
.admin-review-filters select:focus { border-color: #294f9f; box-shadow: var(--focus-ring); }
.admin-review-filters { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(3, minmax(145px, .8fr)) minmax(190px, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; padding: 14px; border: 1px solid #dce3ed; border-radius: 10px; background: rgba(255, 255, 255, .94); }
.admin-review-filters label { display: grid; gap: 6px; color: #52658c; font: 700 10px/1.2 var(--font-ui); letter-spacing: .035em; }
.admin-review-action { min-height: 44px; padding: 9px 15px; border: 1px solid #c9d3e2; border-radius: 7px; color: #183777; background: #fff; font: 700 12px/1.2 var(--font-display); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.admin-review-action:hover:not(:disabled) { transform: translateY(-1px); border-color: #9cacc7; box-shadow: 0 7px 16px rgba(18, 39, 89, .08); }
.admin-review-action:disabled { opacity: .42; cursor: not-allowed; }
.admin-review-action.is-primary { border-color: #102f7b; color: #fff; background: #102f7b; }
.admin-review-action.is-gold { border-color: #c89b3c; color: #875f14; background: #fffaf0; }
.admin-review-action.is-danger { border-color: #e9c2bd; color: #a3423a; background: #fff8f7; }
.admin-review-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.45fr); gap: 14px; align-items: start; }
.admin-review-queue,
.admin-review-editor-card,
.admin-review-empty-editor,
.admin-review-source-sheet { border: 1px solid #d8e0ec; border-radius: 9px; background: rgba(255,255,255,.97); }
.admin-review-queue { min-width: 0; overflow: hidden; }
.admin-review-queue > header { display: grid; gap: 12px; padding: 17px; border-bottom: 1px solid #dfe5ee; background: #fcfbf7; }
.admin-review-queue > header h2 { margin: 0; font-size: 22px; }
.admin-review-queue > header p { margin: 3px 0 0; color: #7a879f; font: 11px/1.3 var(--font-display); }
.admin-review-queue > header .admin-review-action { width: 100%; }
.admin-review-queue-scroll { max-height: calc(100vh - 290px); overflow-y: auto; overscroll-behavior: contain; }
.admin-review-queue-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); border-bottom: 1px solid #e5e9ef; }
.admin-review-queue-row.is-active { background: #f3f5fb; box-shadow: 3px 0 0 #173a8a inset; }
.admin-review-select { display: grid; place-items: start center; padding-top: 18px; }
.admin-review-select input { width: 16px; height: 16px; accent-color: #173a8a; }
.admin-review-queue-row > button { display: grid; min-width: 0; gap: 9px; padding: 15px 12px 15px 0; border: 0; color: inherit; background: transparent; text-align: left; }
.admin-review-queue-row > button > span:first-child { min-width: 0; }
.admin-review-queue-row b,
.admin-review-queue-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-review-queue-row b { color: #173574; font: 700 12px/1.2 var(--font-display); }
.admin-review-queue-row small { margin-top: 4px; color: #7a879f; font: 10px/1.2 var(--font-ui); }
.admin-review-row-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-review-row-meta i { padding: 4px 7px; border-radius: 999px; color: #687794; background: #eef1f6; font: 700 9px/1 var(--font-ui); font-style: normal; }
.admin-answer-badge { display: inline-flex; width: max-content; padding: 5px 8px; border-radius: 999px; font: 800 9px/1 var(--font-ui); }
.admin-answer-badge.is-consistent { color: #17704b; background: #e8f6ef; }
.admin-answer-badge.is-conflict { color: #a03e37; background: #fff0ee; }
.admin-answer-badge.is-missing { color: #8e6416; background: #fff4da; }
.admin-review-empty { display: grid; min-height: 290px; place-items: center; align-content: center; padding: 28px; text-align: center; }
.admin-review-empty .icon { width: 34px; height: 34px; color: #b88922; }
.admin-review-empty h3 { margin: 12px 0 0; font-size: 20px; }
.admin-review-empty p { margin: 7px 0 0; color: #73809b; font: 12px/1.5 var(--font-display); }
.admin-review-editor { min-width: 0; }
.admin-review-empty-editor { display: grid; min-height: 590px; place-items: center; align-content: center; padding: 40px; text-align: center; }
.admin-review-empty-editor .icon { width: 44px; height: 44px; color: #b88922; }
.admin-review-empty-editor h2 { margin: 14px 0 0; font-size: 28px; }
.admin-review-empty-editor p { max-width: 440px; margin: 8px 0 0; color: #6c7a99; font: 14px/1.5 var(--font-display); }
.admin-review-editor-card { overflow: hidden; }
.admin-review-editor-card > header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid #dfe5ee; background: #fcfbf7; }
.admin-review-editor-card > header small { color: #a2741c; font: 800 9px/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; }
.admin-review-editor-card > header h2 { margin: 5px 0 0; font-size: 25px; }
.admin-review-question { padding: 19px 20px; border-bottom: 1px solid #e0e5ed; background: #fff; }
.admin-review-question > p { margin: 0 0 14px; color: #253d70; font: 16px/1.58 var(--font-display); white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-review-source-images { margin-top: 20px; min-width: 0; border-top: 1px solid #e0e5ed; padding-top: 16px; }
.admin-review-source-images h3, .admin-review-content-warning h3 { margin: 0 0 8px; font-size: 18px; }
.admin-review-source-images p, .admin-review-content-warning p { font: 14px/1.5 var(--font-display); }
.admin-review-source-images figure { margin: 14px 0; padding: 12px; border: 1px solid #e0e5ed; border-radius: 6px; background: #fff; }
.admin-review-source-images img { display: block; max-width: 100%; height: auto; margin: auto; }
.admin-review-source-images figcaption { margin-top: 10px; color: #5d6e8c; font: 12px/1.4 var(--font-ui); }
.admin-review-content-warning { margin-bottom: 16px; padding: 14px; border: 1px solid #dfc98e; border-radius: 6px; background: #fff9e9; color: #684d19; }
.admin-review-image-missing { color: #a13f37; }
.admin-review-question > div { display: grid; grid-template-columns: 29px 1fr; gap: 10px; align-items: start; margin-top: 7px; padding: 9px 11px; border: 1px solid #e0e5ed; border-radius: 6px; color: #3f547d; font: 13px/1.4 var(--font-display); }
.admin-review-question > div b { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #afbccf; border-radius: 50%; color: #173574; font-size: 11px; }
.admin-review-blockers { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 20px; border-bottom: 1px solid #e2e6ee; background: #f8f9fc; }
.admin-review-blockers span { padding: 5px 8px; border-radius: 999px; color: #a13f37; background: #fff0ee; font: 800 9px/1 var(--font-ui); }
.admin-review-blockers .is-clear { color: #16734c; background: #e8f6ef; }
.admin-review-core-fields,
.admin-review-secondary-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 19px 20px; }
.admin-review-core-fields { border-bottom: 1px solid #e1e6ee; }
.admin-review-field { display: grid; gap: 6px; color: #24417c; font: 700 11px/1.25 var(--font-display); }
.admin-review-field input[readonly] { color: #687794; background: #f7f8fb; }
.admin-review-span-2 { grid-column: span 2; }
.admin-review-english { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 19px 20px; border-bottom: 1px solid #e1e6ee; background: #fdfcf8; }
.admin-review-english > header { display: flex; grid-column: 1 / -1; align-items: flex-end; justify-content: space-between; gap: 16px; }
.admin-review-english > header small { color: #a06f17; font: 800 9px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.admin-review-english > header h3 { margin: 4px 0 0; font-size: 22px; }
.admin-review-english > header > span { color: #75819b; font: 11px/1.2 var(--font-display); }
.admin-review-confirmations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 18px 20px; border-bottom: 1px solid #e1e6ee; }
.admin-review-confirmations h3 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 18px; }
.admin-review-confirmations label { display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #dce2eb; border-radius: 6px; color: #405681; font: 11px/1.3 var(--font-display); }
.admin-review-confirmations input { width: 17px; height: 17px; accent-color: #173a8a; }
.admin-review-suggestions { margin: 0 20px 18px; padding: 15px; border: 1px solid #e4d1a6; border-radius: 7px; background: #fffaf0; }
.admin-review-suggestions > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-review-suggestions h3 { margin: 0; color: #805b16; font-size: 18px; }
.admin-review-suggestions header span { color: #9b7b40; font: 800 9px/1 var(--font-ui); }
.admin-review-suggestions article { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eadab7; }
.admin-review-suggestions article b { color: #8e6416; font: 800 10px/1.2 var(--font-ui); text-transform: uppercase; }
.admin-review-suggestions article p { margin: 5px 0 0; color: #53658a; font: 12px/1.45 var(--font-display); }
.admin-review-conflict { display: grid; gap: 12px; margin: 0 20px 18px; padding: 15px; border: 1px solid #e5bdb8; border-left: 4px solid #ae4a42; border-radius: 7px; background: #fff8f7; }
.admin-review-conflict > div:first-child { display: flex; align-items: flex-start; gap: 11px; }
.admin-review-conflict .icon { flex: 0 0 auto; width: 21px; height: 21px; color: #a54139; }
.admin-review-conflict span { display: grid; gap: 4px; }
.admin-review-conflict b { color: #7e302b; font: 800 13px/1.25 var(--font-display); }
.admin-review-conflict small { color: #745d5b; font: 11px/1.45 var(--font-display); }
.admin-review-conflict-actions { display: grid; min-height: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-review-conflict-actions .admin-review-action { width: 100%; }
.admin-review-publication { position: relative; display: grid; gap: 14px; margin: 0 20px 20px; padding: 18px; overflow: hidden; border: 1px solid #d9e1ed; border-left: 4px solid #b88922; border-radius: 8px; background: #fcfbf7; }
.admin-review-publication.is-published { border-left-color: #17704b; background: #f8fcfa; }
.admin-review-publication-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-review-publication-heading small { color: #9b6b14; font: 800 9px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.admin-review-publication-heading h3 { margin: 5px 0 0; color: #112e70; font-size: 21px; }
.admin-review-publication-state { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 10px; border-radius: 999px; font: 800 9px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.admin-review-publication-state.is-ready { color: #875f14; background: #fff3d8; }
.admin-review-publication-state.is-live { color: #166a48; background: #dff3e9; }
.admin-review-publication-state.is-waiting { color: #667591; background: #edf0f5; }
.admin-review-publication-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid #dde4ee; border-radius: 7px; background: #dde4ee; }
.admin-review-publication-meta > div { min-width: 0; padding: 10px 12px; background: #fff; }
.admin-review-publication-meta dt { color: #79859c; font: 700 9px/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.admin-review-publication-meta dd { margin: 5px 0 0; overflow: hidden; color: #29467d; font: 700 11px/1.35 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.admin-review-publication-note,
.admin-review-publication-requirement { margin: 0; color: #5c6e91; font: 12px/1.5 var(--font-display); }
.admin-review-publication-requirement { padding: 10px 12px; border: 1px solid #e7c3be; border-radius: 6px; color: #963e37; background: #fff7f6; }
.admin-review-publication-actions { display: flex; min-height: 44px; align-items: stretch; justify-content: flex-end; gap: 8px; }
.admin-review-publication-actions .admin-review-action { min-width: 190px; }
.admin-review-publication-confirm { display: grid; gap: 14px; padding: 17px; border: 1px solid #c9d4e5; border-top: 4px solid #173a8a; border-radius: 8px; background: #fff; box-shadow: 0 14px 35px rgba(15, 38, 90, .13); }
.admin-review-publication-confirm > div:first-child small { color: #9b6b14; font: 800 9px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.admin-review-publication-confirm h3 { margin: 5px 0 0; color: #112e70; font-size: 24px; }
.admin-review-publication-confirm p { margin: 0; color: #53658a; font: 13px/1.55 var(--font-display); }
.admin-review-publication-confirm textarea { resize: vertical; }
.admin-review-publication-conflict { display: grid; gap: 8px; padding: 12px; border: 1px solid #e5bdb8; border-radius: 7px; background: #fff8f7; }
.admin-review-publication-conflict b { color: #7e302b; font: 800 12px/1.3 var(--font-display); }
.admin-review-publication-conflict p { margin: 0; color: #745d5b; font: 11px/1.45 var(--font-display); }
.admin-review-publication-conflict .admin-review-action { justify-self: start; }
.admin-review-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 20px 20px; border-top: 1px solid #e1e6ee; background: #fcfbf7; }
.admin-review-editor-actions .is-primary { margin-left: auto; }
.admin-review-source-sheet { min-width: 0; overflow: hidden; }
.admin-review-source-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #dfe5ee; background: #fcfbf7; }
.admin-review-source-sheet > header small { color: #a17117; font: 800 8px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.admin-review-source-sheet > header h2 { margin: 5px 0 0; font-size: 20px; }
.admin-review-source-sheet > header button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #d0d9e6; border-radius: 50%; color: #25417c; background: #fff; }
.admin-review-source-sheet > header button .icon { width: 18px; height: 18px; }
.admin-review-source-sheet pre { max-height: calc(100vh - 310px); margin: 0; overflow: auto; padding: 16px; color: #304777; background: #f8f9fb; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-review-source-sheet > .admin-review-action { width: calc(100% - 32px); margin: 16px; }
.admin-review-source-empty { display: grid; min-height: 280px; place-items: center; align-content: center; padding: 22px; text-align: center; }
.admin-review-source-empty .icon { width: 34px; height: 34px; color: #b88922; }
.admin-review-source-empty p { margin: 10px 0 0; color: #6f7d99; font: 12px/1.5 var(--font-display); }
.admin-review-source-trigger { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: none; min-height: 44px; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #c59a3f; border-radius: 999px; color: #fff; background: #10245f; box-shadow: var(--shadow); font: 700 12px/1 var(--font-display); }
.admin-review-source-trigger .icon { width: 17px; height: 17px; }
.admin-review-status { position: sticky; bottom: 10px; z-index: 20; width: max-content; max-width: min(720px, 100%); margin: 14px auto 0; padding: 10px 14px; border: 1px solid #d7dfeb; border-radius: 999px; color: #425987; background: rgba(255,255,255,.96); box-shadow: 0 7px 18px rgba(17, 37, 84, .08); font: 11px/1.35 var(--font-display); text-align: center; }
.admin-review-mobile-switch { display: none; }

@media (min-width: 1200px) {
  .admin-review-layout { grid-template-columns: minmax(260px, .7fr) minmax(520px, 1.4fr) minmax(280px, .8fr); }
  .admin-review-source-sheet > header > button { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .admin-auth-shell { min-height: calc(100vh - 86px); padding: 42px; }
  .admin-review-heading { align-items: stretch; flex-direction: column; }
  .admin-review-principal { width: 100%; justify-content: space-between; }
  .admin-review-principal > span { text-align: left; }
  .admin-review-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-review-filters .admin-review-action { grid-column: 1 / -1; }
  .admin-review-layout { grid-template-columns: minmax(250px, .7fr) minmax(0, 1.5fr); }
  .admin-review-source-sheet { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(420px, 52vw); max-width: 420px; border-radius: 0; box-shadow: -18px 0 45px rgba(12, 28, 72, .18); transform: translateX(105%); transition: transform .22s ease; }
  .admin-review-source-sheet.is-open { transform: translateX(0); }
  .admin-review-source-trigger { display: flex; }
  .admin-review-english,
  .admin-review-core-fields,
  .admin-review-secondary-fields { grid-template-columns: 1fr; }
  .admin-review-span-2 { grid-column: auto; }
  .admin-review-confirmations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-review-publication-confirm { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: min(420px, 52vw); max-width: 420px; align-content: start; overflow-y: auto; padding: 28px; border-radius: 0; box-shadow: -18px 0 45px rgba(12, 28, 72, .18); }
  .admin-review-publication-confirm .admin-review-publication-actions { margin-top: auto; flex-direction: column-reverse; }
  .admin-review-publication-confirm .admin-review-action { width: 100%; }
}

@media (max-width: 767px) {
  .portal-main,
  .portal-content,
  .portal-content > * { width: 100%; min-width: 0; }
  .admin-auth-shell { min-height: calc(100vh - 72px); padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .admin-auth-shell::before { inset: 8px; }
  .admin-auth-card { gap: 16px; padding: 32px 22px; }
  .admin-auth-card h1 { font-size: 34px; }
  .admin-review-heading { gap: 18px; flex-direction: column; }
  .admin-review-heading h1 { font-size: 36px; }
  .admin-review-heading p { font-size: 14px; }
  .admin-review-persistence { align-items: stretch; flex-direction: column; }
  .admin-review-save-state { justify-content: center; }
  .admin-review-principal { width: 100%; align-items: stretch; flex-direction: column; }
  .admin-review-principal > span { text-align: left; }
  .admin-review-principal .admin-review-action { width: 100%; }
  .admin-review-filters { grid-template-columns: 1fr; }
  .admin-review-mobile-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 11px; padding: 4px; border-radius: 8px; background: #eceff5; }
  .admin-review-mobile-switch button { min-height: 44px; border: 0; border-radius: 6px; color: #647394; background: transparent; font: 700 12px/1 var(--font-display); }
  .admin-review-mobile-switch button.is-active { color: #10245f; background: #fff; box-shadow: 0 2px 8px rgba(18, 36, 79, .08); }
  .admin-review-layout { grid-template-columns: 1fr; }
  .admin-review-layout[data-mobile-view="queue"] .admin-review-editor,
  .admin-review-layout[data-mobile-view="editor"] .admin-review-queue { display: none; }
  .admin-review-queue-scroll { max-height: none; }
  .admin-review-empty-editor { min-height: 390px; }
  .admin-review-core-fields,
  .admin-review-secondary-fields,
  .admin-review-english,
  .admin-review-confirmations { grid-template-columns: 1fr; padding-inline: 15px; }
  .admin-review-span-2 { grid-column: auto; }
  .admin-review-editor-card > header,
  .admin-review-question,
  .admin-review-blockers,
  .admin-review-editor-actions { padding-inline: 15px; }
  .admin-review-english > header { align-items: flex-start; flex-direction: column; }
  .admin-review-confirmations h3 { grid-column: auto; }
  .admin-review-editor-actions { align-items: stretch; flex-direction: column; }
  .admin-review-conflict { margin-inline: 15px; }
  .admin-review-conflict-actions { grid-template-columns: 1fr; }
  .admin-review-publication { margin-inline: 15px; padding: 15px; }
  .admin-review-publication-heading { align-items: stretch; flex-direction: column; }
  .admin-review-publication-state { width: max-content; }
  .admin-review-publication-meta { grid-template-columns: 1fr; }
  .admin-review-publication-actions { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr; padding-top: 8px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); background: #fcfbf7; }
  .admin-review-publication-actions .admin-review-action { width: 100%; min-width: 0; }
  .admin-review-publication-confirm { position: fixed; z-index: 95; inset: auto 0 0; max-height: min(78vh, 680px); align-content: start; overflow-y: auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border: 0; border-top: 4px solid #173a8a; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 48px rgba(12, 28, 72, .22); }
  .admin-review-publication-confirm .admin-review-publication-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 0 -18px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
  .admin-review-editor-actions .is-primary { margin-left: 0; }
  .admin-review-source-sheet { position: fixed; z-index: 90; inset: 0; width: 100%; max-width: none; border: 0; border-radius: 0; transform: translateY(105%); transition: transform .22s ease; }
  .admin-review-source-sheet.is-open { transform: translateY(0); }
  .admin-review-source-sheet pre { max-height: calc(100vh - 170px); }
  .admin-review-source-trigger { right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); display: flex; }
  .admin-review-status { bottom: calc(78px + env(safe-area-inset-bottom)); border-radius: 8px; }
}
.admin-review-source-recovery{margin-top:1rem;padding:1rem;border:1px solid var(--color-line);border-radius:8px;background:#fff;color:var(--color-primary);min-width:0}
.admin-review-source-recovery summary{cursor:pointer;font-weight:700;color:var(--color-primary)}
.admin-review-source-recovery p,.admin-review-source-recovery small{overflow-wrap:anywhere}
.admin-review-recovered-content{white-space:pre-wrap}
.admin-review-recovered-choice{display:flex;align-items:flex-start;gap:1rem;margin:.75rem 0}
.admin-review-recovered-choice img{display:block;max-width:100%;height:auto;margin-top:.5rem}
/* Protected processing workspace: existing 4ULearning navy, gold and serif system. */
.processing-screen { max-width: 1440px; margin: 0 auto; color: var(--color-copy); }
.processing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.processing-heading small, .processing-detail header > small { color: var(--color-gold); font: 700 11px/1.5 var(--font-ui); letter-spacing: .16em; }
.processing-heading h1 { font: 700 clamp(28px,3vw,40px)/1.15 var(--font-display); color: var(--color-primary); margin: 7px 0 10px; }
.processing-heading p { color: var(--color-muted); font-size: 16px; line-height: 1.5; max-width: 740px; margin: 0; }
.processing-account { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: 14px; }
.processing-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.processing-stats article { border: 1px solid var(--color-line); background: var(--color-surface); border-radius: 10px; padding: 19px 22px; }
.processing-stats span { display: block; color: var(--color-muted); font: 500 12px/1.4 var(--font-ui); }
.processing-stats strong { display: block; color: var(--color-primary); font: 700 32px/1.25 var(--font-display); margin-top: 7px; }
.processing-health { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid #e8d7b2; background: #fffcf4; border-radius: 9px; margin-bottom: 22px; }
.processing-health > svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-gold); }
.processing-health > div { flex: 1; min-width: 0; }
.processing-health b { color: var(--color-primary); font-size: 16px; }
.processing-health p { margin: 5px 0 0; color: var(--color-muted); font: 12px/1.5 var(--font-ui); overflow-wrap: anywhere; }
.processing-health.is-healthy { border-color: #c9e2d7; background: #f5faf7; }
.processing-health.is-healthy > svg { color: var(--color-success); }
.processing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.processing-toolbar label { display: flex; align-items: center; gap: 12px; color: var(--color-primary); }
.processing-toolbar select, .processing-detail select, .processing-detail textarea { border: 1px solid var(--color-line); border-radius: 7px; color: var(--color-copy); background: #fff; padding: 10px 12px; font: 14px/1.5 var(--font-ui); min-height: 44px; max-width: 100%; }
.processing-toolbar > span { font: 12px/1.5 var(--font-ui); color: var(--color-muted); }
.processing-layout { display: grid; grid-template-columns: minmax(245px,.75fr) minmax(0,1.7fr); gap: 20px; align-items: start; }
.processing-queue, .processing-detail { min-width: 0; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; overflow: hidden; }
.processing-queue { padding: 20px 14px; }
.processing-queue h2 { font-size: 23px; color: var(--color-primary); margin: 0 8px 17px; }
.processing-row { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; width: 100%; padding: 15px 12px; margin-bottom: 6px; border: 1px solid transparent; border-bottom-color: var(--color-line); background: #fff; border-radius: 6px; text-align: left; color: var(--color-primary); cursor: pointer; }
.processing-row b { font: 600 13px/1.4 var(--font-ui); overflow-wrap: anywhere; }
.processing-row small { font: 11px/1.5 var(--font-ui); color: var(--color-muted); overflow-wrap: anywhere; }
.processing-row:hover, .processing-row.is-active { background: #f1f2f9; border-color: #dce0ee; }
.processing-badge { display: inline-block; border-radius: 20px; padding: 4px 9px; color: var(--color-copy); background: #edf0f7; font: 600 11px/1.4 var(--font-ui); }
.processing-badge.is-ready { color: #14653f; background: #e8f5ed; }
.processing-badge.is-needs-attention { color: #95491a; background: #fff0e2; }
.processing-badge.is-paused { color: #645b70; background: #eeebf2; }
.processing-detail { padding: 25px; }
.processing-detail h2 { color: var(--color-primary); font-size: 24px; margin: 8px 0 12px; overflow-wrap: anywhere; }
.processing-checks { margin: 24px 0; }
.processing-checks details { border-top: 1px solid var(--color-line); padding: 14px 0; }
.processing-checks details:last-child { border-bottom: 1px solid var(--color-line); }
.processing-checks summary { cursor: pointer; color: var(--color-primary); font-size: 17px; }
.processing-checks summary b { float: right; font: 500 12px/1.8 var(--font-ui); color: var(--color-muted); }
.processing-checks article { background: #fafbfdf0; padding: 12px; margin-top: 12px; border-radius: 6px; overflow-wrap: anywhere; font: 13px/1.65 var(--font-ui); }
.processing-checks article small { color: var(--color-muted); }
.processing-checks article p { margin: 7px 0; }
.processing-checks ul { padding-left: 18px; }
.processing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.processing-detail form { padding-top: 20px; border-top: 1px solid var(--color-line); display: grid; gap: 14px; }
.processing-detail label { display: grid; min-width: 0; gap: 7px; font: 600 12px/1.5 var(--font-ui); }
.processing-detail textarea { width: 100%; resize: vertical; box-sizing: border-box; }
.processing-detail form button { justify-self: start; }
.processing-pause { padding: 14px; margin-top: 20px; background: #f5f2f6; border-radius: 6px; overflow-wrap: anywhere; }
.processing-pause p { margin-bottom: 0; font: 13px/1.6 var(--font-ui); }
.processing-audit { margin-top: 22px; border-top: 1px solid var(--color-line); padding-top: 18px; }
.processing-audit summary { cursor: pointer; }
.processing-audit p { font: 12px/1.5 var(--font-ui); overflow-wrap: anywhere; }
.processing-audit small { display: block; color: var(--color-muted); }
.processing-empty { text-align: center; color: var(--color-muted); padding: 35px 14px; font-size: 15px; line-height: 1.6; }
.processing-empty > svg { width: 38px; height: 38px; color: var(--color-gold); }
.processing-message { position: sticky; bottom: 12px; background: var(--color-canvas); color: var(--color-primary); font-size: 14px; padding: 8px; }
.processing-message:empty { display: none; }
.processing-mobile-tabs { display: none; }
.processing-back { margin-bottom: 20px; }
.processing-screen button { min-height: 44px; }
.processing-screen :is(button,select,textarea,summary):focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.practice-evidence-feedback { margin-top: 16px; padding: 16px 18px; border-left: 3px solid var(--color-gold); border-radius: 6px; background: #f6f7fb; }
.practice-evidence-feedback h3 { margin: 0; color: var(--color-primary); font: 700 13px/1.4 var(--font-ui); }
.practice-evidence-feedback p { margin: 5px 0 13px; color: var(--color-muted); font: 14px/1.6 var(--font-ui); }
.practice-evidence-feedback p:last-child { margin-bottom: 0; }
.admin-local-preview-banner { display: grid; gap: 4px; margin: 0 0 16px; padding: 13px 16px; border: 1px solid #d9bd79; border-left: 4px solid #b88922; border-radius: 8px; color: #173574; background: #fff8e8; font: 13px/1.45 var(--font-ui); }
.admin-local-preview-banner b { color: #80580c; font-size: 14px; }
.admin-local-preview-banner span { color: #5d6d8e; }
.mistake-review-heading { padding: 2px 14px 16px; }
.mistake-review-heading h1 { margin: 0; color: var(--color-primary); font-size: clamp(38px, 3.2vw, 54px); line-height: 1; }
.mistake-review-heading p { max-width: 850px; margin: 9px 0 0; color: #62739a; font: 16px/1.5 var(--font-display); }
.mistake-review-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.mistake-review-metrics article { display: grid; min-height: 102px; grid-template-columns: 42px 48px 1fr; align-items: center; gap: 10px; padding: 15px; border: 1px solid #d9e1ee; border-radius: 8px; background: #fff; }
.mistake-review-metrics article > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; font: 700 20px/1 var(--font-ui); }
.mistake-review-metrics .is-pending { color: #943f38; background: #fff0ee; }
.mistake-review-metrics .is-reviewed { color: #14734f; background: #e8f7f0; }
.mistake-review-metrics .is-repeated { color: #80580c; background: #fff4d8; }
.mistake-review-metrics article > b { color: var(--color-primary); font: 700 32px/1 var(--font-ui); }
.mistake-review-metrics article > p { margin: 0; color: #29447f; font: 700 14px/1.35 var(--font-ui); }
.mistake-review-list { display: grid; gap: 12px; }
.mistake-review-list > header { padding: 17px 20px; border: 1px solid #d9e1ee; border-radius: 8px; background: #fff; }
.mistake-review-list > header h2 { margin: 0; color: var(--color-primary); font-size: 22px; }
.mistake-review-list > header p { margin: 4px 0 0; color: #62739a; font: 13px/1.45 var(--font-ui); }
.mistake-review-record { padding: 18px 20px; border: 1px solid #d9e1ee; border-radius: 8px; background: #fff; }
.mistake-review-record > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mistake-review-record > header small { color: #9a6d16; font: 700 11px/1.35 var(--font-ui); }
.mistake-review-record > header h2 { margin: 5px 0 0; color: var(--color-primary); font-size: 19px; }
.mistake-review-record > header p { margin: 4px 0 0; color: #62739a; font: 12px/1.4 var(--font-ui); overflow-wrap: anywhere; }
.mistake-review-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; font: 700 11px/1.25 var(--font-ui); }
.mistake-review-status.is-pending { color: #943f38; background: #fff0ee; }
.mistake-review-status.is-reviewed { color: #14734f; background: #e8f7f0; }
.mistake-review-record dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.mistake-review-record dl > div { min-width: 0; padding: 10px 12px; border: 1px solid #e1e6ee; border-radius: 6px; }
.mistake-review-record dt { color: #68799d; font: 700 10px/1.35 var(--font-ui); text-transform: uppercase; }
.mistake-review-record dd { margin: 5px 0 0; color: #173574; font: 600 13px/1.45 var(--font-ui); overflow-wrap: anywhere; }
.mistake-review-explanation { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--color-gold); border-radius: 5px; background: #f6f7fb; }
.mistake-review-explanation h3 { margin: 0; color: var(--color-primary); font: 700 12px/1.4 var(--font-ui); }
.mistake-review-explanation p { margin: 5px 0 0; color: #53689a; font: 13px/1.55 var(--font-ui); white-space: pre-line; }
.mistake-review-empty { display: grid; min-height: 235px; place-items: center; align-content: center; gap: 9px; padding: 25px; border: 1px dashed #cbd5e4; border-radius: 8px; color: #62739a; background: #fff; text-align: center; }
.mistake-review-empty > .icon { width: 34px; height: 34px; color: var(--color-gold); }
.mistake-review-empty h3 { max-width: 520px; margin: 0; color: var(--color-primary); font: 700 18px/1.35 var(--font-display); }
.mistake-review-empty p { margin: 0; font: 13px/1.45 var(--font-ui); }
.local-mistake-review-preview { display: grid; gap: 14px; }
.local-mistake-preview-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.local-mistake-preview-controls .secondary-button { text-decoration: none; }
.local-mistake-preview-controls .secondary-button.is-active { border-color: #b88922; color: #173574; background: #fff8e8; }
.local-mistake-preview-back { margin-left: auto; color: #173574; font: 600 13px/1.4 var(--font-ui); }
@media(max-width:760px) { .local-mistake-preview-back { margin-left: 0; flex-basis: 100%; } }
@media(max-width:760px) {
  .mistake-review-heading { padding: 2px 8px 14px; }
  .mistake-review-heading h1 { font-size: 38px; }
  .mistake-review-metrics { grid-template-columns: 1fr; gap: 8px; }
  .mistake-review-metrics article { min-height: 76px; }
  .mistake-review-record { padding: 15px; }
  .mistake-review-record > header { flex-direction: column; }
  .mistake-review-record dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:1100px) {
  .processing-heading { flex-direction: column; gap: 16px; }
  .processing-layout { grid-template-columns: minmax(225px,.8fr) minmax(0,1.3fr); gap: 14px; }
  .processing-detail { padding: 20px; }
  .processing-stats { gap: 10px; }
  .processing-stats article { padding: 15px; }
}
@media(max-width:700px) {
  .processing-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .processing-layout { display: block; }
  .processing-mobile-tabs { display: flex; gap: 8px; margin: 16px 0; }
  .processing-layout[data-mobile-view="queue"] .processing-detail,
  .processing-layout[data-mobile-view="detail"] .processing-queue { display: none; }
  .processing-toolbar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .processing-toolbar label { width: 100%; }
  .processing-toolbar select { flex: 1; min-width: 0; }
  .processing-health { flex-wrap: wrap; padding: 14px; }
  .processing-health > div { flex-basis: calc(100% - 40px); }
  .processing-health > button { margin-left: 38px; }
  .processing-detail { padding: 18px; }
  .processing-detail select { width: 100%; }
  .processing-detail h2 { font-size: 21px; }
  .processing-heading h1 { font-size: 29px; }
  .processing-heading p { font-size: 15px; }
}

.local-learner-preview-banner { display: grid; gap: 6px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid #d9bd79; border-left: 4px solid #b88922; border-radius: 9px; color: #173574; background: #fff8e8; font: 13px/1.5 var(--font-ui); }
.local-learner-preview-banner b { color: #80580c; font-size: 14px; letter-spacing: .02em; }
.local-learner-preview-banner span { color: #5d6d8e; }
.local-learner-preview-banner a { width: fit-content; color: #173574; font-weight: 700; }
.student-review-list{margin:8px 0 24px;padding:20px;border:1px solid #d9e1ee;border-radius:12px;background:#fff;box-shadow:0 5px 18px #172b5410}.student-review-list>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.student-review-list>header h2{margin:0;color:var(--color-primary);font-size:24px}.student-review-list>header p{margin:5px 0 0;color:#68789d}.student-review-list .mistake-review-record{margin:12px 0;padding:18px;border:1px solid #e0e6f0;border-radius:10px;background:#fcfdff}.mistake-review-record>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.mistake-review-record>header small{color:#69799c;font-size:12px}.mistake-review-record>header h2{margin:5px 0;color:#172b58;font-size:20px}.mistake-review-record>header p{margin:4px 0;color:#66789c}.mistake-review-status{flex:0 0 auto;padding:7px 10px;border-radius:99px;color:#88600c;background:#fff4d5;font-size:12px;font-weight:700}.mistake-review-status.is-reviewed{color:#166346;background:#e8f6ef}.mistake-review-record dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.mistake-review-record dl>div{padding:11px;border-radius:8px;background:#f4f6fa}.mistake-review-record dt{color:#6b7892;font-size:12px}.mistake-review-record dd{margin:5px 0 0;color:#18284e;font-weight:600}.mistake-review-explanation{padding:14px;border-left:3px solid #c58a15;border-radius:5px;background:#fffaf0}.mistake-review-explanation h3{margin:0 0 6px;color:#64480e;font-size:14px}.mistake-review-explanation p{margin:0 0 12px;color:#394968;line-height:1.55}.mistake-review-explanation p:last-child{margin-bottom:0}.student-review-schedule{display:grid;gap:10px;margin-top:14px}.student-review-schedule>p,.vocabulary-review-schedule>p{margin:0;color:#657393;font-size:13px}.student-review-schedule>div,.vocabulary-review-schedule>div{display:flex;flex-wrap:wrap;gap:8px}.student-review-schedule button,.vocabulary-review-schedule button,.mistake-review-archive{min-height:36px;padding:7px 12px;border:1px solid #cbd5e5;border-radius:7px;color:#213866;background:#fff;font:600 13px var(--font-display);cursor:pointer}.student-review-schedule button:hover:not(:disabled),.vocabulary-review-schedule button:hover:not(:disabled){border-color:#b27a13;background:#fff9e9}.student-review-schedule button:disabled,.vocabulary-review-schedule button:disabled{opacity:.55;cursor:default}.student-review-schedule .mistake-review-archive{justify-self:start;color:#8a3835;border-color:#ecc9c6}.mistake-save-action{margin:4px 8px 12px 0;padding:10px 14px;border:1px solid #b68018;border-radius:7px;color:#78510c;background:#fff9e9;font-weight:700;cursor:pointer}.mistake-save-action:disabled{opacity:.6}.mistake-save-confirmation{color:#176b4c;font-weight:700}.mistake-save-error,.vocab-action-error{color:#a03630}.vocabulary-review-schedule{display:grid;gap:8px;margin:14px 0;padding:13px;border:1px solid #e2e7ef;border-radius:8px;background:#f8f9fc}.vocabulary-review-schedule>p:first-child{color:#213866;font-weight:700}.vocabulary-schedule-status{display:block;margin:12px 0;color:#76829a}.mistake-recorded-history{margin:20px 0}.mistake-recorded-history>summary{padding:10px;color:#53658c;cursor:pointer;font-weight:700}.mistake-review-empty{padding:24px;border:1px dashed #d7deea;border-radius:9px;text-align:center}.mistake-review-empty h3{margin:0 0 8px;color:#23365f}.mistake-review-empty p{color:#657393}.mistake-review-empty button{padding:8px 12px;border:1px solid #cbd5e5;border-radius:6px;color:#203763;background:white}@media(max-width:640px){.student-review-list{padding:14px}.student-review-list>header h2{font-size:20px}.mistake-review-record>header{display:grid}.mistake-review-record dl{grid-template-columns:1fr}.student-review-schedule>div,.vocabulary-review-schedule>div{display:grid;grid-template-columns:1fr 1fr}.student-review-schedule button,.vocabulary-review-schedule button{width:100%}}
.full-length-categories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.full-length-category,.full-length-pending { padding: 18px; border: 1px solid #d8e0ed; border-radius: 8px; background: #fff; }
.full-length-category > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.full-length-category > header h2,.full-length-pending h2 { margin: 0; font-size: 20px; }
.full-length-category > header span { min-width: 28px; padding: 3px 8px; border-radius: 99px; background: #eef1f9; text-align: center; }
.full-length-category .test-card-grid,.full-length-pending .test-card-grid { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.full-length-pending,.full-length-exposure-notice,.full-length-catalog-warning,.full-length-categories > article[role="status"] { grid-column: 1 / -1; }
.full-length-pending > p,.full-length-exposure-notice { color: #52638e; line-height: 1.5; }
.full-length-exposure-notice,.full-length-preview-notice,.full-length-catalog-warning { padding: 12px 16px; border: 1px solid #ead7a2; border-radius: 8px; background: #fff8e6; color: #684f12; line-height: 1.5; }
.full-length-preview-notice { margin: 14px 0; }
.full-length-preview-notice b { margin-right: 8px; }
.full-length-schedule-control { display: grid; gap: 7px; margin: 10px 0; color: #52638e; font-size: 13px; }
.full-length-schedule-control input { min-height: 40px; padding: 7px 10px; border: 1px solid #cbd5e4; border-radius: 5px; color: var(--color-primary); font: inherit; }
.test-exposure-label { color: #52638e; font-size: 12px; }
.full-tests-recovery { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 760px) {
  .full-length-categories { grid-template-columns: 1fr; }
  .full-length-category,.full-length-pending { padding: 14px; }
  .full-length-category .test-card-grid,.full-length-pending .test-card-grid { grid-template-columns: 1fr; }
}
/* Terms of Service and Privacy Policy */
.legal-shell{background:var(--color-canvas);min-height:100vh}
.legal-page{max-width:760px;margin:0 auto;padding:16px 24px 64px}
.legal-brand{padding:12px 0 8px}
.legal-document h1{font-size:32px;margin:18px 0 4px}
.legal-document .legal-effective{color:var(--color-muted);font-size:14px;margin:0 0 28px}
.legal-document h2{font-size:21px;margin:32px 0 10px;padding-top:18px;border-top:1px solid var(--color-line)}
.legal-document h3{font-size:16px;margin:22px 0 8px}
.legal-document p{font-size:15.5px;line-height:1.75;margin:0 0 14px}
.legal-document ul{margin:0 0 16px;padding-left:22px}
.legal-document li{font-size:15.5px;line-height:1.7;margin:7px 0}
.legal-footer{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:48px;
  padding-top:20px;border-top:1px solid var(--color-line);font-size:13px;color:var(--color-muted)}
.legal-footer .legal-link{background:none;border:0;padding:0;font:inherit;color:var(--color-primary);
  text-decoration:underline;cursor:pointer}
.legal-footer [aria-current="page"]{color:var(--color-muted);text-decoration:none}
/* The trademark notice. One line, every page: the footer carries it so the
   notice is never further away than the page the learner is reading. It
   takes the whole width of the footer rather than sitting between links. */
.site-trademark{flex-basis:100%;margin:0;font-size:12px;line-height:1.6;color:var(--color-muted)}
.portal-foot{margin:0;padding:20px 32px 28px;border-top:1px solid var(--color-line)}
@media(max-width:900px){.portal-foot{padding:16px 20px 24px}}
@media(max-width:767px){.portal-foot{padding:14px 16px calc(84px + env(safe-area-inset-bottom))}}
.legal-return{max-width:760px;margin:0 auto;padding:0 24px 56px}
@media(max-width:620px){.legal-page{padding:12px 16px 48px}.legal-document h1{font-size:26px}.legal-return{padding:0 16px 40px}}

/* A question that is a table of data, or a list of notes. The renderer emits
   the structure and no attributes, so everything here is the stylesheet's. */
/* A script the editor wrote apart from its base -- "x" in the sentence and
   the exponent in a formula of its own. A formula is an atomic box, so a
   narrow screen was free to put a line break between the two; this keeps
   them on one line. It changes nothing about what is drawn. */
.question-keeps-together { white-space: nowrap; }

.question-table-scroll { overflow-x: auto; max-width: 100%; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.question-table-scroll table { border-collapse: collapse; min-width: max-content; font-size: 15px; }
.question-table-scroll th,
.question-table-scroll td { padding: 7px 12px; border: 1px solid #c9d2e3; text-align: left; vertical-align: top; }
.question-table-scroll th,
/* The source often marks the header row with the first row rather than a
   <thead>, so the first row reads as the header either way. */
.question-table-scroll tr:first-child td { background: #eef2fa; font-weight: 600; }
.adaptive-question ul, .adaptive-question ol,
.diagnostic-question ul, .diagnostic-question ol { margin: 8px 0 8px 22px; padding: 0; }
.adaptive-question li, .diagnostic-question li { margin: 4px 0; }
.question-centered { text-align: center; }
/* MathML renders a notch smaller than the text around it, and a fraction
   written as one stacked pair of digits is the hardest case to read. */
.adaptive-question math, .diagnostic-question math { font-size: 1.15em; }
.adaptive-question mfrac, .diagnostic-question mfrac { font-size: 1.1em; }

/* A source figure sits on its own line and never wider than the column. */
.question-figure { margin: 10px 0; }
.question-figure img { max-width: 100%; height: auto; }

@media (max-width: 767px) {
  .question-table-scroll { margin-inline: -4px; }
  .question-table-scroll table { font-size: 14px; }
  .question-table-scroll th, .question-table-scroll td { padding: 6px 9px; }
}

/* Notes in a rhetorical-synthesis question. The source writes them as
   bullet lines inside a run of text, so a line that wraps starts again under
   its own bullet; as a list, it lines up with the first line instead. */
.question-notes { margin: 8px 0; padding-left: 22px; list-style: disc outside; }
.question-notes li { margin: 4px 0; }
/* The sentence that asks, on its own. */
.question-ask { margin: 14px 0 0; }

/* The administrator's console. A table, a search box and one dangerous
   button; nothing here is a dashboard. */
.admin-console{padding:22px 26px;max-width:1280px}
.admin-console-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.admin-console-head h1{margin:0;font-size:22px}
.admin-console-search{display:flex;gap:8px}
.admin-console-search input{min-width:220px;padding:7px 10px;border:1px solid #d7dbe4;border-radius:7px}
.admin-console-search button{padding:7px 14px;border:1px solid #d7dbe4;border-radius:7px;
  background:#fff;cursor:pointer}
/* The table is wider than a narrow window, and the actions are its last
   column. Clipped, the delete button is simply unreachable -- which read as
   "clicking Delete does nothing". The table scrolls, and the actions stay
   pinned to the right edge so they are always in reach. */
.admin-console-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-console-table{width:100%;border-collapse:collapse;font-size:13px;min-width:1040px}
/* A table inside a card is as wide as its own columns need, not as wide as
   the list of accounts. */
.admin-console-table.admin-skill-table{min-width:560px}
.admin-console-table th:last-child,.admin-console-table td:last-child{
  position:sticky;right:0;background:#fff;box-shadow:-8px 0 8px -8px rgba(16,36,95,.18)}
.admin-console-table tr:hover td:last-child{background:#fafbfd}
.admin-console-table thead th:last-child{background:#fff;z-index:1}
/* Wide enough for nine columns to say their own names. At 720px the
   headings were squeezed until the pinned Actions column painted over
   them, and "ADAPTIVE" read as "ADAPTIV". */
/* A heading of two words may take two lines rather than a column's whole
   width. What it may not do is lose a letter: "ADAPTIVE" read as "ADAPTIV"
   when the pinned column painted over it, which is a different fault and
   has its own rule. */
.admin-console-table th{text-align:left;font:600 11px var(--font-ui,system-ui);letter-spacing:.06em;
  text-transform:uppercase;color:#6b7280;border-bottom:1px solid #e5e7eb;padding:8px 5px;
  white-space:normal;overflow-wrap:normal}
/* The address is the widest thing in the table and the only one that can
   be any length. Bounded, it lets the other eight columns fit the room
   there is; unbounded, the table overflowed by a little and the pinned
   Actions column sat on top of "Last sign in". It wraps rather than being
   cut, so the whole address is still readable. */
/* And never narrower than a readable address: with no floor, twelve
   columns squeezed this one to forty pixels and the address came down the
   page a letter at a time. */
.admin-console-table td:first-child{min-width:168px;max-width:188px;overflow-wrap:anywhere}
/* Dates and the pass are one line each. "beta to 2026-12-31" used to stack
   into four. Registered, Pass, Diagnostic, Adaptive, Last active and Last
   sign in, by position in the list's own table. */
.admin-console-table td:nth-child(2),.admin-console-table td:nth-child(5),
.admin-console-table td:nth-child(6),.admin-console-table td:nth-child(7),
.admin-console-table td:nth-child(10),.admin-console-table td:nth-child(11){white-space:nowrap}
.admin-console-table.admin-skill-table td{white-space:normal}
.admin-console-table td{border-bottom:1px solid #f1f2f5;padding:9px 5px;vertical-align:top}
.admin-console-table tr:hover td{background:#fafbfd}
.admin-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#eef3ff;color:#1d4ed8;font-size:11px}
.admin-tag.is-test{background:#f3f4f6;color:#6b7280}
.admin-console-actions{white-space:nowrap;min-width:124px}
.admin-console-link{background:none;border:none;color:#1d4ed8;cursor:pointer;padding:2px 6px;
  font-size:13px;text-decoration:underline}
.admin-console-danger{background:#fff;border:1px solid #e3b4b4;color:#a21b1b;border-radius:6px;
  padding:3px 9px;cursor:pointer;font-size:12.5px}
.admin-console-danger[disabled]{opacity:.5;cursor:not-allowed}
.admin-console-empty,.admin-console-note{color:#6b7280;font-size:13px}
.admin-console-detail{display:grid;grid-template-columns:200px 1fr;gap:8px 18px;font-size:14px;
  margin:0 0 16px}
.admin-console-detail dt{color:#6b7280}
.admin-console-detail dd{margin:0}
/* How far a student has got, while there is no report to open yet. A list,
   because it is a list: one line per module and nothing hanging on anything. */
.admin-console-progress{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.admin-console-progress li{color:#4b5563;font-size:13px}
.admin-console-progress li:first-child{color:#111827;font-size:14px}
/* Somebody else's report, open in the console. The band says so at the top of
   the page and stays there, because the report below it is written in the
   second person and would otherwise read as the reader's own. */
.admin-viewing-banner{margin:0 auto 14px;max-width:960px;padding:9px 14px;border-radius:8px;
  border:1px solid #e3cf9a;background:#fdf7e7;color:#6b4e13;font-size:13.5px;font-weight:600}
.admin-console-confirm{margin-top:16px;border:1px solid #e3b4b4;background:#fffafa;border-radius:9px;
  padding:14px 16px;max-width:620px}
.admin-console-confirm input{display:block;margin:10px 0;padding:7px 10px;width:100%;
  border:1px solid #d7dbe4;border-radius:7px}
/* "A new version is available", in the corner. Fixed, so it never moves
   anything on the page it is offered over, and out of the way of the
   phone's own bar at the foot. */
.release-notice{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;
  gap:10px;padding:10px 12px;border:1px solid #cbd6e8;border-radius:9px;background:#fff;
  box-shadow:0 10px 30px rgba(12,26,62,.18);color:#1d315d;font:14px var(--font-ui,system-ui)}
.release-refresh{min-height:36px;padding:6px 14px;border:0;border-radius:6px;cursor:pointer;
  background:var(--color-primary,#10245f);color:#fff;font:600 14px var(--font-ui,system-ui)}
@media (max-width:767px){
  .release-notice{right:12px;left:12px;bottom:84px;justify-content:space-between}
}

/* The learning record: one card per part of it, each as tall as what is in
   it, side by side where there is room and stacked where there is not. */
.admin-record{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.admin-card{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:14px 16px}
.admin-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.admin-card-head h2{margin:0;font:600 15px var(--font-ui,system-ui);color:#111827}
/* A figure is as wide as it needs and wraps to the next line; nothing is
   stretched to fill a track it does not need. */
.admin-figures{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.admin-figure{min-width:0;padding:9px 11px;border-radius:8px;background:#f8fafc}
.admin-figure small{display:block;color:#6b7280;font-size:11.5px}
.admin-figure b{display:block;margin-top:2px;color:#111827;font:600 18px var(--font-ui,system-ui);
  overflow-wrap:anywhere}
.admin-figure span{display:block;margin-top:2px;color:#6b7280;font-size:11.5px;
  overflow-wrap:anywhere}
.admin-skill-table tbody tr.admin-table-part th{background:#f8fafc;color:#374151;
  text-transform:none;letter-spacing:0;font-size:12px;border-bottom:1px solid #e5e7eb}
.admin-record .admin-console-note{margin:10px 0 0}
.admin-record .admin-console-scroll{margin-top:10px}
/* Fourteen days, newest on the right. The count is the fact; the shade only
   says which days were busier than which. */
.admin-days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;
  list-style:none;margin:0;padding:0}
.admin-day{min-width:0;padding:6px 2px;border-radius:6px;text-align:center;background:#f3f4f6}
.admin-day b{display:block;font:600 13px var(--font-ui,system-ui);color:#111827;min-height:16px}
.admin-day small{display:block;color:#6b7280;font-size:10px}
.admin-day.is-level-1{background:#e8f0fe}
.admin-day.is-level-2{background:#cfe0fd}
.admin-day.is-level-3{background:#aecbfb}
.admin-day.is-level-4{background:#8ab4f8}

@media (min-width:1100px){
  .admin-record{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The two widest get the whole width: the skill table and the fortnight.
     The rest pair up, so no card is left with half a screen beside it. */
  .admin-record>section:nth-child(3),.admin-record>section:nth-child(7){grid-column:1 / -1}
}
@media (max-width:760px){
  .admin-console{padding:16px 12px}
  .admin-console-table{font-size:12px}
  .admin-console-detail{grid-template-columns:1fr;gap:2px 0}
  .admin-console-detail dt{margin-top:8px}
  .admin-figures{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  /* Fourteen cells will not fit a phone in one row; two rows of seven do. */
  .admin-days{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* Adaptive Practice home. The mock-ups are the standard: the classes and the
   numbers come from 示意图/site.css, scoped so nothing else on the site
   changes. Three widths, the ones the site already uses: 1200 and up is the
   two-column layout, 768 to 1199 puts the practice card under the
   recommendation, 767 and down turns it into a sheet. */
.adaptive-home{padding:0 2px}
.adaptive-home .two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;
  align-items:start}
.adaptive-home .home-left{display:flex;flex-direction:column;gap:16px;min-width:0}
.adaptive-home .card{border:1px solid #d9e0ec;border-radius:9px;background:rgba(255,255,255,.96)}
.adaptive-home .heading{display:flex;min-height:96px;align-items:flex-start;
  justify-content:space-between;gap:32px;margin-bottom:14px;padding:4px 2px 0}
.adaptive-home .heading h1{margin:0;font-size:48px;line-height:1;letter-spacing:-.035em}
.adaptive-home .heading p{margin:8px 0 0;color:#68789d;font-family:var(--font-display);font-size:18px}
.adaptive-home .heading blockquote{margin:6px 8px 0 0;color:#8b6315;
  font:italic 16px/1.45 var(--font-display);text-align:right}
.adaptive-home .eyebrow{color:#a47215;font:800 10px/1.2 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase}

/* The recommendation card, and the "continue your set" card built from the
   same parts. The second one is now also offered on the Dashboard, which is
   outside this page's scope, so the card's own look is written once here
   without it and the Adaptive home keeps nothing but its place in the
   layout. Before this it arrived on the Dashboard with no box at all. */
.reco{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 26px;border:1px solid #e7d6a6;border-radius:9px;background:#fffaf0}
.reco h2{margin:6px 0 4px;font-size:26px}
.reco p{margin:0;color:#5b6a8f;font:15px/1.5 var(--font-display)}
.reco .eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a6d1f;font-weight:700}
/* On the Dashboard it is one of the page's cards, so it keeps their width
   and the gap between them. */
.student-account+.reco,.reco+.entry-next{margin:18px auto 0;max-width:var(--entry-width,none)}
.reco .btn-primary{display:inline-flex;min-height:44px;align-items:center;gap:8px;
  padding:11px 18px;border:0;border-radius:8px;background:var(--color-primary);
  color:#fff;font:600 14px var(--font-ui,system-ui);cursor:pointer;white-space:nowrap}
.adaptive-home .btn-primary{display:inline-flex;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 22px;border:0;border-radius:6px;color:#fff;
  background:var(--color-primary);font:600 16px/1 var(--font-display);text-decoration:none;
  white-space:nowrap}
.adaptive-home .btn-primary svg{width:17px;height:17px}
.adaptive-home .btn-ghost{display:inline-flex;min-height:44px;align-items:center;gap:8px;
  padding:10px 18px;border:1px solid #cbd6e8;border-radius:6px;color:var(--color-primary);
  background:#fff;font:600 15px/1 var(--font-display)}

.adaptive-home .map{padding:8px 24px 14px}
.adaptive-home .subject{padding:16px 0 6px}
.adaptive-home .subject + .subject{border-top:1px solid #e3e8f0}
.adaptive-home .subject-head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:6px}
.adaptive-home .subject-head h2{margin:0;font-size:24px}
.adaptive-home .subject-head span{color:#6d7a98;font:14px var(--font-display)}
.adaptive-home .domain{border-top:1px solid #edf0f5}
.adaptive-home .domain-row{display:flex;width:100%;align-items:center;gap:12px;padding:12px 4px;
  border:0;background:transparent;text-align:left}
.adaptive-home .domain-row b{flex:1;color:var(--color-primary);font:600 17px/1.3 var(--font-display)}
.adaptive-home .domain-row small{color:#6d7a98;font:13px var(--font-ui)}
.adaptive-home .chev{width:16px;height:16px;color:#6d7a98;flex:0 0 auto}
.adaptive-home .mini-dots{display:flex;gap:4px}
.adaptive-home .domain-skills{padding-bottom:8px}
.adaptive-home .skill-row{display:grid;width:100%;
  grid-template-columns:minmax(0,1fr) 112px 88px 92px 24px;align-items:center;gap:12px;
  padding:10px 12px 10px 32px;border:0;border-radius:7px;color:#243761;background:transparent;
  text-align:left}
.adaptive-home .skill-row:hover,.adaptive-home .skill-row.is-focus{background:#f3f6fd}
.adaptive-home .skill-row.is-focus{box-shadow:0 0 0 1px #3158ad inset}
.adaptive-home .skill-name{font:16px/1.35 var(--font-display);color:#1d315d}
.adaptive-home .status{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--font-ui)}
.adaptive-home .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.adaptive-home .weak .dot,.adaptive-home .dot.weak{background:#c2412d}
.adaptive-home .weak{color:#a3351f}
.adaptive-home .dev .dot,.adaptive-home .dot.dev{background:#d89a21}
.adaptive-home .dev{color:#8a5f0c}
.adaptive-home .strong .dot,.adaptive-home .dot.strong{background:#178957}
.adaptive-home .strong{color:#126b44}
.adaptive-home .untested .dot,.adaptive-home .dot.untested{background:#fff;border:2px solid #9aa5bb}
.adaptive-home .untested{color:#66728f}
.adaptive-home .count{color:#5b6a8f;font:13px var(--font-ui);text-align:right}
/* As wide as its words, centred in its column: a grid item is stretched
   to its track unless it is told otherwise, and a pill twice the width of
   what it says reads as a button. */
.adaptive-home .miss{display:inline-flex;justify-content:center;padding:3px 9px;border-radius:999px;
  color:#9b3a26;background:#fdeee9;font:600 12px var(--font-ui);white-space:nowrap;
  width:max-content;justify-self:center}
.adaptive-home .miss.none{color:#9aa5bb;background:transparent;font-weight:500}
.adaptive-home .legend{display:flex;gap:18px;flex-wrap:wrap;padding:12px 24px;
  border-top:1px solid #e3e8f0;color:#5b6a8f;font:13px var(--font-ui)}
.adaptive-home .legend span{display:inline-flex;align-items:center;gap:6px}
.adaptive-home .legend-note{margin-left:auto}

.adaptive-home .setup{padding:22px 22px 20px}
.adaptive-home .setup h2{margin:0 0 4px;font-size:24px}
.adaptive-home .setup > p{margin:0 0 18px;color:#68789d;font:15px/1.45 var(--font-display)}
.adaptive-home .setup-handle{display:none}
.adaptive-home .field{margin-bottom:18px}
.adaptive-home .field > label,.adaptive-home .field > span{display:block;margin-bottom:8px;
  color:#243761;font:600 13px var(--font-ui)}
.adaptive-home .select{display:flex;width:100%;min-height:46px;align-items:center;
  justify-content:space-between;padding:10px 14px;border:1px solid #cbd6e8;border-radius:7px;
  background:#fff;color:#1d315d;font:16px var(--font-display);text-align:left}
.adaptive-home .select small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-home .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  border:1px solid #d9e0ec;border-radius:9px;background:#f4f6fa}
.adaptive-home .seg button{min-height:44px;border:0;border-radius:6px;background:transparent;
  color:#4a5b82;font:600 15px var(--font-display)}
.adaptive-home .seg button.on{color:#fff;background:var(--color-primary);
  box-shadow:0 2px 6px rgba(16,36,95,.18)}
.adaptive-home .hint{margin:7px 2px 0;color:#6d7a98;font:12px/1.45 var(--font-ui)}
.adaptive-home .setup .btn-primary{width:100%;margin-top:4px}
.adaptive-home .setup-foot{margin:14px 0 0;padding-top:14px;border-top:1px solid #e3e8f0;
  color:#5b6a8f;font:13px/1.5 var(--font-ui)}
.adaptive-home .setup-mistakes{color:#9b3a26}
.adaptive-home .link-btn{border:0;background:transparent;color:#1e4da8;
  font:600 13px var(--font-ui);text-decoration:underline;padding:0}
.adaptive-home-loading{color:#68789d;font:15px var(--font-display);padding:18px 2px}

.adaptive-home .field{position:relative}
.adaptive-home .scope-menu{position:absolute;z-index:20;right:0;left:0;max-height:320px;
  overflow:auto;margin-top:4px;padding:6px;border:1px solid #cbd6e8;border-radius:9px;
  background:#fff;box-shadow:0 14px 34px rgba(12,26,62,.16)}
.adaptive-home .scope-group{margin:8px 8px 4px;color:#6d7a98;font:700 11px var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase}
.adaptive-home .scope-option{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;
  background:transparent;color:#1d315d;font:15px var(--font-display);text-align:left}
.adaptive-home .scope-option.is-skill{padding-left:24px;color:#4a5b82;font-size:14px}
.adaptive-home .scope-option:hover{background:#f3f6fd}
.adaptive-home .scope-option.is-chosen{background:#eef2fb;font-weight:700}
.adaptive-home .setup-shortfall{margin:0 0 12px;padding:10px 12px;border-radius:7px;
  color:#7a4a10;background:#fff6e4;font:13px/1.5 var(--font-ui)}
.adaptive-home .setup-ways{display:grid;gap:8px}
.adaptive-home .setup-ways .btn-ghost{width:100%;justify-content:center;text-align:center}

/* iPad: one column, the practice card under the recommendation with its
   fields side by side. */
@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-home .two-col{grid-template-columns:minmax(0,1fr)}
  /* The three cards become one column, and the practice card moves up to sit
     under the recommendation the way the mock-up has it. */
  .adaptive-home .home-left{display:contents}
  .reco{order:1}
  .adaptive-home .setup{order:2}
  .adaptive-home .home-left > .card{order:3}
  .adaptive-home .heading h1{font-size:38px}
  .adaptive-home .setup{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr 1fr;
    gap:0 18px;align-items:start}
  .adaptive-home .setup h2{grid-column:1/-1}
  .adaptive-home .setup > p{grid-column:1/-1}
  .adaptive-home .setup .btn-primary{grid-column:1/-1}
  .adaptive-home .setup-foot{grid-column:1/-1}
  .adaptive-home .skill-row{grid-template-columns:minmax(0,1fr) 104px 76px 84px 20px;
    padding-left:24px}
}

/* Phone: the practice card becomes a sheet at the bottom, and a skill is one
   line with its status under the name. */
@media (max-width: 767px) {
  .adaptive-home .heading{display:block;min-height:0;margin-bottom:10px}
  .adaptive-home .heading h1{font-size:32px}
  .adaptive-home .heading p{font-size:15px;margin-top:4px}
  .adaptive-home .heading blockquote{display:none}
  .adaptive-home .two-col{display:block}
  .adaptive-home .home-left{padding-bottom:84px}
  .reco{display:block;padding:14px 16px}
  .reco h2{font-size:21px}
  .adaptive-home .eyebrow-rest{display:none}
  .adaptive-home .reco .btn-primary{width:100%;margin-top:10px}
  .adaptive-home .map{padding:4px 14px 6px}
  .adaptive-home .subject-head h2{font-size:20px}
  .adaptive-home .domain-row{flex-wrap:wrap;padding:12px 0}
  .adaptive-home .domain-row .chev{order:0}
  .adaptive-home .domain-row b{order:1;flex:1 1 auto;font-size:16px}
  .adaptive-home .domain-row .mini-dots{order:2}
  .adaptive-home .domain-row small{order:3;flex-basis:100%;margin-left:28px}
  .adaptive-home .setup.is-open .scope-menu{max-height:46vh}
  .adaptive-home .skill-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;
    padding:11px 0;border-top:1px solid #edf0f5;border-radius:0}
  .adaptive-home .skill-name{grid-column:1;grid-row:1}
  .adaptive-home .skill-row .status{grid-column:2;grid-row:1;justify-self:end;font-size:12px}
  .adaptive-home .skill-name{font-size:15px}
  .adaptive-home .skill-row .count{grid-column:1;grid-row:2;text-align:left;font-size:12px}
  .adaptive-home .skill-row .miss{grid-column:2;grid-row:2;justify-self:end}
  .adaptive-home .skill-row .chev{display:none}
  .adaptive-home .legend{gap:10px 14px;padding:10px 14px;font-size:12px}
  .adaptive-home .legend-note{margin-left:0;flex-basis:100%}
  .adaptive-home .setup{position:fixed;right:0;left:0;z-index:30;
    bottom:calc(68px + env(safe-area-inset-bottom));
    max-height:78vh;overflow:auto;padding:0 16px 16px;border:0;border-radius:16px 16px 0 0;
    background:#fff;box-shadow:0 -10px 30px rgba(9,25,68,.14)}
  .adaptive-home .setup-handle{display:flex;width:100%;flex-direction:column;align-items:center;
    gap:8px;padding:10px 0 12px;border:0;background:transparent;
    color:var(--color-primary);font:600 16px var(--font-display)}
  .adaptive-home .setup-handle .grab{width:40px;height:4px;border-radius:99px;background:#cfd6e3}
  .adaptive-home .setup h2,.adaptive-home .setup > p,.adaptive-home .setup .field,
  .adaptive-home .setup .btn-primary,.adaptive-home .setup .setup-foot{display:none}
  .adaptive-home .setup.is-open h2{display:block;font-size:19px;margin-bottom:2px}
  .adaptive-home .setup.is-open > p{display:block;margin-bottom:14px;font-size:14px}
  .adaptive-home .setup.is-open .field{display:block;margin-bottom:14px}
  .adaptive-home .setup.is-open .btn-primary{display:inline-flex}
  .adaptive-home .setup.is-open .setup-foot{display:block}
  .adaptive-home .setup.is-open .setup-handle span:last-child{display:none}
}

/* The rail the student can put away. Collapsed it is the same 88px icon rail
   the iPad already shows, so there is one collapsed look rather than two; at
   1199 and below the rail is already that shape, so the button is hidden
   there and on a phone, where the rail is a drawer. */
.portal-rail-toggle{display:none}
@media (min-width: 1200px) {
  .portal-rail-toggle{display:flex;width:calc(100% - 24px);min-height:44px;align-items:center;
    gap:12px;margin:0 12px 16px;padding:10px 14px;border:1px solid #e2e6ee;border-radius:9px;
    color:#5b6a8f;background:#fff;font:600 14px var(--font-display);text-align:left}
  .portal-rail-toggle:hover{color:var(--color-primary);background:#f5f6fa}
  .portal-rail-toggle .icon{width:18px;height:18px;flex:0 0 auto}
  .portal-shell.rail-is-collapsed{--sidebar-width:88px}
  .portal-shell.rail-is-collapsed .portal-rail > .brand-lockup{min-height:82px;
    justify-content:center;padding:24px 12px 14px}
  .portal-shell.rail-is-collapsed .portal-rail > .brand-lockup > span:last-child{display:none}
  .portal-shell.rail-is-collapsed .portal-rail > .brand-lockup .brand-mark{width:38px;height:33px}
  .portal-shell.rail-is-collapsed .portal-nav{gap:8px;padding-inline:12px}
  .portal-shell.rail-is-collapsed .portal-nav::before{display:none}
  .portal-shell.rail-is-collapsed .portal-nav-item{min-height:54px;justify-content:center;
    padding:10px}
  .portal-shell.rail-is-collapsed .portal-nav-item span{position:absolute;left:calc(100% + 10px);
    z-index:5;display:none;padding:7px 10px;border-radius:7px;color:#fff;
    background:var(--color-primary);white-space:nowrap;box-shadow:var(--shadow)}
  .portal-shell.rail-is-collapsed .portal-nav-item:hover span{display:block}
  .portal-shell.rail-is-collapsed .portal-settings{width:calc(100% - 24px);margin-inline:12px;
    justify-content:center}
  .portal-shell.rail-is-collapsed .portal-settings span{display:none}
  .portal-shell.rail-is-collapsed .portal-rail-toggle{position:relative;width:calc(100% - 24px);
    justify-content:center;padding:10px}
  .portal-shell.rail-is-collapsed .portal-rail-toggle span{position:absolute;
    left:calc(100% + 10px);z-index:5;display:none;padding:7px 10px;border-radius:7px;color:#fff;
    background:var(--color-primary);white-space:nowrap;box-shadow:var(--shadow)}
  .portal-shell.rail-is-collapsed .portal-rail-toggle:hover span{display:block}
}

/* One skill's page. Same two-column shape as the home page, with the
   skill's own card in the middle. The lesson body is not here because no
   skill has a lesson yet; when one does it goes inside the same card. */
.adaptive-skill{padding:0 2px}
.adaptive-skill .crumb{margin:0 0 12px;color:#3e5ca4;font:600 14px/1.2 var(--font-display)}
.adaptive-skill .crumb .link-btn{color:#3e5ca4;font:600 14px var(--font-display);
  text-decoration:none;border:0;background:transparent;padding:0}
.adaptive-skill .crumb .link-btn:hover{text-decoration:underline}
.adaptive-skill .two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;
  align-items:start}
.adaptive-skill .card{border:1px solid #d9e0ec;border-radius:9px;background:rgba(255,255,255,.96)}
.adaptive-skill .skill-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.adaptive-skill .lesson{padding:26px 32px 30px}
.adaptive-skill .lesson-head{display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid #e0e5ed}
.adaptive-skill .lesson-head > div:first-child{flex:1 1 360px;min-width:0}
.adaptive-skill .lesson-head h2{margin:6px 0 6px;font-size:34px;line-height:1.08}
.adaptive-skill .lesson-head p{margin:0;color:#5b6a8f;font:16px/1.5 var(--font-display)}
.adaptive-skill .eyebrow{color:#a47215;font:800 10px/1.2 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase}
.adaptive-skill .diag{display:flex;gap:10px;flex:0 0 auto}
.adaptive-skill .diag div{min-width:104px;padding:10px 12px;border-radius:8px;background:#f6f8fc;
  text-align:center}
.adaptive-skill .diag small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-skill .diag b{display:block;margin-top:2px;color:#10245f;font:700 20px var(--font-display)}
.adaptive-skill .diag .w b{color:#a3351f}
.adaptive-skill .lesson section{padding:20px 0 4px}
.adaptive-skill .lesson section + section{border-top:1px solid #e0e5ed}
.adaptive-skill .lesson h3{margin:0 0 10px;font-size:22px}
.adaptive-skill .lesson li{color:#50648d;font:15.5px/1.6 var(--font-display)}
.adaptive-skill .skill-covers{display:grid;gap:8px;margin:0;padding-left:22px}
.adaptive-skill .setup{padding:22px 22px 20px}
.adaptive-skill .setup h2{margin:0 0 4px;font-size:24px}
.adaptive-skill .setup > p{margin:0 0 18px;color:#68789d;font:15px/1.45 var(--font-display)}
.adaptive-skill .skill-mistakes h2{font-size:20px}
.adaptive-skill .skill-mistakes > p{margin-bottom:12px}
.adaptive-skill .field{margin-bottom:18px;position:relative}
.adaptive-skill .field > label,.adaptive-skill .field > span{display:block;margin-bottom:8px;
  color:#243761;font:600 13px var(--font-ui)}
.adaptive-skill .select{display:flex;width:100%;min-height:46px;align-items:center;
  justify-content:space-between;padding:10px 14px;border:1px solid #cbd6e8;border-radius:7px;
  background:#fff;color:#1d315d;font:16px var(--font-display);text-align:left}
.adaptive-skill .select:disabled{opacity:1;color:#1d315d}
.adaptive-skill .select small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-skill .chev{width:16px;height:16px;flex:0 0 auto;color:#6d7a98}
.adaptive-skill .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  border:1px solid #d9e0ec;border-radius:9px;background:#f4f6fa}
.adaptive-skill .seg button{min-height:44px;border:0;border-radius:6px;background:transparent;
  color:#4a5b82;font:600 15px var(--font-display)}
.adaptive-skill .seg button.on{color:#fff;background:var(--color-primary);
  box-shadow:0 2px 6px rgba(16,36,95,.18)}
.adaptive-skill .hint{margin:7px 2px 0;color:#6d7a98;font:12px/1.45 var(--font-ui)}
.adaptive-skill .btn-primary{display:inline-flex;width:100%;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 22px;border:0;border-radius:6px;color:#fff;
  background:var(--color-primary);font:600 16px/1 var(--font-display);white-space:nowrap}
.adaptive-skill .btn-primary svg{width:17px;height:17px}
.adaptive-skill .btn-ghost{display:inline-flex;width:100%;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 18px;border:1px solid #cbd6e8;border-radius:6px;
  color:var(--color-primary);background:#fff;font:600 15px/1 var(--font-display)}
.adaptive-skill .btn-gold{display:inline-flex;width:100%;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 18px;border:1px solid #d9b65c;border-radius:6px;
  color:#7b560f;background:#fffaf0;font:600 15px/1 var(--font-display)}
.adaptive-skill .setup-shortfall{margin:0 0 12px;padding:10px 12px;border-radius:7px;
  color:#7a4a10;background:#fff6e4;font:13px/1.5 var(--font-ui)}
.adaptive-skill .setup-ways{display:grid;gap:8px}

/* The skill page, in two rows: who the skill is beside the practice
   settings, then the lesson summary beside the mistakes. The two cards in
   the second row are equals, so neither of them is a sidebar. */
/* The skill page, as one grid.
   The practice card is the right-hand column from top to bottom; the skill,
   the lesson and the mistakes sit under each other on the left, each as
   tall as what is in it. Two rows of two meant a tall practice card pushed
   the lesson and the mistakes below it and left half a screen of nothing on
   the left; stretching the skill card to match it put a band of empty space
   above the title. */
.adaptive-skill .skill-grid{display:grid;gap:16px;align-items:start;
  grid-template-columns:minmax(0,1fr) 360px;
  grid-template-areas:"about practice" "lesson practice" "mistakes practice"}
.adaptive-skill .skill-about{grid-area:about}
.adaptive-skill .setup{grid-area:practice;align-self:start}
.adaptive-skill .sk-lesson{grid-area:lesson}
.adaptive-skill .skill-mistakes{grid-area:mistakes}
/* The skill's name is the first thing in its card, at the top of it. */
.adaptive-skill .skill-about{display:flex;flex-direction:column;justify-content:flex-start;
  padding:26px 32px 24px;min-width:0}
.adaptive-skill .skill-about h2{margin:6px 0 8px;font-size:34px;line-height:1.08}
.adaptive-skill .skill-blurb{margin:0 0 18px;color:#5b6a8f;font:16px/1.5 var(--font-display)}
.adaptive-skill .sk-lesson,.adaptive-skill .skill-mistakes{display:flex;flex-direction:column;
  padding:22px 24px 20px;min-width:0}
.adaptive-skill .sl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.adaptive-skill .sl-head h2{margin:0;font-size:22px}
.adaptive-skill .sl-time,.adaptive-skill .sl-count{flex:0 0 auto;color:#6d7a98;
  font:600 12px var(--font-ui)}
.adaptive-skill .sl-count{color:#a3351f}
.adaptive-skill .sl-lede{margin:8px 0 16px;color:#5b6a8f;font:15px/1.5 var(--font-display)}
.adaptive-skill .sl-progress{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.adaptive-skill .sl-bar{flex:1;min-width:0;height:6px;border-radius:999px;background:#e2e6ee;
  overflow:hidden}
.adaptive-skill .sl-bar i{display:block;height:100%;border-radius:999px;background:#2d61d8}
.adaptive-skill .sl-progress span{flex:0 0 auto;color:#50648d;font:600 12px var(--font-ui)}
/* min-width:0 the whole way down: a grid or flex item refuses to go
   narrower than its content unless it is told it may, and one long
   section name was making this card 208px wider than its column. */
/* Ten sections in one column is a long card beside a short one; on a wide
   page they are two columns, reading down the left and then down the
   right. Narrower than that, one column again. */
.adaptive-skill .sl-toc{display:grid;gap:2px;margin:0 0 16px;padding:0;list-style:none;
  min-width:0}
@media (min-width:1200px){
  .adaptive-skill .sl-toc{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:14px}
  /* Half the width, so the name has it: the ring and the highlight
     already say which section the learner is on. */
  .adaptive-skill .sl-now{display:none}
}
.adaptive-skill .sl-toc li,.adaptive-skill .sl-head,.adaptive-skill .sl-progress,
.adaptive-skill .sl-ways{min-width:0}
.adaptive-skill .sl-toc button{display:flex;width:100%;align-items:center;gap:10px;
  min-height:34px;padding:5px 8px;border:0;border-radius:6px;background:transparent;
  color:#2b3f68;font:15px/1.35 var(--font-display);text-align:left}
.adaptive-skill .sl-toc button:hover{background:#f2f5fb}
.adaptive-skill .sl-tick{display:flex;flex:0 0 auto;width:22px;height:22px;align-items:center;
  justify-content:center;border:1px solid #d9e0ec;border-radius:999px;background:#fff;
  color:#6d7a98;font:700 11px var(--font-ui)}
.adaptive-skill .sl-toc .is-done .sl-tick{border-color:#2d61d8;color:#fff;background:#2d61d8}
.adaptive-skill .sl-toc .is-here .sl-tick{border-color:#a47215;color:#7b560f;background:#fff6e4}
.adaptive-skill .sl-toc .is-here button{background:#fffaf0}
.adaptive-skill .sl-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adaptive-skill .sl-now{flex:0 0 auto;margin-left:auto;color:#7b560f;font:700 10px var(--font-ui);
  text-transform:uppercase;letter-spacing:.08em}
.adaptive-skill .sl-ways{display:grid;gap:8px;margin-top:auto}
/* "Continue — How hard questions hide it" is a long label on a button
   that does not wrap, and a button that does not wrap sets the card's
   smallest possible width -- which is how a 552px column got a 760px
   card in it. Here it wraps. */
.adaptive-skill .sk-lesson .btn-primary,.adaptive-skill .sk-lesson .btn-ghost,
.adaptive-skill .skill-mistakes .btn-gold{white-space:normal;min-width:0;height:auto;
  padding-block:11px}
.adaptive-skill .sm-list{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.adaptive-skill .sm-list li{padding:12px 14px;border:1px solid #e3e8f0;border-radius:8px;
  background:#f8fafd;min-width:0}
.adaptive-skill .sm-when{margin:0;color:#6d7a98;font:600 12px var(--font-ui)}
.adaptive-skill .sm-what{margin:4px 0 6px;color:#1d315d;font:15px/1.45 var(--font-display);
  overflow-wrap:break-word}
/* "Showing 3 of 4", under the three the card lists. The button below it
   redoes all four, and this is the line that says so. */
.adaptive-skill .sm-more{margin:0 0 16px;color:#6d7a98;font:13px var(--font-ui)}
.adaptive-skill .sm-list .link-btn{padding:0;border:0;background:transparent;color:#2d61d8;
  font:600 13px var(--font-ui);text-decoration:underline;text-underline-offset:3px}

/* iPad: the practice card drops under the skill, the pair stays a pair. */
@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-skill .two-col{grid-template-columns:minmax(0,1fr)}
  .adaptive-skill .skill-side{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    align-items:start}
  .adaptive-skill .skill-grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"about" "practice" "lesson" "mistakes"}
  .adaptive-skill .skill-about{padding:20px 22px 18px}
  .adaptive-skill .skill-about h2{font-size:28px}
  .adaptive-skill .lesson{padding:20px 22px 24px}
  .adaptive-skill .lesson-head{display:block}
  .adaptive-skill .lesson-head h2{font-size:28px}
  .adaptive-skill .diag{margin-top:14px}
  .adaptive-skill .diag div{flex:1}
}

/* Phone: everything stacks, the stats stay on one line. */
@media (max-width: 767px) {
  .adaptive-skill .skill-grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"about" "practice" "lesson" "mistakes";gap:14px}
  .adaptive-skill .skill-about{padding:16px 16px 14px}
  .adaptive-skill .skill-about h2{font-size:25px}
  .adaptive-skill .sk-lesson,.adaptive-skill .skill-mistakes{padding:16px}
  .adaptive-skill .sl-progress{flex-wrap:wrap}
  .adaptive-skill .sl-progress span{flex:1 0 100%}
  .adaptive-skill .sl-toc button{min-height:44px}
  .adaptive-skill .sl-now{display:none}
  .adaptive-skill .two-col{display:block}
  .adaptive-skill .skill-side{margin-top:14px}
  .adaptive-skill .lesson{padding:16px 16px 20px}
  .adaptive-skill .lesson-head{display:block;padding-bottom:14px}
  .adaptive-skill .lesson-head h2{font-size:25px}
  .adaptive-skill .diag{margin-top:12px;gap:8px}
  .adaptive-skill .diag div{flex:1;min-width:0;padding:8px 6px}
  .adaptive-skill .diag b{font-size:17px}
  .adaptive-skill .lesson h3{font-size:19px}
  .adaptive-skill .setup{padding:16px}
  .adaptive-skill .setup h2{font-size:20px}
}

/* One question of a practice set. The question on the left, the set's own
   progress on the right; at 1199 and below the squares become the bar above
   the question, and the student can do the same thing by hand at any width. */
.adaptive-set{padding:0 2px}
.adaptive-set .two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;
  align-items:start}
.adaptive-set .card{border:1px solid #d9e0ec;border-radius:9px;background:rgba(255,255,255,.96)}
.adaptive-set .q{display:flex;flex-direction:column;min-height:560px;padding:24px 28px 22px}
.adaptive-set .q-head{display:block;margin-bottom:16px}
.adaptive-set .q-skill{display:block;width:100%;margin:0 0 10px;color:#3e5ca4;
  font:600 15px/1.35 var(--font-display);overflow-wrap:break-word}
.adaptive-set .q-count{display:flex;align-items:center;gap:14px}
.adaptive-set .q-head b{color:#183579;font:600 13px/1.2 var(--font-display);white-space:nowrap}
.adaptive-set .bar{display:flex;flex:1;gap:5px;min-width:120px}
.adaptive-set .bar i{height:6px;flex:1;border-radius:999px;background:#e2e6ee}
.adaptive-set .bar i.done{background:#2d61d8}
.adaptive-set .grid-toggle{padding:6px 10px;border:1px solid #d7deea;border-radius:7px;
  color:#5b6a8f;background:#fff;font:600 12px var(--font-ui);white-space:nowrap}
.adaptive-set .passage{margin:0 0 20px;padding:23px 27px;border:1px solid #dce2ed;border-radius:7px;
  color:#1d315d;background:#fff;font:18px/1.72 var(--font-display)}
.adaptive-set .ask{margin:0 0 16px;color:#16294f;font:400 17px/1.62 var(--font-display)}
/* The prompt is block content, so the paragraphs the compiler wrote
   inside it keep the prompt's own spacing rather than the page default,
   and the last one does not add a second gap above the answers. */
.adaptive-set .ask > p{margin:0 0 12px}
.adaptive-set .ask > p:last-child,.adaptive-set .ask > div:last-child{margin-bottom:0}
.adaptive-set .choices{display:grid;gap:10px}
.adaptive-set .choice{display:grid;min-height:55px;grid-template-columns:34px 1fr 24px;
  align-items:center;gap:12px;padding:9px 14px;border:1px solid #d7deea;border-radius:7px;
  color:#243761;background:#fff;text-align:left}
.adaptive-set .choice b{display:grid;width:30px;height:30px;place-items:center;
  border:1px solid #aeb9cc;border-radius:50%;color:#153170;font:600 13px var(--font-ui)}
.adaptive-set .choice span{font:17px/1.5 var(--font-display)}
.adaptive-set .choice em{font:800 19px/1 var(--font-ui);font-style:normal;text-align:right}
.adaptive-set .choice.is-selected{border-color:#3158ad;background:#f3f6fd;
  box-shadow:0 0 0 1px #3158ad inset}
.adaptive-set .choice.ok{border-color:#178957;background:#eff9f4;color:#126b44;
  box-shadow:0 0 0 1px #178957 inset}
.adaptive-set .choice.bad{border-color:#d85c55;background:#fff3f1;color:#a3351f;
  box-shadow:0 0 0 1px #d85c55 inset}
.adaptive-set .grid-in{display:block;margin-top:4px}
.adaptive-set .grid-in > span{display:block;margin-bottom:8px;color:#243761;
  font:600 13px var(--font-ui)}
.adaptive-set .grid-in input{width:min(100%,280px);min-height:48px;padding:10px 14px;
  border:1px solid #cbd6e8;border-radius:7px;font:17px var(--font-display)}
.adaptive-set .grid-in small{display:block;margin-top:7px;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-set .result{margin-top:18px;padding:16px 18px;border-radius:8px}
.adaptive-set .result.bad{border:1px solid #f0c4bd;background:#fff6f4}
.adaptive-set .result.ok{border:1px solid #bfe3cf;background:#f1faf5}
.adaptive-set .result > b{display:block;margin-bottom:6px;font:700 16px var(--font-display)}
.adaptive-set .result.bad > b{color:#a3351f}
.adaptive-set .result.ok > b{color:#126b44}
.adaptive-set .result p{margin:6px 0 0;color:#33446e;font:15.5px/1.62 var(--font-display)}
.adaptive-set .result-note{color:#5b6a8f;font-size:14px}
.adaptive-set .adaptive-inline-error{margin:14px 0 0;color:#a03630;font:14px var(--font-ui)}
.adaptive-set .q-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:20px}
.adaptive-set .link-btn{display:inline-flex;min-height:42px;align-items:center;gap:8px;
  padding:8px 4px;border:0;background:transparent;color:#1e4da8;font:600 15px var(--font-display)}
.adaptive-set .link-btn .icon{width:18px;height:18px}
.adaptive-set .btn-primary{display:inline-flex;min-width:176px;min-height:46px;align-items:center;
  justify-content:center;gap:8px;padding:10px 22px;border:0;border-radius:6px;color:#fff;
  background:var(--color-primary);font:600 16px/1 var(--font-display);white-space:nowrap}
.adaptive-set .btn-primary:disabled{opacity:.5}
.adaptive-set .btn-primary svg{width:17px;height:17px}
.adaptive-set .btn-ghost{display:inline-flex;width:100%;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 18px;border:1px solid #cbd6e8;border-radius:6px;
  color:var(--color-primary);background:#fff;font:600 15px/1 var(--font-display)}
.adaptive-set .navi{padding:20px 20px 18px}
.adaptive-set .navi h3{margin:0 0 4px;font-size:20px}
.adaptive-set .navi > p{margin:0 0 14px;color:#68789d;font:14px/1.45 var(--font-display)}
.adaptive-set .mode-pill{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:6px 11px;border:1px solid #cad6e8;border-radius:999px;color:#23427f;background:#f6f8fc;
  font:700 11px/1 var(--font-display);letter-spacing:.02em}
.adaptive-set .mode-pill.tut{border-color:#dfbd6d;color:#875f13;background:#fff8e8}
.adaptive-set .grid10{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.adaptive-set .grid10 span{display:grid;height:44px;place-items:center;border:1px solid #d7deea;
  border-radius:7px;color:#5b6a8f;background:#fff;font:600 14px var(--font-ui)}
.adaptive-set .grid10 .ok{border-color:#9fd4b8;color:#126b44;background:#eff9f4}
.adaptive-set .grid10 .bad{border-color:#efb7ae;color:#a3351f;background:#fff3f1}
.adaptive-set .grid10 .cur{border:2px solid #10245f;color:#10245f}
.adaptive-set .navi-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.adaptive-set .navi-stats div{padding:10px 12px;border-radius:7px;background:#f6f8fc}
.adaptive-set .navi-stats small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-set .navi-stats b{color:#10245f;font:700 20px var(--font-display)}
.adaptive-set .exit{display:block;width:100%;margin-top:10px;padding:8px;border:0;
  background:transparent;color:#6d7a98;font:13px var(--font-ui);text-align:center;
  text-decoration:underline}
.adaptive-set .set-stop{padding:28px;text-align:center}
.adaptive-set .set-stop h2{margin:0 0 8px;font-size:26px}
.adaptive-set .set-stop p{margin:0 auto 18px;max-width:520px;color:#5b6a8f;
  font:15.5px/1.6 var(--font-display)}
.adaptive-set .set-stop-ways{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.adaptive-set .set-stop-ways .btn-ghost,.adaptive-set .set-stop-ways .btn-primary{width:auto;
  min-width:0}

/* The squares put away: the bar above the question is the whole progress. */
.adaptive-set.grid-is-hidden .two-col{grid-template-columns:minmax(0,1fr)}
.adaptive-set.grid-is-hidden .navi .grid10,
.adaptive-set.grid-is-hidden .navi > p{display:none}
.adaptive-set.grid-is-hidden .navi{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px}
.adaptive-set.grid-is-hidden .navi h3{margin:0;font-size:17px}
.adaptive-set.grid-is-hidden .navi .mode-pill{margin:0}
.adaptive-set.grid-is-hidden .navi-stats{margin:0;margin-left:auto;
  grid-template-columns:auto auto;gap:10px}
.adaptive-set.grid-is-hidden .navi-stats b{font-size:16px}
.adaptive-set.grid-is-hidden .exit{width:auto;margin:0}

/* The lesson drawer. Built and switched off: no skill has a lesson yet. */
.adaptive-set .scrim{position:fixed;inset:0;z-index:40;border:0;padding:0;
  background:rgba(8,22,58,.32)}
.adaptive-set .drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;display:flex;
  width:min(720px,100vw);flex-direction:column;color:#243864;background:#fff;
  box-shadow:-22px 0 55px rgba(9,25,68,.2)}
.adaptive-set .drawer.is-expanded{width:min(100vw,calc(100vw - var(--sidebar-width)))}
.adaptive-set .drawer > header{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:27px 32px 20px;border-bottom:1px solid #dde3ed;background:#fcfbf7}
.adaptive-set .drawer > header h2{margin:6px 0 0;font-size:32px;line-height:1.08}
.adaptive-set .drawer-actions{display:flex;align-items:center;gap:10px}
.adaptive-set .drawer-wide{min-height:40px;padding:8px 14px;border:1px solid #cbd5e4;
  border-radius:7px;color:#385184;background:#fff;font:600 14px var(--font-display)}
.adaptive-set .xbtn{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;
  border:1px solid #cbd5e4;border-radius:50%;color:#385184;background:#fff;font-size:24px}
.adaptive-set .drawer .lesson{flex:1;overflow:auto;padding:20px 32px}
.adaptive-set .drawer > footer{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px 32px;border-top:1px solid #dce3ed;background:#fcfbf7}
.adaptive-set .drawer > footer span{color:#697798;font:12px/1.4 var(--font-display)}
/* The drawer is four tabs of reference. Long section names scroll sideways
   rather than wrapping the strip into two rows. */
.adaptive-set .dr-tabs{display:flex;gap:4px;padding:10px 32px 0;border-bottom:1px solid #dde3ed;
  background:#fcfbf7;overflow-x:auto;scrollbar-width:thin}
.adaptive-set .dr-tab{flex:0 0 auto;min-height:40px;padding:8px 14px;border:1px solid transparent;
  border-bottom:0;border-radius:7px 7px 0 0;color:#4a5b82;background:transparent;
  font:600 14px var(--font-display);white-space:nowrap}
.adaptive-set .dr-tab.is-on{border-color:#dde3ed;color:#10245f;background:#fff;
  margin-bottom:-1px}
.adaptive-set .dr-body{flex:1;overflow:auto;padding:20px 32px}
.adaptive-set .dr-name{margin:0 0 14px;color:#10245f;font:700 20px/1.2 var(--font-display)}
.adaptive-set .dr-part + .dr-part{margin-top:18px;padding-top:16px;border-top:1px solid #e6eaf2}
.adaptive-set .dr-part h4{margin:0 0 8px;color:#385184;font:700 14px var(--font-ui)}
.adaptive-set .drawer > footer{gap:10px}
.adaptive-set .drawer > footer .btn-ghost{min-height:44px;padding:10px 16px;
  border:1px solid #cbd5e4;border-radius:6px;color:var(--color-primary);background:#fff;
  font:600 15px/1 var(--font-display)}
/* The way to the lesson sits above the question on a phone only: on a
   wider screen it is in the footer and the rail, where it always was. */
.adaptive-set .q-lesson-link{display:none}

/* iPad: the squares become the bar above the question. */
@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-set .two-col{grid-template-columns:minmax(0,1fr)}
  .adaptive-set .navi{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;
    order:-1}
  .adaptive-set .navi .grid10,.adaptive-set .navi > p{display:none}
  .adaptive-set .navi h3{margin:0;font-size:17px}
  .adaptive-set .navi .mode-pill{margin:0}
  .adaptive-set .navi-stats{margin:0;margin-left:auto;grid-template-columns:auto auto;gap:10px}
  .adaptive-set .navi-stats b{font-size:16px}
  .adaptive-set .navi .btn-ghost{width:auto;margin:0}
  .adaptive-set .exit{width:auto;margin:0}
  .adaptive-set .grid-toggle{display:none}
  .adaptive-set .q{padding:18px 20px}
  .adaptive-set .passage{padding:16px 18px;font-size:17px}
}

/* Phone: one column, the bar under the heading, the footer buttons full
   width and clear of the bottom navigation. */
@media (max-width: 767px) {
  .adaptive-set .two-col{display:block}
  /* The lesson's own link, above the question. The one in the footer and
     the one in the rail both go, so there is exactly one way in. */
  .adaptive-set .q-lesson-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
    padding:0;border:0;background:transparent;color:#2d61d8;font:600 14px var(--font-ui);
    text-decoration:underline;text-underline-offset:3px}
  .adaptive-set .q-foot .link-btn{display:none}
  .adaptive-set .navi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
    margin-bottom:12px}
  .adaptive-set .navi .grid10,.adaptive-set .navi > p,.adaptive-set .navi h3{display:none}
  .adaptive-set .navi .mode-pill{margin:0;font-size:10px}
  .adaptive-set .navi-stats{margin:0;margin-left:auto;grid-template-columns:auto auto;gap:8px}
  .adaptive-set .navi-stats div{padding:6px 8px}
  .adaptive-set .navi-stats b{font-size:14px}
  .adaptive-set .navi-stats small{font-size:10px}
  .adaptive-set .navi [data-action="set-lesson"]{display:none}
  .adaptive-set .navi .btn-ghost{width:100%;margin-top:8px}
  .adaptive-set .exit{width:auto;margin:0}
  .adaptive-set .q{min-height:0;padding:16px}
  .adaptive-set .q-skill{margin-bottom:8px;font-size:13.5px;line-height:1.3}
  .adaptive-set .q-count{margin-top:8px;gap:10px}
  .adaptive-set .grid-toggle{display:none}
  .adaptive-set .bar{min-width:0}
  .adaptive-set .passage{padding:14px 16px;font-size:16px;line-height:1.62}
  .adaptive-set .ask{font-size:16px}
  .adaptive-set .choice{min-height:48px;grid-template-columns:30px 1fr 18px;padding:7px 10px}
  .adaptive-set .choice b{width:28px;height:28px}
  .adaptive-set .choice span{font-size:15.5px}
  .adaptive-set .result p{font-size:14.5px}
  .adaptive-set .q-foot{display:grid;gap:10px}
  .adaptive-set .q-foot .btn-primary{width:100%}
  .adaptive-set .drawer{width:100vw}
  .adaptive-set .drawer-wide{display:none}
  .adaptive-set .drawer > header{padding:18px 16px 14px}
  .adaptive-set .drawer > header h2{font-size:24px}
  .adaptive-set .drawer .lesson{padding:16px}
  .adaptive-set .dr-tabs{padding:10px 16px 0}
  .adaptive-set .dr-body{padding:16px}
  .adaptive-set .drawer > footer{padding:12px 16px}
}

/* What a set came to. The score and the question list on the left, what to
   do next on the right. */
.adaptive-results{padding:0 2px}
.adaptive-results .crumb{margin:0 0 12px;color:#3e5ca4;font:600 14px/1.2 var(--font-display)}
.adaptive-results .crumb .link-btn{color:#3e5ca4;font:600 14px var(--font-display);border:0;
  background:transparent;padding:0}
.adaptive-results .crumb .link-btn:hover{text-decoration:underline}
.adaptive-results .two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;
  align-items:start}
.adaptive-results .card{border:1px solid #d9e0ec;border-radius:9px;
  background:rgba(255,255,255,.96)}
.adaptive-results .results-left{min-width:0}
.adaptive-results .score{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  padding:26px 28px}
.adaptive-results .score h2{margin:4px 0 8px;font-size:30px}
.adaptive-results .score p{margin:0;color:#50648d;font:16px/1.55 var(--font-display)}
.adaptive-results .eyebrow{color:#a47215;font:800 10px/1.2 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase}
.adaptive-results .ring{display:grid;width:150px;height:150px;place-items:center;
  border-radius:50%}
.adaptive-results .ring div{display:grid;width:118px;height:118px;place-items:center;
  border-radius:50%;background:#fff;text-align:center}
.adaptive-results .ring b{display:block;color:#10245f;font:700 38px/1 var(--font-display)}
.adaptive-results .ring small{color:#6d7a98;font:12px var(--font-ui)}
.adaptive-results .facts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.adaptive-results .facts div{padding:9px 14px;border-radius:7px;background:#f6f8fc}
.adaptive-results .facts small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-results .facts b{color:#10245f;font:700 17px var(--font-display)}
.adaptive-results .advice{display:flex;gap:14px;align-items:flex-start;margin:0 28px 24px;
  padding:16px 18px;border:1px solid #e7d6a6;border-radius:8px;background:#fffaf0}
.adaptive-results .advice .icon{width:22px;height:22px;flex:0 0 auto;color:#a47215}
.adaptive-results .advice p{margin:0;color:#5b4410;font:15.5px/1.55 var(--font-display)}
.adaptive-results .advice b{color:#7b560f}
.adaptive-results .rows{padding:4px 24px 18px}
.adaptive-results .rows h3{margin:6px 0 10px;font-size:20px}
.adaptive-results .qrow{display:grid;grid-template-columns:40px minmax(0,1fr) 150px 186px;
  align-items:center;gap:12px;padding:11px 8px;border-top:1px solid #edf0f5;color:#33446e;
  font:15px/1.4 var(--font-display)}
.adaptive-results .qrow .n{display:grid;width:32px;height:32px;place-items:center;
  border-radius:50%;font:700 13px var(--font-ui)}
.adaptive-results .qrow .n.ok{color:#126b44;background:#eff9f4;border:1px solid #9fd4b8}
.adaptive-results .qrow .n.bad{color:#a3351f;background:#fff3f1;border:1px solid #efb7ae}
.adaptive-results .qrow-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adaptive-results .qrow small{color:#6d7a98;font:13px var(--font-ui)}
.adaptive-results .qrow .link-btn{color:#1e4da8;font:600 14px var(--font-display);
  text-align:right;border:0;background:transparent;padding:0}
.adaptive-results .qrow-ways{display:flex;justify-content:flex-end;gap:14px;min-width:0}
@media (max-width: 767px){
  .adaptive-results .qrow{grid-template-columns:32px minmax(0,1fr);gap:4px 10px}
  .adaptive-results .qrow small{grid-column:2}
  .adaptive-results .qrow-ways{grid-column:2;justify-content:flex-start;gap:16px}
}
.adaptive-results .review{padding:22px 26px 26px}
.adaptive-results .review-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:14px}
.adaptive-results .review-head h3{margin:0;font-size:22px}
.adaptive-results .review .link-btn{color:#1e4da8;font:600 14px var(--font-display);border:0;
  background:transparent;padding:0}
.adaptive-results .review-ask{margin:0 0 14px;color:#16294f;font:17px/1.6 var(--font-display)}
.adaptive-results .review-answer{margin:0 0 12px;padding:12px 14px;border-radius:7px;
  background:#f6f8fc;color:#33446e;font:15px/1.5 var(--font-display)}
.adaptive-results .review-explanation{margin:0;color:#33446e;font:15.5px/1.62 var(--font-display)}
.adaptive-results .result-note{color:#5b6a8f;font-size:14px}
.adaptive-results .setup{padding:22px 22px 20px;display:grid;gap:10px}
.adaptive-results .setup h2{margin:0;font-size:24px}
.adaptive-results .setup > p{margin:0 0 4px;color:#68789d;font:15px/1.45 var(--font-display)}
.adaptive-results .btn-primary{display:inline-flex;width:100%;min-height:46px;align-items:center;
  justify-content:center;gap:8px;padding:10px 22px;border:0;border-radius:6px;color:#fff;
  background:var(--color-primary);font:600 16px/1 var(--font-display)}
.adaptive-results .btn-ghost{display:inline-flex;width:100%;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 18px;border:1px solid #cbd6e8;border-radius:6px;
  color:var(--color-primary);background:#fff;font:600 15px/1 var(--font-display)}
.adaptive-results .btn-gold{display:inline-flex;width:100%;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:10px 18px;border:1px solid #d9b65c;border-radius:6px;
  color:#7b560f;background:#fffaf0;font:600 15px/1 var(--font-display)}
.adaptive-results .setup-foot{margin:6px 0 0;padding-top:14px;border-top:1px solid #e3e8f0;
  color:#5b6a8f;font:13px/1.5 var(--font-ui)}
.adaptive-results .status{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--font-ui)}
.adaptive-results .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.adaptive-results .weak .dot{background:#c2412d}.adaptive-results .weak{color:#a3351f}
.adaptive-results .dev .dot{background:#d89a21}.adaptive-results .dev{color:#8a5f0c}
.adaptive-results .strong .dot{background:#178957}.adaptive-results .strong{color:#126b44}
.adaptive-results .untested .dot{background:#fff;border:2px solid #9aa5bb}
.adaptive-results .untested{color:#66728f}

/* iPad: one column, what-next under the score. */
@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-results .two-col{grid-template-columns:minmax(0,1fr)}
  .adaptive-results .score{padding:20px 20px}
  .adaptive-results .score h2{font-size:26px}
  .adaptive-results .advice{margin:0 20px 20px}
  .adaptive-results .rows{padding:4px 18px 16px}
  .adaptive-results .setup{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .adaptive-results .setup h2,.adaptive-results .setup > p,
  .adaptive-results .setup .setup-foot{grid-column:1/-1}
}

/* Phone: the ring above the words, one line per question. */
@media (max-width: 767px) {
  .adaptive-results .two-col{display:block}
  .adaptive-results .setup{margin-top:14px}
  .adaptive-results .score{display:block;padding:16px;text-align:center}
  .adaptive-results .ring{margin:0 auto 14px;width:124px;height:124px}
  .adaptive-results .ring div{width:98px;height:98px}
  .adaptive-results .ring b{font-size:30px}
  .adaptive-results .score h2{font-size:22px}
  .adaptive-results .score p{font-size:15px}
  .adaptive-results .facts{justify-content:center}
  .adaptive-results .advice{margin:0 16px 16px;padding:12px 14px}
  .adaptive-results .advice p{font-size:14.5px}
  .adaptive-results .rows{padding:4px 14px 14px}
  .adaptive-results .qrow{grid-template-columns:32px minmax(0,1fr) auto;gap:6px 10px}
  .adaptive-results .qrow .n{width:28px;height:28px}
  .adaptive-results .qrow small{grid-column:2;grid-row:2}
  .adaptive-results .qrow .link-btn{grid-column:3;grid-row:1/3}
  .adaptive-results .review{padding:16px}
  .adaptive-results .review-head{display:block}
  .adaptive-results .review-head h3{font-size:19px;margin-bottom:8px}
}

/* Everything the learner has missed, under the skill it belongs to. */
.adaptive-mistakes{padding:0 2px}
.adaptive-mistakes .crumb{margin:0 0 12px;color:#3e5ca4;font:600 14px/1.2 var(--font-display)}
.adaptive-mistakes .crumb .link-btn{color:#3e5ca4;font:600 14px var(--font-display);border:0;
  background:transparent;padding:0}
.adaptive-mistakes .crumb .link-btn:hover{text-decoration:underline}
/* Three cards, placed by width: the numbers, the list, and the redo
   panel. On a phone the panel goes between the first two, so the way to
   start is under the numbers rather than past the whole list. */
.adaptive-mistakes .two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;
  grid-template-areas:"top side" "rest side";column-gap:16px;row-gap:0;align-items:start}
.adaptive-mistakes .m-top{grid-area:top}
.adaptive-mistakes .m-rest{grid-area:rest}
.adaptive-mistakes .setup{grid-area:side}
/* The two left-hand cards read as the one card they were. */
.adaptive-mistakes .m-top{border-bottom:0;border-radius:9px 9px 0 0}
.adaptive-mistakes .m-rest{border-top:0;border-radius:0 0 9px 9px}
.adaptive-mistakes .card{border:1px solid #d9e0ec;border-radius:9px;
  background:rgba(255,255,255,.96)}
.adaptive-mistakes .m-head{padding:22px 24px 0}
.adaptive-mistakes .eyebrow{color:#a47215;font:600 13px/1.4 var(--font-display);
  letter-spacing:normal;text-transform:none}
.adaptive-mistakes .m-head h2{margin:6px 0 4px;font-size:30px}
.adaptive-mistakes .m-head p{margin:0;color:#5b6a8f;font:16px/1.5 var(--font-display)}
.adaptive-mistakes .m-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding:20px 24px}
.adaptive-mistakes .m-summary div{padding:14px 16px;border-radius:8px;background:#f6f8fc}
.adaptive-mistakes .m-summary small{display:block;color:#6d7a98;font:13px var(--font-ui)}
.adaptive-mistakes .m-summary b{display:block;margin-top:4px;color:#10245f;
  font:700 28px var(--font-display)}
.adaptive-mistakes .m-summary .fixed b{color:#126b44}
/* The list, split by subject: Reading and Writing first, then Math, each
   under its own heading with its own total and its own way to redo the
   lot. The heading row wraps before the button can leave the card, which
   is what an eighteen-character subject plus a button does at 390px. */
.adaptive-mistakes .m-part+.m-part{margin-top:4px;border-top:1px solid #e3e8f0}
.adaptive-mistakes .m-part-head{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;padding:18px 24px 0;min-width:0}
.adaptive-mistakes .m-part-head h3{margin:0;min-width:0;color:#1d315d;
  font:700 18px/1.3 var(--font-display);overflow-wrap:anywhere}
.adaptive-mistakes .m-part-head h3 span{color:#6d7a98;font:600 15px var(--font-ui)}
.adaptive-mistakes .m-redo-all{flex:0 0 auto;min-height:40px;max-width:100%;white-space:nowrap;
  margin-left:auto}
.adaptive-mistakes .m-part-ask{padding:12px 24px 0}
.adaptive-mistakes .m-part-ask .setup-ways{grid-template-columns:1fr 1fr}
.adaptive-mistakes .m-part .m-list{padding-top:10px}
/* One skill, one row of its own.
 *
 * It was a four-column table with fixed widths, and an official skill
 * name is seventy characters: the name came out one word per line, "7 to
 * fix" sat on top of it, the header cells printed through each other as
 * "SKTOLFIX", and the Redo button hung off the card. A list has no
 * columns to run out of.
 *
 * The width that decides the shape is the list's own, not the window's:
 * this card is beside a 360px panel on a wide screen and alone on a
 * narrow one, so the window says nothing useful about how much room the
 * row has. */
.adaptive-mistakes .m-list{container-type:inline-size;container-name:mistakes;
  margin:0;padding:0 24px 18px;list-style:none}
.adaptive-mistakes .m-item{display:grid;gap:6px 16px;padding:14px 10px;
  border-top:1px solid #edf0f5;min-width:0}
.adaptive-mistakes .m-item:first-child{border-top:0}
.adaptive-mistakes .m-who{min-width:0}
.adaptive-mistakes .m-skill{display:block;color:#1d315d;font:600 16px/1.35 var(--font-display);
  overflow-wrap:anywhere}
.adaptive-mistakes .m-domain{display:block;margin-top:2px;color:#6d7a98;font:13px var(--font-ui)}
.adaptive-mistakes .m-facts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.adaptive-mistakes .m-ways{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.adaptive-mistakes .m-ways .link-btn{flex:0 0 auto;padding:0;border:0;background:transparent;
  color:#2d61d8;font:600 13px var(--font-ui);text-decoration:underline;text-underline-offset:3px}
.adaptive-mistakes .m-ways .btn-ghost{flex:0 0 auto}
/* Wide enough for one line: the name on the left with the domain under
   it, the count and where it came from in the middle, the two ways out on
   the right. */
@container mistakes (min-width:560px){
  .adaptive-mistakes .m-item{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  .adaptive-mistakes .m-who{grid-column:1}
  .adaptive-mistakes .m-facts{grid-column:2;flex-direction:column;align-items:flex-start;gap:4px}
  .adaptive-mistakes .m-ways{grid-column:3;justify-content:flex-end}
}
/* Narrower: the name across the whole row with its domain under it, then
   one line holding the count, where it came from, and the two buttons.
   The name gets the width -- it is seventy characters and the thing being
   read; the count is a label and takes only what its words need. */
@container mistakes (max-width:559px){
  .adaptive-mistakes .m-item{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .adaptive-mistakes .m-who{grid-column:1/-1;grid-row:1}
  .adaptive-mistakes .m-facts{grid-column:1;grid-row:2;align-self:center}
  .adaptive-mistakes .m-ways{grid-column:2;grid-row:2;justify-content:flex-end}
}
/* Being asked whether to throw a set away takes the whole row. */
.adaptive-mistakes .m-ways.is-asking{grid-column:1/-1;grid-row:auto;display:block}
/* A label is as wide as its words. As a grid or flex item it would
   otherwise be stretched to the track it sits in, which is how "7 to fix"
   came to take half the width of a phone. */
.adaptive-mistakes .miss{display:inline-flex;justify-content:center;padding:3px 9px;
  border-radius:999px;color:#9b3a26;background:#fdeee9;font:600 12px var(--font-ui);
  white-space:nowrap;width:max-content;flex:0 0 auto;justify-self:start;align-self:center}
.adaptive-mistakes .src{color:#5b6a8f;font:13px/1.4 var(--font-ui)}
.adaptive-mistakes .btn-ghost{display:inline-flex;min-height:40px;align-items:center;
  justify-content:center;gap:8px;padding:8px 12px;border:1px solid #cbd6e8;border-radius:6px;
  color:var(--color-primary);background:#fff;font:600 14px/1 var(--font-display)}
.adaptive-mistakes .m-empty{padding:12px 24px 28px;text-align:center}
.adaptive-mistakes .m-empty h3{margin:0 0 6px;font-size:22px}
.adaptive-mistakes .m-empty p{margin:0 auto 16px;max-width:460px;color:#5b6a8f;
  font:15.5px/1.6 var(--font-display)}
.adaptive-mistakes .setup{padding:22px 22px 20px}
.adaptive-mistakes .setup h2{margin:0 0 4px;font-size:24px}
.adaptive-mistakes .setup > p{margin:0 0 18px;color:#68789d;font:15px/1.45 var(--font-display)}
.adaptive-mistakes .field{margin-bottom:18px;position:relative}
.adaptive-mistakes .field > label,.adaptive-mistakes .field > span{display:block;
  margin-bottom:8px;color:#243761;font:600 13px var(--font-ui)}
.adaptive-mistakes .select{display:flex;width:100%;min-height:46px;align-items:center;
  justify-content:space-between;padding:10px 14px;border:1px solid #cbd6e8;border-radius:7px;
  background:#fff;color:#1d315d;font:16px var(--font-display);text-align:left}
.adaptive-mistakes .select:disabled{opacity:.55}
.adaptive-mistakes .select small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-mistakes .chev{width:16px;height:16px;flex:0 0 auto;color:#6d7a98}
.adaptive-mistakes .scope-menu{position:absolute;z-index:20;right:0;left:0;max-height:320px;
  overflow:auto;margin-top:4px;padding:6px;border:1px solid #cbd6e8;border-radius:9px;
  background:#fff;box-shadow:0 14px 34px rgba(12,26,62,.16)}
.adaptive-mistakes .scope-option{display:block;width:100%;padding:8px 10px;border:0;
  border-radius:6px;background:transparent;color:#1d315d;font:15px var(--font-display);
  text-align:left}
.adaptive-mistakes .scope-option.is-skill{padding-left:24px;color:#4a5b82;font-size:14px}
/* Focus, grouped: the subject is the group's own heading and its own
   choice, with its skills indented under it. */
.adaptive-mistakes .scope-group{margin-top:4px;padding-top:4px;border-top:1px solid #edf0f5}
.adaptive-mistakes .scope-option.is-subject{font-weight:700}
.adaptive-mistakes .scope-option small{display:block;color:#6d7a98;font:12px var(--font-ui)}
.adaptive-mistakes .scope-option:hover{background:#f3f6fd}
.adaptive-mistakes .scope-option.is-chosen{background:#eef2fb;font-weight:700}
.adaptive-mistakes .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  border:1px solid #d9e0ec;border-radius:9px;background:#f4f6fa}
.adaptive-mistakes .seg button{min-height:44px;border:0;border-radius:6px;background:transparent;
  color:#4a5b82;font:600 15px var(--font-display)}
.adaptive-mistakes .seg button.on{color:#fff;background:var(--color-primary);
  box-shadow:0 2px 6px rgba(16,36,95,.18)}
.adaptive-mistakes .hint{margin:7px 2px 0;color:#6d7a98;font:12px/1.45 var(--font-ui)}
.adaptive-mistakes .btn-primary{display:inline-flex;width:100%;min-height:46px;
  align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:0;border-radius:6px;
  color:#fff;background:var(--color-primary);font:600 16px/1 var(--font-display)}
.adaptive-mistakes .btn-primary svg{width:17px;height:17px}
.adaptive-mistakes .adaptive-home-loading{color:#68789d;font:15px var(--font-display);
  padding:18px 2px}

/* iPad: one column, the redo card under the list. */
@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-mistakes .two-col{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "rest" "side"}
  .adaptive-mistakes .setup{margin-top:16px}
  .adaptive-mistakes .m-head h2{font-size:26px}
  .adaptive-mistakes .setup{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr 1fr;
    gap:0 18px;align-items:start}
  .adaptive-mistakes .setup h2,.adaptive-mistakes .setup > p,
  .adaptive-mistakes .setup .btn-primary,.adaptive-mistakes .setup > .hint{grid-column:1/-1}
}

/* Phone: each skill is two lines with its Redo button on the right. */
@media (max-width: 767px) {
  /* The panel goes under the numbers, above the list: a learner on a
     phone should not have to scroll past every skill to start. */
  .adaptive-mistakes .two-col{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "side" "rest"}
  .adaptive-mistakes .setup{margin:14px 0}
  /* Three separate cards once the panel sits between them. */
  .adaptive-mistakes .m-top{border-bottom:1px solid #d9e0ec;border-radius:9px}
  .adaptive-mistakes .m-rest{border-top:1px solid #d9e0ec;border-radius:9px}
  .adaptive-mistakes .m-head{padding:16px 16px 0}
  .adaptive-mistakes .m-head h2{font-size:24px}
  .adaptive-mistakes .m-head p{font-size:15px}
  .adaptive-mistakes .m-summary{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px}
  .adaptive-mistakes .m-summary div{padding:10px 8px;text-align:center}
  .adaptive-mistakes .m-summary small{font-size:11px}
  .adaptive-mistakes .m-summary b{font-size:22px}
  /* The list's own width decides its shape; only the padding and the
     tap target belong to the phone. */
  .adaptive-mistakes .m-part-head{padding:16px 16px 0}
  .adaptive-mistakes .m-part-head h3{font-size:17px}
  .adaptive-mistakes .m-part-ask{padding:10px 16px 0}
  .adaptive-mistakes .m-part-ask .setup-ways{grid-template-columns:1fr}
  .adaptive-mistakes .m-list{padding:0 14px 14px}
  .adaptive-mistakes .m-item{padding:12px 0}
  .adaptive-mistakes .m-ways .btn-ghost{min-height:44px;padding:8px 14px}
}

/* The set the learner walked away from: offered back above the
   recommendation, and the warning before another one replaces it. */
.adaptive-home .reco-continue{border-color:#cbd6e8;background:#f4f7fd}
.adaptive-home .reco-continue .eyebrow{color:#2d4c93}
.setup-discard{padding:14px 16px;border:1px solid #e7d6a6;border-radius:8px;background:#fffaf0}
.setup-discard p{margin:0 0 12px;color:#5b4a1f;font:14px/1.5 var(--font-display)}
.setup-discard p b{color:#2a3a63}
.setup-discard .setup-ways{display:grid;gap:8px}
/* Both ways out stay inside the box. They were laid out at their natural
   width, which is as long as a skill's name, so they ran past the right
   edge of the pale box and the longer label was squeezed into two cramped
   lines. A name that does not fit wraps, centred, with room to read. */
.setup-discard .setup-ways .btn-ghost,
.setup-discard .setup-ways .btn-primary{box-sizing:border-box;width:100%;max-width:100%;
  min-width:0;height:auto;min-height:44px;padding:10px 14px;
  display:inline-flex;align-items:center;justify-content:center;
  white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.35}
.adaptive-mistakes .m-item .setup-discard{margin-top:8px}
.adaptive-mistakes .m-item .setup-discard .setup-ways{grid-template-columns:1fr 1fr}

@media (min-width: 768px) and (max-width: 1199px) {
  .adaptive-home .reco-continue{gap:16px}
  .adaptive-mistakes .m-item .setup-discard .setup-ways{grid-template-columns:1fr 1fr}
}
@media (max-width: 767px) {
  .adaptive-home .reco-continue{flex-direction:column;align-items:stretch;gap:14px}
  .adaptive-home .reco-continue .btn-primary{width:100%}
  .setup-discard{padding:12px 14px}
  .adaptive-mistakes .m-item .setup-discard .setup-ways{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   The Test Library.

   One wide column at every width, because every row is the same four facts
   and a grid of cards made the page dozens of screens long on an iPad. The
   facts every test shares are stated once in the header and never repeated
   in a row.
   --------------------------------------------------------------------------- */
.test-library { color: var(--color-primary); font-family: var(--font-display); }
.tl-heading { padding: 4px 14px 8px; }
.tl-heading h1 { margin: 0; font-size: 54px; line-height: .98; letter-spacing: -.035em; }
.tl-heading p { margin: 8px 0 0; max-width: 62ch; font-size: 19px; }
.tl-facts { margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--color-line);
  border-radius: 8px; background: var(--color-surface); color: var(--color-copy);
  font-family: var(--font-ui); font-size: 15px; }
.tl-state { margin: 16px 14px; padding: 18px 20px; border: 1px solid var(--color-line);
  border-radius: 8px; background: var(--color-surface); font-family: var(--font-ui); font-size: 16px; }
.tl-footnote { margin: 22px 14px 8px; color: var(--color-muted);
  font-family: var(--font-ui); font-size: 14px; }

.tl-recommended { margin: 20px 14px 0; padding: 26px 28px; border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-gold); border-radius: 10px; background: var(--color-surface); }
.tl-eyebrow { display: block; color: var(--color-gold); font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tl-recommended h2 { margin: 8px 0 0; font-size: 34px; line-height: 1.05; letter-spacing: -.02em; }
.tl-recommended p { margin: 8px 0 18px; font-family: var(--font-ui); font-size: 15px; color: var(--color-copy); }
.tl-recommended b { color: var(--color-primary); }

.tl-summary { margin: 20px 14px 0; }
.tl-summary h2 { margin: 0 0 10px; font-size: 20px; }
.tl-summary ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-line);
  border-radius: 8px; background: var(--color-surface); overflow: hidden; }
.tl-summary li { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-top: 1px solid var(--color-line); font-family: var(--font-ui); font-size: 15px; }
.tl-summary li:first-child { border-top: 0; }
.tl-summary li b { min-width: 11em; font-family: var(--font-display); font-size: 16px; }
.tl-summary li span { color: var(--color-muted); }
.tl-summary li .tl-score { margin-left: auto; color: var(--color-primary); font-weight: 700; }
.tl-summary li > .btn { margin-left: 12px; }
.tl-summary li .tl-score ~ .btn { margin-left: 12px; }

.tl-all { margin: 26px 14px 0; }
.tl-all > header { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-all h2 { margin: 0; font-size: 20px; }
.tl-filters { display: inline-flex; border: 1px solid var(--color-line); border-radius: 999px;
  background: var(--color-surface); overflow: hidden; }
.tl-filters button { padding: 7px 16px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; color: var(--color-muted); }
.tl-filters button.is-on { background: var(--color-primary); color: #fff; font-weight: 600; }

.tl-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-line);
  border-radius: 8px; background: var(--color-surface); overflow: hidden;
  font-family: var(--font-ui); font-size: 15px; }
.tl-table thead th { padding: 10px 16px; border-bottom: 1px solid var(--color-line);
  color: var(--color-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-align: left; text-transform: uppercase; }
.tl-row > * { padding: 12px 16px; border-top: 1px solid var(--color-line); vertical-align: middle; }
.tl-row th { font-family: var(--font-display); font-size: 16px; font-weight: 600; text-align: left; white-space: nowrap; }
.tl-exposure, .tl-status { color: var(--color-muted); }
.tl-status b { color: var(--color-primary); }
.tl-row.is-completed th { color: var(--color-muted); }
.tl-action { width: 1%; white-space: nowrap; text-align: right; }
.tl-plan { position: relative; width: 1%; padding-right: 12px; }
.tl-icon-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-line); border-radius: 8px;
  background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.tl-icon-btn[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-primary); }
.tl-icon-btn .icon { width: 17px; height: 17px; }
.tl-plan-pop { position: absolute; right: 12px; top: calc(100% - 4px); z-index: 5; width: 232px;
  padding: 14px; border: 1px solid var(--color-line); border-radius: 10px;
  background: var(--color-surface); box-shadow: var(--shadow); text-align: left; }
.tl-plan-pop label { display: block; font-size: 13px; color: var(--color-muted); }
.tl-plan-pop input { width: 100%; margin-top: 6px; padding: 7px 9px;
  border: 1px solid var(--color-line); border-radius: 7px; }
.tl-plan-actions { display: flex; gap: 8px; margin-top: 12px; }

.btn.tl-primary { border: 1px solid var(--color-primary); border-radius: 8px;
  padding: 8px 16px; background: var(--color-primary); color: #fff; font-weight: 600; cursor: pointer; }
.btn.tl-ghost { border: 1px solid var(--color-line); border-radius: 8px; padding: 8px 16px;
  background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
.btn.tl-ghost[disabled] { color: var(--color-muted); cursor: default; }
.btn.tl-start { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; font-size: 16px; }
.btn.tl-start .icon { width: 18px; height: 18px; }
.tl-more { display: block; margin: 14px auto 0; }

@media (min-width: 768px) and (max-width: 1199px) {
  .tl-heading h1 { font-size: 42px; }
  .tl-recommended h2 { font-size: 28px; }
  /* The name stays on one line; the date is what wraps if anything must. */
  .tl-exposure { width: 1%; white-space: nowrap; }
  .tl-table { font-size: 14px; }
  .tl-row > * { padding: 12px 12px; }
}

/* A phone gets two lines per row: the name and the one action on top, what
   the learner has done with it underneath. The table keeps its semantics. */
@media (max-width: 767px) {
  .tl-heading { padding: 4px 16px 8px; }
  .tl-heading h1 { font-size: 34px; }
  .tl-heading p { font-size: 16px; }
  .tl-facts, .tl-state, .tl-footnote { margin-left: 16px; margin-right: 16px; }
  .tl-recommended, .tl-summary, .tl-all { margin-left: 16px; margin-right: 16px; }
  .tl-recommended { padding: 20px; }
  .tl-recommended h2 { font-size: 26px; }
  .tl-all > header { align-items: flex-start; flex-direction: column; }
  .tl-filters { width: 100%; }
  .tl-filters button { flex: 1; }
  .tl-table, .tl-table tbody, .tl-row { display: block; width: 100%; }
  .tl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tl-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas:
      "name action plan" "exposure status status"; gap: 6px 10px; padding: 14px 16px;
      border-top: 1px solid var(--color-line); }
  .tl-row > * { padding: 0; border-top: 0; }
  .tl-row th { grid-area: name; align-self: center; }
  .tl-action { grid-area: action; width: auto; }
  .tl-plan { grid-area: plan; width: auto; padding-right: 0; }
  .tl-exposure { grid-area: exposure; font-size: 13px; }
  .tl-status { grid-area: status; justify-self: end; font-size: 13px; text-align: right; }
  .tl-plan-pop { right: 0; width: min(260px, calc(100vw - 48px)); }
  .tl-summary li { flex-wrap: wrap; }
  .tl-summary li b { min-width: 0; width: 100%; }
}
.tl-recover { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 14px 0; color: var(--color-muted); font-family: var(--font-ui); font-size: 14px; }
@media (max-width: 767px) { .tl-recover { margin-left: 16px; margin-right: 16px; } }

/* The trail above a page's title. Same secondary text the skill and result
   pages already used; the arrow is the phone's way back, since there is no
   rail to go back through at that width. */
.page-crumb { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 14px; }
.page-crumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0; list-style: none;
  color: #3e5ca4; font: 600 14px/1.2 var(--font-display); }
.page-crumb li + li::before { content: "/"; margin-right: 6px; color: var(--color-muted); font-weight: 400; }
.page-crumb a { color: #3e5ca4; text-decoration: none; }
.page-crumb a:hover { text-decoration: underline; }
.page-crumb li[aria-current="page"] { color: var(--color-muted); }
.crumb-up { display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border: 1px solid var(--color-line);
  border-radius: 9px; background: var(--color-surface); color: var(--color-primary); }
.crumb-up .icon { width: 18px; height: 18px; transform: rotate(180deg); }
@media (max-width: 767px) {
  .page-crumb { padding: 0 16px; }
  /* No rail at this width, so the way back up is an arrow on the page. */
  .crumb-up { display: inline-flex; }
}
/* The lockup is a link inside the portal; it keeps the look it had. */
a.brand-home { text-decoration: none; color: inherit; }
a.brand-home:hover strong { text-decoration: underline; }

/* The rail's sub-entries, the user block pinned to its foot, and the small
   menu that opens off the user.
   -----------------------------------------------------------------------
   Owner's ruling of 2026-10-09: each section names its own pages, only the
   section the learner is in is open, and the user sits at the bottom of
   the rail at any screen height. The sub-entries use the secondary text
   the rest of the portal already uses -- no new colour, no new type. */
.portal-nav-group { display: grid; gap: 2px; }
.portal-nav-head { display: flex; align-items: center; gap: 2px; }
/* The fold takes 30px off the row, so the entry gives it back rather
   than wrapping "Adaptive Practice" onto two lines. */
.portal-nav-head .portal-nav-item { flex: 1 1 auto; gap: 12px; padding-right: 4px; }
.portal-nav-fold { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center;
  border: 0; border-radius: 7px; color: #8b95ab; background: transparent; }
.portal-nav-fold:hover { color: var(--color-primary); background: #f5f6fa; }
.portal-nav-fold .icon { width: 16px; height: 16px; transition: transform .16s ease; }
.portal-nav-group.is-open .portal-nav-fold .icon { transform: rotate(180deg); }
.portal-subnav { display: none; margin: 0 0 6px; padding: 0 0 0 48px; list-style: none; }
/* The fly-out's heading. Only the collapsed rail needs it. */
.portal-subnav-head { display: none; }
.portal-subnav-head a { display: block; padding: 6px 10px 8px; border-bottom: 1px solid var(--color-line);
  color: var(--color-primary); font: 700 14px/1.3 var(--font-display); text-decoration: none; }
.portal-subnav-head a:hover { text-decoration: underline; }
.portal-nav-group.is-open .portal-subnav { display: grid; gap: 1px; }
.portal-subnav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 34px; padding: 5px 12px 5px 10px; border-radius: 7px;
  color: #5b6a8f; font: 500 14px/1.3 var(--font-ui); text-decoration: none; }
.portal-subnav-item:hover { color: var(--color-primary); background: #f5f6fa; }
.portal-subnav-item.is-active { color: var(--color-primary); font-weight: 700; background: #eef0f9; }
.portal-subnav-count { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 99px;
  color: #fff; background: var(--color-primary); font: 700 11px/1.5 var(--font-ui); text-align: center; }

/* One auto margin, so the foot is flush with the bottom whatever the rail
   holds above it. Two of them used to fight and the user floated. */
.portal-rail-foot { display: grid; min-width: 0; gap: 8px; margin-top: auto; padding-bottom: 8px; }
.portal-user-block { position: relative; min-width: 0; }
.portal-user { display: flex; width: calc(100% - 40px); align-items: center; gap: 12px;
  margin: 0 20px; padding: 12px; border: 0; border-top: 1px solid var(--color-line);
  border-radius: 0; color: var(--color-primary); background: transparent;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; text-align: left; }
button.portal-user:hover { background: #f5f6fa; }
.portal-user-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.portal-user .icon { width: 16px; height: 16px; flex: 0 0 auto; color: #8b95ab; }
.portal-user-block.is-open .portal-user .icon { transform: rotate(180deg); }
.portal-user-menu { position: absolute; bottom: calc(100% + 6px); left: 20px; right: 20px; z-index: 60;
  display: grid; gap: 2px; padding: 6px; border: 1px solid var(--color-line); border-radius: 10px;
  background: #fff; box-shadow: var(--shadow); }
.portal-user-menu-item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px;
  color: var(--color-primary); background: transparent; font: 500 14px/1.3 var(--font-ui);
  text-align: left; text-decoration: none; }
.portal-user-menu-item:hover { background: #f5f6fa; }

/* Collapsed to the icon strip: no sub-entries on the rail itself, and the
   section's pages come out beside the icon when the pointer rests on it.
   Same at 1200+ (the fold button) and at 768-1199, where the rail is
   already that shape. */
@media (max-width: 1199px) and (min-width: 768px) {
  .portal-rail { overflow: visible; }
  .portal-nav-fold, .portal-subnav { display: none; }
  .portal-nav-group.is-open .portal-subnav { display: none; }
  .portal-nav-group { position: relative; }
  .portal-nav-group:hover .portal-subnav,
  .portal-nav-group:focus-within .portal-subnav {
    position: absolute; left: calc(100% + 8px); z-index: 60; display: grid; gap: 2px;
    min-width: 190px; margin: -38px 0 0; padding: 6px; border: 1px solid var(--color-line);
    border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
  .portal-nav-group:hover .portal-subnav-head,
  .portal-nav-group:focus-within .portal-subnav-head { display: block; }
  .portal-nav-group:hover .portal-nav-item span,
  .portal-nav-group:focus-within .portal-nav-item span { display: none; }
  .portal-user { justify-content: center; width: calc(100% - 24px); margin-inline: 12px; padding-inline: 0; }
  .portal-user-name, .portal-user .icon { display: none; }
  .portal-user-menu { left: 8px; right: 8px; }
}
@media (min-width: 1200px) {
  /* The fly-out has to leave the rail, and a scrolling box clips whatever
     leaves it. Collapsed, the rail is three icons and a foot: there is
     nothing to scroll, so it can stop being a scrolling box. */
  .portal-shell.rail-is-collapsed .portal-rail { overflow: visible; }
  .portal-shell.rail-is-collapsed .portal-nav-fold { display: none; }
  .portal-shell.rail-is-collapsed .portal-nav-group .portal-subnav,
  .portal-shell.rail-is-collapsed .portal-nav-group.is-open .portal-subnav { display: none; }
  /* Resting on the icon brings the section's pages out beside it. */
  .portal-shell.rail-is-collapsed .portal-nav-group:hover .portal-subnav,
  .portal-shell.rail-is-collapsed .portal-nav-group:focus-within .portal-subnav {
    position: absolute; left: calc(100% + 8px); z-index: 60; display: grid; gap: 2px;
    min-width: 190px; margin: -38px 0 0; padding: 6px; border: 1px solid var(--color-line);
    border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
  .portal-shell.rail-is-collapsed .portal-nav-group { position: relative; }
  .portal-shell.rail-is-collapsed .portal-nav-group:hover .portal-subnav-head,
  .portal-shell.rail-is-collapsed .portal-nav-group:focus-within .portal-subnav-head { display: block; }
  /* The fly-out names the section, so the hover label would say it twice. */
  .portal-shell.rail-is-collapsed .portal-nav-group:hover .portal-nav-item span,
  .portal-shell.rail-is-collapsed .portal-nav-group:focus-within .portal-nav-item span { display: none; }
  .portal-shell.rail-is-collapsed .portal-user-name,
  .portal-shell.rail-is-collapsed .portal-user .icon { display: none; }
  .portal-shell.rail-is-collapsed .portal-user { justify-content: center;
    width: calc(100% - 24px); margin-inline: 12px; padding-inline: 0; }
  .portal-shell.rail-is-collapsed .portal-user-menu { left: 6px; right: 6px; min-width: 150px; }
}
/* The phone drawer is the same rail, so it keeps the same structure: the
   base rules already fold every section but the open one, and the strip's
   fly-out does not apply at this width. */
@media (max-width: 767px) {
  .portal-user { justify-content: flex-start; width: calc(100% - 32px); margin-inline: 16px; padding-inline: 8px; }
  .portal-user-name { display: block; }
  .portal-user .icon { display: block; }
}

/* My Results: the library's list, with a score in it. */
/* A test's name is three short words and belongs on one line. */
.full-length-results .tl-results-table .tl-name { white-space: nowrap; }
.full-length-results .tl-results-table .tl-score { text-align: right; font-variant-numeric: tabular-nums; }
.full-length-results .tl-results-table .tl-score b { font-size: 17px; }
.full-length-results .tl-results-table .tl-score i { display: none; }
.full-length-results .tl-when { color: var(--color-muted); }
@media (max-width: 767px) {
  .full-length-results .tl-results-table thead { display: none; }
  .full-length-results .tl-results-table tr { display: grid; grid-template-columns: 1fr auto;
    gap: 4px 10px; padding: 14px 0; }
  .full-length-results .tl-results-table td { padding: 0; border: 0; }
  .full-length-results .tl-results-table .tl-name { font-weight: 700; }
  .full-length-results .tl-results-table .tl-action { grid-row: 1; grid-column: 2; }
  .full-length-results .tl-results-table .tl-when { grid-row: 2; grid-column: 1 / -1; }
  /* Each number says what it is: the headings are not on screen here. */
  .full-length-results .tl-results-table .tl-score { display: flex; grid-column: 1 / -1;
    align-items: baseline; justify-content: space-between; gap: 10px; text-align: right; }
  .full-length-results .tl-results-table .tl-score i { display: block; color: var(--color-muted);
    font: 500 13px/1.3 var(--font-ui); font-style: normal; }
}

/* The full-length report, rebuilt.
   -----------------------------------------------------------------------
   Owner's ruling of 2026-10-09: the total with both halves under it, the
   real exposure count, the skills that cost points, and the paper itself
   by module, filterable, every question openable. Same type and colour as
   the diagnostic report, which this borrows its analysis from. */
.fl-score { display: grid; gap: 14px; margin: 18px 0 8px; }
.fl-score-total { display: grid; gap: 4px; padding: 20px 22px; border-radius: 14px; background: #f4f6fb; }
.fl-score-total span { color: var(--color-muted); font: 500 14px/1.3 var(--font-ui); }
.fl-score-total strong { font: 700 44px/1 var(--font-display); color: var(--color-primary); }
.fl-score-total small { color: var(--color-muted); font: 400 13px/1.5 var(--font-ui); }
.fl-score-halves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fl-score-halves article { display: grid; gap: 3px; align-content: start; padding: 16px 18px;
  border: 1px solid var(--color-line); border-radius: 12px; }
.fl-score-halves span { color: var(--color-muted); font: 500 13px/1.3 var(--font-ui); }
.fl-score-halves strong { font: 700 28px/1.1 var(--font-display); color: var(--color-primary); }
.fl-score-halves strong small { font-size: 15px; color: var(--color-muted); }
.fl-score-halves p { margin: 0; color: var(--color-muted); font: 400 13px/1.4 var(--font-ui); }

.fl-skills { margin: 22px 0; }
.fl-skills > p { color: var(--color-muted); font: 400 14px/1.6 var(--font-ui); }
.fl-skill-group { margin-top: 16px; }
.fl-skill-group h3 { margin: 0 0 6px; font: 700 16px/1.3 var(--font-display); }
.fl-skill-group ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.fl-skill { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.fl-skill:nth-child(odd) { background: #f8f9fc; }
.fl-skill a { flex: 1 1 auto; color: #3e5ca4; font: 500 15px/1.3 var(--font-ui); text-decoration: none; }
.fl-skill a:hover { text-decoration: underline; }
.fl-skill-count { color: var(--color-muted); font: 500 14px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.fl-skill.is-weakest a { font-weight: 700; }
.fl-tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 99px; background: #fdf3df;
  color: #8a6512; font: 700 11px/1.6 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.fl-skill-note { color: var(--color-muted); font: 400 13px/1.5 var(--font-ui); }
@media (max-width: 620px) {
  .fl-skill { flex-wrap: wrap; gap: 4px 10px; }
  .fl-skill a, .fl-skill > span:first-child { flex: 1 1 100%; font-size: 14px; line-height: 1.35; }
}

.fl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.fl-filters .btn.is-active { border-color: var(--color-primary); color: var(--color-primary);
  background: #eef0f9; font-weight: 700; }
.fl-module { margin-bottom: 20px; }
.fl-module h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 6px; font: 700 16px/1.3 var(--font-display); }
.fl-module h3 small { color: var(--color-muted); font: 500 13px/1.3 var(--font-ui); }
.fl-rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.fl-row-head { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 8px; background: transparent; text-align: left; }
.fl-row:nth-child(odd) .fl-row-head { background: #f8f9fc; }
.fl-row-head:hover:not([disabled]) { background: #eef0f9; }
.fl-row-head[disabled] { cursor: default; opacity: .75; }
.fl-row-number { flex: 0 0 28px; color: var(--color-muted); font: 600 14px/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums; }
.fl-row-skill { flex: 1 1 auto; color: var(--color-primary); font: 500 15px/1.3 var(--font-ui); }
.fl-row-head .icon { width: 16px; height: 16px; flex: 0 0 auto; color: #8b95ab; }
@media (max-width: 620px) {
  .fl-row-head { flex-wrap: wrap; gap: 8px 10px; }
  .fl-row-skill { flex: 1 1 100%; order: 3; font-size: 14px; line-height: 1.35; }
  .fl-row-head .icon { margin-left: auto; }
}
.fl-row.is-open .fl-row-head .icon { transform: rotate(180deg); }

.fl-review-open { margin: 0 0 22px; padding: 18px; border: 1px solid var(--color-line);
  border-radius: 14px; background: #fff; }
.fl-review-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.fl-review-where { flex: 1 1 auto; color: var(--color-muted); font: 500 14px/1.3 var(--font-ui); }
.fl-review-back .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.fl-passage, .fl-prompt { font: 400 16px/1.7 var(--font-ui); }
.fl-passage { padding-bottom: 12px; border-bottom: 1px solid var(--color-line); margin-bottom: 12px; }
.fl-figure { margin: 12px 0; }
.fl-figure img { max-width: 100%; height: auto; }
.fl-choices { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.fl-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--color-line); border-radius: 10px; font: 400 15px/1.6 var(--font-ui); }
.fl-choice > b { flex: 0 0 22px; font: 700 15px/1.6 var(--font-display); }
.fl-choice > div { flex: 1 1 auto; }
.fl-choice > div p { margin: 0; }
.fl-choice.is-right { border-color: #1f7a4d; background: #f1faf4; }
.fl-choice.is-yours { border-color: #b4291f; background: #fdf3f2; }
.fl-written { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; }
.fl-written dt { color: var(--color-muted); font: 500 14px/1.6 var(--font-ui); }
.fl-written dd { margin: 0; font: 600 15px/1.6 var(--font-ui); }
.fl-omitted-note { color: var(--color-muted); font: 400 14px/1.6 var(--font-ui); }
.fl-explanation h3 { margin: 16px 0 4px; font: 700 15px/1.3 var(--font-display); }
.fl-explanation p { margin: 0; font: 400 15px/1.7 var(--font-ui); }
.fl-review-steps { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.fl-review-count { flex: 1 1 auto; color: var(--color-muted); font: 500 13px/1.3 var(--font-ui);
  text-align: center; font-variant-numeric: tabular-nums; }
.fl-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
  padding-top: 18px; border-top: 1px solid var(--color-line); }

@media (max-width: 767px) {
  .fl-score-halves { grid-template-columns: 1fr; }
  /* The tag takes its own line rather than squeezing the choice. */
  .fl-choice { flex-wrap: wrap; }
  .fl-choice .fl-tag { margin-left: 32px; }
  /* A phone has no room for a question inside a list, so the question
     takes the page and the list waits behind the back button. */
  .full-length-report.has-open-question .fl-list,
  .full-length-report.has-open-question .fl-filters,
  .full-length-report.has-open-question .fl-skills,
  .full-length-report.has-open-question .fl-score,
  .full-length-report.has-open-question .full-length-estimate-caution,
  .full-length-report.has-open-question h1,
  .full-length-report.has-open-question h2,
  .full-length-report.has-open-question .entry-eyebrow,
  .full-length-report.has-open-question .fl-report-actions { display: none; }
  .full-length-report.has-open-question .fl-review-open { margin: 0; padding: 0; border: 0; }
  .fl-review-steps { position: sticky; bottom: 0; padding: 10px 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%); }
  .fl-review-steps .btn { flex: 1 1 0; }
}

/* A mistake list narrowed to one test says so, and the way back to all of
   them is on the page, not only in the address. */
.adaptive-mistakes .m-all { color: #3e5ca4; font: 500 14px/1.4 var(--font-ui); text-decoration: none; }
.adaptive-mistakes .m-all:hover { text-decoration: underline; }

/* My profile. One page for the account and the learning record: the
   diagnostic and subscription cards that used to be the account page are
   lines of the record now. Same type and colour as everywhere else. */
.profile-screen { display: grid; gap: 18px; }
.pf-head { display: flex; align-items: center; gap: 16px; }
.pf-avatar { width: 56px; height: 56px; font: 700 22px var(--font-display); }
.pf-head h1 { margin: 0; overflow-wrap: anywhere; }
.pf-head p { margin: 2px 0 0; color: var(--color-muted); font: 400 15px var(--font-ui);
  overflow-wrap: anywhere; }
.pf-card { display: grid; gap: 18px; padding: 24px; }
.pf-card h2 { margin: 0; }
.pf-facts { display: grid; gap: 10px; margin: 0; }
.pf-facts > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: baseline; }
.pf-facts dt { color: var(--color-muted); font: 500 14px var(--font-ui); }
.pf-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0;
  color: var(--color-primary); font: 500 15px var(--font-ui); overflow-wrap: anywhere; }
.pf-facts em { color: var(--color-muted); font-style: normal; }
.pf-small { padding: 4px 10px; font-size: 13px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.pf-name-form input { flex: 1 1 220px; min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--color-line); border-radius: 8px; font: 400 15px var(--font-ui); }
.pf-name-form p[role="alert"] { flex: 1 1 100%; margin: 0; color: #b4291f;
  font: 500 13px var(--font-ui); }
.pf-block { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.pf-block h3 { margin: 0; font: 700 16px var(--font-display); }
.pf-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pf-scores article { display: grid; gap: 2px; align-content: start; padding: 14px 16px;
  border-radius: 12px; background: #f4f6fb; }
.pf-scores span { color: var(--color-muted); font: 500 13px var(--font-ui); }
.pf-scores strong { font: 700 26px/1.1 var(--font-display); color: var(--color-primary); }
.pf-scores strong small { font-size: 14px; color: var(--color-muted); }
.pf-scores p { margin: 0; color: var(--color-muted); font: 400 13px var(--font-ui); }
.pf-note { margin: 0; color: var(--color-muted); font: 400 14px/1.6 var(--font-ui); }
.pf-note a, .pf-trend-list a { color: #3e5ca4; }
.profile-screen .pf-empty { color: var(--color-muted); font: 400 15px var(--font-ui); }
.pf-trend { width: 100%; max-width: 560px; height: auto; }
.pf-trend line { stroke: var(--color-line); stroke-width: 1; }
.pf-trend polyline { fill: none; stroke: var(--color-gold); stroke-width: 2; }
.pf-trend circle { fill: var(--color-primary); }
.pf-trend text { fill: var(--color-primary); font: 600 12px var(--font-ui); text-anchor: middle; }
.pf-trend text.pf-trend-date { fill: #8b95ab; font-weight: 500; }
.pf-trend-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-trend-list li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px;
  align-items: baseline; padding: 8px 10px; border-radius: 8px; font: 500 14px var(--font-ui); }
.pf-trend-list li:nth-child(odd) { background: #f8f9fc; }
.pf-trend-list b { font: 700 16px var(--font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .pf-scores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .pf-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .pf-trend-list li { grid-template-columns: 1fr auto; }
  /* "2 min 57 s" is a value, not a sentence: it does not wrap. */
  .pf-scores strong { font-size: 21px; white-space: nowrap; }
}

/* "Show all N skills" under the mistake list. Same ghost button the rest
   of the page uses; it is a way to see more, not a new kind of control. */
.adaptive-mistakes .m-more { margin: 0 24px 18px; width: calc(100% - 48px); }
@media (max-width: 767px) {
  .adaptive-mistakes .m-more { margin: 0 14px 14px; width: calc(100% - 28px); }
}

/* The note under Save and exit: what leaving costs, in the panel's own
   secondary text rather than a new kind of warning. */
.exam-panel-note { margin: 8px 0 0; color: var(--color-muted); font: 400 13px/1.5 var(--font-ui); }

/* A card whose numbers have not arrived: the shape of them, grey. Never a
   zero and never "No data yet" -- both of those say something about the
   learner's work, and while the read is in flight there is nothing to
   say. The pulse is slow enough not to nag and is dropped for anyone who
   has asked for less motion. */
.pf-skeleton { display: grid; gap: 8px; align-content: start; padding: 18px 16px;
  border-radius: 12px; background: #f4f6fb; }
.pf-skeleton span, .pf-skeleton strong, .pf-skeleton-line {
  display: block; border-radius: 6px; background: #e4e8f2; animation: pf-breathe 1.6s ease-in-out infinite; }
.pf-skeleton span { width: 62%; height: 11px; }
.pf-skeleton strong { width: 44%; height: 22px; }
.pf-skeleton-line { width: 160px; height: 14px; }
.pf-scores .pf-skeleton:nth-child(2) span { width: 78%; }
.pf-scores .pf-skeleton:nth-child(3) span { width: 54%; }
.pf-scores .pf-skeleton:nth-child(3) strong { width: 58%; }
.pf-scores .pf-skeleton:nth-child(4) strong { width: 36%; }
@keyframes pf-breathe { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .pf-skeleton span, .pf-skeleton strong, .pf-skeleton-line { animation: none; }
}

/* A whole page that has not arrived: the same grey as the profile's cards,
   in the shape of the page that is coming. Never a sentence about what is
   being checked -- see views/page-skeleton.js. */
.page-skeleton { display: grid; gap: 10px; }
.page-skeleton-title { background: none; padding: 4px 0 10px; }
.page-skeleton-row { grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
.page-skeleton-row strong { height: 14px; justify-self: end; }

/* ── Study Coach lessons ──────────────────────────────────────────────
   Each lesson brings its own stylesheet, scoped by the build to
   .lesson-body[data-lesson="…"], so one lesson's .fig cannot restyle
   another's. What is here is the part no lesson can know: how it behaves
   at the three widths this site has, and the few controls the site added
   around it. The lessons were drawn at 1440. */
.lesson-page { display: block; }
.lesson-body .lp { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; align-items: start; }
.lesson-body .lp-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.lesson-body .card.toc ol { counter-reset: none; }
.lesson-in-card { margin-top: 18px; }
.lesson-in-card .lesson-lede { margin: 0 0 14px; color: #3d4f78; font: 18px/1.55 var(--font-display); }
.lesson-open-row { margin: 0 0 18px; }
.lesson-ready .btn-primary, .lesson-ready .btn-ghost { display: block; width: 100%; margin-top: 10px; text-align: center; }
/* A lesson read inside the drawer gets its own jump list: the drawer has
   no room for a column beside the text. */
.lesson-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.lesson-jump a { padding: 5px 10px; border: 1px solid var(--color-hairline, #dde3ee); border-radius: 999px;
  color: #33446e; font: 13px var(--font-ui); text-decoration: none; }
.lesson-jump a:hover { background: #eef1f9; }

/* Nothing in a lesson may push the page sideways. A wide table or a wide
   figure scrolls inside its own box instead. */
.lesson-body img, .lesson-body svg { max-width: 100%; height: auto; }
.lesson-body table { max-width: 100%; }
.lesson-body .dt, .lesson-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lesson-body .fig, .lesson-body .bigfig, .lesson-body .testbox,
.lesson-body .rules-grid, .lesson-body .traps-grid, .lesson-body .split,
.lesson-body .disguise, .lesson-body .stick, .lesson-body .timeline { max-width: 100%; }

@media (max-width: 1199px) {
  /* iPad and narrower: one column, and the contents list folds to the top
     of the lesson rather than standing beside it. What each lesson's own
     blocks do at these widths is in that lesson's stylesheet, where it
     can outrank the rules it is overriding. */
  .lesson-body .lp { grid-template-columns: minmax(0,1fr); }
  .lesson-body .lp-side { position: static; flex-direction: column-reverse; }
  .lesson-body .card.toc ol { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .lesson-body .card.toc ol { grid-template-columns: 1fr; }
  .lesson-body .chips { gap: 6px; }
  .lesson-body .chip { font-size: 12px; padding: 6px 10px; }
}

/* The profile heading while the read is in flight: a grey line the width
   of a name, and an avatar with no letter in it. The part before the @ in
   an address is not the learner's name, and showing it for a second and
   then replacing it reads as the page changing its mind. */
.pf-head.is-waiting .pf-avatar { background: #e4e8f2; color: transparent; }
.pf-head-waiting { margin: 0; }
.pf-head-waiting .pf-skeleton-line { width: 220px; height: 26px; }

/* How far a diagnostic in progress has got, on the dashboard card. */
.entry-progress-line { margin: 2px 0 0; font-size: 13px; color: #4b5563; font-variant-numeric: tabular-nums; }

/* An explanation, in the places one is shown: after a Tutorial question,
   on the results page, on a mistake card, and in both reports.
   The bank writes three parts -- why the answer is right, each choice, and
   the steps -- and they are drawn the same way wherever they appear, so a
   student reads the same thing in the same order. src/explanation-text.js */
.xp-why,.xp-choices,.xp-steps { margin: 12px 0 0; }
.xp-why:first-child { margin-top: 0; }
.xp-why h4,.xp-choices h4,.xp-steps h4 { margin: 0 0 4px;
  color: #4a5a85; font: 700 12.5px/1.4 var(--font-ui); letter-spacing: .02em;
  text-transform: uppercase; }
.xp-why p { margin: 0 0 6px; }
.xp-why p:last-child { margin-bottom: 0; }
.xp-choices ul { margin: 0; padding: 0; list-style: none; }
.xp-choices li { display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: baseline; gap: 4px 8px; padding: 6px 8px; border-radius: 6px; }
.xp-choices li + li { margin-top: 4px; }
.xp-choices li b { color: #33446e; font: 700 14px var(--font-ui); }
.xp-choices li.is-right { background: #eff9f4; }
.xp-choices li.is-right b { color: #126b44; }
.xp-choices li.is-wrong.is-yours { background: #fff3f1; }
.xp-choices li.is-wrong.is-yours b { color: #a3351f; }
.xp-choices li em { color: #5b6a8f; font: 600 12px var(--font-ui); font-style: normal;
  white-space: nowrap; }
.xp-choices li.is-right em { color: #126b44; }
.xp-choices li.is-wrong.is-yours em { color: #a3351f; }
.xp-steps ol { margin: 0; padding-left: 20px; }
.xp-steps li + li { margin-top: 4px; }
/* Inside a container that sets its own type, the parts inherit it: the
   result box reads in the display face, the Mistake Lab card in the UI
   face, and neither is restyled here. */
.adaptive-set .result .xp-choices li span,.adaptive-set .result .xp-steps li,
.adaptive-results .review-explanation .xp-choices li span,
.adaptive-results .review-explanation .xp-steps li { color: #33446e;
  font: 15.5px/1.62 var(--font-display); }
.mistake-review-explanation .xp-why p,.mistake-review-explanation .xp-choices li span,
.mistake-review-explanation .xp-steps li { color: #394968; font: 13px/1.55 var(--font-ui); }
.fl-explanation .xp-why p,.fl-explanation .xp-choices li span,
.fl-explanation .xp-steps li { font: 400 15px/1.7 var(--font-ui); }
@media (max-width: 640px) {
  .xp-choices li { grid-template-columns: 18px minmax(0,1fr); }
  .xp-choices li em { grid-column: 2; }
}

/* Looking back at a question already answered, inside a set.
   The squares were a picture of how the set was going; now each answered
   one is the way back to that question, so they are buttons and they look
   the part. Ruled 2026-10-20. */
.adaptive-set .grid10 button{display:grid;height:44px;place-items:center;
  border:1px solid #d7deea;border-radius:7px;color:#5b6a8f;background:#fff;
  font:600 14px var(--font-ui);cursor:pointer}
.adaptive-set .grid10 button:hover{border-color:#8fa0c4;background:#f6f8fc}
.adaptive-set .grid10 button.ok{border-color:#9fd4b8;color:#126b44;background:#eff9f4}
.adaptive-set .grid10 button.bad{border-color:#efb7ae;color:#a3351f;background:#fff3f1}
.adaptive-set .grid10 button.cur{border:2px solid #10245f;color:#10245f}
/* The one being looked at: ringed, so it is not read as the question they
   are on -- that one keeps its own outline. */
.adaptive-set .grid10 .is-here{box-shadow:0 0 0 2px #d89a21;color:#8a5e05}
.adaptive-set .q-reviewing{padding:3px 9px;border-radius:99px;color:#8a5e05;
  background:#fdf3dd;font:700 11px var(--font-ui);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
/* Their own answer on a question they are looking back at: marked even
   where it was right, so the page says what they did, not just what the
   answer was. */
.adaptive-set .choice.is-yours{box-shadow:0 0 0 2px #8a5e05 inset}
.adaptive-set .q-back{display:inline-flex;min-height:44px;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid #cbd5e5;border-radius:6px;color:#243761;background:#fff;
  font:600 15px var(--font-display)}
.adaptive-set .q-back .icon{width:16px;height:16px;transform:rotate(180deg)}

/* The squares come back on an iPad and a phone, where the rail folds the
   question panel into one line and they were hidden. They are now the way
   back to an answered question, and Back one question at a time is not a
   way through twenty. One row of ten, the height of a thumb. */
@media (max-width: 1199px) {
  .adaptive-set .navi .grid10{display:grid;grid-template-columns:repeat(10,1fr);
    gap:5px;width:100%;order:3;margin-top:4px}
  .adaptive-set .navi .grid10 span,.adaptive-set .navi .grid10 button{height:34px;
    border-radius:5px;font-size:12px}
  .adaptive-set.grid-is-hidden .navi .grid10{display:none}
}
@media (max-width: 767px) {
  .adaptive-set .q-back{width:100%;justify-content:center}
}