/*
 * OpenExaminations' visual system: warm paper, ink navy, and a single bright signal
 * color. The stylesheet is intentionally dependency-free so the template can
 * be hosted from any simple local web server.
 */

:root {
  --paper: #f5f7fa;
  --paper-deep: #e9eef5;
  --white: #ffffff;
  --ink: #182b46;
  --muted: #59677a;
  --line: #d8e0ea;
  --signal: #315dcc;
  --signal-dark: #2449a5;
  --teal: #8bc7bb;
  --yellow: #f5c875;
  --shadow: 0 24px 60px rgba(23, 37, 47, 0.11);
  --radius-large: 28px;
  --radius-medium: 16px;
  --max-width: 1600px;
}

/* UX sweep: compact discovery, clear keyboard targets, and persistent questionnaire progress. */
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
[hidden] { display: none !important; }
input, select, textarea { font: inherit; }
textarea { resize: vertical; }
section[id], fieldset { scroll-margin-top: 90px; }
.question-progress { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px #182b460d; }
.question-progress progress { flex: 1; min-width: 40px; height: 10px; accent-color: var(--signal); }
.question-progress label { font-size: 14px; }
.review-state { display: inline-block; margin: 4px 0 4px 10px; padding: 4px 10px; background: var(--paper-deep); border-radius: 6px; font-size: 14px; font-weight: 500; }
.archive-help { max-width: 75ch; margin: 12px 0 24px; }
.archive-help summary { cursor: pointer; color: var(--signal-dark); }
.archive-help a { color: var(--signal-dark); text-decoration: underline; text-underline-offset: 3px; }
.question-card input { scroll-margin-top: 130px; }
@media (max-width: 600px) {
  .question-progress { flex-wrap: wrap; gap: 8px; }
  .question-progress button { flex-basis: 100%; }
  .review-state { display: block; width: fit-content; margin-left: 0; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* Keep short library pages anchored to the viewport without fixing the footer over content. */
body[data-page="home"] { min-height: 100vh; display: flex; flex-direction: column; position: relative; isolation: isolate; overflow-x: clip; }
/* Measurement-atlas artwork stays behind the library and never intercepts controls. */
body[data-page="home"]::before, body[data-page="home"]::after { position: fixed; inset: 0; pointer-events: none; content: ""; }
body[data-page="home"]::before { z-index: 0; }
body[data-page="home"]::before { background: radial-gradient(ellipse at 0 65%, #e2f0ec, transparent 48%), radial-gradient(ellipse at 100% 85%, #e3eafa, transparent 50%), var(--paper); }
.home-art { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.library-guides { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; pointer-events: none; }
body[data-page="home"]::after { z-index: 2; background: linear-gradient(180deg, #f5f7fa90, transparent 32%, transparent 88%, #f5f7fa40); }
@media (max-width: 600px) { .home-art { opacity: .75; } }
body[data-page="home"] > main { flex: 1; position: relative; z-index: 4; }
body[data-page="home"] > .site-footer { position: relative; z-index: 3; }
/* Every public subpage keeps the same footer rhythm as the library. */
body.subpage { min-height: 100vh; display: flex; flex-direction: column; }
body.subpage > main { flex: 1; }

button, a { font: inherit; }

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  border-radius: 8px;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.hero,
.stat-strip,
.section,
.site-footer {
  width: min(calc(100% - 48px), var(--max-width));
  margin-inline: auto;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.brand-name { color: var(--signal); }
.brand-name > span { color: var(--ink); font-weight: 650; }

.brand-mark {
  display: block;
  width: 29px;
  height: 29px;
  flex: none;
}

.text-link { transition: color 160ms ease; }

.text-link:hover { color: var(--signal-dark); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary { color: var(--white); background: var(--signal); box-shadow: 0 8px 18px rgba(232, 91, 72, 0.2); }
.button-primary:hover { background: var(--signal-dark); }
.button-dark { color: var(--white); background: var(--ink); }
.button-dark:hover { background: #273b47; }
.button-small { min-height: 38px; padding-inline: 16px; font-size: 12px; }
.button-quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.button-quiet:hover { border-color: var(--ink); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: center;
  min-height: 550px;
  padding-block: 70px 80px;
  gap: 55px;
}

.eyebrow { margin: 0 0 18px; color: var(--signal-dark); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--signal); border-radius: 50%; }

h1, h2, h3, p { margin-top: 0; }

h1 { max-width: 610px; margin-bottom: 22px; font-size: clamp(48px, 6.5vw, 82px); line-height: 0.98; letter-spacing: -0.08em; }
h2 { margin-bottom: 15px; font-size: clamp(34px, 4vw, 53px); line-height: 1; letter-spacing: -0.07em; }
h3 { margin-bottom: 10px; font-size: 20px; line-height: 1.1; letter-spacing: -0.045em; }

.hero-description { max-width: 485px; margin-bottom: 30px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.text-link { color: var(--ink); font-size: 13px; font-weight: 750; }
.text-link span { display: inline-block; margin-left: 7px; color: var(--signal); transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(3px); }

.hero-visual { position: relative; min-height: 390px; }

.orbit { position: absolute; border: 1px solid rgba(23, 37, 47, 0.12); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 380px; height: 220px; top: 82px; left: 30px; }
.orbit-two { width: 300px; height: 420px; top: -18px; left: 70px; transform: rotate(48deg); border-color: rgba(232, 91, 72, 0.18); }

.insight-card { position: absolute; z-index: 1; top: 47px; left: 50%; width: 250px; padding: 24px 24px 20px; background: var(--ink); border-radius: var(--radius-large); color: var(--white); box-shadow: var(--shadow); transform: rotate(-5deg) translateX(-50%); }
.insight-card-top, .insight-footer { display: flex; justify-content: space-between; align-items: center; }
.mini-label, .insight-footer { color: #aab7b9; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.card-kebab { color: var(--teal); letter-spacing: 3px; }
.insight-score { margin: 34px 0 7px; font-size: 65px; font-weight: 800; letter-spacing: -0.1em; line-height: 0.85; }
.insight-score small { margin-left: 4px; color: var(--teal); font-size: 20px; letter-spacing: -0.02em; }
.insight-title { margin: 0 0 34px; font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.04em; }
.insight-bar { height: 5px; margin-bottom: 12px; background: #3a4b53; border-radius: 9px; overflow: hidden; }
.insight-bar span { display: block; width: 73%; height: 100%; background: var(--teal); border-radius: inherit; }
.insight-footer { font-size: 8px; }

.floating-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 15px; color: var(--ink); background: var(--white); border: 1px solid rgba(23, 37, 47, 0.08); border-radius: 999px; box-shadow: 0 12px 30px rgba(23, 37, 47, 0.1); font-size: 11px; font-weight: 750; }
.note-icon { display: grid; width: 22px; height: 22px; color: var(--ink); background: var(--yellow); border-radius: 50%; place-items: center; }
.note-top { top: 15px; right: 8px; transform: rotate(4deg); }
.note-bottom { right: 0; bottom: 38px; transform: rotate(-4deg); }
.note-bottom .note-icon { color: var(--white); background: var(--signal); }

.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; align-items: center; padding: 23px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip > div { display: flex; align-items: baseline; gap: 9px; border-right: 1px solid var(--line); }
.stat-strip > div:not(:first-child) { padding-left: 28px; }
.stat-strip strong { font-size: 26px; letter-spacing: -0.06em; }
.stat-strip span { color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-strip .stat-unit { color: var(--ink); font-size: 12px; }
.stat-strip p { margin: 0 0 0 36px; color: var(--muted); font-size: 12px; line-height: 1.4; }

.section { padding-block: 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.section-heading h2 { margin-bottom: 0; }
.section-intro { max-width: 340px; margin-bottom: 3px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 27px; }
.filter-chip { padding: 9px 15px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 750; transition: 160ms ease; }
.filter-chip:hover, .filter-chip.is-active { color: var(--white); background: var(--ink); border-color: var(--ink); }

.test-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.test-card { display: flex; min-height: 295px; grid-column: span 4; flex-direction: column; justify-content: space-between; padding: 24px; background: var(--white); border: 1px solid rgba(23, 37, 47, 0.06); border-radius: var(--radius-medium); transition: transform 180ms ease, box-shadow 180ms ease; }
.test-card:first-child { grid-column: span 6; background: var(--yellow); }
.test-card:nth-child(2) { grid-column: span 6; background: var(--teal); }
.test-card:hover { box-shadow: 0 18px 38px rgba(23, 37, 47, 0.1); transform: translateY(-4px); }
.test-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.test-tag { color: rgba(23, 37, 47, 0.62); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.test-card h3 { max-width: 260px; margin-bottom: 8px; font-size: 27px; }
.test-card p { max-width: 350px; margin-bottom: 23px; color: rgba(23, 37, 47, 0.68); font-size: 13px; line-height: 1.5; }
.test-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid rgba(23, 37, 47, 0.14); }
.duration { color: rgba(23, 37, 47, 0.68); font-size: 11px; font-weight: 700; }
.start-link { color: var(--ink); border: 0; background: transparent; font-size: 12px; font-weight: 800; }
.start-link span { display: inline-block; margin-left: 7px; color: var(--signal-dark); transition: transform 160ms ease; }
.start-link:hover span { transform: translate(3px, -3px); }
.empty-state { grid-column: 1 / -1; padding: 45px; color: var(--muted); background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-medium); text-align: center; }


.results-banner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 80px 130px; }
.results-banner h2 { margin-bottom: 13px; }
.results-banner p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.results-status { display: flex; align-items: center; gap: 18px; min-width: 340px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-medium); }
.progress-ring { display: grid; width: 70px; height: 70px; flex: none; place-items: center; align-content: center; color: var(--white); background: var(--signal); border-radius: 50%; font-size: 23px; font-weight: 800; line-height: 1; }
.progress-ring small { font-size: 9px; font-weight: 700; }
.results-status strong, .results-status span { display: block; }
.results-status strong { margin-bottom: 4px; font-size: 13px; }
.results-status span { color: var(--muted); font-size: 11px; }

.site-footer { display: flex; align-items: center; justify-content: space-between; min-height: 90px; color: var(--muted); font-size: 11px; }
.site-footer .brand { color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
.footer-links a { color: var(--muted); }
body[data-page="home"] .site-footer :is(.brand, .footer-links) { padding: 8px 12px; border-radius: 12px; background: #f8fafcf0; }
body[data-page="home"] .filter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 16px; width: 100%; max-width: 100%; padding: 0; margin-inline: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; padding: 25px; background: rgba(23, 37, 47, 0.63); place-items: center; }
.modal-backdrop[hidden] { display: none; }
.test-modal { position: relative; width: min(100%, 590px); max-height: min(720px, calc(100vh - 50px)); padding: 38px; overflow: auto; background: var(--paper); border-radius: var(--radius-large); box-shadow: 0 28px 100px rgba(0, 0, 0, 0.25); }
.modal-close { position: absolute; top: 18px; right: 20px; width: 31px; height: 31px; color: var(--muted); background: transparent; border: 0; border-radius: 50%; font-size: 27px; line-height: 1; }
.modal-close:hover { color: var(--ink); background: var(--paper-deep); }
.modal-eyebrow { margin-bottom: 11px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.modal-title { max-width: 440px; margin-bottom: 12px; font-size: clamp(30px, 5vw, 46px); }
.modal-description { max-width: 450px; margin-bottom: 28px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.modal-meta { display: flex; gap: 20px; margin-bottom: 28px; color: var(--muted); font-size: 11px; font-weight: 750; }
.modal-actions { display: flex; gap: 10px; }
.question-header { margin-bottom: 27px; }
.question-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.question-track { height: 5px; background: var(--paper-deep); border-radius: 10px; overflow: hidden; }
.question-track span { display: block; height: 100%; background: var(--signal); border-radius: inherit; transition: width 200ms ease; }
.question-title { margin-bottom: 22px; font-size: 27px; line-height: 1.15; letter-spacing: -0.06em; }
.answer-list { display: grid; gap: 9px; }
.answer-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 11px; text-align: left; transition: 160ms ease; }
.answer-button:hover { border-color: var(--signal); transform: translateX(3px); }
.answer-index { display: grid; width: 24px; height: 24px; flex: none; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; place-items: center; font-size: 10px; font-weight: 800; }
.result-kicker { margin-bottom: 12px; color: var(--signal-dark); font-size: 11px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.result-score { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 20px; font-size: 72px; font-weight: 800; letter-spacing: -0.1em; line-height: 0.8; }
.result-score small { color: var(--signal); font-size: 20px; letter-spacing: 0; }
.result-summary { max-width: 430px; margin-bottom: 30px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.result-disclaimer { margin: 23px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.toast { position: fixed; z-index: 30; right: 22px; bottom: 22px; max-width: min(330px, calc(100% - 44px)); padding: 12px 16px; color: var(--white); background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: 180ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 5px; padding-top: 50px; }
  .hero-copy { max-width: 700px; }
  .hero-visual { width: min(100%, 530px); margin-inline: auto; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .stat-strip > div { border-right: 0; }
  .stat-strip > div:not(:first-child) { padding-left: 0; }
  .stat-strip p { display: none; }
  .test-card, .test-card:first-child, .test-card:nth-child(2) { grid-column: span 6; }
  .results-banner { align-items: start; flex-direction: column; }
}

@media (max-width: 600px) {
  .hero, .stat-strip, .section, .site-footer { width: min(calc(100% - 30px), var(--max-width)); }
  h1 { font-size: clamp(46px, 14vw, 70px); }
  .hero { padding-block: 55px 55px; }
  .hero-description { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-visual { min-height: 330px; transform: scale(0.88); transform-origin: top center; }
  .stat-strip { gap: 7px; }
  .stat-strip > div { align-items: start; flex-direction: column; gap: 0; }
  .stat-strip strong { font-size: 22px; }
  .stat-strip span { font-size: 9px; }
  .section { padding-block: 80px; }
  .section-heading { align-items: start; flex-direction: column; gap: 18px; margin-bottom: 28px; }
  .test-card, .test-card:first-child, .test-card:nth-child(2) { grid-column: 1 / -1; min-height: 270px; }
  .results-banner { padding-bottom: 90px; }
  .results-status { width: 100%; min-width: 0; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; padding-block: 25px; }
  .test-modal { padding: 32px 23px 24px; }
  .modal-actions { align-items: stretch; flex-direction: column; }
}

/* Dedicated questionnaire and report pages share the landing-page system. */
#test-page-main, #report-page-main { width: min(calc(100% - 48px), var(--max-width)); margin-inline: auto; }
/* Subpages keep one explicit route home after the shared header was retired. */
.page-home-link, .page-back-link { margin-top: 28px; color: var(--signal-dark); background: var(--white); border-color: var(--line); }
.page-home-link:hover, .page-back-link:hover { color: var(--signal-dark); border-color: var(--signal); background: #edf2ff; }
#test-page-main > :is(.page-home-link, .page-back-link), #report-page-main > .page-home-link { margin-bottom: 8px; }
.privacy-page > .page-home-link, .eligibility-page > .page-home-link { margin-top: 0; margin-bottom: 26px; }
.test-page-intro { max-width: 820px; padding-block: 64px 58px; }
.test-page-intro h1, .report-header h1 { max-width: 760px; margin-bottom: 18px; font-size: clamp(48px, 7vw, 78px); }
.test-page-description, .report-lede { max-width: 650px; margin-bottom: 29px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.instruction-card { display: grid; grid-template-columns: 140px 1fr; gap: 8px 25px; max-width: 720px; padding: 19px 22px; background: var(--yellow); border-radius: var(--radius-medium); }
.instruction-card strong { font-size: 12px; }
.instruction-card p { margin: 0; color: rgba(23, 37, 47, 0.72); font-size: 12px; line-height: 1.55; }
.instruction-card > span { grid-column: 2; color: rgba(23, 37, 47, 0.6); font-size: 10px; font-weight: 750; }
.test-page-layout { padding-bottom: 40px; }
.question-form { width: 100%; }
.question-count { flex: none; padding: 9px 13px; color: var(--muted); background: var(--paper-deep); border-radius: 999px; font-size: 10px; font-weight: 800; }
.question-list { display: grid; gap: 6px; }
.question-card { display: flow-root; min-inline-size: 0; margin: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--white); }
.question-card legend { float: left; width: 29%; margin: 0; padding: 2px 14px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -0.025em; }
.item-source-id { float: right; margin: 2px 0 0 12px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.question-number { display: inline-grid; width: 25px; height: 23px; margin-right: 8px; color: var(--signal-dark); background: #eaf0fb; border-radius: 6px; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
.response-options { display: grid; width: 71%; float: right; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 11px; }
.ability-options { grid-template-columns: repeat(3, 1fr); }
.ability-question legend { font-size: 19px; }
.response-option { display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 5px 8px; color: #475a72; background: var(--white); border: 0; border-radius: 0; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.response-option:hover { color: var(--ink); background: #f0f5ff; }
.response-option:has(input:checked) { position: relative; color: var(--signal-dark); background: #eaf1ff; box-shadow: inset 0 0 0 2px var(--signal); }
.response-option input { position: absolute; opacity: 0; pointer-events: none; }
.response-dot { width: 15px; height: 15px; flex: none; background: var(--white); border: 1.5px solid #8fa3c1; border-radius: 50%; }
.response-option:has(input:checked) .response-dot { background: var(--signal); border-color: var(--signal); box-shadow: inset 0 0 0 3px #eaf1ff; }
.matrix-question { display: block; padding: 18px; }
.matrix-question legend { float: none; width: 100%; margin: 0 0 14px; padding: 0; }
.matrix-question .item-source-id { margin-top: 5px; }
.matrix-puzzle { display: flex; justify-content: center; padding: 16px; background: #f4f7fc; border: 1px solid #dce5f2; border-radius: 14px; }
.matrix-board { display: grid; width: min(100%, 390px); grid-template-columns: repeat(3, 1fr); gap: 7px; }
.matrix-board-cell { display: grid; aspect-ratio: 1; color: var(--ink); background: var(--white); border: 1px solid #cfdaea; border-radius: 10px; place-items: center; }
.matrix-board-cell.is-missing { color: var(--signal-dark); background: #eaf1ff; border: 2px dashed #9eb3dd; }
.matrix-cell-art { display: block; width: 84%; height: 84%; }
.matrix-missing { font-size: clamp(28px, 5vw, 46px); font-weight: 800; line-height: 1; }
.matrix-question .response-options { width: 100%; float: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 14px; overflow: visible; background: none; border: 0; border-radius: 0; }
.matrix-question .response-option { position: relative; display: grid; min-height: 104px; padding: 8px; color: var(--ink); background: var(--white); border: 1px solid #cfdaea; border-radius: 11px; place-items: center; }
.matrix-question .response-option:last-child { grid-column: auto; }
.matrix-question .response-option:hover { border-color: #96abd3; }
.matrix-question .response-option:has(input:checked) { background: #eaf1ff; border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.matrix-choice-art { display: grid; width: min(100%, 78px); aspect-ratio: 1; place-items: center; }
.matrix-choice-number { position: absolute; right: 7px; bottom: 6px; display: grid; width: 20px; height: 20px; color: var(--muted); background: #edf2f9; border-radius: 6px; place-items: center; font-size: 10px; font-weight: 800; }
.matrix-question .response-option:has(input:checked) .matrix-choice-number { color: var(--white); background: var(--signal); }
.submit-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 26px; padding: 25px; background: var(--ink); border-radius: var(--radius-medium); }
.submit-panel p { max-width: 430px; margin: 0; color: #b1bdc0; font-size: 12px; line-height: 1.5; }
.submit-panel .button { flex: none; }

/* Keep one compact report header across every exam and benchmark route. */
#report-page-main:has(.report-header) > .page-home-link { display: none; }
#report-page-app .report-header { grid-template-columns: auto 72px minmax(0, 1fr) auto; gap: 16px; min-height: 100px; padding: 20px 0; border: 0; }
#report-page-app .report-header:has(.report-header-art) .report-header-title { grid-column: 3; grid-row: 1; padding-left: 0; border-left: 0; }
#report-page-app .report-header:not(:has(.report-header-art)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.report-home { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 650; }
.report-home:hover { color: var(--signal-dark); }
#report-page-app .report-header-title { display: grid; align-content: center; gap: 3px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
#report-page-app .report-header-label { color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
#report-page-app .report-header h1 { max-width: none; font-size: clamp(23px, 2.5vw, 30px); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; text-wrap: initial; }
#report-page-app .report-header-hint { max-width: 68ch; margin: 1px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
#report-page-app .report-header .button { min-height: 38px; padding-inline: 15px; font-size: 13px; white-space: nowrap; box-shadow: none; }
#report-page-app .report-header-art { display: grid; grid-column: 2; grid-row: 1; width: 72px; height: 56px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--signal); place-items: center; }
#report-page-app .report-header-art svg { display: block; width: 100%; height: 100%; }
#report-page-app .report-header-art svg > rect:first-child[fill="currentColor"] { display: none; }
#report-page-app .report-header-art[data-collection="Psychometrics"] { color: #087065; }
#report-page-app .report-header-art[data-collection="Benchmarks"] { color: #6641ae; }
#report-page-app .report-header-art[data-collection="Miscellaneous"] { color: #9a5b00; }
#report-page-app .report-results { margin-top: 0; }
#report-page-app .report-breakdown > .report-dimension-breakdown:first-of-type { margin-top: 0; }
@media (max-width: 900px) {
  #report-page-app .report-header { gap: 12px; }
}
@media (max-width: 600px) {
  #report-page-app .report-header { grid-template-columns: 1fr auto; gap: 16px; padding-block: 16px 20px; }
  #report-page-app .report-header:not(:has(.report-header-art)) { grid-template-columns: 1fr auto; }
  #report-page-app .report-header-title { grid-row: 2; grid-column: 1 / -1; padding: 0; border: 0; }
  #report-page-app .report-header:has(.report-header-art) .report-header-title { grid-row: 2; grid-column: 1 / -1; padding-left: 60px; }
  #report-page-app .report-header-art { grid-row: 2; grid-column: 1; width: 48px; height: 48px; padding: 0; border: 0; align-self: start; }
  #report-page-app .report-header h1 { font-size: 26px; }
  #report-page-app .report-header .report-actions, #report-page-app .report-header > .button { grid-column: 2; grid-row: 1; justify-self: end; }
}
.report-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; max-width: none; gap: 22px; padding: 14px 0 17px; border-bottom: 1px solid #dfe6f1; }
.report-header h1 { max-width: 760px; margin: 0; font-size: clamp(36px, 4.3vw, 50px); line-height: 1.04; letter-spacing: -.06em; text-wrap: balance; }
.report-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.report-header > .button { justify-self: end; }
/* One report-level surface contains results, review, Insights, and Statistics. */
.report-content-surface { position: relative; display: grid; gap: 0; margin-top: 4px; padding: 24px 28px 28px; background: linear-gradient(145deg, var(--white), #f7faff); border: 1px solid #ccd8ef; border-radius: 22px; box-shadow: 0 18px 48px rgba(28, 52, 94, 0.07); }
.report-results, .community-insights-report, .community-report { position: relative; min-width: 0; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
/* Overall results reuse the standard score-card surface across every exam. */
.report-overall-score { min-width: 0; }
.report-score-summary { display: contents; min-width: 0; }
.report-score-summary > .report-key-result { min-width: 0; }
.report-section-score-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 0; align-items: stretch; }
.report-section-score-inline, .report-writing-score-summary { display: contents; }
.report-writing-evaluation-slot:empty { display: none; }
.report-breakdown { margin-top: 0; padding-top: 0; }
.report-breakdown-with-overall { margin-top: 0; padding-top: 0; border-top: 0; }
.report-breakdown-with-overall .report-overall-score { margin-bottom: 0; }
.report-breakdown-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 21px; padding-bottom: 14px; border-bottom: 1px solid #dfe6f1; }
.report-breakdown-heading h2 { margin: 0; font-size: clamp(25px, 2.6vw, 31px); line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.report-writing-evaluation { margin: 20px 0 0; }
.report-writing-evaluation-list { display: grid; gap: 18px; }
.report-writing-loading { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; padding: 16px 18px; color: var(--ink); background: #edf2ff; border: 1px solid #cad9f5; border-radius: 12px; }
.report-writing-loading strong { display: block; margin-bottom: 3px; font-size: 15px; }
.report-writing-loading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.report-writing-loading-spinner { width: 18px; height: 18px; flex: none; border: 2px solid #bfd0f4; border-top-color: var(--signal); border-radius: 50%; animation: report-writing-spin 800ms linear infinite; }
@keyframes report-writing-spin { to { transform: rotate(360deg); } }
.report-writing-evaluation-item { min-width: 0; }
.report-writing-evaluation-item + .report-writing-evaluation-item { padding-top: 18px; border-top: 1px solid var(--line); }
.report-writing-evaluation-item .essay-rubric-breakdown { margin-top: 0; padding-top: 0; border-top: 0; }
.report-writing-evaluation-item .essay-rubric-heading h4 { font-size: 17px; }
.report-writing-evaluation-item .essay-rubric-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-writing-evaluation-item .essay-criterion { grid-template-columns: minmax(140px, .65fr) minmax(0, 1.35fr); gap: 14px; padding: 14px 15px; }
/* Give narrow report sidebars a full title line before the numeric mark. */
.report-writing-evaluation-item .essay-criterion-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.report-writing-evaluation-item .essay-criterion-score { justify-self: start; }
.report-writing-evaluation-item .essay-criterion-body { margin-top: 0; }
.report-dimension-breakdown { margin-top: 18px; }
.report-writing-evaluation-status { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.report-key-result { display: grid; width: 100%; min-width: 0; gap: 5px; padding: 0; color: inherit; background: transparent; border-radius: 0; }
.report-key-result span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.report-key-result strong { font-size: 28px; letter-spacing: -.05em; }
.report-key-result small { max-width: 230px; color: var(--muted); font-size: 12px; line-height: 1.4; }
/* Keep sections distinct without repeating the outer report card. */
.report-content-surface > .report-section { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #dfe6f1; }
.report-content-surface > .community-report, .report-content-surface > .community-insights-report { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dfe6f1; }
.report-content-surface > .report-section + .community-report { margin-top: 16px; }
.report-content-surface .benchmark-result-heading { padding-bottom: 0; border-bottom: 0; }
.report-content-surface .report-data-review { max-width: none; margin-top: 0; }
.community-report { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: start; column-gap: 24px; }
.community-insights-report { display: block; }
.community-insights-report-heading { display: flex; align-items: baseline; min-width: 0; gap: 20px; margin-bottom: 14px; border: 0; }
.community-insights-report-heading h2 { margin: 0; color: var(--ink); font-size: clamp(22px, 2.2vw, 26px); line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.community-insights-stack { display: grid; min-width: 0; gap: 0; }
.community-profile-insights-slot:not(:empty) { margin-top: 19px; padding-top: 5px; border-top: 1px solid #dfe6f1; }
.community-report-heading { min-width: 0; }
.community-report-body { display: grid; min-width: 0; gap: 17px; }
.community-report-label { margin: 0; color: var(--ink); font-size: clamp(22px, 2.2vw, 26px); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; }
.community-report-subject { max-width: 34ch; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.community-report-controls { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); align-items: end; gap: 10px; }
.community-metric-picker, .community-filter-control, .community-view-picker, .community-axis-picker { min-width: 0; }
.community-metric-picker, .community-view-picker, .community-axis-picker { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.community-metric-picker select, .community-view-picker select, .community-axis-picker select { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 7px 34px 7px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.community-axis-picker[hidden] { display: none; }
.community-filter-control { position: relative; display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.community-filter, .community-filter summary { width: 100%; box-sizing: border-box; }
.community-filter summary { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: 7px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; cursor: pointer; list-style: none; }
.community-filter summary::-webkit-details-marker { display: none; }
.community-filter summary::after { content: '⌄'; color: var(--muted); font-size: 16px; line-height: 1; }
.community-filter[open] summary { border-color: var(--signal); }
.community-filter[open] summary::after { transform: rotate(180deg); }
.community-filter-panel { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; width: min(420px, calc(100vw - 48px)); padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 35px rgba(28, 52, 94, .14); }
.community-filter-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-height: min(70vh, 560px); overflow-y: auto; }
.community-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.community-filter-group legend { margin-bottom: 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
.community-filter-note { display: block; margin: -2px 0 8px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.community-filter-options { display: grid; gap: 6px; }
.community-filter-options label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.community-filter-options input { width: 15px; height: 15px; margin: 0; accent-color: var(--signal); }
.community-filter-search { display: grid; gap: 5px; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.community-filter-search input { width: 100%; min-height: 32px; padding: 6px 9px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; }
.community-filter-options-nationality { max-height: 170px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.community-filter-empty { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.community-filter-clear { margin-top: 13px; padding: 0; color: var(--signal-dark); background: transparent; border: 0; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.community-profile-insight-grid { display: grid; min-width: 0; gap: 0; }
.community-profile-insight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; min-width: 0; padding: 17px 0; border-bottom: 1px solid #dfe6f1; }
.community-profile-insight:first-child { padding-top: 10px; }
.community-profile-insight:last-child { padding-bottom: 0; border-bottom: 0; }
.community-profile-insight-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 9px 10px; }
.community-profile-insight-copy { min-width: 0; }
.community-profile-insight h3 { max-width: 31ch; margin: 2px 0 0; color: var(--ink); font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1.3; text-wrap: balance; }
.community-profile-insight-level { display: inline-block; margin-top: 6px; color: var(--signal-dark); font-size: 11px; font-weight: 750; line-height: 1.25; }
.community-profile-insight-strength { min-width: 118px; text-align: right; color: var(--signal-dark); }
.community-profile-insight-strength > strong { display: block; font-size: 21px; line-height: 1.15; letter-spacing: -.03em; }
.community-profile-insight-strength > small { display: block; max-width: 178px; margin: 2px 0 0 auto; color: var(--muted); font-size: 11px; line-height: 1.25; }
.community-profile-insight-meter { grid-column: 1 / -1; height: 6px; overflow: hidden; background: #e5ebf5; border-radius: 999px; }
.community-profile-insight-meter > span { display: block; height: 100%; background: var(--signal); border-radius: inherit; }
.community-profile-insight-contrast { min-width: 0; padding-left: 20px; border-left: 1px solid #dfe6f1; }
.community-profile-insight-contrast > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.community-profile-insight-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 7px; }
.community-profile-insight-comparison p { display: grid; align-content: start; gap: 3px; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.3; }
.community-profile-insight-comparison strong { color: var(--ink); font-size: 18px; line-height: 1.2; letter-spacing: -.025em; }
.community-profile-insight-comparison small { color: var(--muted); font-size: 11px; }
.community-profile-insight-meta { display: block; grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.35; }
.community-profile-insights-state { padding: 14px 15px; background: #f0f4fc; border: 1px solid #d6e1f2; border-radius: 11px; }
.community-profile-insights-state p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.community-result-neighbors-slot:not(:empty) { margin-bottom: 0; }
.community-result-neighbors-block { display: grid; gap: 12px; }
.community-result-neighbor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; background: #f8faff; border: 1px solid #d6e1f2; border-radius: 13px; }
.community-result-neighbor-card { display: grid; gap: 6px; min-width: 0; padding: 15px 17px; }
.community-result-neighbor-card + .community-result-neighbor-card { border-left: 1px solid #d6e1f2; }
.community-result-neighbor-demographic-heading { display: grid; gap: 5px; }
.community-result-neighbor-demographic-heading > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.community-result-neighbor-demographic-heading > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.community-result-neighbor-demographic-heading strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 18px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.community-result-neighbor-demographic-heading b { flex: 0 0 auto; color: var(--signal-dark); font-size: 15px; }
.community-result-neighbor-demographic-track { height: 7px; overflow: hidden; background: #e5ebf5; border-radius: 999px; }
.community-result-neighbor-demographic-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--signal), #7892dc); border-radius: inherit; }
.community-result-neighbor-card small { color: var(--muted); font-size: 11px; line-height: 1.25; }
.community-result-neighbors-empty { margin: 0; padding: 14px 15px; color: var(--muted); background: #f0f4fc; border: 1px solid #d6e1f2; border-radius: 11px; font-size: 14px; line-height: 1.5; }
.community-result-neighbors-note { display: grid; gap: 4px; }
.community-result-neighbors-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
@media (max-width: 700px) { .community-result-neighbor-grid { grid-template-columns: 1fr; } .community-result-neighbor-card + .community-result-neighbor-card { border-top: 1px solid #d6e1f2; border-left: 0; } }
@media (max-width: 850px) { .community-profile-insight { grid-template-columns: 1fr; gap: 12px; } .community-profile-insight-contrast { padding: 0; border: 0; } }
@media (max-width: 520px) { .community-profile-insight-heading { grid-template-columns: 1fr; } .community-profile-insight-strength { min-width: 0; text-align: left; } .community-profile-insight-strength > small { max-width: 100%; margin-left: 0; white-space: normal; } }
@media (max-width: 980px) { .community-report { grid-template-columns: minmax(0, 1fr); gap: 14px; } .community-report-heading { margin: 0; } }
@media (max-width: 700px) { .community-insights-report-heading { align-items: flex-start; flex-direction: column; gap: 6px; } }
.community-distribution-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.community-distribution-heading p { margin: 0; }
.community-distribution-heading strong { color: var(--ink); font-size: 14px; }
.community-distribution-heading > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.community-distribution-heading i { width: 18px; height: 8px; background: #dce7fa; border: 1px solid #b9ccef; border-radius: 3px; }
.community-profile-bar-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.community-profile-bar-heading strong { color: var(--ink); font-size: 15px; }
.community-profile-bar-heading span { color: var(--muted); font-size: 12px; }
.community-profile-bar-chart { display: grid; min-width: 0; grid-template-columns: max-content minmax(0, 1fr); align-items: stretch; gap: 9px; }
.community-profile-bar-y-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 0 63px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.community-profile-bars { display: grid; min-width: 0; grid-template-columns: repeat(var(--community-group-count, 1), minmax(66px, 1fr)); align-items: end; justify-items: center; gap: 8px; overflow-x: auto; padding: 0 0 5px; }
.community-profile-bar-item { display: grid; width: min(100%, 96px); min-width: 66px; grid-template-rows: 22px 150px minmax(34px, auto) 16px; align-items: end; gap: 5px; color: var(--muted); text-align: center; cursor: help; }
.community-profile-bar-value { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.community-profile-bar-track { display: flex; width: 100%; height: 100%; align-items: end; background: #f0f4fb; border-bottom: 1px solid #aebcce; border-radius: 6px 6px 0 0; overflow: hidden; }
.community-profile-bar-fill { display: block; width: 100%; height: max(2px, var(--community-height)); background: linear-gradient(180deg, var(--signal-dark), #7892dc); border-radius: 5px 5px 0 0; }
.community-profile-bar-category { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 650; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.community-profile-bar-item small { color: var(--muted); font-size: 9px; line-height: 1.2; white-space: nowrap; }
.community-histogram { position: relative; display: grid; grid-template-columns: repeat(var(--community-bin-count, 10), minmax(0, 1fr)); align-items: end; height: 156px; gap: 5px; padding-top: 24px; border-bottom: 1px solid var(--line); isolation: isolate; }
.community-histogram-bar { z-index: 1; height: max(3px, var(--community-height)); background: linear-gradient(180deg, var(--signal-dark), #6f8bd7); border-radius: 5px 5px 1px 1px; opacity: .84; }
.community-histogram-range { position: absolute; z-index: 0; top: 24px; bottom: 0; min-width: 3px; background: #e5edfb; border-inline: 1px solid #bdcdef; transform: translateX(-1px); }
.community-histogram-marker { position: absolute; z-index: 2; top: 14px; bottom: 0; width: 2px; background: var(--signal); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); transform: translateX(-1px); }
.community-histogram-marker > span { position: absolute; top: -14px; left: 50%; padding: 3px 7px; color: var(--white); background: var(--signal); border-radius: 999px; font-size: 10px; font-weight: 800; transform: translateX(-50%); }
.community-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 11px; }
.community-insights { display: grid; grid-template-columns: .75fr 1.2fr 1fr; gap: 0; overflow: hidden; margin-top: 18px; background: #f8faff; border: 1px solid #d6e1f2; border-radius: 13px; }
.community-report-content [data-community-pane="distribution"] > .community-insights { margin: 0 0 18px; }
.community-insight { display: grid; align-content: start; min-width: 0; padding: 15px 16px; }
.community-insight + .community-insight { border-left: 1px solid #d6e1f2; }
.community-insight > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.community-insight strong { margin-top: 7px; color: var(--ink); font-size: 18px; line-height: 1.15; }
.community-insight small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.community-insight-primary { background: #eef4ff; }
.community-insight-primary strong { color: var(--signal-dark); font-size: 32px; letter-spacing: -.045em; }
.community-report-heading > .community-insights { display: grid; grid-template-columns: 1fr; gap: 0; overflow: visible; margin: 15px 0 0; background: transparent; border: 0; border-radius: 0; }
.community-report-heading > .community-insights .community-insight { padding: 11px 0; background: transparent; border: 0; border-bottom: 1px solid #dfe6f1; }
.community-report-heading > .community-insights .community-insight:first-child { padding-top: 0; }
.community-report-heading > .community-insights .community-insight:last-child { border-bottom: 0; }
.community-report-heading > .community-insights .community-insight strong { margin-top: 4px; font-size: 17px; }
.community-report-heading > .community-insights .community-insight-primary strong { font-size: 27px; }
.community-report-heading > .community-insights .community-insight small { margin-top: 4px; }
.community-report-heading > .community-insights .community-insight-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.community-insight-pair > div { display: grid; align-content: start; min-width: 0; }
.community-insight-pair span { color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; }
.community-report-heading > .community-insights .community-insight-pair strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.2; }
.community-report-content [data-community-pane="distribution"] > .community-histogram { height: 280px; }
@media (min-width: 981px) {
  .community-report:has([data-community-pane="distribution"]) { align-items: stretch; }
  .community-report:has([data-community-pane="distribution"]) .community-report-body { grid-template-rows: auto minmax(0, 1fr); }
  .community-report:has([data-community-pane="distribution"]) .community-report-content { display: grid; }
  .community-report-content [data-community-pane="distribution"] { display: flex; min-height: 0; flex-direction: column; }
  .community-report-content [data-community-pane="distribution"] > .community-histogram { flex: 1; min-height: 280px; height: auto; }
}
@media (max-width: 700px) { .community-insights { grid-template-columns: 1fr; } .community-insight + .community-insight { border-top: 1px solid #d6e1f2; border-left: 0; } }
@media (max-width: 600px) { .community-report-content [data-community-pane="distribution"] > .community-histogram { height: 165px; } }
.country-comparison { margin-top: 18px; }
.country-map { position: relative; min-height: 220px; background: #f3f6fb; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.country-map-stage { display: grid; min-height: 220px; place-items: center; padding: 10px; }
.country-map-stage > p { margin: 0; color: var(--muted); font-size: 13px; }
.country-map-svg { display: block; width: 100%; height: auto; max-height: 270px; }
.country-map-svg path { fill: #dfe6f0; stroke: #f7f9fc; stroke-width: .75; vector-effect: non-scaling-stroke; }
.country-map-svg .country-map-data { cursor: pointer; transition: filter .15s ease, opacity .15s ease; }
.country-map-svg .country-map-data:hover, .country-map-svg .country-map-data:focus { filter: brightness(.92); outline: none; }
/* Use a stronger blue temperature ramp so neighbouring map levels remain legible. */
.country-map-svg .country-map-level-1 { fill: #c4d5f1; }
.country-map-svg .country-map-level-2 { fill: #8eabe3; }
.country-map-svg .country-map-level-3 { fill: #5d83d2; }
.country-map-svg .country-map-level-4 { fill: #3561bc; }
.country-map-svg .country-map-level-5 { fill: #173d95; }
.country-map-svg .country-map-data.is-selected { stroke: var(--ink); stroke-width: 2.5; }
.country-map-tooltip { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; width: 100%; margin-top: 9px; padding: 8px 12px; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 10px; line-height: 1.25; }
.country-map-tooltip[hidden] { display: none; }
.country-map-tooltip-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.country-map-tooltip-heading span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.country-map-tooltip-heading strong { color: var(--ink); font-size: 15px; line-height: 1.2; }
.country-map-tooltip-close { display: grid; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; font-size: 16px; line-height: 1; place-items: center; }
.country-map-tooltip-close:hover { color: var(--ink); background: var(--paper-deep); }
.country-map-tooltip-average { display: flex; align-items: baseline; gap: 7px; }
.country-map-tooltip-average span { color: var(--muted); font-size: 10px; }
.country-map-tooltip-average strong { color: var(--signal-dark); font-size: 21px; font-weight: 850; letter-spacing: -.035em; line-height: 1; }
.country-map-tooltip-footer { display: flex; align-items: center; gap: 9px; padding-left: 13px; border-left: 1px solid var(--line); font-size: 10px; }
.country-map-tooltip-footer span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-map-tooltip-footer span:last-child { flex: 0 0 auto; color: var(--ink); font-weight: 750; white-space: nowrap; }
.privacy-choice { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 28px; padding: 16px; background: var(--paper-deep); border-radius: 12px; cursor: pointer; }
.privacy-choice input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--signal); }
.privacy-choice span { display: grid; gap: 4px; }
.privacy-choice strong { font-size: 14px; }
.privacy-choice small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.community-profile-prompt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 26px; padding: 20px 22px 20px 26px; background: #f0f4fc; border: 1px solid #d6e1f2; border-radius: 16px; }
.community-profile-prompt::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--signal); border-radius: inherit; content: ""; }
.community-profile-prompt > div { min-width: 0; }
.community-profile-prompt h3 { margin: 0 0 6px; font-size: 21px; }
.community-profile-prompt p { max-width: 760px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.community-profile-prompt .community-profile-kicker { margin-bottom: 5px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.community-profile-prompt .button { min-width: 150px; }
.community-profile-form { margin-top: 26px; padding: 20px 22px 22px; background: #f0f4fc; border: 1px solid #d6e1f2; border-radius: 16px; }
.community-profile-form fieldset { margin: 0; padding: 0; border: 0; }
.community-profile-form legend { margin-bottom: 5px; color: var(--ink); font-size: 22px; font-weight: 800; }
.community-profile-form fieldset > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.community-profile-note { display: block; margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.community-profile-note a { color: var(--signal-dark); text-decoration: underline; text-underline-offset: 3px; }
.community-profile-status { margin: 18px 0 0; color: var(--signal-dark); font-size: 14px; line-height: 1.5; }
.community-profile-saved { margin-top: 26px; padding: 20px 22px 22px; background: #f0f4fc; border: 1px solid #d6e1f2; border-radius: 16px; }
.community-profile-saved h2 { margin: 0 0 6px; font-size: 22px; }
.community-profile-saved p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.community-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.community-profile-grid > label, .community-profile-field { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.community-profile-field-label { display: block; }
.community-profile-grid select { width: 100%; min-width: 0; min-height: 40px; padding: 7px 34px 7px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.community-profile-measurement-current { color: var(--muted); font-size: 11px; font-weight: 550; line-height: 1.35; }
.community-profile-measurement-row { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 8px; align-items: end; }
.community-profile-measurement-row > label, .community-profile-measurement-panel label { display: grid; gap: 4px; min-width: 0; }
.community-profile-measurement-row input, .community-profile-measurement-row select { width: 100%; min-height: 40px; padding: 7px 10px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.community-profile-measurement-row input:focus, .community-profile-measurement-row select:focus { border-color: var(--signal); outline: 3px solid rgba(232, 91, 72, .16); }
.community-profile-measurement-imperial-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.community-profile-measurement-prefer { display: flex; align-items: center; gap: 7px; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.community-profile-measurement-prefer input { flex: 0 0 auto; accent-color: var(--signal); }
.community-profile-picker { position: relative; min-width: 0; }
.community-profile-picker > summary { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.community-profile-picker > summary::-webkit-details-marker { display: none; }
.community-profile-picker > summary::after { content: '⌄'; color: var(--muted); font-size: 16px; line-height: 1; }
.community-profile-picker[open] > summary { border-color: var(--signal); border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.community-profile-picker[open] > summary::after { transform: rotate(180deg); }
.community-profile-picker-panel { position: absolute; z-index: 6; top: calc(100% - 1px); right: 0; left: 0; display: grid; gap: 8px; max-height: 320px; padding: 10px; overflow: hidden; background: var(--white); border: 1px solid var(--signal); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 14px 28px rgba(23, 37, 47, .16); }
.community-profile-picker-hint { color: var(--muted); font-size: 11px; font-weight: 650; }
.community-profile-picker-search { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 750; }
.community-profile-picker-search input { min-height: 34px; padding: 6px 9px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.community-profile-picker-options { display: grid; max-height: 210px; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--signal) var(--paper-deep); touch-action: pan-y; }
.community-profile-picker-options::-webkit-scrollbar { width: 10px; }
.community-profile-picker-options::-webkit-scrollbar-track { background: var(--paper-deep); border-radius: 8px; }
.community-profile-picker-options::-webkit-scrollbar-thumb { background: var(--signal); border: 2px solid var(--paper-deep); border-radius: 8px; }
.community-profile-picker-options label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; }
.community-profile-picker-options label:hover { background: var(--paper); }
.community-profile-picker-options input { flex: 0 0 auto; accent-color: var(--signal); }
.community-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.community-state { display: grid; align-content: center; justify-items: start; gap: 7px; padding: 12px 0; }
.community-state > * { margin: 0; }
.community-state p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.report-section { padding-block: 34px 0; }
.report-section-score-inline { display: contents; }
.report-section-score { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 12px 15px; background: #edf2ff; border: 1px solid #cad9f5; border-radius: 12px; }
.report-section-score span, .report-section-score strong { color: var(--signal-dark); }
.report-section-score span { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.report-section-score strong { font-size: 24px; letter-spacing: -.04em; }
.report-section-score-detailed { align-content: start; padding: 15px 17px; }
.report-section-score-detailed > small { color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.4; }
.report-section-score-detailed > p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.report-writing-score { align-content: start; padding: 15px 17px; }
.report-writing-score > p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.report-writing-score-summary { display: contents; }
.report-writing-score strong small { margin-left: 4px; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.dimension-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dimension-group { display: grid; grid-column: 1 / -1; gap: 12px; }
.dimension-group + .dimension-group { margin-top: 10px; }
.dimension-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 0 2px 10px; border-bottom: 1px solid var(--line); }
.dimension-group-heading h3 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.dimension-group-heading span { color: var(--muted); font-size: 13px; font-weight: 700; }
.dimension-group-score { color: var(--signal-dark); font-size: 27px; letter-spacing: -.06em; }
.dimension-group-score small { margin-left: 2px; font-size: 12px; letter-spacing: 0; }
.dimension-group-description { margin: 0 2px 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.dimension-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dimension-card { position: relative; padding: 21px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(23, 37, 47, 0.1); border-radius: 16px; overflow: hidden; }
.dimension-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--signal); opacity: .75; }
.dimension-card:last-child { grid-column: auto; }
.dimension-card-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.dimension-label, .dimension-card-header strong { display: block; }
.dimension-label { margin-bottom: 5px; font-size: 20px; font-weight: 800; letter-spacing: -0.05em; }
.dimension-card-header strong { color: var(--muted); font-size: 10px; font-weight: 750; }
.dimension-score { color: var(--signal-dark); font-size: 32px; font-weight: 800; letter-spacing: -0.08em; white-space: nowrap; }
.dimension-score small { margin-left: 2px; font-size: 12px; letter-spacing: 0; }
.score-bar { height: 7px; margin: 18px 0 15px; background: var(--paper-deep); border-radius: 9px; overflow: hidden; }
.score-bar span { display: block; height: 100%; background: var(--signal); border-radius: inherit; }
.dimension-card p { min-height: 0; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.relative-label { padding: 7px 10px; color: var(--signal-dark); background: #fff0eb; border-radius: 999px; font-size: 10px; font-weight: 800; }
.community-percentile { display: inline-flex; width: fit-content; margin-top: 2px; padding: 6px 9px; color: var(--signal-dark); background: #edf3ff; border: 1px solid #cbd9f7; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.2; }
.profile-list { grid-column: 1 / -1; }
.profile-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.profile-list-row:last-child { border-bottom: 0; }
.profile-list-copy h3 { margin: 0 0 5px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.profile-list-copy p { max-width: 66ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.profile-list-result { display: flex; align-items: center; gap: 12px; }
.profile-list-result strong { color: var(--signal-dark); font-size: 24px; letter-spacing: -.05em; white-space: nowrap; }
.profile-list-result small { color: var(--muted); font-size: 13px; letter-spacing: 0; }
.profile-list-track { grid-column: 1 / -1; height: 5px; background: var(--paper-deep); border-radius: 5px; overflow: hidden; }
.profile-list-track > span { display: block; height: 100%; border-radius: inherit; background: var(--signal); }
.profile-list-cognitive .profile-list-track { position: relative; overflow: visible; }
.profile-list-cognitive .profile-list-track > span { position: absolute; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--signal); }
.profile-list-interests .profile-list-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
.profile-list-interests .profile-list-track { grid-column: 2 / -1; }
.profile-list-rank { align-self: start; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.7; }
.profile-list-pair { width: min(340px, 38vw); }
.profile-list-poles { display: flex; justify-content: space-between; gap: 12px; color: var(--signal-dark); font-size: 14px; font-weight: 800; }
.profile-list-axis { position: relative; height: 5px; margin-top: 14px; border-radius: 5px; background: var(--paper-deep); }
.profile-list-axis::before { position: absolute; left: 50%; top: -4px; width: 1px; height: 13px; content: ""; background: var(--line-strong); }
.profile-list-axis > span { position: absolute; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border: 2px solid white; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.profile-list-pairs .community-percentile:not([hidden]) { margin-top: 7px; }
.profile-list-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.profile-list-pairs .profile-list-row { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: start; gap: 16px; padding: 22px 0; }
.profile-list-pairs .profile-list-row:nth-last-child(-n+2) { border-bottom: 0; }
.profile-list-pairs .profile-list-pair { width: 100%; }
@media (max-width: 700px) { .profile-list-pairs { grid-template-columns: 1fr; } .profile-list-pairs .profile-list-row:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 620px) { .profile-list-pairs .profile-list-row, .profile-list-cognitive .profile-list-row { grid-template-columns: 1fr; } .profile-list-pair { width: 100%; } .profile-list-interests .profile-list-row { grid-template-columns: 22px minmax(0, 1fr); } .profile-list-interests .profile-list-result { grid-column: 2; } .profile-list-cognitive .profile-list-result { justify-self: start; } }
.sat-domain-groups { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sat-domain-group h3 { margin: 0 0 5px; font-size: 16px; letter-spacing: -.03em; }
.sat-domain-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sat-domain-row:last-child { border-bottom: 0; }
.sat-domain-row strong, .sat-domain-row small { display: block; }
.sat-domain-row strong { font-size: 14px; }
.sat-domain-row small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.sat-domain-score { display: flex; align-items: center; gap: 8px; color: var(--signal-dark); font-size: 13px; font-weight: 800; white-space: nowrap; }
.sat-domain-row .profile-list-track { grid-column: 1 / -1; }
.sat-domain-score .community-percentile:not([hidden]) { margin: 0; }
@media (max-width: 720px) { .sat-domain-groups { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 420px) { .sat-domain-row { grid-template-columns: 1fr; } }
.political-values-profile { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(300px, 500px) minmax(0, 1fr); align-items: center; gap: 30px; }
.political-wheel { position: relative; width: min(100%, 500px); aspect-ratio: 1; margin: auto; }
.political-wheel svg { position: absolute; inset: 12%; width: 76%; height: 76%; overflow: visible; }
.political-wheel-field { fill: #f1f6ff; }
.political-wheel-midpoint { fill: none; stroke: #b6c9eb; stroke-width: 1.5; stroke-dasharray: 4 5; }
.political-wheel-axis { stroke: #bfd0ed; stroke-width: 7; stroke-linecap: round; }
.political-wheel-value { stroke: var(--signal); stroke-width: 8; stroke-linecap: round; }
.political-wheel-marker { fill: var(--signal); stroke: #fff; stroke-width: 4; }
.political-wheel-center { fill: var(--ink); }
.political-wheel-label { position: absolute; display: grid; gap: 2px; max-width: 110px; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.25; text-align: center; }
.political-wheel-label strong { color: var(--signal-dark); font-size: 20px; }
.political-wheel-label.is-top { top: 15%; left: 50%; translate: -50% 0; }
.political-wheel-label.is-right { right: 0; top: 50%; translate: 0 -50%; }
.political-wheel-label.is-bottom { bottom: 12%; left: 50%; translate: -50% 0; }
.political-wheel-label.is-left { left: 0; top: 50%; translate: 0 -50%; }
.political-axis-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.political-axis-row:last-child { border-bottom: 0; }
.political-axis-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.political-axis-heading h4 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.political-axis-heading strong { color: var(--signal-dark); font-size: 23px; letter-spacing: -.05em; white-space: nowrap; }
.political-axis-heading strong small { font-size: 12px; letter-spacing: 0; }
.political-axis-endpoints { display: flex; align-items: center; gap: 6px; margin: 2px 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.political-axis-details p { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.political-axis-details > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.political-axis-count { color: var(--muted); font-size: 11px; font-weight: 700; }
.political-axis-details .community-percentile:not([hidden]) { margin: 0; }
@media (max-width: 850px) { .political-values-profile { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) {
  .political-wheel svg { inset: 14%; width: 72%; height: 72%; }
  .political-wheel-label { max-width: 85px; font-size: 10px; }
  .political-wheel-label strong { font-size: 17px; }
  .political-wheel-label.is-top { top: 12%; }
}
.change-up { color: #338878; font-weight: 800; }
.change-down { color: var(--signal-dark); font-weight: 800; }
.change-same { color: var(--muted); font-weight: 800; }
.report-data-review > summary { cursor: pointer; color: var(--signal-dark); font-size: 14px; font-weight: 750; }
.report-data-review > summary span { margin-left: 5px; }
/* Keep written review compact and behind the report's question-review disclosure. */
.essay-feedback-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.essay-feedback-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.essay-feedback-header h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.written-totals { display: grid; gap: 4px; text-align: right; }
.written-totals:empty { display: none; }
.written-totals > * { margin: 0; }
.written-totals p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.written-totals small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.essay-feedback-section > .essay-review { margin: 16px 0 0; }
.latest-report-link { display: block; margin-top: 6px; color: var(--signal-dark); font-size: 10px; font-weight: 800; }
.latest-report-link[hidden] { display: none; }
.empty-report { max-width: 700px; padding-block: 110px 160px; }
.empty-report h1 { margin-bottom: 18px; }
.empty-report > p:not(.eyebrow) { max-width: 420px; margin-bottom: 28px; color: var(--muted); }

/* Original SAT-style practice pages keep timed questions readable and dense. */
.sat-shell { padding: 0 0 120px; }
.sat-stage { min-height: 590px; overflow: hidden; background: var(--white); border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-large); box-shadow: 0 20px 55px rgba(23, 37, 47, 0.07); }
.sat-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 0.75fr); gap: 42px 70px; padding: 48px; }
.sat-setup > div:first-child p:last-child { max-width: 600px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.sat-format { display: grid; gap: 12px; align-content: start; }
.sat-format > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sat-format strong { color: var(--signal-dark); font-size: 24px; letter-spacing: -0.06em; }
.sat-format span { color: var(--muted); font-size: 11px; text-align: right; }
.sat-domain-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sat-domain-grid > span { display: block; min-height: 66px; padding: 13px; background: var(--paper); border-radius: 10px; }
.sat-domain-grid strong, .sat-domain-grid small { display: block; }
.sat-domain-grid strong { margin-bottom: 4px; font-size: 11px; }
.sat-domain-grid small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.sat-setup > .button { justify-self: start; }
.sat-task-topbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 58px; padding: 0 28px; color: #adbbbe; background: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.sat-task-topbar strong { color: var(--teal); font-size: 14px; letter-spacing: 0; }
.sat-form { padding: 0 34px 40px; }
.sat-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 25px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; }
.sat-form-heading p { margin: 0; }
.sat-form-heading > span { flex: none; padding: 8px 12px; background: var(--paper-deep); border-radius: 999px; font-size: 10px; font-weight: 800; }
.sat-question-list { display: grid; gap: 11px; padding-top: 16px; }
.sat-question { min-inline-size: 0; margin: 0; padding: 24px 25px 21px; border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-medium); background: var(--paper); }
.sat-question legend { display: flex; align-items: start; gap: 12px; width: 100%; padding: 0; color: var(--ink); font-size: 16px; font-weight: 750; line-height: 1.4; letter-spacing: -0.025em; }
.sat-question-number { display: inline-grid; width: 30px; height: 30px; flex: none; color: var(--white); background: var(--ink); border-radius: 50%; place-items: center; font-size: 9px; letter-spacing: 0; }
.sat-skill { margin: 13px 0 13px 42px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.sat-stimulus { margin: 0 0 16px 42px; padding: 15px 17px; white-space: pre-line; color: rgba(23, 37, 47, 0.8); background: var(--white); border-left: 3px solid var(--teal); font-size: 14px; line-height: 1.6; }
.sat-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-left: 42px; }
.sat-option { display: flex; align-items: start; gap: 9px; min-height: 48px; padding: 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 13px; line-height: 1.35; cursor: pointer; transition: 150ms ease; }
.sat-option:hover { border-color: var(--signal); transform: translateY(-1px); }
.sat-option:has(input:checked) { color: var(--white); background: var(--ink); border-color: var(--ink); }
.sat-option input { position: absolute; opacity: 0; pointer-events: none; }
.sat-option-letter { display: grid; width: 22px; height: 22px; flex: none; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; place-items: center; font-size: 10px; font-weight: 800; }
.sat-option:has(input:checked) .sat-option-letter { color: var(--white); background: var(--signal); border-color: var(--signal); }
.sat-numeric-label { display: block; margin: 12px 0 7px 42px; color: var(--muted); font-size: 11px; font-weight: 750; }
.sat-numeric-input { width: 180px; margin-left: 42px; padding: 11px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 16px; }
.sat-numeric-input:focus { border-color: var(--signal); outline: 3px solid rgba(232, 91, 72, 0.16); }
.sat-submit-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 24px; padding: 22px; color: var(--white); background: var(--ink); border-radius: var(--radius-medium); }
.sat-submit-panel p { max-width: 510px; margin: 0; color: #b1bdc0; font-size: 12px; line-height: 1.5; }
.sat-submit-panel .button { flex: none; }

/* Original GRE-style practice pages add writing and multi-select controls to the SAT layout language. */
.gre-shell { padding: 0 0 120px; }
.gre-stage { min-height: 590px; overflow: hidden; background: var(--white); border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-large); box-shadow: 0 20px 55px rgba(23, 37, 47, 0.07); }
.gre-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr); gap: 42px 70px; padding: 48px; }
.gre-setup > div:first-child p:last-child { max-width: 600px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.gre-format { display: grid; gap: 12px; align-content: start; }
.gre-format > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.gre-format strong { color: var(--signal-dark); font-size: 24px; letter-spacing: -0.06em; }
.gre-format span { color: var(--muted); font-size: 11px; text-align: right; }
.gre-domain-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.gre-domain-grid > span { display: block; min-height: 66px; padding: 13px; background: var(--paper); border-radius: 10px; }
.gre-domain-grid strong, .gre-domain-grid small { display: block; }
.gre-domain-grid strong { margin-bottom: 4px; font-size: 11px; }
.gre-domain-grid small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.gre-setup > .button { justify-self: start; }
.gre-task-topbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 58px; padding: 0 28px; color: #adbbbe; background: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.gre-task-topbar strong { color: var(--teal); font-size: 14px; letter-spacing: 0; }
.gre-writing-form { padding: 0 48px 40px; }
.gre-writing-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding-block: 32px 23px; border-bottom: 1px solid var(--line); }
.gre-writing-heading .eyebrow { margin-bottom: 9px; }
.gre-writing-heading h2 { margin: 0; font-size: 34px; }
.gre-writing-heading > span { flex: none; padding: 8px 12px; color: var(--muted); background: var(--paper-deep); border-radius: 999px; font-size: 10px; font-weight: 800; }
.gre-writing-prompt { max-width: 760px; margin: 25px 0; padding: 20px 22px; color: rgba(23, 37, 47, 0.82); background: var(--paper); border-left: 3px solid var(--teal); font-size: 15px; line-height: 1.65; }
.gre-writing-prompt p { margin: 0 0 12px; }
.gre-writing-prompt p:last-child { margin-bottom: 0; }
.gre-essay-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.gre-writing-form textarea { display: block; width: 100%; min-height: 330px; padding: 17px; resize: vertical; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.6; }
.gre-writing-form textarea:focus { border-color: var(--signal); outline: 3px solid rgba(232, 91, 72, 0.16); }
.gre-writing-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 18px; }
.gre-writing-footer > span { color: var(--signal-dark); font-size: 12px; font-weight: 800; }
.gre-writing-footer p { max-width: 420px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.gre-writing-footer .button { flex: none; }
.gre-form { padding: 0 34px 40px; }
.gre-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 25px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; }
.gre-form-heading p { margin: 0; }
.gre-form-heading > span { flex: none; padding: 8px 12px; background: var(--paper-deep); border-radius: 999px; font-size: 10px; font-weight: 800; }
.gre-question-list { display: grid; gap: 11px; padding-top: 16px; }
.gre-question { min-inline-size: 0; margin: 0; padding: 24px 25px 21px; border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-medium); background: var(--paper); }
.gre-question legend { display: flex; align-items: start; gap: 12px; width: 100%; padding: 0; color: var(--ink); font-size: 16px; font-weight: 750; line-height: 1.4; letter-spacing: -0.025em; }
.gre-question-number { display: inline-grid; width: 30px; height: 30px; flex: none; color: var(--white); background: var(--ink); border-radius: 50%; place-items: center; font-size: 9px; letter-spacing: 0; }
.gre-skill { margin: 13px 0 13px 42px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.gre-stimulus { margin: 0 0 16px 42px; padding: 15px 17px; white-space: pre-line; color: rgba(23, 37, 47, 0.8); background: var(--white); border-left: 3px solid var(--teal); font-size: 14px; line-height: 1.6; }
.gre-question-hint { display: block; margin: 0 0 8px 42px; color: var(--muted); font-size: 11px; font-weight: 750; }
.gre-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-left: 42px; }
.gre-option { display: flex; align-items: start; gap: 9px; min-height: 48px; padding: 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 13px; line-height: 1.35; cursor: pointer; transition: 150ms ease; }
.gre-option:hover { border-color: var(--signal); transform: translateY(-1px); }
.gre-option:has(input:checked) { color: var(--white); background: var(--ink); border-color: var(--ink); }
.gre-option input { position: absolute; opacity: 0; pointer-events: none; }
.gre-option-letter { display: grid; width: 22px; height: 22px; flex: none; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; place-items: center; font-size: 10px; font-weight: 800; }
.gre-option:has(input:checked) .gre-option-letter { color: var(--white); background: var(--signal); border-color: var(--signal); }
.gre-numeric-label { display: block; margin: 12px 0 7px 42px; color: var(--muted); font-size: 11px; font-weight: 750; }
.gre-numeric-input { width: 180px; margin-left: 42px; padding: 11px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 16px; }
.gre-numeric-input:focus { border-color: var(--signal); outline: 3px solid rgba(232, 91, 72, 0.16); }
.gre-submit-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 24px; padding: 22px; color: var(--white); background: var(--ink); border-radius: var(--radius-medium); }
.gre-submit-panel p { max-width: 510px; margin: 0; color: #b1bdc0; font-size: 12px; line-height: 1.5; }
.gre-submit-panel .button { flex: none; }

/* Shared layout for the compact ACT, MCAT, and LSAT diagnostics. */
.admission-stage { min-height: 590px; overflow: hidden; background: var(--white); border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-large); box-shadow: 0 20px 55px rgba(23, 37, 47, 0.07); }
.admission-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 0.78fr); gap: 42px 70px; padding: 48px; }
.admission-setup > div:first-child p:last-child { max-width: 610px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.admission-format { display: grid; gap: 12px; align-content: start; }
.admission-format > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.admission-format strong { color: var(--signal-dark); font-size: 24px; letter-spacing: -0.06em; }
.admission-format span { color: var(--muted); font-size: 11px; text-align: right; }
.admission-format small { font-size: 9px; line-height: 1.35; }
.admission-domain-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.admission-domain-grid > span { display: block; min-height: 66px; padding: 13px; background: var(--paper); border-radius: 10px; }
.admission-domain-grid strong, .admission-domain-grid small { display: block; }
.admission-domain-grid strong { margin-bottom: 4px; font-size: 11px; }
.admission-domain-grid small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.admission-setup > .button { justify-self: start; }
.admission-task-topbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 58px; padding: 0 28px; color: #adbbbe; background: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.admission-task-topbar strong { color: var(--teal); font-size: 14px; letter-spacing: 0; }
.admission-form { padding: 0 34px 40px; }
.admission-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 25px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; }
.admission-form-heading p { margin: 0; }
.admission-form-heading > span { flex: none; padding: 8px 12px; background: var(--paper-deep); border-radius: 999px; font-size: 10px; font-weight: 800; }
.admission-question-list { display: grid; gap: 11px; padding-top: 16px; }
.admission-question { min-inline-size: 0; margin: 0; padding: 24px 25px 21px; border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-medium); background: var(--paper); }
.admission-question legend { display: flex; align-items: start; gap: 12px; width: 100%; padding: 0; color: var(--ink); font-size: 16px; font-weight: 750; line-height: 1.4; letter-spacing: -0.025em; }
.admission-question-number { display: inline-grid; width: 30px; height: 30px; flex: none; color: var(--white); background: var(--ink); border-radius: 50%; place-items: center; font-size: 9px; letter-spacing: 0; }
.admission-skill { margin: 13px 0 13px 42px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.admission-stimulus { margin: 0 0 16px 42px; padding: 15px 17px; white-space: pre-line; color: rgba(23, 37, 47, 0.8); background: var(--white); border-left: 3px solid var(--teal); font-size: 14px; line-height: 1.6; }
.admission-question-hint { display: block; margin: 0 0 8px 42px; color: var(--muted); font-size: 11px; font-weight: 750; }
.admission-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-left: 42px; }
.admission-option { display: flex; align-items: start; gap: 9px; min-height: 48px; padding: 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 13px; line-height: 1.35; cursor: pointer; transition: 150ms ease; }
.admission-option:hover { border-color: var(--signal); transform: translateY(-1px); }
.admission-option:has(input:checked) { color: var(--white); background: var(--ink); border-color: var(--ink); }
.admission-option input { position: absolute; opacity: 0; pointer-events: none; }
.admission-option-letter { display: grid; width: 22px; height: 22px; flex: none; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; place-items: center; font-size: 10px; font-weight: 800; }
.admission-option:has(input:checked) .admission-option-letter { color: var(--white); background: var(--signal); border-color: var(--signal); }
.admission-response-label { display: block; margin: 16px 0 0 42px; color: var(--muted); font-size: 11px; font-weight: 800; }
.admission-response-textarea { display: block; width: 100%; min-height: 180px; margin-top: 8px; padding: 14px; resize: vertical; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.55; }
.admission-response-textarea:focus { border-color: var(--signal); outline: 3px solid rgba(232, 91, 72, 0.16); }
.score-bar-unscored { background: repeating-linear-gradient(135deg, rgba(23, 37, 47, 0.06), rgba(23, 37, 47, 0.06) 5px, transparent 5px, transparent 10px); }
.admission-submit-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 24px; padding: 22px; color: var(--white); background: var(--ink); border-radius: var(--radius-medium); }
.admission-submit-panel p { max-width: 510px; margin: 0; color: #b1bdc0; font-size: 12px; line-height: 1.5; }
.admission-submit-panel .button { flex: none; }

/* The TestMyBrain battery uses a focused, one-task-at-a-time workspace. */
.cognitive-shell { padding: 0 0 120px; }
.cognitive-stage { min-height: 590px; overflow: hidden; background: var(--white); border: 1px solid rgba(23, 37, 47, 0.09); border-radius: var(--radius-large); box-shadow: 0 20px 55px rgba(23, 37, 47, 0.07); }
.cognitive-setup { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(310px, 0.95fr); gap: 44px 70px; padding: 48px; }
.cognitive-setup h2, .section-intro-card h2 { max-width: 580px; }
.cognitive-setup > div > p:last-child, .section-intro-card > p:not(.eyebrow) { max-width: 600px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.module-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.module-list li { display: flex; align-items: center; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.module-list li > span { color: var(--signal-dark); font-size: 10px; font-weight: 800; }
.module-list strong, .module-list small { display: block; }
.module-list strong { font-size: 13px; }
.module-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.age-form { grid-column: 1 / -1; padding: 25px; color: var(--white); background: var(--ink); border-radius: var(--radius-medium); }
.age-form label, .age-form label span { display: block; }
.age-form label { margin-bottom: 13px; font-size: 13px; font-weight: 800; }
.age-form label span, .age-form > small { color: #aebbbd; font-size: 10px; font-weight: 500; }
.age-form > div { display: flex; gap: 10px; margin-bottom: 10px; }
.age-form input { width: 150px; min-height: 48px; padding: 0 16px; color: var(--ink); background: var(--white); border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 800; }
.age-form input:focus { outline: 3px solid rgba(139, 199, 187, 0.5); }
.cognitive-progress, .task-topbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.cognitive-progress { padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.task-topbar { min-height: 58px; padding: 0 28px; color: #adbbbe; background: var(--ink); }
.task-topbar strong { color: var(--teal); font-size: 14px; letter-spacing: 0; }
.matrix-task, .vocabulary-task, .digit-task, .symbol-task { display: grid; min-height: 532px; align-content: center; justify-items: center; padding: 34px; text-align: center; }
.matrix-task > p, .vocabulary-task > p, .digit-task > p, .symbol-task > p { margin-bottom: 24px; color: var(--muted); font-size: 12px; font-weight: 750; }
.matrix-prompt { width: min(100%, 470px); max-height: 320px; object-fit: contain; }
.matrix-options { display: grid; grid-template-columns: repeat(5, minmax(80px, 1fr)); width: min(100%, 680px); gap: 9px; margin-top: 26px; }
.matrix-options button { position: relative; display: grid; min-height: 105px; padding: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; place-items: center; transition: 150ms ease; }
.matrix-options button:hover, .word-options button:hover { border-color: var(--signal); transform: translateY(-2px); }
.matrix-options button:focus-visible, .word-options button:focus-visible, .symbol-responses button:focus-visible, .digit-keypad button:focus-visible { outline: 3px solid rgba(232, 91, 72, 0.34); outline-offset: 2px; }
.matrix-options img { max-width: 100%; max-height: 78px; object-fit: contain; }
.matrix-options span { position: absolute; top: 6px; left: 7px; display: grid; width: 19px; height: 19px; color: var(--white); background: var(--ink); border-radius: 50%; place-items: center; font-size: 8px; font-weight: 800; }
.vocabulary-task h2 { margin-bottom: 32px; color: var(--signal-dark); font-size: clamp(45px, 6vw, 70px); }
.word-options { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); width: min(100%, 920px); gap: 9px; }
.word-options button { min-height: 76px; padding: 13px 9px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-weight: 750; transition: 150ms ease; }
.word-options span { display: block; margin-bottom: 5px; color: var(--signal-dark); font-size: 9px; }
.digit-display { min-height: 130px; color: var(--ink); font-size: clamp(76px, 12vw, 135px); font-weight: 800; line-height: 1; letter-spacing: -0.08em; }
.digit-task input { width: min(100%, 500px); margin-bottom: 20px; padding: 12px 18px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 34px; font-weight: 800; letter-spacing: 0.18em; text-align: center; }
.digit-task input:focus { border-color: var(--signal); outline: 3px solid rgba(232, 91, 72, 0.16); }
.digit-keypad { display: grid; grid-template-columns: repeat(5, 54px); gap: 7px; margin-bottom: 20px; }
.digit-keypad button, .symbol-responses button { min-height: 48px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-weight: 800; }
.digit-keypad button:hover, .symbol-responses button:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
.symbol-key { display: grid; grid-template-columns: repeat(6, minmax(58px, 1fr)); width: min(100%, 600px); gap: 8px; margin: 28px 0; }
.symbol-key > div { padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.symbol-key img { display: block; width: 44px; height: 44px; margin: 0 auto 7px; object-fit: contain; }
.symbol-key strong { font-size: 14px; }
.symbol-task .symbol-key { margin-top: 0; }
.symbol-probe { width: 135px; height: 135px; object-fit: contain; }
.symbol-responses { display: grid; grid-template-columns: repeat(3, 90px); gap: 10px; margin-top: 27px; }
.symbol-responses button { min-height: 62px; font-size: 22px; }

@media (max-width: 850px) {
  .report-content-surface { padding: 22px 24px 24px; }
  .sat-setup { grid-template-columns: 1fr; gap: 30px; padding: 35px; }
  .sat-domain-grid { grid-template-columns: repeat(2, 1fr); }
  .gre-setup { grid-template-columns: 1fr; gap: 30px; padding: 35px; }
  .gre-domain-grid { grid-template-columns: repeat(3, 1fr); }
  .admission-setup { grid-template-columns: 1fr; gap: 30px; padding: 35px; }
  .admission-domain-grid { grid-template-columns: repeat(2, 1fr); }
  .cognitive-setup { gap: 36px; padding: 35px; }
  .word-options { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 600px) {
  #test-page-main, #report-page-main { width: min(calc(100% - 30px), var(--max-width)); }
  .test-page-intro { padding-block: 45px 42px; }
  .report-header { grid-template-columns: 1fr; align-items: start; gap: 14px; padding: 12px 0 14px; }
  .test-page-intro h1 { font-size: clamp(42px, 13vw, 65px); }
  .report-header h1 { font-size: clamp(36px, 10vw, 52px); }
  .test-page-description, .report-lede { font-size: 15px; }
  .instruction-card { grid-template-columns: 1fr; gap: 7px; }
  .instruction-card > span { grid-column: 1; }
  .question-card { padding: 20px 16px 16px; }
  .question-card legend { font-size: 15px; }
  .question-number { width: 27px; height: 27px; margin-right: 8px; }
  .response-options { grid-template-columns: repeat(2, 1fr); }
  .ability-options { grid-template-columns: 1fr; }
  .response-option:last-child { grid-column: 1 / -1; }
  .submit-panel { align-items: stretch; flex-direction: column; padding: 20px; }
  .submit-panel .button { width: 100%; }
  .report-actions { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 15px; }
  .report-header > .button { justify-self: start; }
  .report-content-surface { margin-top: 0; padding: 18px; border-radius: 18px; }
  .report-key-result { width: 100%; min-width: 0; max-width: none; }
  .report-score-summary { width: 100%; }
  .report-breakdown-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .report-writing-evaluation-item .essay-rubric-list { grid-template-columns: 1fr; }
  .report-writing-evaluation-item .essay-criterion { grid-template-columns: 1fr; gap: 10px; }
  .report-content-surface > .community-insights-report, .report-content-surface > .community-report { margin-top: 17px; padding-top: 17px; }
  .community-profile-prompt { width: 100%; grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .community-profile-prompt .button { width: 100%; }
  .community-profile-grid { grid-template-columns: 1fr; }
  .community-profile-actions { flex-direction: column; }
  .community-profile-actions .button { width: 100%; }
  .community-report-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .community-report-controls { grid-template-columns: 1fr; align-items: stretch; margin-left: 0; }
  .community-metric-picker, .community-filter-control, .community-view-picker, .community-axis-picker { width: 100%; }
  .community-filter-control { min-width: 0; }
  .community-filter-panel { position: static; width: auto; margin-top: 6px; }
  .community-filter-groups { grid-template-columns: 1fr; }
  .community-insights { grid-template-columns: 1fr; }
  .community-histogram { height: 130px; }
  .community-profile-bars { grid-template-columns: repeat(var(--community-group-count, 1), minmax(58px, 1fr)); }
  .community-profile-bar-item { width: min(100%, 82px); min-width: 58px; grid-template-rows: 22px 125px minmax(34px, auto) 16px; }
  .community-profile-bar-y-axis { padding-bottom: 63px; }
  .country-map { min-height: 160px; }
  .country-map-stage { min-height: 160px; padding: 6px; }
  .country-map-tooltip { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 7px 10px; padding: 8px 10px; }
  .country-map-tooltip-heading { grid-column: 1; grid-row: 1; }
  .country-map-tooltip-average { grid-column: 2; grid-row: 1; }
  .country-map-tooltip-footer { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; padding: 6px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .country-map-tooltip-close { grid-column: 3; grid-row: 1; }
  .result-flags { justify-content: flex-start; }
  .essay-feedback-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .written-totals { text-align: left; }
  .essay-criterion { grid-template-columns: 1fr; gap: 10px; }
  .dimension-grid { grid-template-columns: 1fr; }
  .dimension-group-grid { grid-template-columns: 1fr; }
  .dimension-group-heading { align-items: flex-start; }
  .dimension-card:last-child { grid-column: auto; }
  .sat-shell { padding-bottom: 80px; }
  .sat-setup { padding: 24px 20px; }
  .sat-domain-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .sat-domain-grid > span { min-height: 74px; padding: 11px; }
  .sat-task-topbar { min-height: 54px; padding-inline: 16px; }
  .sat-form { padding-inline: 15px; }
  .sat-form-heading { align-items: start; flex-direction: column; gap: 12px; }
  .sat-question { padding: 20px 16px 16px; }
  .sat-question legend { font-size: 15px; }
  .sat-skill, .sat-stimulus, .sat-options, .sat-numeric-label, .sat-numeric-input { margin-left: 0; }
  .sat-options { grid-template-columns: 1fr; }
  .sat-submit-panel { align-items: stretch; flex-direction: column; padding: 20px; }
  .sat-submit-panel .button { width: 100%; }
  .gre-shell { padding-bottom: 80px; }
  .gre-setup { padding: 24px 20px; }
  .gre-domain-grid { grid-template-columns: 1fr; gap: 7px; }
  .gre-domain-grid > span { min-height: 60px; padding: 11px; }
  .gre-task-topbar { min-height: 54px; padding-inline: 16px; }
  .gre-writing-form { padding-inline: 15px; }
  .gre-writing-heading { align-items: start; flex-direction: column; gap: 12px; }
  .gre-writing-heading h2 { font-size: 29px; }
  .gre-writing-footer { align-items: stretch; grid-template-columns: 1fr; gap: 12px; }
  .gre-writing-footer .button { width: 100%; }
  .gre-form { padding-inline: 15px; }
  .gre-form-heading { align-items: start; flex-direction: column; gap: 12px; }
  .gre-question { padding: 20px 16px 16px; }
  .gre-question legend { font-size: 15px; }
  .gre-skill, .gre-stimulus, .gre-question-hint, .gre-options, .gre-numeric-label, .gre-numeric-input { margin-left: 0; }
  .gre-options { grid-template-columns: 1fr; }
  .gre-submit-panel { align-items: stretch; flex-direction: column; padding: 20px; }
  .gre-submit-panel .button { width: 100%; }
  .admission-stage { min-height: 520px; }
  .admission-setup { padding: 24px 20px; }
  .admission-domain-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .admission-domain-grid > span { min-height: 74px; padding: 11px; }
  .admission-task-topbar { min-height: 54px; padding-inline: 16px; }
  .admission-form { padding-inline: 15px; }
  .admission-form-heading { align-items: start; flex-direction: column; gap: 12px; }
  .admission-question { padding: 20px 16px 16px; }
  .admission-question legend { font-size: 15px; }
  .admission-skill, .admission-stimulus, .admission-question-hint, .admission-options, .admission-response-label { margin-left: 0; }
  .admission-options { grid-template-columns: 1fr; }
  .admission-submit-panel { align-items: stretch; flex-direction: column; padding: 20px; }
  .admission-submit-panel .button { width: 100%; }
  .cognitive-shell { padding-bottom: 80px; }
  .cognitive-stage { min-height: 520px; }
  .cognitive-setup { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; }
  .age-form { grid-column: auto; padding: 20px; }
  .age-form > div { align-items: stretch; flex-direction: column; }
  .age-form input { width: 100%; }
  .task-topbar { min-height: 54px; padding-inline: 16px; }
  .matrix-task, .vocabulary-task, .digit-task, .symbol-task { min-height: 465px; padding: 24px 15px; }
  .matrix-options { grid-template-columns: repeat(3, 1fr); }
  .matrix-options button { min-height: 88px; }
  .word-options { grid-template-columns: 1fr 1fr; }
  .word-options button:last-child { grid-column: 1 / -1; }
  .digit-keypad { grid-template-columns: repeat(5, minmax(42px, 54px)); width: 100%; justify-content: center; }
  .symbol-key { grid-template-columns: repeat(3, 1fr); }
  .symbol-responses { grid-template-columns: repeat(3, minmax(68px, 90px)); }
}

/* Shared refinement: a compact library and readable, keyboard-friendly test surfaces. */
html { scroll-padding-top: 24px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
input, textarea, select { font: inherit; accent-color: var(--signal); }
[hidden] { display: none !important; }
.subpage { background: radial-gradient(circle at 88% 180px, #e8efff 0, transparent 310px), var(--paper); }
.brand { font-size: clamp(18px, 2.2vw, 23px); }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; }
.button, .text-link, .button-small { font-size: 14px; }
.button { border-radius: 12px; min-height: 46px; }
.button-primary { box-shadow: 0 4px 12px #315dcc20; }
.eyebrow { font-size: 12px; letter-spacing: .12em; margin-bottom: 14px; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.12; }
.section { padding-block: 64px; }
.section-heading { margin-bottom: 24px; gap: 24px; }
.section-heading h2 { font-size: 32px; }
.section-intro { max-width: 370px; }
.library-tools { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.library-search { display: flex; align-items: center; gap: 12px; padding: 0 16px; width: min(100%, 550px); background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.library-search > span { font-size: 28px; color: var(--muted); }
.library-search input { min-width: 0; width: 100%; padding: 15px 0; border: 0; background: transparent; color: var(--ink); }
.library-search:focus-within { outline: 3px solid #315dcc40; border-color: var(--signal); }
.library-search input:focus { outline: none; }
#library-count { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.filter-row { gap: 8px; margin-bottom: 24px; }
.filter-chip { font-size: 14px; min-height: 44px; padding: 9px 18px; background: white; }
.filter-chip.is-active { background: var(--ink); }
.test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.test-grid.is-collection-view { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.test-card, .test-card:first-child, .test-card:nth-child(2) { grid-column: auto; min-height: 300px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.test-card { position: relative; }
.test-card-footer { gap: 16px; margin-top: 12px; border-color: var(--line); align-items: center; }
.duration { font-size: 13px; color: var(--muted); }
.test-card:hover { transform: translateY(-3px); border-color: #a7bce8; box-shadow: 0 12px 28px #182b4610; }
.test-card-top { margin-bottom: 24px; gap: 12px; }

/* Large, touch-friendly task surfaces; functional grid and target geometry. */
.benchmark-shell { margin: 0 auto 60px; max-width: 850px; padding: clamp(16px, 4vw, 32px); background: white; border: 1px solid var(--line); border-radius: 24px; }
#benchmark-status { margin-bottom: 20px; min-height: 28px; font-size: 18px; font-weight: 650; }
#benchmark-stage { margin-bottom: 20px; border-radius: 16px; scroll-margin-top: 16px; }
#benchmark-stage:has(.challenge-feedback) { display: grid; place-items: center; }
.reaction-pad { width: 100%; min-height: 320px; padding: 30px; background: #283d69; color: white; font-size: clamp(24px, 5vw, 42px); font-weight: 750; border: 0; border-radius: 16px; touch-action: manipulation; }
.reaction-pad.is-go { background: var(--signal); }
.aim-arena { position: relative; height: 380px; background: #edf2ff; overflow: hidden; touch-action: manipulation; }
.aim-target { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 5px solid #c6d5ff; background: #315dcc; color: white; font-size: 34px; touch-action: manipulation; }
.benchmark-grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); gap: 10px; max-width: 500px; margin: auto; }
.benchmark-grid button { aspect-ratio: 1; border: 2px solid #b7c8ee; border-radius: 10px; background: #e5ecfa; min-width: 0; min-height: 44px; touch-action: manipulation; }
.benchmark-grid button:disabled { opacity: 1; }
/* Shared challenge controls keep the stimulus prominent and fit narrow screens. */
.challenge-play, .challenge-feedback, .rhythm-surface { text-align: center; padding: 16px 0; }
.challenge-prompt, .challenge-rule { font-size: 19px; font-weight: 700; text-align: center; }
.challenge-stimulus { font-size: clamp(30px, 7vw, 64px); font-weight: 800; padding: 35px 0; overflow-wrap: anywhere; }
.challenge-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0; }
.challenge-choice { min-width: 120px; min-height: 54px; background: #edf2ff; color: var(--ink); border: 1px solid var(--line); }
.challenge-choice:hover { background: #dae5ff; }
.challenge-hint { color: var(--muted); font-size: 14px; }
.study-interval { min-height: 280px; display: grid; place-items: center; color: var(--muted); font-size: 42px; }
.study-task-label { margin: 8px 0 0; text-align: center; font-size: 18px; font-weight: 750; }
.study-stimulus { width: clamp(110px, 18vw, 170px); aspect-ratio: 1; margin: 28px auto; border-radius: 50%; box-shadow: 0 0 0 10px color-mix(in srgb, currentColor 12%, transparent); }
.study-feedback { min-height: 300px; display: grid; place-content: center; gap: 8px; text-align: center; }
.study-feedback strong { font-size: clamp(34px, 6vw, 58px); }
.study-feedback span { color: var(--muted); font-size: 18px; font-weight: 700; }
.study-feedback.is-correct strong { color: var(--signal); }
.study-feedback.is-wrong strong { color: #b92e3c; }
.study-next { display: block; margin: 8px auto 0; }
.choice-colour.colour-0, .study-key.colour-0 { color: #2559c4; }
.choice-colour.colour-1, .study-key.colour-1 { color: #137451; }
.choice-colour.colour-2, .study-key.colour-2 { color: #9a5b00; }
.choice-colour.colour-3, .study-key.colour-3 { color: #7040a8; }
.choice-colour.colour-0 { background: #2559c4; }
.choice-colour.colour-1 { background: #137451; }
.choice-colour.colour-2 { background: #d28614; }
.choice-colour.colour-3 { background: #7040a8; }
.study-response-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.study-key { min-width: 110px; min-height: 58px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: white; font: inherit; font-weight: 700; cursor: pointer; }
.study-key kbd { display: block; margin-bottom: 3px; color: var(--ink); font: inherit; font-size: 17px; font-weight: 800; line-height: 1; }
.flanker-stimulus { display: flex; align-items: center; justify-content: center; min-height: 210px; font-size: clamp(54px, 10vw, 100px); letter-spacing: .04em; }
.flanker-stimulus strong { color: inherit; font-size: 1em; font-weight: inherit; }
.go-signal { display: grid; place-items: center; width: clamp(180px, 30vw, 270px); aspect-ratio: 1; margin: 30px auto 18px; border: 0; border-radius: 50%; color: white; font: inherit; font-size: clamp(28px, 6vw, 48px); font-weight: 800; line-height: 1; cursor: pointer; }
.go-signal.is-go { background: var(--signal); }
.go-signal.is-no-go { background: #b92e3c; }
.nback-letter { min-height: 230px; display: grid; place-items: center; font-size: clamp(88px, 18vw, 170px); font-weight: 800; }
.nback-letter + .button { display: block; margin: 0 auto; }
.subitizing-field { position: relative; min-height: 330px; max-width: 680px; margin: 12px auto 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.subitizing-field span { position: absolute; width: clamp(16px, 2.3vw, 24px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--ink); }
.study-number-row { min-height: 330px; display: grid; grid-template-columns: repeat(3, minmax(64px, 110px)); align-content: center; justify-content: center; gap: 12px; }
.study-number-row[hidden], .subitizing-field[hidden] { display: none; }
.colour-vision-plate { display: block; width: min(82vw, 430px); height: auto; margin: 16px auto 12px; overflow: visible; filter: drop-shadow(0 14px 22px rgba(18, 39, 68, .08)); }
.colour-vision-plate circle:first-child { stroke: rgba(18, 39, 68, .12); stroke-width: 1.5; }
.challenge-countdown, #benchmark-clock { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--signal); text-align: right; min-height: 24px; margin: 0 0 12px; }
/* Keep memory boards stationary when their reveal countdown ends. */
.benchmark-shell.is-running:has(.benchmark-grid) > #benchmark-clock[hidden] { display: block !important; visibility: hidden; }
.challenge-countdown.is-urgent { color: #bc303e; }
.clash-field { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
.clash-target { border: 3px solid var(--ink); border-radius: 12px; padding: 14px; font-size: clamp(30px, 6vw, 52px); }
.clash-distractor { font-size: clamp(20px, 4vw, 32px); font-weight: 800; }
.clash-triple { flex-wrap: nowrap; }
.clash-mini-tile { display: grid; place-items: center; width: 112px; height: 112px; padding: 10px; border: 3px solid var(--ink); border-radius: 12px; font-size: 24px; font-weight: 800; }
.clash-mini-tile.is-odd { border-style: dashed; }
.sorting-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; padding: 24px 0; }
.sorting-group .sorting-shape { margin: 0; width: 76px; height: 76px; display: grid; place-items: center; color: white; font-size: 24px; font-weight: 800; }
.sorting-shape.diamond { transform: rotate(45deg); width: 58px; height: 58px; margin: 9px; }
.sorting-shape.diamond span { transform: rotate(-45deg); }
.sorting-shape.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 22px; }
.challenge-feedback > span { display: block; color: var(--signal); font-size: 48px; }
.challenge-feedback.is-success > span { color: var(--signal); }
.challenge-feedback h2 { font-size: 26px; margin: 16px 0 24px; }
.rotation-pair { display: flex; justify-content: center; gap: 20px; }
.rotation-pair svg { width: min(40%, 200px); background: #edf2ff; border-radius: 18px; color: #315dcc; }
.challenge-maths { display: grid; gap: 12px; max-width: 340px; margin: auto; text-align: left; }
.challenge-maths input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.search-grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); gap: clamp(2px, .5vw, 6px); width: min(100%, 720px); margin: auto; }
.search-grid button { aspect-ratio: 1; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: clamp(3px, .8vw, 8px); background: #edf2ff; color: var(--ink); padding: 0; }
.search-grid span { display: inline-block; color: var(--ink); font: 800 clamp(12px, 3vw, 26px)/1 monospace; transition: transform .12s ease; }
.chimp-grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); gap: 10px; width: min(100%, 560px); margin: auto; }
.chimp-grid button, .chimp-empty { aspect-ratio: 1; min-width: 0; min-height: 44px; border: 2px solid #b7c8ee; border-radius: 10px; background: #e5ecfa; }
.chimp-grid button { color: var(--ink); font: 800 clamp(22px, 5vw, 34px)/1 monospace; touch-action: manipulation; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.chimp-grid button span { transition: opacity 140ms ease; }
.chimp-grid button.is-covered { background: #315dcc; border-color: #183a99; box-shadow: inset 0 0 0 4px #e9f0ff; }
.chimp-grid button.is-covered span { opacity: 0; }
.chimp-grid button.is-correct { background: var(--signal); border-color: var(--signal-dark); color: white; box-shadow: inset 0 0 0 4px #dce7ff; animation: memory-tile-confirm 400ms ease-out; }
.chimp-grid button.is-wrong { background: #b94a48; border-color: #842c35; color: white; animation: chimp-tile-shake 220ms ease-out; }
@keyframes chimp-tile-shake { 30% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }
.chimp-empty { visibility: hidden; }
.sorting-shape { width: 110px; height: 110px; margin: 30px auto; }
.sorting-shape.circle { border-radius: 50%; }
.challenge-rule strong { color: var(--signal); }
.tracking-arena { position: relative; height: clamp(240px, 45vw, 360px); background: #edf2ff; border-radius: 18px; margin-bottom: 20px; overflow: hidden; }
.tracking-dot { position: absolute; width: 44px; height: 44px; padding: 0; border: 3px solid white; border-radius: 50%; background: #315dcc; transform: translate(-50%, -50%); touch-action: manipulation; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.tracking-dot:disabled { opacity: 1; }
.tracking-dot:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.tracking-dot.is-target { background: #edb340; border-color: #704b04; box-shadow: 0 0 0 3px #edb34055; }
.tracking-dot.is-selected { background: var(--signal-dark); border-color: white; box-shadow: 0 0 0 3px var(--signal); animation: tracking-dot-confirm 400ms cubic-bezier(.2,.8,.25,1) both; }
.tracking-dot.is-selected::before { position: absolute; inset: 0; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: white; content: ""; pointer-events: none; }
.tracking-dot.is-selected::after { position: absolute; inset: -5px; border: 3px solid var(--signal); border-radius: inherit; content: ""; pointer-events: none; animation: tracking-dot-ring 520ms ease-out both; }
@keyframes tracking-dot-confirm { 0% { scale: .82; box-shadow: 0 0 0 0 #dce7ff; } 48% { scale: 1.16; box-shadow: 0 0 0 7px #dce7ff; } 74% { scale: .97; } 100% { scale: 1; box-shadow: 0 0 0 3px #dce7ff; } }
@keyframes tracking-dot-ring { 0% { scale: .72; opacity: .9; } 100% { scale: 1.9; opacity: 0; } }
.rhythm-pulse { font-size: 64px; padding: 24px; color: var(--signal); }
.rhythm-tap { width: min(100%, 320px); min-height: 110px; font-size: 24px; touch-action: manipulation; }
.rhythm-tap.is-tapped { animation: benchmark-tile-press 180ms ease-out; background: var(--signal); }
@media (prefers-reduced-motion: reduce) { .rhythm-tap.is-tapped { animation: none; } }
.pitch-stage { display: grid; justify-items: center; gap: 22px; padding: 34px 0 24px; text-align: center; }
.pitch-pair { display: grid; grid-template-columns: repeat(2, 104px); gap: 26px; }
.pitch-pair button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--blue-soft); color: var(--signal-dark); font-family: inherit; font-size: 34px; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pitch-pair button:disabled { cursor: default; opacity: 1; }
.pitch-pair button:not(:disabled):hover { background: #dae5ff; border-color: var(--signal); transform: translateY(-2px); }
.pitch-pair button:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.pitch-pair button.is-sounding { animation: pitch-tone-pulse 360ms ease-out; }
@keyframes pitch-tone-pulse { 0% { box-shadow: 0 0 0 0 rgba(49, 93, 204, .35); transform: scale(1); } 45% { background: #dae5ff; box-shadow: 0 0 0 14px rgba(49, 93, 204, 0); transform: scale(1.08); } 100% { box-shadow: 0 0 0 0 rgba(49, 93, 204, 0); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pitch-pair button.is-sounding { animation: none; background: #dae5ff; } }
/* Hearing Range uses one large stop surface so the motor action stays obvious during the sweep. */
.hearing-range-stage { display: grid; justify-items: center; gap: 18px; padding: 30px 0 18px; text-align: center; }
.hearing-range-stage .challenge-hint { max-width: 62ch; margin: 0; line-height: 1.6; }
.hearing-range-tone { display: grid; place-items: center; gap: 8px; width: 170px; aspect-ratio: 1; margin: 8px 0; border: 2px solid var(--line); border-radius: 50%; background: var(--blue-soft); color: var(--signal-dark); font: inherit; cursor: pointer; }
.hearing-range-tone span { font-size: 52px; line-height: .7; }
.hearing-range-tone strong { font-size: 15px; }
.hearing-range-tone.is-sounding { animation: pitch-tone-pulse 700ms ease-out; }
.hearing-range-sweep { position: relative; display: grid; place-items: center; align-content: center; gap: 13px; width: 100%; min-height: 340px; padding: 34px; overflow: hidden; border: 2px solid var(--signal); border-radius: 18px; background: var(--blue-soft); color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.hearing-range-sweep strong { font-size: clamp(28px, 5vw, 42px); }
.hearing-range-sweep > span:not(.hearing-range-wave) { max-width: 32ch; color: var(--muted); font-size: 17px; font-weight: 700; line-height: 1.45; }
.hearing-range-wave { color: var(--signal); font-size: clamp(66px, 12vw, 100px); line-height: .55; animation: hearing-wave 1.2s ease-in-out infinite alternate; }
.hearing-range-sweep i { position: absolute; inset: auto 0 0; height: 8px; background: var(--signal); transform: scaleX(0); transform-origin: left; animation: hearing-sweep-progress var(--sweep-duration) linear forwards; }
@keyframes hearing-wave { to { transform: scaleX(.62) scaleY(1.12); opacity: .58; } }
@keyframes hearing-sweep-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hearing-range-tone.is-sounding, .hearing-range-wave { animation: none; } }
.benchmark-grid button.is-lit { background: var(--signal); border-color: var(--signal-dark); box-shadow: inset 0 0 0 4px white; }
.benchmark-grid.is-sequence button { transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.benchmark-grid.is-sequence button.is-lit { transform: scale(1.055); box-shadow: inset 0 0 0 4px white, 0 0 0 5px #dce7ff; }
.benchmark-grid button.is-picked { animation: benchmark-tile-press 320ms ease-out; }
.benchmark-grid.is-sequence button.is-picked.is-wrong { animation: chimp-tile-shake 320ms ease-out; }
.benchmark-grid.is-visual-memory button { transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.benchmark-grid button.is-picked.is-correct { animation: memory-tile-confirm 400ms ease-out; }
.benchmark-grid button.is-correct { background: var(--signal); border-color: var(--signal-dark); box-shadow: inset 0 0 0 4px #dce7ff; }
.benchmark-grid button.is-wrong { background: #b94a48; border-color: #842c35; box-shadow: inset 0 0 0 4px #fbe2e2; }
@keyframes benchmark-tile-press { 0% { transform: scale(1); } 45% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes memory-tile-confirm { 0% { transform: scale(.84); box-shadow: inset 0 0 0 4px #dce7ff, 0 0 0 0 #dce7ff; } 44% { transform: scale(1.12); box-shadow: inset 0 0 0 4px #dce7ff, 0 0 0 8px #dce7ff; } 72% { transform: scale(.97); } 100% { transform: scale(1); box-shadow: inset 0 0 0 4px #dce7ff; } }
@media (prefers-reduced-motion: reduce) { .chimp-grid button.is-correct, .benchmark-grid button.is-picked, .tracking-dot.is-selected, .tracking-dot.is-selected::after { animation: none; } .tracking-dot { transition: none; } .benchmark-grid.is-sequence button, .benchmark-grid.is-visual-memory button { transition: none; } .benchmark-grid.is-sequence button.is-lit { transform: none; } }
.memory-number { padding: 50px 12px; font-size: clamp(24px, 5vw, 42px); font-family: monospace; overflow-wrap: anywhere; text-align: center; letter-spacing: .05em; }
#number-recall { display: grid; gap: 16px; }
#number-recall input, #typing-input { width: 100%; padding: 14px; font: inherit; border: 1px solid var(--line); border-radius: 10px; }
.typing-passage { max-height: 230px; overflow: auto; padding: 18px; background: #f4f6fa; font: 18px/1.8 monospace; user-select: none; }
#typing-input { resize: vertical; margin-top: 10px; }
#benchmark-reset { margin-left: 8px; }
@media (max-width: 500px) {
  .benchmark-grid, .chimp-grid { gap: 6px; }
}

/* A compact score and unboxed evidence row leave room for Statistics below. */
.benchmark-result-heading { display: grid; grid-template-columns: minmax(210px, .55fr) minmax(0, 2fr); align-items: center; gap: 24px; padding-bottom: 4px; }
.benchmark-result-primary { display: grid; justify-items: start; min-width: 0; gap: 7px; }
.benchmark-result-support { min-width: 0; }
.benchmark-result-heading .eyebrow { margin-bottom: 6px; }
.benchmark-result-heading h2 { margin: 0; color: var(--signal-dark); font-size: clamp(42px, 5.5vw, 58px); line-height: .95; letter-spacing: -.08em; }
.benchmark-result-heading h2 small { margin-left: 6px; color: var(--muted); font-size: 16px; letter-spacing: 0; }
.result-flags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.result-flags span { padding: 5px 9px; color: var(--signal-dark); background: #e9f0ff; border-radius: 999px; font-size: 11px; font-weight: 750; }
.benchmark-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 12px 16px; }
.benchmark-detail-card { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 5px 0; }
.benchmark-detail-card span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.25; }
.benchmark-detail-card strong { color: var(--ink); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.benchmark-detail-card small { color: var(--muted); font-size: 12px; }
@media (max-width: 1000px) { .benchmark-result-heading { grid-template-columns: 1fr; align-items: start; gap: 18px; } }

/* One disclosure preserves reflection and evidence without creating another report chapter. */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 20px 0; }
.insight-card { padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.insight-card h3 { margin: 0 0 12px; font-size: 19px; }
.insight-card p, .answer-evidence p { font-size: 16px; line-height: 1.7; }
/* Report cards must not inherit the old absolutely positioned hero illustration. */
.insight-grid > .insight-card { position: static; inset: auto; transform: none; width: auto; min-width: 0; color: var(--ink); box-shadow: none; z-index: auto; overflow-wrap: anywhere; }
.report-data-review { max-width: 850px; margin-top: 18px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.report-review-only, .report-explore { padding-top: 24px; }
.report-review-only .report-data-review { margin-top: 0; }
.report-explore .report-data-review { margin-top: 0; }
.report-data-review > summary { display: flex; align-items: center; justify-content: space-between; }
.report-data-review > div { padding-top: 16px; }
.report-data-review h3 { font-size: 18px; }
.score-explanation { margin: 0; padding: 14px 16px; background: #edf2ff; border-radius: 10px; font-size: 14px; line-height: 1.65; }
.privacy-page { width: min(calc(100% - 48px), 780px); margin: 0 auto; padding: 52px 0 72px; }
.privacy-page:is(.profile-page, .source-ledger) { width: min(calc(100% - 48px), var(--max-width)); padding-top: 32px; }
@media (min-width: 1000px) {
  .profile-page .community-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
  .source-ledger #data-use { columns: 2; column-gap: 36px; }
  .source-ledger #data-use > h2 { column-span: all; }
  .source-ledger .source-link-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; }
  .source-ledger .source-catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .source-ledger > p { max-width: 90ch; }
}
@media (max-width: 600px) {
  .privacy-page:is(.profile-page, .source-ledger) { width: calc(100% - 30px); padding-top: 24px; }
}
.privacy-page h1 { margin: 12px 0 18px; font-size: clamp(36px, 6vw, 60px); line-height: 1; }
.privacy-page h2 { margin: 36px 0 10px; font-size: 24px; }
.privacy-page p, .privacy-page li { font-size: 16px; line-height: 1.75; }
.privacy-summary { padding: 20px 22px; border: 1px solid #cbd9f7; border-radius: 14px; background: #edf2ff; }
.eligibility-page { width: min(calc(100% - 48px), 640px); margin: 0 auto; padding: clamp(72px, 14vh, 150px) 0; }
.eligibility-page h1 { margin: 12px 0 18px; font-size: clamp(38px, 7vw, 64px); line-height: 1; }
.eligibility-page > p { font-size: 18px; line-height: 1.7; }
.eligibility-page form { margin: 30px 0 14px; }
.eligibility-note, #eligibility-status { color: var(--muted); font-size: 14px !important; }
.source-ledger h2 { scroll-margin-top: 24px; }
.source-ledger code { padding: 2px 5px; border-radius: 4px; background: #edf2ff; color: var(--signal-dark); }
.illustrated-page-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); align-items: center; gap: 26px; margin: 4px 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.illustrated-page-heading > div { min-width: 0; }
.illustrated-page-heading .eyebrow { margin: 0 0 12px; font-size: 10px; letter-spacing: .13em; }
.illustrated-page-heading h1 { margin: 0 0 14px; font-size: clamp(34px, 4.7vw, 48px); line-height: 1.06; letter-spacing: -.045em; }
.illustrated-page-heading p:not(.eyebrow) { max-width: 38ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.page-illustration { display: block; width: 100%; height: auto; pointer-events: none; }
@media (min-width: 980px) {
  #report-page-app .report-header-title { position: relative; padding-right: 142px; }
  #report-page-app .report-header-title::after { position: absolute; width: 126px; height: 86px; right: 0; top: 50%; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20220%22%20fill%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22paper%22%20x1%3D%2290%22%20y1%3D%2240%22%20x2%3D%22215%22%20y2%3D%22185%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f0f5ff%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22mint%22%20x1%3D%2260%22%20y1%3D%2235%22%20x2%3D%22265%22%20y2%3D%22185%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e5f4ef%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e9effb%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%0A%20%20%3Cg%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22159%22%20cy%3D%22111%22%20r%3D%2280%22%20fill%3D%22%23e9effb%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22159%22%20cy%3D%22111%22%20r%3D%2298%22%20stroke%3D%22%23d1ddef%22%20stroke-dasharray%3D%222%208%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2286%22%20y%3D%2257%22%20width%3D%22117%22%20height%3D%22122%22%20rx%3D%2215%22%20fill%3D%22%23e1ebe9%22%20stroke%3D%22%23b3cec8%22%20stroke-width%3D%221.5%22%20transform%3D%22rotate(-13%20144%20118)%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22102%22%20y%3D%2239%22%20width%3D%22117%22%20height%3D%22134%22%20rx%3D%2215%22%20fill%3D%22url(%23paper)%22%20stroke%3D%22%2393add0%22%20stroke-width%3D%221.5%22%20transform%3D%22rotate(6%20161%20106)%22%2F%3E%0A%20%20%20%20%3Cg%20transform%3D%22rotate(6%20161%20106)%22%3E%3Cpath%20d%3D%22M122%2066h31M122%20139h52M122%20150h35%22%20stroke%3D%22%23abc0df%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M174%2071a26%2026%200%201%201-15-5%22%20stroke%3D%22%23315dcc%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2292%22%20r%3D%224%22%20fill%3D%22%23315dcc%22%2F%3E%3C%2Fg%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22224%22%20cy%3D%22149%22%20r%3D%2223%22%20fill%3D%22%23eff8f4%22%20stroke%3D%22%239ac4b7%22%20stroke-width%3D%221.5%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M214%20149h20M224%20139v20%22%20stroke%3D%22%23087065%22%20stroke-width%3D%222.5%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2292%22%20r%3D%225%22%20fill%3D%22%23b27619%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M242%2062v10m-5-5h10M52%20155h15%22%20stroke%3D%22%23a6bdd2%22%20stroke-width%3D%221.5%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E") center / contain no-repeat; content: ""; pointer-events: none; }
}
@media (max-width: 600px) {
  .illustrated-page-heading { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; padding-bottom: 20px; }
  .illustrated-page-heading h1 { font-size: 32px; }
  .illustrated-page-heading p:not(.eyebrow) { grid-column: 1; font-size: 13px; }
  .illustrated-page-heading .eyebrow { font-size: 9px; }
}
.source-boundary { margin-top: 18px; }
.source-link-groups { margin-top: 28px; }
.source-link-group { min-width: 0; }
.source-link-group h3 { margin-bottom: 12px; }
.source-link-group ul { margin: 0; padding-left: 20px; }
.source-link-group li { margin: 7px 0; }
.source-link-group a { color: var(--signal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.source-link-group small { color: var(--muted); font-size: 12px; }

/* Keep Methodology & Sources in one scannable reference instead of repeating panels on every test page. */
.source-catalog { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line); }
.source-catalog h2 { margin-top: 10px; }
.source-catalog-intro { max-width: 68ch; color: var(--muted); }
.source-catalog-list { display: grid; gap: 10px; margin-top: 26px; }
.source-catalog-entry { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.source-catalog-entry > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 17px 20px; color: var(--ink); cursor: pointer; font-size: 17px; font-weight: 750; list-style-position: inside; }
.source-catalog-entry > summary::marker { color: var(--signal-dark); }
.source-catalog-entry > summary small { color: var(--muted); font-size: 13px; font-weight: 650; text-align: right; }
.source-catalog-entry[open] > summary { border-bottom: 1px solid var(--line); background: #f8faff; }
.source-catalog-entry > summary:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.source-catalog-content { padding: 0 20px 22px; }
.source-catalog-content h3 { margin: 20px 0 7px; color: var(--ink); font-size: 16px; }
.source-catalog-content p, .source-catalog-content li { font-size: 15px; line-height: 1.65; }
.source-catalog-content p { margin: 0 0 10px; }
.source-catalog-content .eyebrow { margin: 24px 0 8px; font-size: 11px; }
.source-catalog-content ul { margin: 8px 0 0; padding-left: 20px; }
.source-catalog-content a { color: var(--signal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .source-catalog-entry > summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .source-catalog-entry > summary small { text-align: left; }
}
.answer-evidence { margin: 12px 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.answer-evidence summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.answer-evidence summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 5px; }
.answer-evidence ul { padding-left: 22px; }
.answer-evidence li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.answer-evidence li span { font-size: 14px; color: var(--muted); }
.review-stimulus { white-space: pre-wrap; padding: 16px; background: #f4f6fa; }

/* Writing feedback stays readable while quoted evidence and editable drafts wrap naturally. */
.essay-form, .essay-result { font-size: 16px; line-height: 1.75; }
.essay-form { display: grid; gap: 18px; margin: 24px 0; }
.essay-form label { display: grid; gap: 8px; font-weight: 650; }
.essay-form textarea, .essay-form input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: white; color: var(--ink); }
.essay-form textarea { resize: vertical; line-height: 1.65; }
.essay-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.essay-status { padding: 14px 18px; background: #edf2ff; border-radius: 10px; }
.essay-status:empty { display: none; }
.essay-review { padding: 20px; border: 1px solid var(--line); border-radius: 14px; margin: 18px 0; }
.essay-review > summary { cursor: pointer; font-size: 19px; font-weight: 700; }
.essay-result { margin-top: 20px; }
.essay-review-result-note { margin: 18px 0 0; padding: 12px 14px; color: var(--muted); background: #f7f9ff; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.5; }
.essay-review-result-note a { color: var(--signal-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.essay-grade blockquote { margin: 12px 0; padding: 12px; border-left: 3px solid var(--signal); background: #f5f7fc; white-space: pre-wrap; overflow-wrap: anywhere; }
.essay-grade li { margin: 10px 0; }
.essay-rubric-breakdown { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.essay-rubric-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.essay-rubric-heading h4 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.25; }
.essay-rubric-heading > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.essay-rubric-intro { max-width: 70ch; margin: 7px 0 15px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.essay-rubric-list { display: grid; gap: 10px; }
.essay-criterion { display: grid; grid-template-columns: minmax(190px, .58fr) minmax(0, 1.42fr); gap: 20px; padding: 17px 18px; background: #fbfcff; border: 1px solid var(--line); border-radius: 14px; }
.essay-criterion-sidebar { min-width: 0; }
.essay-criterion-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.essay-criterion-heading > div { min-width: 0; }
.essay-criterion-heading h5 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.3; }
.essay-criterion-standard { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.essay-criterion-kind { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.essay-criterion-score { flex: none; color: var(--signal-dark); font-size: 20px; letter-spacing: -.05em; line-height: 1.1; white-space: nowrap; }
.essay-criterion-score small { margin-left: 4px; color: var(--muted); font-size: .58em; font-weight: 750; letter-spacing: 0; }
.essay-criterion-score.is-unscored { color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.essay-criterion-meter { height: 7px; margin-top: 15px; background: var(--paper-deep); border-radius: 99px; overflow: hidden; }
.essay-criterion-meter span { display: block; height: 100%; background: var(--signal); border-radius: inherit; }
.essay-criterion-body { min-width: 0; }
.essay-criterion-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.essay-criterion-body p > span { display: block; margin-bottom: 4px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.essay-criterion-body blockquote { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--signal); background: #f5f7fc; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.essay-criterion-body blockquote span { display: block; margin-bottom: 4px; color: var(--signal-dark); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.essay-criterion-empty { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.essay-grade { position: static; margin: 24px 0; padding: 24px; border: 2px solid var(--signal); border-radius: 16px; background: #edf2ff; color: var(--ink); overflow-wrap: anywhere; }
.essay-grade .essay-grade-value { margin: 12px 0; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1.1; color: var(--signal-dark); }
.essay-grade-value span { font-size: 1.5rem; color: var(--muted); }
.essay-grade p { line-height: 1.75; }
.writing-task { padding: 22px; border-left: 4px solid var(--signal); border-radius: 10px; background: #edf2ff; }
.writing-task h2 { font-size: 1.3rem; }
.writing-task p { white-space: pre-wrap; }

/* Archive cards keep per-attempt results scannable without mixing measurement scales. */
.report-archive { max-width: none; padding-block: 52px 90px; scroll-margin-top: 24px; }
.report-archive-header { display: grid; gap: 8px; max-width: 48rem; }
.report-archive-header h1 { margin: 0; }
.report-archive-header p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.report-overview { display: flex; gap: 16px; align-items: center; margin: 28px 0 34px; padding: 18px 20px; background: #edf3ff; border: 1px solid #d5e0f8; border-radius: 18px; }
.report-overview-count { display: grid; width: 54px; height: 54px; flex: none; color: var(--signal-dark); background: white; border: 1px solid #cbd9f7; border-radius: 14px; place-items: center; align-content: center; line-height: 1; }
.report-overview-count strong { font-size: 1.4rem; }
.report-overview-count span { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 750; }
.report-overview > div:nth-child(2) { display: grid; gap: 4px; }
.report-overview > div:nth-child(2) strong { font-size: 1rem; }
.report-overview > div:nth-child(2) span { color: var(--muted); font-size: 14px; }
.latest-report-link { margin-left: auto; white-space: nowrap; }
.archive-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.archive-controls label { display: grid; gap: 7px; font-size: 14px; font-weight: 750; }
.archive-search-control { flex: 1 1 320px; }
.archive-order-control { flex: 0 1 190px; }
.archive-controls input, .archive-controls select { width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); }
.archive-controls input:focus, .archive-controls select:focus { border-color: var(--signal); outline: 3px solid #315dcc2e; outline-offset: 1px; }
#archive-count { margin: 14px 0; color: var(--muted); font-size: 14px; }
.archive-list { display: grid; gap: 14px; }
.archive-card { display: block; border: 1px solid var(--line); border-radius: 18px; background: white; overflow: hidden; overflow-wrap: anywhere; }
.archive-card-header { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 22px 24px 18px; }
.archive-card .eyebrow { margin: 0 0 6px; font-size: 11px; }
.archive-card h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.archive-card-score { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.archive-group-trend { padding: 18px 24px 20px; }
.archive-group .archive-range { margin: 0; color: var(--ink); font-size: 1rem; }
.archive-group-trend > p:not(.archive-range):not(.archive-trend-note) { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.archive-trend { display: block; width: 100%; max-width: 660px; color: var(--signal-dark); margin: 14px 0 10px; }
.archive-trend text { font-size: 14px; fill: var(--muted); }
.archive-trend-note { max-width: 70ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.archive-attempts { margin: 0; padding: 0 24px 20px; background: #f7f9fd; border-top: 1px solid var(--line); }
.archive-attempts summary { padding-top: 16px; cursor: pointer; color: var(--signal-dark); font-size: 14px; font-weight: 750; }
.archive-attempts ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.archive-attempts a { display: flex; gap: 12px; justify-content: space-between; padding: 10px 12px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.archive-attempts a span { color: var(--muted); text-align: right; }
.archive-empty { padding: 32px; border: 1px dashed var(--line); border-radius: 16px; line-height: 1.7; }
.archive-empty h2, .archive-empty h3 { margin: 0 0 8px; font-size: 1.35rem; }
.archive-empty p { margin: 0 0 20px; color: var(--muted); }
.archive-score-table { width: 100%; border-collapse: collapse; margin-top: 12px; text-align: left; }
.archive-score-table th, .archive-score-table td { padding: 12px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .report-overview { align-items: flex-start; flex-wrap: wrap; } .latest-report-link { width: 100%; margin-left: 0; text-align: center; } .archive-card-header { align-items: flex-start; flex-direction: column; gap: 14px; } .archive-card-header .button { width: 100%; text-align: center; } .archive-group-trend, .archive-attempts { padding-inline: 18px; } .archive-attempts a { align-items: flex-start; flex-direction: column; gap: 3px; } .archive-attempts a span { text-align: left; } }
.essay-form [hidden] { display: none !important; }
.essay-form button:disabled { opacity: .55; cursor: wait; }
.test-tag { font-size: 12px; color: var(--muted); letter-spacing: .045em; }
.test-card h3 { max-width: none; font-size: 24px; line-height: 1.2; }
.test-card h3 a:hover { color: var(--signal); }
.test-card p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.start-link { flex-shrink: 0; color: var(--signal-dark); font-size: 14px; padding: 10px 0; }
.results-banner p { font-size: 16px; }
.results-banner { border-radius: 24px; }
/* Test introductions are compact reading guides; the task itself owns the surface. */
.test-page-intro { padding-block: 22px 26px; }
.test-page-intro:has(.instruction-card) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  max-width: none;
  column-gap: clamp(30px, 5vw, 72px);
  row-gap: 0;
  margin-block: 12px 24px;
  padding: 18px 0 26px;
  border-bottom: 1px solid #d8e2f0;
  align-items: start;
}
.test-page-intro:has(.instruction-card) .test-page-heading { grid-column: 1; grid-row: 1; align-self: start; padding-top: 0; }
.test-page-intro:has(.instruction-card) .test-page-description { margin-bottom: 0; }
.test-page-intro:has(.instruction-card) .instruction-card {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
}
.test-page-intro:has(.instruction-card) .test-length-picker { grid-column: 1 / -1; }
.report-header { padding: 14px 0 17px; }
.test-page-intro h1 { margin: 0 0 10px; font-size: clamp(34px, 4.3vw, 50px); line-height: 1.05; }
.report-header h1 { font-size: clamp(36px, 4.3vw, 50px); }
.test-page-description, .report-lede { font-size: 16px; line-height: 1.55; }
.test-intro-meta { margin: 0 0 15px; color: var(--signal-dark); font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.instruction-card {
  display: block;
  max-width: none;
  padding: 1px 0 0 24px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-left: 2px solid #b8caed;
  border-radius: 0;
  box-shadow: none;
}
.instruction-card::before { content: none; }
.instruction-card strong { display: block; color: var(--ink); font-size: 13px; }
.instruction-card p { margin: 8px 0 10px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.instruction-card > span { display: block; padding-top: 9px; color: var(--muted); border-top: 1px solid #e2e9f4; font-size: 12px; line-height: 1.45; font-weight: 500; }
.sat-setup, .gre-setup, .admission-setup { border-radius: 18px; }
.sat-stage, .gre-stage, .admission-stage, .cognitive-stage {
  border-color: #cfd9e7;
  box-shadow: 0 22px 52px #182b460d;
}
.sat-stage:has(.sat-setup), .gre-stage:has(.gre-setup), .admission-stage:has(.admission-setup), .cognitive-stage:has(.cognitive-setup) { min-height: 0; }
.sat-setup, .gre-setup, .admission-setup, .cognitive-setup {
  gap: 24px clamp(28px, 4vw, 48px);
  padding: clamp(26px, 3vw, 36px);
  background: var(--white);
}
.sat-setup h2, .gre-setup h2, .admission-setup h2, .cognitive-setup h2 { font-size: clamp(27px, 3.4vw, 38px); }
.sat-setup > div:first-child p:last-child,
.gre-setup > div:first-child p:last-child,
.admission-setup > div:first-child p:last-child,
.cognitive-setup > div > p:last-child { font-size: 16px; line-height: 1.7; }
.sat-setup > .test-length-picker,
.gre-setup > .test-length-picker,
.admission-setup > .test-length-picker { margin-top: 0; }
.sat-domain-grid > span, .gre-domain-grid > span, .admission-domain-grid > span {
  background: #f7f9fd;
  border: 1px solid #e1e7ef;
}
.question-form { width: 100%; }
.question-card:focus-within { border-color: #aec2e7; }
.benchmark-shell {
  max-width: 960px;
  margin-left: 0;
  padding: clamp(26px, 4vw, 40px);
  border-color: #cfd9e7;
  background: radial-gradient(circle at 92% 8%, #edf3ff 0, transparent 260px), var(--white);
  box-shadow: 0 22px 52px #182b460d;
}
.benchmark-status-row { display: flex; align-items: center; gap: 16px; min-height: 52px; margin-bottom: 18px; }
.benchmark-status-row #benchmark-status { flex: 1; min-width: 0; margin: 0; font-size: 18px; letter-spacing: -.025em; }
.benchmark-status-row #benchmark-next { flex: none; }
.benchmark-shell:not(.is-running) > .benchmark-status-row:has(#benchmark-status[hidden]) { display: none; }
.benchmark-shell:not(.is-running) > .benchmark-status-row:not(:has(#benchmark-status[hidden])) { margin: 0; padding: 0 clamp(28px, 3.5vw, 42px) 26px; }
.benchmark-shell #benchmark-stage:empty { display: none; }
.test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) {
  margin: 12px 0 60px;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #cfd9e7;
  border-radius: 20px;
  box-shadow: 0 22px 52px #182b460d;
}
.test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
  align-items: center;
  gap: 24px 36px;
  max-width: none;
  margin: 0;
  padding: 28px clamp(24px, 3.5vw, 42px);
  border-bottom: 1px solid #dbe3ef;
}
.test-launch > .test-page-intro .test-page-description { max-width: 58ch; margin: 0; }
.launch-summary { align-self: center; }
.launch-summary p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.launch-summary .button-primary { min-width: 168px; }
.age-form.launch-summary { grid-column: auto; padding: 0; color: var(--ink); background: transparent; border-radius: 0; }
.age-form.launch-summary label { margin-bottom: 7px; }
.age-form.launch-summary label span, .age-form.launch-summary > small { color: var(--muted); font-size: 12px; }
.age-form.launch-summary > div { margin-bottom: 7px; }
.age-form.launch-summary input { width: 100px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; }
.test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > :is(.sat-stage, .gre-stage, .admission-stage, .cognitive-stage) {
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) :is(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) { gap: 20px 32px; padding: 22px clamp(24px, 3.5vw, 42px) 32px; }
.test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) :is(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) h2 { font-size: clamp(23px, 2.5vw, 30px); }
.test-launch .admission-setup { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.test-launch:has(.admission-setup) .admission-setup h2 { margin: 0; font-size: 18px; }
.test-launch .admission-format { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 26px; }
.test-launch .admission-format > div { align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 0; }
.test-launch .admission-format span { color: var(--ink); font-size: 14px; text-align: left; }
.test-launch .admission-format small { display: block; color: var(--muted); font-size: 12px; }
.test-launch .admission-domain-grid { grid-column: auto; }
.launch-blueprint { color: var(--muted); font-size: 12px; }
.launch-blueprint summary { width: fit-content; color: var(--signal-dark); cursor: pointer; font-weight: 700; }
.launch-blueprint p { max-width: 80ch; margin: 8px 0 0; line-height: 1.5; }
.launch-domains { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.launch-domains summary { width: fit-content; color: var(--signal-dark); cursor: pointer; font-weight: 700; }
.launch-domains :is(.sat-domain-grid, .gre-domain-grid) { margin-top: 14px; }
.launch-domains p { max-width: 80ch; margin: 12px 0 0; line-height: 1.5; }
.test-launch .cognitive-setup { display: block; }
.test-launch .module-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; border: 0; }
.test-launch .module-list li { display: block; min-width: 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 0; }
.test-launch .module-list li > span { display: block; margin-bottom: 7px; }
.test-launch .module-list strong { font-size: 14px; line-height: 1.35; }
.test-launch .module-list small { font-size: 11px; line-height: 1.4; }
:is(.sat-shell, .gre-shell, .admission-launch, .cognitive-shell).test-launch:not(:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup)) > .test-page-intro { display: none; }
.benchmark-shell.test-launch { max-width: none; margin: 12px 0 60px; padding: 0; overflow: hidden; background: var(--white); }
.benchmark-shell.test-launch > .benchmark-intro { display: grid; width: 100%; max-width: none; grid-template-columns: minmax(320px, 1fr) minmax(320px, .95fr); gap: 26px 38px; margin: 0; padding: clamp(28px, 3.5vw, 42px); border: 0; }
.benchmark-shell.test-launch > .benchmark-intro > .test-page-heading { grid-column: 1; grid-row: 1; min-width: 0; }
.benchmark-intro .test-page-heading { align-self: center; }
.benchmark-intro .test-page-heading .button-primary { min-width: 170px; margin-top: 30px; }
.benchmark-shell.test-launch > .benchmark-intro > .benchmark-preview { display: grid; width: 100%; min-width: 0; min-height: 244px; grid-column: 2; grid-row: 1; align-content: center; justify-items: center; position: relative; isolation: isolate; padding: 28px; overflow: hidden; color: var(--signal-dark); background: radial-gradient(circle at 50% 48%, #fff 0%, #f0f5ff 80%); border: 1px solid #dae5f8; border-radius: 20px; }
.benchmark-preview::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .65; background-image: radial-gradient(#b6c9ee 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000 35% 65%, transparent); }
.benchmark-preview > * { position: relative; }
.benchmark-shell.test-launch > .benchmark-intro > .instruction-card { display: grid; width: 100%; max-width: none; grid-column: 1 / -1; grid-row: 2; grid-template-columns: 120px minmax(0, 1fr) minmax(190px, .7fr); align-items: start; gap: 14px 26px; padding: 23px 0 0; border: 0; border-top: 1px solid #dbe3ef; }
.benchmark-intro .instruction-card p { margin: 0; }
.benchmark-intro .instruction-card > span { grid-column: 3; padding: 0 0 0 20px; border: 0; border-left: 1px solid #dbe3ef; }
.preview-cues { display: flex; align-items: center; gap: 14px; width: min(100%, 370px); justify-content: center; }
.preview-cues span { display: grid; flex: 1; min-height: 126px; place-items: center; position: relative; color: #53657c; background: #e4e9f1; border: 1px solid #cbd6e6; border-radius: 20px; font-size: 27px; font-weight: 800; letter-spacing: .09em; box-shadow: 0 12px 22px #344d7a13; }
.preview-cues span:last-child { color: #17644d; background: #d9f4e8; border-color: #a7ddc5; }
.preview-cues i { position: absolute; bottom: 17px; width: 30px; height: 4px; border-radius: 8px; background: currentColor; opacity: .4; }
.preview-target { display: grid; width: 166px; height: 166px; place-items: center; position: relative; border: 1px solid #afc2ed; border-radius: 50%; background: repeating-radial-gradient(circle, #fff 0 18px, #cddcff 19px 20px, #fff 21px 39px); box-shadow: 0 0 0 15px #dbe6fa80, 0 18px 28px #315dcc1c; }
.preview-target::before, .preview-target::after { content: ""; position: absolute; background: #315dcc66; }
.preview-target::before { width: 200px; height: 1px; }.preview-target::after { width: 1px; height: 200px; }
.preview-target span { z-index: 1; width: 30px; height: 30px; border: 7px solid var(--signal); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px #fff; }
.preview-tiles { display: grid; grid-template-columns: repeat(3, 52px); gap: 9px; padding: 17px; background: #fff; border: 1px solid #d9e3f5; border-radius: 20px; box-shadow: 0 14px 28px #315dcc18; transform: rotate(-3deg); }
.preview-tiles span { display: grid; width: 52px; height: 52px; place-items: center; color: var(--ink); background: #edf2fa; border: 1px solid #d8e3f5; border-radius: 9px; font-size: 21px; font-weight: 800; }
.preview-tiles .lit { background: #5481d7; border-color: #5481d7; box-shadow: 0 0 0 4px #dce8ff; }
.preview-large { padding: 18px 30px; color: #274b9e; background: #fff; border: 1px solid #d7e2f6; border-radius: 17px; box-shadow: 0 14px 26px #315dcc14; font-size: clamp(38px, 5vw, 62px); font-weight: 800; letter-spacing: -.06em; text-align: center; }
.preview-number { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.preview-word { letter-spacing: .06em; }
.preview-typing { display: grid; gap: 5px; width: min(100%, 340px); padding: 25px 28px; color: var(--ink); background: #fff; border: 1px solid #d8e3f5; border-radius: 16px; box-shadow: 0 14px 28px #315dcc17; font-size: clamp(17px, 2.5vw, 23px); font-weight: 650; line-height: 1.4; }
.preview-typing i { width: 75%; height: 7px; margin-top: 10px; border-radius: 8px; background: #e3eaf6; }.preview-typing i:last-child { width: 48%; margin-top: 1px; }
.preview-caret { display: inline-block; height: 1em; margin-left: 3px; border-right: 3px solid var(--signal); vertical-align: -.15em; }
.preview-dots { width: 245px; height: 156px; position: relative; border: 1px dashed #adbfdf; border-radius: 80px; background: #fff8; }
.preview-dots span { position: absolute; width: 28px; height: 28px; background: var(--signal); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 3px 9px #315dcc44; }
.preview-dots span:nth-child(1) { top: 12%; left: 8%; }.preview-dots span:nth-child(2) { top: 28%; left: 66%; }.preview-dots span:nth-child(3) { top: 70%; left: 33%; }.preview-dots span:nth-child(4) { top: 64%; left: 85%; }.preview-dots span:nth-child(5) { top: 5%; left: 43%; }
.preview-search { display: grid; grid-template-columns: repeat(5, 36px); gap: 5px; padding: 13px; background: #fff; border: 1px solid #d8e4f7; border-radius: 17px; box-shadow: 0 12px 24px #315dcc18; }
.preview-search span { display: grid; width: 36px; height: 36px; place-items: center; color: #617188; font-size: 24px; font-weight: 800; }.preview-search span:nth-child(8) { color: var(--signal); background: #e2eaff; border-radius: 50%; }
.preview-wave-pair { display: grid; gap: 9px; width: min(100%, 420px); }
.preview-wave-pair > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 9px 18px; color: #315dcc; background: #fff; border: 1px solid #d8e4f7; border-radius: 14px; box-shadow: 0 6px 18px #315dcc10; }
.preview-wave-pair small { color: var(--muted); font-size: 11px; font-weight: 800; }.preview-wave-pair svg { display: block; width: 100%; height: 54px; }
.preview-frequency { width: min(100%, 440px); color: var(--signal-dark); font-size: 12px; font-weight: 750; }
.preview-frequency svg { display: block; width: 100%; height: 142px; overflow: visible; }.preview-frequency .frequency-axis, .preview-frequency .frequency-ticks { stroke: #a9bce2; stroke-width: 2; }.preview-frequency .frequency-wave { stroke: #315dcc; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.preview-frequency circle { fill: #315dcc; stroke: #fff; stroke-width: 3; }
.preview-frequency > div { display: flex; justify-content: space-between; margin-top: -1px; padding-inline: 9px; }
.preview-colours { display: grid; grid-template-columns: repeat(5, 25px); gap: 5px; padding: 20px; transform: rotate(-12deg); border: 1px solid #d6d8d1; border-radius: 50%; background: #f1eee4; box-shadow: 0 14px 28px #45341818; }
.preview-colours span { width: 25px; height: 25px; border-radius: 50%; background: #bd837b; }.preview-colours span:nth-child(3n) { background: #709382; }.preview-colours span:nth-child(4n) { background: #d5a07e; }.preview-colours span:nth-child(5n) { background: #81a38d; }
.benchmark-shell.is-running { width: 100%; max-width: 1060px; margin-inline: auto; padding: clamp(26px, 3vw, 36px); }
.benchmark-shell.is-running:has(.aim-arena) { max-width: none; }
.benchmark-shell.is-running .aim-arena { height: clamp(430px, 58vh, 640px); }
.benchmark-shell.is-running > .benchmark-intro { display: none; }
.benchmark-shell.is-running { overflow: visible; }
.benchmark-shell.is-running > .benchmark-status-row { min-height: 60px; padding: 8px 12px; border: 1px solid transparent; border-radius: 14px; }
.benchmark-shell:not(.is-running) > #benchmark-stage { display: none; }

/* Active challenge workspaces: decorative framing stays outside scored stimulus fields. */
.benchmark-shell:not(.is-running) > .challenge-toolbar { display: none; }
.benchmark-shell.is-running { background: linear-gradient(135deg, #fff 25%, #f8faff); box-shadow: 0 18px 50px #182b460b; }
.challenge-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #dbe4f1; }
.challenge-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.challenge-identity h1 { margin: 0; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.15; letter-spacing: -.04em; }
.challenge-emblem { display: grid; place-items: center; flex: 0 0 64px; width: 64px; color: #6049a5; font-size: 28px; }
.challenge-emblem svg { display: block; width: 100%; height: auto; }
.challenge-toolbar #benchmark-reset { flex: none; margin: 0; min-height: 42px; padding: 9px 14px; gap: 7px; color: var(--muted); background: white; box-shadow: none; }
.challenge-toolbar #benchmark-reset:hover { color: var(--signal-dark); border-color: #aabfe8; }
.benchmark-shell.is-running > .benchmark-status-row { min-height: 74px; padding: 14px 0; margin: 0 0 12px; border: 0; border-radius: 0; }
.benchmark-shell.is-running .benchmark-status-row #benchmark-status { color: #425878; font-size: 14px; line-height: 1.5; font-weight: 650; letter-spacing: 0; }
.benchmark-shell.is-running #benchmark-next[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; }
.benchmark-shell.is-running #benchmark-status { min-block-size: 3lh; display: flex; align-items: center; }
.benchmark-shell.is-running #benchmark-next { min-width: 142px; }
.benchmark-shell.is-running #benchmark-next { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.benchmark-shell.is-running > #benchmark-stage { margin-bottom: 0; }
.benchmark-shell.is-running :is(#benchmark-clock, .challenge-countdown) { width: fit-content; margin: 0 0 16px auto; padding: 6px 12px; border: 1px solid #d6e2f4; border-radius: 8px; color: #345382; background: #edf3fc; font-size: 13px; line-height: 1.3; }
.benchmark-shell.is-running .challenge-countdown.is-urgent { color: #a33240; background: #fff1f2; border-color: #edc4ca; }
.benchmark-shell.is-running .challenge-play { padding-top: 0; }
.benchmark-shell.is-running .challenge-prompt { margin: 12px 0 20px; color: #425878; font-size: 16px; font-weight: 650; line-height: 1.5; }
.benchmark-shell.is-running .challenge-stimulus, .benchmark-shell.is-running .memory-number { padding: 44px 18px; margin: 16px 0 28px; border: 1px solid #dbe4f4; border-radius: 20px; background: linear-gradient(125deg, #f0f5ff, #faf8ff); box-shadow: inset 0 1px 0 white; color: #233e68; }
.benchmark-shell.is-running .challenge-stimulus { font-weight: 750; letter-spacing: -.035em; }
.benchmark-shell.is-running .challenge-choices { gap: 14px; margin: 22px 0 0; }
.benchmark-shell.is-running .challenge-choice { min-width: 140px; border-radius: 12px; border-color: #c8d7ed; background: white; box-shadow: 0 3px 0 #e1e9f5; font-size: 15px; font-weight: 750; }
.benchmark-shell.is-running .challenge-choice:hover { background: #edf3ff; border-color: #90acd9; }
.benchmark-shell.is-running .challenge-choice:active { box-shadow: none; background: #dce8ff; }
.benchmark-shell.is-running :is(.challenge-choice, #number-recall input, .challenge-maths input, #typing-input):focus-visible { outline: 3px solid #315dcc; outline-offset: 3px; }
.benchmark-shell.is-running .challenge-maths { gap: 14px; padding-bottom: 8px; }
.benchmark-shell.is-running :is(.challenge-maths label, #number-recall label, label[for="typing-input"]) { color: #526783; font-size: 13px; font-weight: 700; }
.benchmark-shell.is-running :is(.challenge-maths input, #number-recall input) { background: #fff; border: 1px solid #bbcde8; border-radius: 12px; color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 4px #182b4605; }
.benchmark-shell.is-running #number-recall { max-width: 480px; margin: 24px auto; padding: clamp(20px, 3vw, 32px); border: 1px solid #dbe4f4; border-radius: 20px; background: #f4f7fd; }
.benchmark-shell.is-running .typing-passage { border: 1px solid #dbe4f4; border-radius: 16px; background: #f4f7fd; color: #304967; }
.benchmark-shell.is-running #typing-input { background: white; border-color: #bbcde8; line-height: 1.7; }
.benchmark-shell.is-running #typing-feedback { color: var(--muted); font-size: 13px; }
.benchmark-shell.is-running .reaction-pad { position: relative; background: #233e68; box-shadow: inset 0 0 0 1px #ffffff25, inset 0 0 0 12px #ffffff08; letter-spacing: -.03em; }
.benchmark-shell.is-running .reaction-pad.is-go { background: var(--signal); }
.benchmark-shell.is-running :is(.benchmark-grid, .chimp-grid) { outline: 1px solid #dbe4f4; outline-offset: 14px; border-radius: 10px; }
.benchmark-shell.is-running .benchmark-grid { width: 100%; max-width: min(500px, max(260px, calc(100svh - 370px))); }
.benchmark-shell.is-running :is(.pitch-tone, .hearing-range-tone) { box-shadow: 0 7px 20px #28467b0d, inset 0 0 0 6px white; }
.benchmark-shell.is-running .pitch-tone.is-sounding { box-shadow: 0 0 0 9px #dde8fb, inset 0 0 0 6px white; }
.benchmark-shell.is-running .challenge-feedback { color: var(--signal-dark); font-weight: 700; }
@media (max-width: 600px) {
  .benchmark-shell.is-running { padding: 20px 18px; }
  .challenge-toolbar { gap: 10px; padding-bottom: 16px; }
  .challenge-identity { gap: 9px; }
  .challenge-emblem { flex-basis: 42px; width: 42px; }
  .challenge-toolbar #benchmark-reset { padding: 9px 10px; font-size: 12px; }
  .benchmark-shell.is-running > .benchmark-status-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .benchmark-shell.is-running #benchmark-next { justify-self: end; }
  .benchmark-shell.is-running .challenge-choices { gap: 10px; }
  .benchmark-shell.is-running .challenge-choice { min-width: 0; flex: 1 1 110px; }
  .benchmark-shell.is-running .challenge-stimulus { padding: 32px 12px; }
  .benchmark-shell.is-running :is(.benchmark-grid, .chimp-grid) { outline-offset: 8px; }
}
.test-choice-intro {
  max-width: none;
  margin-block: 12px 28px;
  padding: 18px 0 0;
}
.test-choice-intro h1 { max-width: 680px; }
.test-choice-intro .test-page-description { max-width: 680px; }
.test-choice-intro .test-length-options { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.test-choice-intro .test-length-option { min-height: 120px; justify-content: space-between; padding: 22px; box-shadow: none; }
.test-choice-intro .test-length-option strong { font-size: 18px; line-height: 1.25; }
.test-choice-intro .test-length-option::after { align-self: center; color: var(--signal-dark); font-size: 22px; content: "\2197"; }
.question-card, .sat-question, .gre-question, .admission-question { border-color: var(--line); border-radius: 14px; }
.question-card legend, .sat-question legend, .gre-question legend, .admission-question legend { font-size: 17px; line-height: 1.45; }
.response-option { font-size: 13px; line-height: 1.3; }
.sat-option, .gre-option, .admission-option { font-size: 14px; line-height: 1.35; min-height: 48px; }
.response-option:has(input:focus-visible) { position: relative; outline: 3px solid var(--signal); outline-offset: -3px; }
.sat-option:has(input:focus-visible), .gre-option:has(input:focus-visible), .admission-option:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 2px; }
:is(.sat-question, .gre-question, .admission-question) > legend { float: left; width: 100%; margin: 0 0 8px; }
:is(.sat-question, .gre-question, .admission-question) > :not(legend) { clear: both; }
:is(.sat-question, .gre-question, .admission-question) { padding: 14px 17px 15px; }
:is(.sat-skill, .gre-skill, .admission-skill) { margin-top: 4px; margin-bottom: 8px; }
:is(.sat-options, .gre-options, .admission-options) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
:is(.sat-option, .gre-option, .admission-option) { align-items: center; padding: 12px 14px; color: var(--ink); background: var(--white); border-color: #d6e0ef; border-radius: 10px; transition: background-color 160ms ease, border-color 160ms ease; }
:is(.sat-option, .gre-option, .admission-option):hover { background: #f4f7fe; border-color: #a9bce3; transform: none; }
:is(.sat-option, .gre-option, .admission-option):has(input:checked) { color: var(--ink); background: #eaf1ff; border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
:is(.sat-option-letter, .gre-option-letter, .admission-option-letter) { width: 27px; height: 27px; color: var(--signal-dark); background: #eef3ff; border: 0; border-radius: 7px; font-size: 12px; }
:is(.sat-option, .gre-option, .admission-option):has(input:checked) :is(.sat-option-letter, .gre-option-letter, .admission-option-letter) { color: var(--white); background: var(--signal); }
.admission-stimulus, .sat-stimulus, .gre-stimulus { font-size: 16px; line-height: 1.8; }
.admission-task-topbar, .sat-task-topbar, .gre-task-topbar { position: sticky; top: 0; z-index: 3; font-size: 13px; letter-spacing: .02em; flex-wrap: wrap; padding-block: 12px; }
.admission-format small, .admission-question-hint { font-size: 14px; line-height: 1.6; }
.dimension-card p { font-size: 16px; line-height: 1.7; }
@media (max-width: 900px) {
  .question-card { display: block; }
  .question-card legend { float: none; width: auto; margin: 0 0 8px; padding: 0; }
  .response-options { width: 100%; float: none; }
  .response-options:not(.ability-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .response-options:not(.ability-options) .response-option:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .matrix-question .response-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-grid.is-collection-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-page-intro:has(.instruction-card) { grid-template-columns: 1fr; row-gap: 18px; }
  .test-page-intro:has(.instruction-card) .test-page-heading,
  .test-page-intro:has(.instruction-card) .instruction-card,
  .test-page-intro:has(.instruction-card) .test-length-picker { grid-column: 1; grid-row: auto; }
  .test-page-intro:has(.instruction-card) .test-page-heading { align-self: start; }
  .benchmark-shell.test-launch > .benchmark-intro { grid-template-columns: minmax(0, 1fr); }
  .benchmark-shell.test-launch > .benchmark-intro > .test-page-heading { grid-column: 1; grid-row: 1; }
  .benchmark-shell.test-launch > .benchmark-intro > .benchmark-preview { grid-column: 1; grid-row: 2; }
  .benchmark-shell.test-launch > .benchmark-intro > .instruction-card { grid-column: 1; grid-row: 3; grid-template-columns: 110px minmax(0, 1fr); }
  .benchmark-intro .instruction-card > span { grid-column: 2; padding: 12px 0 0; border: 0; border-top: 1px solid #dbe3ef; }
  .test-choice-intro .test-length-options { grid-template-columns: 1fr; }
  .benchmark-shell { max-width: none; }
  .test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro { grid-template-columns: 1fr; gap: 16px; }
  .test-launch .module-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .question-card { padding: 9px 11px 10px; }
  .question-card legend, .sat-question legend, .gre-question legend, .admission-question legend { font-size: 15px; line-height: 1.4; }
  .item-source-id { display: none; }
  .matrix-question { padding: 12px; }
  .matrix-puzzle { padding: 9px; }
  .matrix-board { gap: 5px; }
  .matrix-board-cell { border-radius: 8px; }
  .matrix-question .response-option { min-height: 84px; padding: 5px; }
  .test-grid { grid-template-columns: 1fr; }
  .test-grid.is-collection-view { grid-template-columns: 1fr; }
  .test-card, .test-card:first-child, .test-card:nth-child(2) { min-height: 260px; padding: 22px; }
  .library-tools { flex-wrap: wrap; gap: 10px; }
  .library-search { width: 100%; }
  #library-count { margin-left: 0; }
  .filter-chip { padding-inline: 12px; }
  .section-heading h2 { font-size: 28px; }
  .section { padding-block: 36px; }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .test-page-intro h1 { font-size: 34px; }
  .report-header h1 { font-size: 36px; }
  .test-page-intro { padding-block: 18px 22px; }
  .test-page-intro:has(.instruction-card) { row-gap: 17px; }
  .test-page-intro:has(.instruction-card), .test-choice-intro { margin-block: 10px 18px; padding: 16px 0 22px; }
  .test-page-intro:has(.instruction-card) h1 { margin-bottom: 8px; }
  .test-page-intro:has(.instruction-card) .test-page-description { font-size: 15px; line-height: 1.5; }
  .instruction-card { padding: 0 0 0 16px; }
  .instruction-card p { font-size: 14px; line-height: 1.55; }
  .instruction-card > span { font-size: 12px; }
  .sat-setup, .gre-setup, .admission-setup, .cognitive-setup { padding: 24px 20px; background: var(--white); }
  .sat-setup h2, .gre-setup h2, .admission-setup h2, .cognitive-setup h2 { font-size: 29px; }
  .test-choice-intro .test-length-option { min-height: 108px; }
  .benchmark-shell { padding: 22px 18px; }
  .benchmark-shell #benchmark-status { font-size: 20px; }
  .test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro { padding: 24px 20px 20px; }
  .test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) :is(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) { padding: 20px 20px 28px; }
  .test-launch .module-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benchmark-shell.test-launch > .benchmark-intro { padding: 26px 20px; }
  .benchmark-preview { min-height: 175px; }
  .benchmark-shell.test-launch > .benchmark-intro > .instruction-card { grid-template-columns: 1fr; }
  .benchmark-intro .instruction-card > span { grid-column: 1; }
  .benchmark-shell.is-running { padding: 22px 18px; }
  .response-option { justify-content: flex-start; padding: 12px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Make the consolidated Big Five length choice visible before the questionnaire. */
.test-length-picker { margin: 26px 0 0; padding: 20px; background: #eef3ff; border: 1px solid #cbd9f7; border-radius: 16px; }
.test-length-picker#big-five-length-picker .test-length-options { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.test-length-picker legend { padding: 0 6px; color: var(--ink); font-size: 16px; font-weight: 800; }
.test-length-picker > p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.test-length-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.test-length-option { display: flex; align-items: flex-start; gap: 12px; min-height: 74px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.test-length-option:hover { border-color: var(--signal); transform: translateY(-1px); }
.test-length-option:has(input:checked) { background: #dfe9ff; border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.test-length-option input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; }
.test-length-option span { display: grid; gap: 4px; }
.test-length-option strong { font-size: 16px; }
.test-length-option small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.test-length-option:has(input:focus-visible) { outline: 3px solid #315dcc55; outline-offset: 3px; }
@media (max-width: 600px) {
  .test-length-options { grid-template-columns: 1fr; }
  .test-length-picker#big-five-length-picker .test-length-options { grid-template-columns: 1fr; }
}

/* Collection-first library: direct people to a useful subset before showing individual tests. */
.tests-section { padding-block: 24px 72px; border-top: 0; }
body[data-page="home"] .tests-section { width: min(calc(100% - 48px), 1600px); }
@media (max-width: 600px) { body[data-page="home"] .tests-section { width: calc(100% - 30px); } }
@media (min-width: 1081px) {
  .test-grid.is-collection-view .collection-card { min-height: clamp(286px, calc(100svh - 300px), 460px); }
}
.tests-section .section-heading { margin-bottom: 20px; }
.library-tools { padding: 12px; background: #eaf0fa; border: 1px solid #d6e0ef; border-radius: 18px; }
.library-search { flex: 1 1 360px; width: auto; border-color: transparent; box-shadow: 0 1px 1px #182b4608; }
.library-search:focus-within { border-color: var(--signal); }
#library-count { min-width: 10rem; text-align: right; }
.filter-row { padding: 3px 1px 18px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.filter-chip { background: transparent; border-color: transparent; color: var(--muted); }
.filter-chip:hover { color: var(--signal-dark); border-color: #c8d7f3; background: #edf3ff; }
.filter-chip.is-active { color: var(--white); background: var(--ink); border-color: var(--ink); }
.test-grid { margin-top: 24px; }
.tests-section:has(.test-grid.is-collection-view) .filter-row { display: none; }
.test-grid.is-collection-view { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.collection-card { display: flex; min-height: 212px; padding: 18px; color: var(--ink); text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 18px; flex-direction: column; justify-content: space-between; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.collection-card:hover { border-color: #9eb6e8; box-shadow: 0 16px 28px #182b4612; transform: translateY(-3px); }
.collection-card:focus-visible { outline-offset: 3px; }
.collection-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.collection-art { display: block; width: 128px; height: 84px; flex: none; color: var(--signal-dark); }
.collection-art svg { display: block; width: 100%; height: 100%; }
.collection-count { padding-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.collection-card-body { display: grid; gap: 6px; }
.collection-card-body strong { font-size: 19px; line-height: 1.15; letter-spacing: -0.04em; }
.collection-card-body small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.collection-card-action { color: var(--signal-dark); font-size: 14px; font-weight: 800; }
.collection-card[data-collection="Psychometrics"] { background: #eff9f6; border-color: #d4ebe4; }
.collection-card[data-collection="Psychometrics"] .collection-art { color: #087065; }
.collection-card[data-collection="Benchmarks"] { background: #f7f3ff; border-color: #e3d9f6; }
.collection-card[data-collection="Benchmarks"] .collection-art { color: #6641ae; }
.collection-card[data-collection="Learning"] { background: #edf3ff; border-color: #d5e0f8; }
.collection-card[data-collection="Learning"] .collection-art { color: #315dcc; }
.collection-card[data-collection="Miscellaneous"] { background: #fff8eb; border-color: #f1dfbd; }
.collection-card[data-collection="Miscellaneous"] .collection-art { color: #9a5b00; }
.test-grid:not(.is-collection-view) { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.test-grid:not(.is-collection-view) .test-card { min-height: 288px; padding: 20px; }
.test-grid:not(.is-collection-view) .test-card-top { align-items: flex-start; margin-bottom: 14px; }
.test-card[data-collection="Psychometrics"] { background: linear-gradient(150deg, #f1faf7, #fff 72%); border-color: #d4ebe4; }
.test-card[data-collection="Benchmarks"] { background: linear-gradient(150deg, #f9f6ff, #fff 72%); border-color: #e3d9f6; }
.test-card[data-collection="Learning"] { background: linear-gradient(150deg, #f1f5ff, #fff 72%); border-color: #d5e0f8; }
.test-card[data-collection="Miscellaneous"] { background: linear-gradient(150deg, #fff9ef, #fff 72%); border-color: #f1dfbd; }
.test-card-art { display: block; width: 120px; height: 72px; max-width: 62%; flex: 0 1 120px; color: #315dcc; }
.test-card-art svg { display: block; width: 100%; height: 100%; }
.test-card-art text { fill: currentColor; stroke: none; font: 750 18px/1 system-ui, sans-serif; }
.test-card-art .card-art-equation { font-size: 16px; }
.test-card-art .card-art-near-large { font-size: 35px; }
.test-card-art .card-art-near-medium { font-size: 24px; }
.test-card-art .card-art-near-small { font-size: 15px; }
.test-card[data-collection="Psychometrics"] .test-card-art { color: #087065; }
.test-card[data-collection="Benchmarks"] .test-card-art { color: #6641ae; }
.test-card[data-collection="Miscellaneous"] .test-card-art { color: #9a5b00; }
.test-card .test-tag { padding-top: 7px; text-align: right; }
.test-grid:not(.is-collection-view) .test-card h3 { font-size: 21px; }
.test-grid:not(.is-collection-view) .test-card p { display: -webkit-box; margin-bottom: 14px; overflow: hidden; font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.test-grid:not(.is-collection-view) .test-card-footer { align-items: stretch; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; }
.test-grid:not(.is-collection-view) .duration { max-width: none; font-size: 12px; line-height: 1.35; }
.test-grid:not(.is-collection-view) .test-card-actions { width: 100%; margin-left: 0; }
.test-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.test-card-actions:has(.test-report-history-trigger) { justify-content: space-between; }
.test-report-history-trigger { display: inline-block; padding: 2px 4px; color: var(--signal-dark); border: 0; background: transparent; cursor: pointer; font-size: 11px; font-weight: 650; text-align: left; text-decoration: none; }
.test-report-history-trigger:hover { text-decoration: underline; text-underline-offset: 3px; }
.test-report-history { width: min(420px, calc(100% - 32px)); max-height: min(620px, calc(100vh - 32px)); margin: auto; padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 24px 70px rgba(18, 39, 68, .24); }
.test-report-history::backdrop { background: rgba(18, 39, 68, .48); }
.test-report-history-panel { padding: 22px; overflow: auto; }
.test-report-history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.test-report-history-heading .eyebrow { margin: 0 0 5px; font-size: 10px; }
.test-report-history-heading h4 { margin: 0; font-size: 20px; line-height: 1.2; }
.test-report-history-heading p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.test-report-history-close { display: grid; width: 32px; height: 32px; flex: none; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; background: var(--paper); place-items: center; font-size: 22px; line-height: 1; }
.test-report-history-close:hover { color: var(--ink); border-color: var(--signal); background: #edf3ff; }
.test-report-history ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.test-report-history li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.test-report-history li a:hover { border-color: #9eb6e8; background: #f7f9fd; }
.test-report-history li a > span:first-child { display: grid; gap: 2px; }
.test-report-history li a strong { color: var(--signal-dark); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.test-report-history li a > span:last-child { color: var(--signal-dark); font-weight: 750; text-align: right; }
@media (max-width: 1080px) {
  .test-grid.is-collection-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tests-section { padding-block: 34px 48px; }
  .library-tools { gap: 10px; }
  #library-count { width: 100%; min-width: 0; text-align: left; }
  .filter-row { flex-wrap: nowrap; margin-inline: -2px; overflow-x: auto; scrollbar-width: thin; }
  .filter-chip { flex: 0 0 auto; }
  .test-grid.is-collection-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .collection-card { min-height: 178px; padding: 15px; border-radius: 15px; }
  .collection-card-body strong { font-size: 17px; }
  .collection-card-body small { font-size: 13px; line-height: 1.35; }
  .collection-count { font-size: 11px; }
  .test-grid:not(.is-collection-view) { grid-template-columns: 1fr; }
  .test-card-footer { align-items: flex-start; flex-direction: column; }
  .test-card-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  .test-report-history-trigger { text-align: left; }
  .test-report-history-panel { padding: 18px; }
  .test-report-history li a { align-items: flex-start; flex-direction: column; gap: 4px; }
  .test-report-history li a > span:last-child { text-align: left; }
}

/* Shared hierarchy: primary results lead; supporting numbers remain easy to scan. */
.report-content-surface h2 { font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
.report-content-surface h3, .political-axis-heading h4 { font-weight: 650; letter-spacing: -.015em; }
.report-content-surface .community-insight > span, .report-content-surface .community-insight-pair span { font-weight: 600; letter-spacing: .055em; }
.report-content-surface .community-insight:not(.community-insight-primary) strong { font-weight: 600; }
.report-content-surface .community-percentile { font-weight: 600; }
.report-content-surface .report-overall-score:has(.report-key-result) { padding: 16px 20px; }
.report-content-surface .report-key-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.report-content-surface .report-key-result strong { font-size: 32px; }
.stat-help { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.stat-help summary { cursor: pointer; color: var(--signal-dark); }
.stat-help p { margin: 8px 0 0; }
.collection-card { min-height: 286px; gap: 14px; }
.collection-card-body strong { font-weight: 650; letter-spacing: -.025em; }
.collection-card-body { flex: 1; align-content: start; }
.collection-examples { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.library-heading { --library-signal-y: 52px; position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 0; min-height: 104px; }
.library-heading h1 { position: relative; z-index: 2; width: 210px; height: 104px; max-width: none; margin: 0; padding: 0; color: var(--ink); background: transparent; border: 0; box-shadow: none; font-size: 14px; line-height: 1.2; letter-spacing: .1em; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.library-heading h1 > span { position: absolute; top: var(--library-signal-y); left: 30px; transform: translateY(-50%); }
.library-title-trace { position: absolute; top: calc(var(--library-signal-y) - 49px); left: 0; width: 210px; height: 104px; overflow: visible; pointer-events: none; }
.library-title-tail { display: none; }
.library-title-trace > path, .library-wave > path { vector-effect: non-scaling-stroke; }
@media (min-width: 701px) { .library-heading:has(.library-wave[data-connected]) .library-title-trace { visibility: hidden; } }
.library-signature { position: relative; min-width: 0; height: 104px; pointer-events: none; }
.library-signature svg { position: absolute; top: -8px; left: 0; display: block; width: 100%; height: auto; overflow: visible; }
/* Wrapped collections retain their frames, not desktop stems crossing other rows. */
@media (max-width: 1080px) { .library-guide-stems { visibility: hidden; } }
@media (min-width: 701px) and (max-width: 1080px) {
  .library-heading { min-height: 68px; }
  .library-heading h1, .library-signature { height: 68px; }
}
.tests-section :is(.library-heading h1, .library-tools, .filter-row, .test-grid) { position: relative; }
@media (max-width: 700px) { .library-signature svg { top: 0; } .library-guides, .library-guide-stems { display: none; } }
.tests-section .library-heading { margin-bottom: 18px; }
.tests-section .library-tools { position: relative; padding: 0; gap: 12px; background: transparent; border: 0; border-radius: 0; }
.tests-section .library-search { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); box-shadow: none; border-radius: 12px; }
.tests-section .library-search:focus-within { border-color: var(--signal); }
.tests-section #library-count { flex: none; min-width: 0; width: auto; margin-left: auto; text-align: right; font-size: 12px; }
.library-results { position: static; flex: none; margin: 0; }
.library-results-toggle { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.library-results-toggle:hover, .library-results.is-open > .library-results-toggle { border-color: var(--signal); }
.results-count { padding: 2px 7px; background: #edf2ff; border-radius: 6px; color: var(--signal-dark); font-size: 12px; }
.results-chevron { color: var(--muted); }
.library-results.is-open .results-chevron { rotate: 180deg; }
.saved-results-panel { position: absolute; z-index: 20; top: calc(100% + 12px); right: 0; width: min(490px, 100%); max-height: min(480px, 65vh); overflow-y: auto; overscroll-behavior: contain; padding: 5px 12px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 16px 48px #182b4624; }
.saved-results-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.saved-results-heading strong { font-size: 13px; font-weight: 650; }
.saved-results-heading > span { color: var(--muted); font-size: 10px; }
.saved-result-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.saved-result-link:last-child { border-bottom: 0; }
.saved-result-link:hover { background: #f5f8ff; }
.saved-result-link > span:first-child { display: grid; gap: 2px; flex: 1; min-width: 0; }
.saved-result-link strong { font-size: 13px; font-weight: 600; }
.saved-result-link small { color: var(--muted); font-size: 11px; }
.saved-result-link > span:nth-child(2) { max-width: 40%; color: var(--signal-dark); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 700px) { .library-heading { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; } .library-heading h1 { grid-column: 1; grid-row: 1; height: 68px; } .library-title-tail { display: block; } .library-signature { grid-column: 1; grid-row: 2; height: 48px; } .tests-section .library-tools { gap: 8px; } .tests-section .library-search { gap: 8px; padding-inline: 12px; } .tests-section #library-count { font-size: 11px; } .library-results-toggle { gap: 7px; padding: 10px 11px; font-size: 12px; } .results-count { font-size: 11px; } }
@media (max-width: 420px) { .tests-section .library-search { gap: 6px; padding-inline: 9px; } .tests-section .library-search > span { font-size: 23px; } .tests-section #library-count { font-size: 10px; letter-spacing: -.02em; } .library-results-toggle { gap: 5px; padding-inline: 8px; } .results-count { padding-inline: 5px; font-size: 10px; } }
@media (max-width: 700px) { .collection-art { width: 104px; height: 72px; } .collection-card { min-height: 264px; } }
@media (max-width: 480px) { .test-grid.is-collection-view { grid-template-columns: 1fr; } .collection-card { min-height: 0; } .collection-art { width: 128px; height: 84px; } }

/* Political Values keeps uncertainty separate from the five-point agreement scale. */
body[data-test-id="political-values"] .response-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body[data-test-id="political-values"] .response-option:last-child { background: #f6f8fc; border-left: 2px dashed #aabbd7; }
body[data-test-id="political-values"] .response-option:last-child:has(input:checked) { color: var(--signal-dark); background: #eaf1ff; border-left-style: solid; }
@media (max-width: 900px) {
  body[data-test-id="political-values"] .response-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body[data-test-id="political-values"] .response-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-test-id="political-values"] .response-option:last-child { grid-column: auto; }
}

/* Independent vision screens: task preview, controlled setup, and an auditable report. */
.vision-preview-distance, .vision-preview-contrast, .vision-preview-near { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; height: 100%; position: relative; }
.vision-preview-distance span, .vision-preview-contrast span, .vision-preview-near small { position: absolute; bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.vision-preview-contrast { gap: 18px; background: #e1e1e1; }
.vision-preview-contrast span { background: #ffffffc9; padding: 4px 9px; border-radius: 6px; }
.vision-preview-near { flex-direction: column; gap: 0; width: min(70%, 290px); height: auto; padding: 14px 26px; color: #253e70; background: #fff; border: 1px solid #d8e3f5; border-radius: 13px; box-shadow: 0 14px 28px #315dcc18; font-weight: 750; letter-spacing: .08em; }
.vision-preview-near span { display: block; width: 100%; padding: 6px 0; text-align: center; border-bottom: 1px solid #e8edf7; }.vision-preview-near span:last-child { border-bottom: 0; }
.vision-preview-near span:first-child { font-size: 37px; }.vision-preview-near span:nth-child(2) { font-size: 26px; }.vision-preview-near span:nth-child(3) { font-size: 17px; }
.vision-stage { min-height: 400px; padding: clamp(20px, 3vw, 38px); border: 1px solid #ccd8ef; border-radius: 22px; background: var(--white); box-shadow: 0 18px 48px #1c345e10; }
.vision-shell.is-running > .vision-stage { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.vision-setup-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, .75fr); align-items: center; gap: clamp(25px, 5vw, 70px); }
.vision-setup-form h2, .vision-transition h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.045em; line-height: 1.12; }
.vision-setup-copy p, .vision-transition p { max-width: 60ch; color: var(--muted); line-height: 1.6; }
.vision-setup-copy .vision-caution { margin-top: 21px; padding-left: 14px; border-left: 3px solid var(--signal); font-size: 13px; }
.vision-calibration { display: grid; gap: 14px; justify-items: stretch; padding: 22px; border-radius: 16px; background: #f1f5ff; }
.vision-calibration > label, .vision-calibration legend { color: var(--ink); font-size: 13px; font-weight: 750; }
.vision-calibration-line { display: block; height: 3px; max-width: 100%; margin: 18px 0; background: var(--signal); border-radius: 2px; }
.vision-calibration > input { width: 100%; accent-color: var(--signal); }
.vision-calibration fieldset { display: grid; gap: 7px; margin: 8px 0 0; padding: 13px 0 0; border: 0; border-top: 1px solid #cfdaef; }
.vision-calibration fieldset label { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.vision-calibration fieldset input { accent-color: var(--signal); }
.vision-transition .vision-distance { margin: 0; color: var(--ink); font-size: 20px; }
.vision-transition .button { margin-top: 18px; }

/* One compact transition treatment; active task geometry and timers stay unchanged. */
:is(.cognitive-stage, .sat-stage, .admission-stage):has(> .stage-transition) { min-height: 0; }
.stage-transition { padding: clamp(22px, 3vw, 40px); background: linear-gradient(110deg, #fff, #f6f9ff); }
.vision-stage:has(> .stage-transition) { min-height: 0; padding: 0; overflow: hidden; }
.stage-transition .cognitive-progress { flex-wrap: wrap; gap: 8px 20px; }
.transition-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 270px); align-items: center; gap: 28px 48px; padding-top: 28px; }
.transition-copy { min-width: 0; }
.transition-copy h2 { margin: 0 0 14px; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.12; letter-spacing: -.045em; }
.transition-copy p { max-width: 62ch; margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.transition-copy > .button { margin-top: 12px; }
.transition-art { width: 100%; max-width: 270px; justify-self: center; }
.transition-art svg { display: block; width: 100%; height: auto; }
.transition-countdown { display: flex; align-items: center; gap: 18px; margin: 18px 0 8px; }
.transition-countdown strong { color: #315ed3; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.transition-countdown span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.transition-copy .symbol-key { justify-content: flex-start; margin: 18px 0; flex-wrap: wrap; }
@media (max-width: 650px) {
  .transition-body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; }
  .transition-art { grid-row: 1; max-width: 130px; }
  .transition-copy > .button { min-width: 120px; }
  .transition-countdown { align-items: flex-start; }
}
.vision-trial-status { display: flex; justify-content: space-between; gap: 20px; font-weight: 750; }
.vision-trial-status span { color: var(--muted); font-size: 13px; font-weight: 600; }
.vision-trial-progress { display: flex; gap: 5px; margin: 12px 0 18px; }
.vision-trial-progress i { flex: 1; height: 4px; background: #e5ebf6; border-radius: 5px; }
.vision-trial-progress i.done { background: var(--signal); }
.vision-trial-progress i.current { background: #92aae9; }
.vision-stimulus { display: grid; min-height: 285px; overflow: hidden; place-items: center; border-radius: 16px; background: #f4f7ff; }
.vision-contrast-plate { background: #e1e1e1; }
.vision-e { flex: none; shape-rendering: geometricPrecision; }
.vision-directions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.vision-directions button { display: flex; align-items: center; gap: 9px; min-width: 105px; min-height: 48px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font-weight: 700; text-transform: capitalize; }
.vision-directions button:hover { border-color: var(--signal); background: #f1f5ff; }
.vision-directions button span { font-size: 21px; line-height: 1; }
.vision-key-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.vision-word { font-weight: 700; letter-spacing: .06em; }
.vision-word-form { max-width: 540px; margin: 20px auto 0; }
.vision-word-form label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 750; }
.vision-word-form > div { display: flex; gap: 10px; }
.vision-word-form input { min-width: 0; flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; text-transform: uppercase; }
.vision-report-heading { margin-bottom: 21px; }
.vision-report-heading h2 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.04em; }
.vision-report-heading p:last-child { max-width: 70ch; margin: 0; color: var(--muted); }
.vision-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vision-result-grid:has(article:only-child) { grid-template-columns: 1fr; }
.vision-result-card { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 22px 24px; border: 1px solid #cad9f5; border-left: 4px solid var(--signal); border-radius: 14px; background: #f8faff; }
.vision-result-card > span:not(.eyebrow) { color: var(--muted); font-size: 13px; font-weight: 700; }
.vision-result-card .eyebrow { margin: 0 0 8px; }
.vision-result-card strong { color: var(--signal-dark); font-size: clamp(27px, 3vw, 39px); line-height: 1.1; letter-spacing: -.05em; overflow-wrap: anywhere; }
.vision-result-card p { margin: 0; font-size: 14px; font-weight: 650; }
.vision-result-card small { margin-top: 8px; color: var(--muted); font-size: 12px; }
.vision-report-section { margin-top: 27px; padding-top: 24px; border-top: 1px solid var(--line); }
.vision-report-section-heading h2, .vision-report-context h2 { margin: 0 0 5px; font-size: 23px; }
.vision-report-section-heading p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.vision-ladder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.vision-ladder { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.vision-ladder h3 { margin: 0 0 10px; font-size: 16px; }
.vision-ladder-row { display: grid; grid-template-columns: 76px minmax(90px, 1fr) 115px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #edf1f7; font-size: 13px; }
.vision-ladder-row > span { font-weight: 700; }
.vision-ladder-row small { color: var(--muted); font-size: 11px; text-align: right; }
.vision-ladder-dots { display: flex; gap: 5px; }
.vision-ladder-dots i { width: 16px; height: 8px; border-radius: 3px; background: #e5ebf4; }
.vision-ladder-row.is-passed .vision-ladder-dots i.filled { background: var(--signal); }
.vision-ladder-row.is-missed .vision-ladder-dots i.filled { background: #c66d58; }
.vision-ladder-row.is-untried { opacity: .55; }
.vision-report-context { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; }
.vision-report-context dl { margin: 7px 0 0; }
.vision-report-context dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid #e6ebf4; font-size: 13px; }
.vision-report-context dt { color: var(--muted); }
.vision-report-context dd { margin: 0; font-weight: 650; text-align: right; }
.vision-report-context p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.vision-next-tests { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.vision-next-tests h3 { width: 100%; margin: 0 0 4px; font-size: 16px; }
.vision-next-tests a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--signal-dark); font-size: 13px; font-weight: 700; }
.vision-next-tests a:hover { border-color: var(--signal); background: #f1f5ff; }
@media (max-width: 740px) {
  .vision-setup-form, .vision-report-context { grid-template-columns: 1fr; gap: 18px; }
  .vision-stage { min-height: 0; }
  .vision-stimulus { min-height: 245px; }
  .vision-result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .vision-calibration { padding: 18px; }
  .vision-trial-status { flex-direction: column; gap: 2px; }
  .vision-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-directions button { min-width: 0; }
  .vision-word-form > div { flex-direction: column; }
  .vision-ladder-grid { grid-template-columns: 1fr; }
  .vision-ladder-row { grid-template-columns: 64px minmax(70px, 1fr) 96px; gap: 6px; }
  .vision-ladder-dots { gap: 3px; }
  .vision-ladder-dots i { width: 11px; }
}

/* Decorative subject art sits within the existing introduction row. */
.test-intro-art { display: grid; grid-column: 2; grid-row: 1; width: 100%; height: 150px; place-items: center; color: #187568; background: radial-gradient(circle, #e4f4ef 0, #e4f4ef55 45%, transparent 72%); }
.test-intro-art.is-exam { color: #315dcc; background: radial-gradient(circle, #e8efff 0, #e8efff55 45%, transparent 72%); }
.test-intro-art:not(.clinical-intro-art) { position: relative; isolation: isolate; }
.test-intro-art:not(.clinical-intro-art)::before { position: absolute; z-index: -1; inset: 15% 8%; border: 1px solid currentColor; border-radius: 20px; opacity: .13; transform: rotate(-8deg); content: ""; }
.test-intro-art:not(.clinical-intro-art)::after { position: absolute; z-index: -1; inset: 8% 16%; border: 1px dashed currentColor; border-radius: 50%; opacity: .12; content: ""; }
.test-intro-art svg { display: block; width: 100%; max-width: 190px; height: auto; }
.test-intro-art text { fill: currentColor; stroke: none; font: 750 18px/1 system-ui, sans-serif; }
.test-intro-art .card-art-equation { font-size: 16px; }
.test-intro-art .card-art-near-large { font-size: 35px; }
.test-intro-art .card-art-near-medium { font-size: 24px; }
.test-intro-art .card-art-near-small { font-size: 15px; }
.test-page-intro:has(.instruction-card):has(.test-intro-art) { grid-template-columns: minmax(0, 1fr) minmax(125px, 170px) minmax(0, 1.15fr); column-gap: clamp(14px, 2.5vw, 30px); }
.test-page-intro:has(.instruction-card) .test-intro-art { grid-column: 2; grid-row: 1; }
.test-page-intro:has(.instruction-card) .instruction-card { grid-column: 3; }
.test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro:has(.test-intro-art) { grid-template-columns: minmax(0, 1fr) 160px minmax(230px, 330px); gap: 20px; }
@media (max-width: 900px) {
  .test-page-intro:has(.instruction-card):has(.test-intro-art),
  .test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro:has(.test-intro-art) { grid-template-columns: minmax(0, 1fr) 150px; }
  .test-page-intro:has(.instruction-card) .instruction-card, .test-page-intro:has(.test-intro-art) .launch-summary { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .test-page-intro:has(.instruction-card):has(.test-intro-art),
  .test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro:has(.test-intro-art) { grid-template-columns: minmax(0, 1fr) 95px; column-gap: 10px; }
  .test-intro-art { height: 105px; }
  .test-page-intro:has(.test-intro-art):not(.clinical-intro),
  .test-launch:has(.sat-setup, .gre-setup, .admission-setup, .cognitive-setup) > .test-page-intro:has(.test-intro-art) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .test-page-intro:has(.test-intro-art):not(.clinical-intro) > .test-intro-art { grid-column: 1; grid-row: 1; width: 104px; height: 76px; justify-self: start; }
  .test-page-intro:has(.test-intro-art):not(.clinical-intro) > .test-page-heading { grid-column: 1; grid-row: 2; }
  .test-page-intro:has(.test-intro-art):not(.clinical-intro) > :is(.launch-summary, .instruction-card) { grid-column: 1; grid-row: 3; }
  .illustrated-page-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .illustrated-page-heading > .page-illustration { grid-row: 1; width: 96px; }
  .illustrated-page-heading > div { grid-row: 2; }
}
/* Distinct screener diagrams share the Psychometrics collection colour. */
body[data-test-id="adult-attention"], body[data-test-id="mood-check-in"], body[data-test-id="anxiety-check-in"], body[data-test-id="event-stress-check"] { --screen-accent: #087065; --screen-wash: #f1faf7; --screen-line: #d4ebe4; }
.test-page-intro.clinical-intro:has(.instruction-card):has(.test-intro-art) { grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr); column-gap: clamp(28px, 4vw, 58px); row-gap: 16px; }
.test-page-intro.clinical-intro .test-page-heading { grid-column: 1; grid-row: 1; }
.test-page-intro.clinical-intro .clinical-intro-art { display: flex; width: 100%; height: 238px; min-height: 0; grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; justify-content: space-between; margin: 0; padding: 18px 22px; color: var(--screen-accent); background: var(--screen-wash); border: 1px solid var(--screen-line); border-radius: 18px; }
.clinical-intro-art .screen-art-heading, .clinical-intro-art figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.clinical-intro-art .screen-art-heading span { opacity: .65; }
.clinical-intro-art .screen-art-heading strong { font-size: 13px; letter-spacing: .03em; }
.clinical-intro-art figcaption span { letter-spacing: 0; opacity: .75; }
.clinical-intro-art svg { display: block; width: min(100%, 340px); height: 148px; align-self: center; }
.test-page-intro.clinical-intro .instruction-card { grid-column: 2; grid-row: 1 / 3; padding: 23px 25px; background: #fff; border: 1px solid var(--screen-line); border-radius: 18px; }
.test-page-intro.clinical-intro .instruction-card > strong { color: var(--screen-accent); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.test-page-intro.clinical-intro .instruction-card p { margin: 12px 0 18px; font-size: 14px; line-height: 1.6; }
.test-page-intro.clinical-intro .instruction-card > span { padding-top: 14px; font-size: 12px; line-height: 1.55; }
.test-page-intro.clinical-intro .adult-screener-gate { display: grid; gap: 16px; justify-items: start; margin: 20px 0 0; padding: 18px 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.test-page-intro.clinical-intro .adult-screener-gate .button { min-width: 185px; }
/* Compact adult health screens: keep item text inside its card and results local. */
.adult-screener-gate { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.adult-screener-gate label { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ink); font-size: 13px; font-weight: 650; }
.adult-screener-gate input { width: 18px; height: 18px; accent-color: var(--signal); }
.screen-instrument { margin: 12px 0 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.instruction-card .screen-attribution { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid #dbe3ef; color: var(--muted); font-size: 11px; font-weight: 550; line-height: 1.45; }
.clinical-screener-form .clinical-question-prompt, .clinical-screener-form .asrs-shading-note { margin: 16px 0 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.clinical-screener-form .asrs-shading-note { font-size: 12px; }
.clinical-event-context { margin: 12px 0 8px; padding: 4px 0 4px 16px; border-left: 2px solid #b4d9d2; color: var(--ink); }
.clinical-event-context p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.clinical-event-context ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 26px; margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.clinical-event-context .clinical-branch-note { margin: 0; color: #087065; font-weight: 700; }
.clinical-screener-form .question-card { padding: 13px 16px; }
@media (min-width: 901px) {
  .clinical-screener-form .question-card legend { width: 45%; }
  .clinical-screener-form .response-options { width: 55%; }
  .question-card.binary-question legend { width: 70%; }
  .question-card.binary-question .response-options { width: 30%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Increasing intensity, not good/bad: ordered self-report scales only. */
.ordered-response-options .response-option:nth-child(1) { --option-fill: #f8faff; }
.ordered-response-options .response-option:nth-child(2) { --option-fill: #edf2fc; }
.ordered-response-options .response-option:nth-child(3) { --option-fill: #e1eafa; }
.ordered-response-options .response-option:nth-child(4) { --option-fill: #d3e0f7; }
.ordered-response-options .response-option:nth-child(5) { --option-fill: #c2d3f1; }
.ordered-response-options .response-option { --option-fill: #fff; color: var(--ink); background: var(--option-fill); }
.ordered-response-options .response-option:hover { box-shadow: inset 0 0 0 1px var(--signal); }
.ordered-response-options .response-option:has(input:checked) { color: var(--signal-dark); background: var(--option-fill); box-shadow: inset 0 0 0 2px var(--signal); }
.clinical-screener-form .response-option.asrs-shade-light { background: #f0f3f8; }
.clinical-screener-form .response-option.asrs-shade-dark { background: #e3e9f3; }
body[data-test-id="adult-attention"] .clinical-screener-form .response-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-test-id="mood-check-in"] .clinical-screener-form .response-options,
body[data-test-id="anxiety-check-in"] .clinical-screener-form .response-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-test-id="event-stress-check"] .clinical-screener-form .response-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clinical-screener-form .submit-panel p { max-width: 520px; }
.clinical-safety-note { margin: 14px 0; padding: 16px 18px; color: #6f2e28; background: #fff4f1; border: 1px solid #edc5bd; border-left: 4px solid #bd5145; border-radius: 12px; }
.clinical-safety-note strong { display: block; margin-bottom: 4px; }
.clinical-safety-note p { margin: 0; font-size: 13px; line-height: 1.5; }
.clinical-safety-note a { color: #7b3028; font-weight: 750; }
.clinical-screener-report { display: grid; gap: 18px; }
.clinical-screener-report h2 { margin: 0 0 8px; font-size: 23px; }
.clinical-screen-context h2 { margin: 0 0 8px; font-size: 23px; }
.clinical-screen-context p, .community-clinical-caveat { max-width: 78ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.community-clinical-caveat { margin: 0 0 14px; }
.clinical-report-insight, .clinical-report-statistics { padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.clinical-report-insight p, .clinical-report-statistics > p { max-width: 78ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.clinical-report-statistics dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.clinical-report-statistics dl > div { padding: 11px 0; border-top: 1px solid var(--line); }
.clinical-report-statistics dt { color: var(--muted); font-size: 11px; font-weight: 750; }
.clinical-report-statistics dd { margin: 3px 0 0; color: var(--ink); font-size: 14px; font-weight: 650; }
@media (max-width: 900px) {
  .clinical-event-context ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-test-id="adult-attention"] .clinical-screener-form .response-options,
  body[data-test-id="mood-check-in"] .clinical-screener-form .response-options,
  body[data-test-id="anxiety-check-in"] .clinical-screener-form .response-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .clinical-event-context ul { grid-template-columns: 1fr; }
  .clinical-screener-form .response-options,
  body[data-test-id="adult-attention"] .clinical-screener-form .response-options,
  body[data-test-id="mood-check-in"] .clinical-screener-form .response-options,
  body[data-test-id="anxiety-check-in"] .clinical-screener-form .response-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-test-id="event-stress-check"] .clinical-screener-form .response-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinical-report-statistics dl { grid-template-columns: 1fr; }
  .adult-screener-gate { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) {
  .test-page-intro.clinical-intro:has(.instruction-card):has(.test-intro-art) { grid-template-columns: minmax(0, 1fr); }
  .test-page-intro.clinical-intro .test-page-heading { grid-column: 1; grid-row: 1; }
  .test-page-intro.clinical-intro .clinical-intro-art { height: 180px; grid-column: 1; grid-row: 2; }
  .test-page-intro.clinical-intro .clinical-intro-art svg { height: 100px; }
  .test-page-intro.clinical-intro .instruction-card { grid-column: 1; grid-row: 3; }
}

/* Individual collection controls share the overview's coloured frame vocabulary. */
body[data-page="home"] .filter-chip { --collection-accent: var(--ink); --collection-edge: var(--line); min-width: 0; width: 100%; padding-inline: 12px; white-space: nowrap; color: var(--ink); background: white; border: 1px solid var(--collection-edge); border-radius: 10px; }
body[data-page="home"] .filter-chip[data-filter="Psychometrics"] { --collection-accent: #087065; --collection-edge: #b9ddd5; }
body[data-page="home"] .filter-chip[data-filter="Benchmarks"] { --collection-accent: #6641ae; --collection-edge: #d8c9ed; }
body[data-page="home"] .filter-chip[data-filter="Learning"] { --collection-accent: #315dcc; --collection-edge: #c2d2fa; }
body[data-page="home"] .filter-chip[data-filter="Miscellaneous"] { --collection-accent: #9a5b00; --collection-edge: #ead2aa; }
body[data-page="home"] .filter-chip:hover { color: var(--collection-accent); border-color: var(--collection-accent); }
body[data-page="home"] .filter-chip.is-active { color: white; background: var(--collection-accent); border-color: var(--collection-accent); }
@media (max-width: 700px) {
  body[data-page="home"] .filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-block: 3px; }
  body[data-page="home"] .filter-chip { width: 100%; min-height: 44px; }
  body[data-page="home"] .filter-chip[data-filter="All"] { grid-column: 1 / -1; }
}

/* Reports use the exact catalog motif; the previous generic paper graphic implied the same test for all. */
#report-page-app .report-header .report-header-title { padding-right: 0; }
#report-page-app .report-header .report-header-title::after { display: none; content: none; }

/* Results share the compact, unboxed hierarchy used by the profile reports. */
.report-results .report-section-score-summary { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.report-results .report-section-score { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 12px; padding: 0 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.report-results .report-section-score > span { color: var(--ink); font-size: 16px; letter-spacing: -.02em; }
.report-results .report-section-score > strong { font-size: 22px; text-align: right; }
.report-results .report-section-score > small { grid-column: 2; text-align: right; }
.report-results .report-section-score > p { grid-column: 1 / -1; margin: 0; }
.report-results .report-overall-score:has(.report-key-result) { grid-column: 1 / -1; padding: 8px 12px; }
.report-results .report-key-result { justify-content: flex-start; gap: 6px 14px; }
.report-results .report-key-result strong { font-size: 22px; }
.exam-results .dimension-card { padding: 0 0 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.result-scale { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 6px 0 0; }
/* One scale treatment for existing profile/domain bars and newly added result scales. */
.report-content-surface :is(.profile-list-track, .score-bar) { height: 5px; overflow: visible; }
.report-content-surface .profile-list-track > span[style*="width:"], .report-content-surface .score-bar > span { position: relative; background: #315dcc33; }
.report-content-surface .profile-list-track > span[style*="width:"]::after, .report-content-surface .score-bar > span::after { position: absolute; top: 50%; right: 0; width: 12px; height: 12px; transform: translate(50%, -50%); content: ""; background: var(--signal); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--signal); }
.result-scale-labels { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.result-scale-labels > span { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.result-scale-labels > span:nth-child(2) { text-align: center; }
.result-scale-labels > span:last-child { text-align: right; }
.score-with-percentile { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.score-with-percentile > .community-percentile { flex: none; margin: 0; color: var(--signal-dark); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.exam-section-heading .score-with-percentile > small { flex-basis: 100%; order: 1; }
.benchmark-result-primary .score-with-percentile { justify-content: flex-start; }
.exam-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.exam-section-heading h3 { margin: 0; }
.exam-section-heading > strong { color: var(--signal-dark); font-size: 22px; text-align: right; letter-spacing: -.04em; }
.exam-section-heading small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.vision-result-grid:has(article:only-child) { grid-template-columns: 1fr; }
.vision-result-grid > .vision-result-card { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.vision-result-card .eyebrow { margin: 0; color: var(--ink); font-size: 16px; font-weight: 650; letter-spacing: -.015em; text-transform: none; }
.vision-result-card strong { grid-column: 2; grid-row: 1 / 3; font-size: 24px; text-align: right; }
.vision-result-card p { grid-column: 1; color: var(--muted); font-size: 12px; font-weight: 500; }
.vision-result-card small { grid-column: 1 / -1; margin: 3px 0 0; }
.vision-report-section { margin-top: 16px; padding-top: 14px; }
.vision-report-section-heading h2 { font-size: 17px; }
.vision-report-section-heading p { margin-bottom: 12px; font-size: 12px; }
.vision-report .vision-ladder-grid { grid-template-columns: 1fr; }
.vision-report .vision-ladder { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.vision-report .vision-ladder h3 { grid-column: 1 / -1; margin-bottom: 0; }
.vision-report .vision-ladder:only-child h3 { display: none; }
.vision-report .vision-ladder-row { grid-template-columns: 1fr; gap: 7px; padding: 10px 8px; border: 0; border-top: 2px solid var(--line); background: #687d9806; }
.vision-report .vision-ladder-row small { text-align: left; font-size: 10px; }
.vision-report .vision-ladder-row.is-limit { --signal: #315dcc; border-color: var(--signal); background: #315dcc0c; }
.vision-report .vision-ladder-row.is-limit > span { color: #2549a5; }
.vision-report .vision-ladder-row.is-missed { border-color: #c66d58; }
@media (min-width: 981px) {
  .vision-result-grid:has(> .vision-result-card:only-child) > .vision-result-card { grid-template-columns: minmax(0, 1fr) auto minmax(200px, 30%); gap: 3px 18px; }
  .vision-result-card:only-child > strong { grid-row: 1; }
  .vision-result-card:only-child > .result-scale { grid-column: 3; grid-row: 1 / 4; margin: 0; }
  .vision-result-card:only-child > small { grid-column: 1 / 3; }
}
@media (max-width: 980px) {
  .vision-report .vision-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .vision-report .vision-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.report-content-surface .dimension-group { gap: 10px; }
.report-content-surface .dimension-group-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 16px; padding: 0; border: 0; }
.report-content-surface .dimension-group > :is(.profile-list-facets, .dimension-group-grid) { margin-left: 3px; padding-left: 16px; border-left: 2px solid var(--line); }
.report-content-surface .dimension-group + .dimension-group { margin-top: 18px; }
.report-content-surface .dimension-group-heading > div > span { font-weight: 400; }
.report-content-surface .dimension-group-heading .result-scale { margin: 0; }
.report-content-surface .dimension-group-heading .result-scale-labels { display: none; }
.report-content-surface .profile-list-row { gap: 5px 16px; padding: 8px 0; }
.report-content-surface .profile-list-copy h3 { margin-bottom: 2px; font-size: 16px; }
.report-content-surface .profile-list-result strong, .report-content-surface .dimension-group-score { font-size: 20px; }
.report-content-surface .dimension-group-heading h3 { font-size: 18px; }
.report-content-surface .dimension-group-score { display: block; text-align: right; }
.report-content-surface .dimension-group-score > .community-percentile { display: inline-block; margin-left: 8px; vertical-align: middle; }
/* Shared hierarchy: compact accented summaries, with subordinate detail rows. */
.report-content-surface :is(.dimension-group-heading, .exam-section-heading, .benchmark-result-primary),
.report-content-surface .vision-result-grid > .vision-result-card,
.report-results .report-section-score {
  padding: 8px 12px;
  border: 0;
  border-left: 2px solid var(--signal);
  border-radius: 0;
  background: linear-gradient(90deg, #315dcc0c, transparent);
}
.report-content-surface :is(.dimension-group-heading, .exam-section-heading) h3 { color: var(--signal-dark); font-size: 16px; }
.report-content-surface :is(.exam-section-heading > strong, .report-key-result > strong, .vision-result-card > strong),
.report-results .report-section-score > strong { font-size: 20px; }
.report-content-surface .report-key-result { grid-column: 1 / -1; justify-content: space-between; padding: 0; background: none; border: 0; }
.report-content-surface .report-key-result h3 { margin: 0; color: var(--ink); font-size: 16px; letter-spacing: -.02em; }
.exam-results > .report-dimension-breakdown > .dimension-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.exam-results .exam-dimension .exam-result-detail, .report-results .exam-result-detail { color: var(--muted); font-size: 12px; }
.report-results .report-section-score-summary:has(+ .report-writing-evaluation-slot + .report-dimension-breakdown) { margin-bottom: 6px; }
.report-results .report-section-score strong > small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.report-content-surface .exam-section-heading { align-items: center; margin-bottom: 6px; }
.report-content-surface .sat-domain-row { margin-left: 3px; padding-left: 16px; border-left: 2px solid var(--line); }
.report-content-surface :is(.dimension-group > .profile-list-facets, .dimension-group > .dimension-group-grid, .sat-domain-row, .benchmark-result-support, .vision-ladder) { --signal: #687d98; --signal-dark: #455b76; }
.report-content-surface :is(.profile-list-facets, .dimension-group-grid, .sat-domain-row, .benchmark-result-support, .vision-ladder) .community-percentile { color: #455b76; background: #f2f5f8; border-color: #d6dee8; }
.report-content-surface .result-interpretation { grid-column: 1 / -1; margin: 6px 0 0; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
.report-content-surface :is(.profile-list-facets, .dimension-group-grid, .sat-domain-row) :is(.profile-list-track, .score-bar) > span { background: #687d9833; }
.report-content-surface .profile-list-result { gap: 8px; }
/* A total owns the section breakdown; peer-only reports (such as GRE) stay flat.
   Writing rubrics remain independently framed and keep their existing colours. */
.report-breakdown-with-overall .report-section-score:not(.report-overall-score):not(.report-writing-score),
.report-breakdown-with-overall > .report-dimension-breakdown {
  --signal: #687d98;
  --signal-dark: #455b76;
  margin-left: 16px;
  border-left: 2px solid var(--line);
  background: none;
}
.report-breakdown-with-overall > .report-dimension-breakdown { padding-left: 12px; }
.report-breakdown-with-overall > .report-dimension-breakdown .report-section-score:not(.report-overall-score):not(.report-writing-score),
.report-breakdown-with-overall > .report-dimension-breakdown .exam-section-heading { margin-left: 0; border-left: 0; background: none; }
.report-breakdown-with-overall :is(.report-section-score:not(.report-overall-score):not(.report-writing-score), .report-dimension-breakdown) .community-percentile { color: #455b76; background: #f2f5f8; border-color: #d6dee8; }
.report-breakdown-with-overall :is(.report-section-score:not(.report-overall-score):not(.report-writing-score), .report-dimension-breakdown) .score-bar > span { background: #687d9833; }
/* Keep the label, result and scale in one row instead of three full-width tiers. */
.report-results .report-section-score .result-scale-labels > span:nth-child(2) { display: none; }
.exam-results .exam-dimension > p:not(.exam-result-detail) { display: none; }
@media (min-width: 741px) {
  .report-results .report-section-score { grid-template-columns: minmax(0, 1fr) auto minmax(180px, 30%); align-items: center; gap: 2px 18px; }
  .report-results .report-section-score > span { grid-column: 1; grid-row: 1; }
  .report-results .report-section-score > strong { grid-column: 2; grid-row: 1; }
  .report-results .report-section-score > .result-scale { grid-column: 3; grid-row: 1 / 3; margin: 5px 0 0; }
  .report-results .report-section-score > p { grid-column: 1 / 3; }
  .report-results .report-key-result { display: contents; }
  .report-results .report-key-result h3 { grid-column: 1; grid-row: 1; }
  .report-results .report-key-result > strong { grid-column: 2; grid-row: 1; }
  .report-results .report-section-score .result-interpretation { grid-column: 1 / -1; }
  .report-results .report-overall-score:not(:has(.result-scale)) { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 740px) {
  .report-results .report-section-score-summary { grid-template-columns: 1fr; }
  .report-results .report-section-score { grid-template-columns: minmax(0, 1fr); }
  .report-results .report-section-score > strong { justify-content: flex-start; text-align: left; }
  .report-results .report-section-score > small { grid-column: 1; text-align: left; }
  .report-content-surface .report-key-result { align-items: flex-start; flex-direction: column; }
  .vision-result-grid > .vision-result-card { grid-template-columns: 1fr; }
  .vision-result-card strong { grid-column: 1; grid-row: auto; text-align: left; }
  .vision-result-card .score-with-percentile { justify-content: flex-start; }
}