/* MVA Practice Test app. Markup is generated by quiz.js, so styles live here rather than in Etch records. Tokens come from Automatic.css. */
.mpt {
  inline-size: 100%;
  max-inline-size: var(--width-70);
  display: grid;
  gap: var(--space-m);
}
.mpt[hidden] { display: none; }
.mpt__screen { display: grid; gap: var(--space-m); }
.mpt__screen[hidden] { display: none; }
/* Headings receive focus programmatically when a screen changes so screen readers announce them; no ring needed for that. */
.mpt [data-focus][tabindex="-1"]:focus { outline: none; }

/* Start screen */
.mpt__modes { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.mpt__mode {
  display: grid; gap: var(--space-xs); align-content: start; text-align: left;
  padding: var(--space-m); border: 1.5px solid var(--neutral); border-radius: calc(var(--radius) * 1.6);
  background: var(--bg-ultra-light); color: var(--text-dark); cursor: pointer; font: inherit;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.mpt__mode.mpt__mode { text-align: left; }
.mpt__mode:hover { border-color: var(--primary); }
.mpt__mode:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mpt__mode[data-locked="true"] { border-style: dashed; }
.mpt__mode-title { font-family: var(--heading-font-family); font-weight: 700; font-size: var(--text-l); line-height: 1.2; }
.mpt__mode-text { color: var(--text-dark-muted); font-size: var(--text-s); }
.mpt__mode-tag { justify-self: start; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45em 0.7em; border-radius: 999px; background: var(--accent); color: var(--neutral-ultra-dark-ref); line-height: 1; }
.mpt__history { font-size: var(--text-s); color: var(--text-dark-muted); }

/* Question screen */
.mpt__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-s); font-size: var(--text-xs); font-weight: 500; color: var(--text-dark-muted); }
.mpt__topic { color: var(--secondary); font-weight: 600; }
.mpt__timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-dark); }
.mpt__timer[data-low="true"] { color: var(--danger); }
.mpt__progress { block-size: 6px; border-radius: 3px; background: var(--base-light); overflow: hidden; }
.mpt__progress > span { display: block; block-size: 100%; background: var(--primary); transition: inline-size 0.2s ease-out; }
.mpt__card {
  background: var(--bg-ultra-light); border: 1px solid var(--base-semi-light); border-radius: calc(var(--radius) * 1.6);
  padding: var(--space-m); display: grid; gap: var(--space-s);
}
.mpt__image { max-inline-size: 12rem; block-size: auto; border-radius: var(--radius); justify-self: start; }
.mpt__question { font-family: var(--heading-font-family); font-weight: 700; font-size: var(--text-l); line-height: 1.25; color: var(--text-dark); margin: 0; }
.mpt__opts { display: grid; gap: var(--space-xs); }
.mpt__opt {
  display: flex; gap: var(--space-s); align-items: center; text-align: left; justify-content: flex-start; inline-size: 100%;
  background: var(--body-bg-color); border: 1.5px solid var(--neutral); border-radius: var(--radius);
  padding: var(--space-xs) var(--space-s); font: 500 var(--text-s) var(--text-font-family); color: var(--text-dark); cursor: pointer;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.mpt__opt.mpt__opt { text-align: left; }
.mpt__opt:hover { border-color: var(--primary); }
.mpt__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mpt__opt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-ultra-light); }
.mpt__opt[data-state="right"] { border-color: var(--success); background: var(--success-light); }
.mpt__opt[data-state="wrong"] { border-color: var(--danger); }
.mpt__opt[disabled] { cursor: default; }
.mpt__opt::before {
  content: attr(data-letter); display: inline-grid; place-items: center; inline-size: 1.625rem; block-size: 1.625rem; border-radius: 50%;
  background: var(--bg-ultra-light); border: 1.5px solid var(--neutral); font-weight: 700; font-size: var(--text-xs); flex: none;
}
.mpt__opt[data-state="right"]::before { background: var(--success); border-color: var(--success); color: var(--base-ultra-light); }
.mpt__opt[data-state="wrong"]::before { background: var(--danger); border-color: var(--danger); color: var(--base-ultra-light); }
.mpt__explain { display: grid; gap: var(--space-xs); padding: var(--space-s); border-radius: var(--radius); background: var(--body-bg-color); border: 1px solid var(--base-semi-light); font-size: var(--text-s); }
.mpt__explain[hidden] { display: none; }
.mpt__verdict { font-weight: 600; color: var(--text-dark); }
.mpt__ref { font-size: var(--text-xs); color: var(--text-dark-muted); }
.mpt__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.mpt__actions[hidden] { display: none; }
.mpt__note { font-size: var(--text-xs); color: var(--text-dark-muted); }

