/* deanprep.com/sat only, loaded after site.css (sat.mjs). The exam template in Dean's SAT's plum (SAT plan, section 8b);
   every other page, including the /sat-reading-writing guide that shares the exam-sat class, keeps site.css alone. */
.exam-sat {
  --accent: #6a2c84;        /* headings and buttons: 8.5:1 on the light ground */
  --accent-ink: #6a2c84;
  --on-accent: #ffffff;
  --navy: #4a1d5e;          /* the icon's ground: bands and footer */
  --navy-2: #6a2c84;
  --gold: #e3b24f;
  --tint: #f6eff9;
  --chosen: #f0e6f5;
  --tag-ink: #4a1d5e;
  --close-ink: #e6d7ef;
}
.exam-sat .btn.primary { background: #6a2c84; }
.exam-sat .btn.primary:hover { background: #4a1d5e; }
@media (prefers-color-scheme: dark) {
  .exam-sat {
    --accent: #d7aeea;
    --accent-ink: #d7aeea;
    --on-accent: #2a1235;
    --navy-2: #d7aeea;
    --tint: #2d2536;
    --chosen: #3a2a44;
    --tag-ink: #e8cdf5;
    --bad: #f2867d;
    --ok: #6cc070;
  }
  .exam-sat .btn.primary, .exam-sat .btn.primary:hover { background: #7b3f96; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hdr, .hdr-in { transition: none; }
}

/* The Dean Prep marks stay navy on light; only this exam's own logo is plum */
.exam-sat .hdr .logo .wordmark { color: #1e2a5a; }
@media (prefers-color-scheme: dark) { .exam-sat .hdr .logo .wordmark { color: #fff; } }

/* Colours site.css sets for gold, where plum needs white text (and dark text on the lighter plum in dark mode) */
.exam-sat .loop li::before { color: var(--on-accent); }
.exam-sat .btn.accent { background: var(--gold); color: #1a1406; }
.exam-sat .tag { color: var(--tag-ink); }
.exam-sat .opt.chosen { border-color: var(--accent); background: var(--chosen); }
.exam-sat .price.main { border-color: var(--accent); }
.exam-sat .eyebrow { color: var(--accent-ink); }
.exam-sat .proof .n { color: var(--accent); }
.exam-sat .feature .ic svg { display: block; }
.exam-sat .table-wrap:focus-visible { outline-color: var(--accent); }

/* Hero: the sign-up has to fit on a laptop's first screen, and the demo stays put as its panes grow */
.exam-sat .hero { align-items: start; }
.exam-sat .hero h1 { font-size: clamp(34px, 1.6rem + 2.2vw, 72px); max-width: 18ch; }
.sat-logo { height: clamp(34px, 3vw, 48px); width: auto; margin-bottom: 18px; }
.exam-sat .hero h1 span { display: block; }
.exam-sat .hero h1 span[hidden] { display: none; }
.sat-mark { font-size: .85em; color: var(--muted); max-width: 68ch; margin: 0; }
html:not(.js) .exam-sat .aud { display: none; }

/* Sign-up form: email and button on a line where they fit, the age confirmation below */
html:not(.js) .sat-notify { display: none; }
.sat-notify { align-items: flex-start; max-width: 620px; }
.sat-field { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.sat-field label { font-weight: 600; font-size: .92em; }
.sat-notify .sat-field input { width: 100%; flex: none; }
.sat-notify .btn { margin-top: calc(1.6em * .92 + 4px); }
.sat-notify input[aria-invalid="true"] { border-color: var(--bad); }
.sat-age { flex: 1 1 100%; }
.sat-age label { display: flex; gap: 10px; align-items: flex-start; font-size: .95em; cursor: pointer; padding-block: 4px; }
.sat-age input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; accent-color: var(--accent); }
.sat-notify .sat-err { min-height: 0; font-size: .92em; font-weight: 600; }
.sat-notify .sat-err:empty { display: none; }
.sat-sent, .sat-confirmed { flex: 1 1 100%; margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 12%, var(--white)); font-weight: 600; }
.sat-confirmed { margin-top: 12px; }
@media (max-width: 599px) { .sat-notify .btn { margin-top: 0; width: 100%; order: 3; } .sat-age { order: 2; } }

/* The demo */
.sat-meta { font-size: .85em; margin-bottom: .5em; }
.sat-demo-h { font-size: clamp(22px, 5cqi, 34px); margin-bottom: .5em; }
.sat-demo-h:focus, .sat-back-h:focus, .verdict:focus { outline: none; }
.sat-wrong { font-size: clamp(18px, 3.8cqi, 24px); line-height: 1.45; padding: 12px 14px; border-left: 4px solid var(--bad); background: var(--tint); border-radius: 0 10px 10px 0; }
.sat-back-h { font-size: 1.08em; line-height: 1.35; margin-bottom: .5em; }
.sat-back p:last-child { margin-bottom: 0; }
.sat-text { font-size: clamp(16px, 2.8cqi, 19px); line-height: 1.6; }
.sat-text + .sat-text { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sat-text p { margin: 0 0 .6em; }
.sat-text p:last-child { margin-bottom: 0; }
.sat-text u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sat-label { font-weight: 700; }
.sat-blank { white-space: nowrap; letter-spacing: -.02em; }
.sat-notes { margin: 0; padding-left: 1.2em; font-size: clamp(16px, 2.8cqi, 19px); line-height: 1.55; }
.sat-prompt { font-weight: 650; margin: 12px 0 0; }
.sat-opts { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; min-width: 0; }
.sat-opts legend { padding: 0; }
.sat-opts .opt { display: flex; gap: 10px; align-items: center; }
.sat-opts input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.sat-letter { font-weight: 700; color: var(--muted); }
.sat-opts .opt:has(input:disabled) { cursor: default; }
.exam-sat .verdict p { margin: 0 0 .6em; }
.exam-sat .verdict p:last-child { margin-bottom: 0; }
.exam-sat .demo .row .btn { min-width: 0; }

/* Samples from the free set */
.sat-sample .sat-text { font-size: 1em; }
.sample .sat-choices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sat-answer { margin-top: 12px; font-size: .95em; }
.sat-answer summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.sat-answer p { margin: 8px 0 0; }
.sat-small { font-size: .9em; margin: 20px 0 0; max-width: 90ch; }
.sat-off { margin: auto 0 0; padding-top: 8px; }
.sat-after-faq { margin-top: 20px; }

/* The closing band: the form on deep plum */
.sat-close { background: var(--navy); }
.sat-close .sat-field label, .sat-close .sat-age label { color: #fff; }
.sat-close .sat-notify input[type="email"] { background: #fff; color: #1f2430; border-color: #fff; }
.sat-close .sat-err { color: #ffdcd7; }
.sat-close .sat-age input { accent-color: var(--gold); }
.sat-close .sat-sent { background: rgba(255, 255, 255, .14); color: #fff; }
.sat-close .notify-note { color: var(--close-ink); }
.sat-close a { color: #fff; }
.exam-sat .foot .marks { color: #e6d7ef; }