/* DriveWise — styles.css | MIT | WCAG 2.1 AA */
:root{
  --navy:#123047;
  --teal:#127C70;
  --teal-dark:#0E5F56;
  --orange:#C65B16;
  --orange-dark:#9E4A12;
  --bg:#F8FAFC;
  --text:#17212B;
  --muted:#4A5A6A;
  --border:#D7E1E8;
  --border-strong:#B9CAD8;
  --focus:#0B6E84;
  --success:#127C70;
  --error:#B42318;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 4px 16px rgba(18,48,71,.08);
  --shadow-lg:0 8px 28px rgba(18,48,71,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{margin:0; font-family: Arial, Aptos, Helvetica, sans-serif; color:var(--text); background:var(--bg); line-height:1.5; font-size:17px}
img,svg{max-width:100%}
a{color:var(--teal-dark)}
/* 1.4.12 text spacing resilience */
p,li{overflow-wrap:break-word}
ul{padding-left:1.2em}

/* Skip link 2.4.1 */
.skip-link{position:absolute; left:0; top:0; z-index:999; background:var(--navy); color:#fff; padding:.75rem 1rem; transform:translateY(-150%); transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
.skip-link:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Focus visible 2.4.7 — 3px, contrast >=3:1 */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 6px rgba(11,110,132,.22)}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
input:focus-visible{outline:3px solid var(--focus); outline-offset:1px}

/* Header */
.site-header{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem 1rem}
@media(min-width:900px){ .site-header{padding:.75rem 1.5rem}}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--navy); text-decoration:none; font-size:1.15rem; letter-spacing:.01em}
.brand-mark{width:32px; height:32px; background:var(--navy); color:#fff; display:grid; place-items:center; border-radius:8px; font-size:.9rem}
.header-actions{display:flex; align-items:center; gap:.5rem}
.lang-btn, .ghost-btn{border:1px solid var(--border-strong); background:#fff; color:var(--navy); border-radius:999px; padding:.45rem .9rem; font-weight:700; cursor:pointer}
.lang-btn:hover, .ghost-btn:hover{background:var(--bg)}
.progress-wrap{flex:1; max-width:420px; margin:0 .5rem; display:flex; align-items:center; gap:.5rem}
.progress-label{font-size:.82rem; color:var(--muted); white-space:nowrap}
.progress-track{flex:1; height:8px; background:var(--border); border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:var(--teal); width:0%; transition:width .3s ease}

/* Main */
.main-wrap{max-width:880px; margin:0 auto; padding:1rem 1rem 3rem}
@media(min-width:700px){ .main-wrap{padding:1.5rem 1.5rem 3rem}}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem}
@media(min-width:700px){ .card{padding:1.6rem 1.8rem}}
h1{font-size:1.9rem; line-height:1.15; color:var(--navy); margin:.2rem 0 .4rem}
@media(min-width:700px){ h1{font-size:2.15rem}}
h2{font-size:1.35rem; color:var(--navy); margin:.2rem 0 .6rem}
h3{font-size:1.06rem; color:var(--navy); margin:.2rem 0 .35rem}
.sub{color:var(--muted); margin:0 0 .8rem}
.badge{display:inline-block; background:var(--navy); color:#fff; border-radius:999px; padding:.25rem .65rem; font-size:.78rem; font-weight:700; letter-spacing:.02em}
.lead{color:var(--text); font-size:1.02rem}

/* Buttons — green and orange for primary, not for body text (contrast) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:800; border-radius:999px; border:2px solid transparent; padding:.78rem 1.15rem; cursor:pointer; font-size:.98rem; line-height:1; text-align:center; min-height:44px}
.btn-primary{background:var(--teal); color:#fff; border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-dark); border-color:var(--teal-dark)}
.btn-orange{background:var(--orange); color:#fff; border-color:var(--orange)}
.btn-orange:hover{background:var(--orange-dark); border-color:var(--orange-dark)}
.btn-secondary{background:#fff; color:var(--navy); border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--bg)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.btn-row .btn{flex:1 1 160px}

/* Grids */
.grid-2{display:grid; gap:.75rem}
@media(min-width:700px){ .grid-2{grid-template-columns:1fr 1fr}}
.theme-grid{display:grid; gap:.75rem}
@media(min-width:700px){ .theme-grid{grid-template-columns:1fr 1fr}}
.stop-list{display:grid; gap:.6rem; margin:.8rem 0}
.stop{border:1px solid var(--border); border-radius:var(--radius-sm); padding:.75rem .9rem; display:flex; gap:.75rem; align-items:flex-start; background:#fff}
.stop-num{flex:0 0 36px; height:36px; display:grid; place-items:center; background:var(--navy); color:#fff; border-radius:50%; font-weight:800}
.illus{border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:.6rem; display:grid; place-items:center; overflow:hidden}

/* Lever cards */
.lever-grid{display:grid; gap:.75rem}
@media(min-width:700px){ .lever-grid{grid-template-columns:1fr 1fr}}
.lever-card{position:relative; text-align:left; width:100%; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:1rem; cursor:pointer; box-shadow:var(--shadow)}
.lever-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-lg)}
.lever-card.visited{border-color:var(--teal)}
.lever-card h3{margin:0 0 .25rem; font-size:1rem}
.lever-card p{margin:0; color:var(--muted); font-size:.93rem}
.badge-visited{position:absolute; top:.6rem; right:.6rem; background:var(--teal); color:#fff; font-size:.72rem; font-weight:800; border-radius:999px; padding:.15rem .5rem}

/* Dialog / panel */
.scrim{position:fixed; inset:0; background:rgba(18,48,71,.48); display:none; z-index:50}
.scrim.open{display:block}
.dialog{position:fixed; inset:auto 1rem 1rem 1rem; max-width:640px; margin:0 auto; background:#fff; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:60; display:none; max-height:85vh; overflow:auto}
@media(min-width:700px){ .dialog{inset:50% auto auto 50%; transform:translate(-50%,-50%); bottom:auto; right:auto; width:90%}}
.dialog.open{display:block}
.dialog-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.2rem; border-bottom:1px solid var(--border)}
.dialog-body{padding:1rem 1.2rem}
.close-btn{border:1px solid var(--border-strong); background:#fff; border-radius:999px; padding:.45rem .75rem; font-weight:700; cursor:pointer}

/* Checklists / choices */
.fieldset{border:0; padding:0; margin:0}
.legend{font-weight:800; color:var(--navy); margin-bottom:.5rem}
.option{position:relative; display:flex; gap:.65rem; align-items:flex-start; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.75rem .85rem; margin:.5rem 0; cursor:pointer; background:#fff}
.option:hover{border-color:var(--border-strong)}
.option.selected{border-color:var(--navy); background:#F1F5F9}
.option.correct{border-color:var(--success)}
.option.incorrect{border-color:var(--error)}
.option input{margin-top:.2rem; width:20px; height:20px; accent-color:var(--navy)}
.option label{cursor:pointer; flex:1}
.hint{font-size:.88rem; color:var(--muted); margin:.35rem 0 0}

/* Feedback — aria-live polite, color + icon + text 1.4.1 */
.feedback{border-radius:var(--radius-sm); padding:.85rem 1rem; margin-top:.85rem; display:flex; gap:.6rem; align-items:flex-start; border:1.5px solid}
.feedback.ok{background:#ECFDF5; border-color:#6CB3A8; color:#0E5F56}
.feedback.err{background:#FEF2F2; border-color:#E6A5A0; color:#7F1D1D}
.feedback .icon{flex:0 0 22px; margin-top:.05rem}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.live-region{min-height:1.2rem}

/* Quiz */
.quiz-q{font-weight:800; color:var(--navy); margin:.1rem 0 .4rem}
.quiz-progress{font-size:.88rem; color:var(--muted); margin-bottom:.35rem}
.score-box{text-align:center; padding:1rem}
.score-num{font-size:2.6rem; font-weight:900; color:var(--navy)}
.pass{color:var(--success)}
.fail{color:var(--error)}

/* Footer nav */
.nav-footer{display:flex; justify-content:space-between; gap:.75rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border)}

/* Reflow 1.4.10 — no horizontal scroll at 320px */
html,body{overflow-x:hidden}
.main-wrap, .card, .dialog{max-width:100%}

/* Resize text 1.4.4 up to 200% — use relative units, no fixed heights that clip */
.option, .card, .dialog-body{height:auto}

/* Non-text contrast 1.4.11 — ensure borders/icons >=3:1 */
svg.icon{stroke:var(--navy)}

/* Print hidden helpers */
.sr-only{position:absolute; left:-9999px}