/* Results */
.mpt__score { display: flex; align-items: baseline; gap: var(--space-s); flex-wrap: wrap; }
.mpt__score-n { font-family: var(--heading-font-family); font-weight: 800; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: -0.03em; color: var(--primary); }
.mpt__score-n small { font-size: 0.4em; color: var(--text-dark-muted); font-weight: 600; }
.mpt__score-v { font-family: var(--heading-font-family); font-weight: 700; font-size: var(--text-l); }
.mpt__score-v small { display: block; font: 400 var(--text-s) var(--text-font-family); color: var(--text-dark-muted); }
.mpt__score[data-pass="true"] .mpt__score-n { color: var(--success); }
.mpt__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.mpt__bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-s); font-size: var(--text-s); font-weight: 500; }
.mpt__bars li span { color: var(--text-dark-muted); font-variant-numeric: tabular-nums; }
.mpt__bars li i { grid-column: 1 / -1; block-size: 8px; border-radius: 4px; background: var(--base-light); overflow: hidden; font-style: normal; }
.mpt__bars li i b { display: block; block-size: 100%; background: var(--success); }
.mpt__bars li[data-weak="true"] i b { background: var(--danger); }
.mpt__upsell { border: 1px solid var(--primary); border-radius: calc(var(--radius) * 1.6); padding: var(--space-m); display: grid; gap: var(--space-xs); background: var(--bg-ultra-light); }
.mpt__upsell h3 { margin: 0; font-size: var(--text-l); }
.mpt__upsell p { color: var(--text-dark-muted); font-size: var(--text-s); }
.mpt__next { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-s); }
.mpt__next article { border: 1px solid var(--base-semi-light); border-radius: var(--radius); padding: var(--space-s); display: grid; gap: var(--space-xs); background: var(--bg-ultra-light); }
.mpt__next h3 { margin: 0; font-size: var(--text-m); }
.mpt__next p { color: var(--text-dark-muted); font-size: var(--text-s); }
.mpt__next .tag { justify-self: start; }
.mpt__ad { inline-size: 100%; }

/* Review */
.mpt__review { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.mpt__review-item { display: grid; gap: var(--space-xs); padding: var(--space-s); border: 1px solid var(--base-semi-light); border-radius: var(--radius); background: var(--bg-ultra-light); font-size: var(--text-s); }
.mpt__review-q { font-weight: 600; color: var(--text-dark); }
.mpt__review-a { color: var(--danger); }
.mpt__review-c { color: var(--success); font-weight: 600; }
.mpt__sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .mpt * { transition: none !important; } }

.mpt-welcome{margin-block-end:var(--space-m);padding:var(--space-s) var(--space-m);border:1px solid var(--success);border-radius:var(--radius);background:var(--success-ultra-dark);color:var(--success-ultra-light)}
.mpt-welcome a{color:inherit;font-weight:600}


/* topic picker */
.mpt__picker{border:1px solid var(--neutral);border-radius:calc(var(--radius) * 1.4);margin-block-end:var(--space-m);overflow:hidden}
.mpt__picker-head{display:flex;justify-content:space-between;gap:var(--space-s);flex-wrap:wrap;padding:var(--space-s) var(--space-m);border-block-end:1px solid var(--neutral)}
.mpt__picker-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--secondary)}
.mpt__picker-count{font-size:var(--text-s);color:var(--text-dark-muted)}
.mpt__picker-text{margin:0;padding:var(--space-s) var(--space-m) 0;color:var(--text-dark-muted);font-size:var(--text-s)}
.mpt__chips{display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:var(--space-s) var(--space-m) var(--space-m)}
.mpt__chip{font:inherit;font-weight:600;font-size:var(--text-s);padding:0.55em 1em;border-radius:var(--radius);border:1px solid var(--neutral);background:transparent;color:var(--text-dark);cursor:pointer;display:inline-flex;gap:0.5em;align-items:center}
.mpt__chip:hover{border-color:var(--text-dark)}
.mpt__chip[aria-pressed="true"]{background:var(--primary);color:var(--base-ultra-dark-ref);border-color:var(--primary)}
.mpt__chip-n{font-weight:400;color:inherit;opacity:0.8;font-size:var(--text-xs)}
.mpt__chip[aria-pressed="true"] .mpt__chip-n{color:var(--base-ultra-dark-ref);opacity:0.7}
.mpt__chip[data-locked="true"]{color:var(--text-dark-muted);border-style:dashed}
.mpt__chip-lock{font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--primary)}
.mpt__chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* before you start */
.mpt__gate{border:1px solid var(--neutral);border-radius:calc(var(--radius) * 1.4);overflow:hidden}
.mpt__gate > .mpt__picker-eyebrow{display:block;padding:var(--space-m) var(--space-m) 0}
.mpt__gate > .sec-title{padding:var(--space-xs) var(--space-m) var(--space-s);margin:0;border-block-end:1px solid var(--neutral)}
.mpt__gate-list{list-style:none;margin:0;padding:0 var(--space-m)}
.mpt__gate-list li{display:grid;gap:0.2em;padding-block:var(--space-s);border-block-end:1px solid var(--neutral)}
.mpt__gate-list strong{font-weight:600}
.mpt__gate-list span{color:var(--text-dark-muted)}
.mpt__gate-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-s);flex-wrap:wrap;padding:var(--space-m);background:var(--bg-ultra-light)}
.mpt__link{font:inherit;font-weight:600;background:none;border:0;padding:0;color:var(--primary);cursor:pointer}
.mpt__link:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* selected but not yet checked */
.mpt__opt[data-state="selected"]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.mpt__opt[data-state="selected"]::before{background:var(--primary);color:var(--base-ultra-dark-ref);border-color:var(--primary)}

/* reserve space while questions load, so nothing jumps */
.mpt{min-block-size:28rem}