*,*::before,*::after{box-sizing:border-box}
:root{--navy:#1a2744;--navy-l:#253660;--gold:#c9a84c;--gold-l:#deba6a;--gold-txt:#8c722a;--green:#2d7a4f;--red:#b91c1c;--muted:#56566a;--faint:#6c6c86;--text:#1a1a2e;--line:#e0dbd4;--bg:#f8f9fa;--surface:#ffffff;--cream:#faf8f3;--head:Georgia,"Times New Roman",serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{margin:0;font-family:var(--body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}
main{width:100%;max-width:560px;margin:0 auto;padding:20px 16px 40px;flex:1}
h1{font-family:Georgia,serif;font-size:1.5rem;line-height:1.25;margin:0 0 8px}
h2{font-size:1.05rem;margin:22px 0 8px}
p.lead{color:var(--muted);margin:0 0 18px;line-height:1.55}
.card{background:var(--surface);border-radius:12px;box-shadow:0 2px 14px rgba(26,39,68,.09);padding:20px;margin-bottom:16px}
label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 6px}
input,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:1rem;background:#fff;color:var(--navy)}
.btn{display:block;width:100%;padding:14px 16px;border:2px solid var(--navy);border-radius:6px;font-size:1rem;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;margin-top:14px;background:var(--surface);color:var(--navy);transition:background .18s ease,color .18s ease}
.btn:hover{background:var(--navy-l);border-color:var(--navy-l);color:#fff}
.btn-primary{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--navy)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-link{background:none;border:0;color:var(--navy);text-decoration:underline;padding:6px 0;width:auto;display:inline;margin:0;font-weight:600;cursor:pointer}
.error{background:#fdf2f2;color:var(--red);border:1px solid #f0c4c4;border-radius:8px;padding:10px 12px;margin-top:12px;font-size:.92rem;display:none}
.ok{color:var(--green);font-weight:700}
.note{font-size:.85rem;color:var(--muted);margin-top:14px;line-height:1.5}
.hidden{display:none !important}
.progress{height:8px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0 14px}
.progress>div{height:100%;background:var(--navy);width:0;transition:width .2s}
.meta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);gap:8px}
.option{display:block;width:100%;text-align:left;padding:13px 14px;margin-top:9px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);font-size:.98rem;cursor:pointer;color:var(--navy)}
.option.sel{border-color:var(--navy);background:#eef1f8}
.option:disabled{cursor:default}
.badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:.75rem;font-weight:800;padding:4px 9px;border-radius:4px;letter-spacing:.3px}
.row{display:flex;gap:10px}
.row>*{flex:1}
ul.tick{padding:0;list-style:none;margin:10px 0}
ul.tick li{padding:6px 0 6px 26px;position:relative;line-height:1.45}
ul.tick li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
@media (min-width:720px){main{max-width:640px}}

/* Portal band: the same navy and gold as the website hero */
.portal-band{background:var(--navy);padding:12px 0;border-bottom:3px solid var(--gold)}
.portal-band p{margin:0;color:var(--gold);font-size:.78rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:1.5}

/* Answer states on practice and diagnostic: chosen, correct, wrong */
.option.sel{border-color:var(--navy);background:#eef1f8}
.option.correct{border-color:var(--green);background:#e8f4ee;color:var(--text)}
.option.wrong{border-color:var(--red);background:#fdf2f2;color:var(--text)}
.option.correct::after{content:" ✓";color:var(--green);font-weight:800}
.option.wrong::after{content:" ✗";color:var(--red);font-weight:800}

/* Study content is not copied, printed or dragged. Typing in inputs still works. */
body[data-protect] *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body[data-protect] input,body[data-protect] textarea,body[data-protect] select{-webkit-user-select:text;user-select:text}
body[data-protect] img{-webkit-user-drag:none;pointer-events:none}
body.concealed main{filter:blur(14px);transition:filter .1s}
.protect-mark{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;opacity:.07}
.protect-mark span{position:absolute;white-space:nowrap;transform:rotate(-24deg);font:700 14px system-ui,sans-serif;color:var(--navy)}
@media print{body[data-protect]{display:none !important}}