:root{
  --bg:#F8F9FB;
  --card:#FFFFFF;
  --ink:#1C2530;
  --body:#46556A;
  --dim:#5F7185;            /* darkened from #8494A7 for 4.5:1 small-text contrast */
  --line:#E5E9EF;
  --blue:#2451B3;
  --blue-soft:#EAF0FB;
  --orange:#E8762D;
  --orange-text:#A54A0C;    /* small text on soft/near-white backgrounds */
  --orange-soft:#FCEFE4;
  --green:#188A62;
  --green-text:#0F6B4B;
  --green-soft:#E5F4EE;
  --red:#C24A32;
  --red-text:#A83A24;
  --red-soft:#F9EAE6;
  --code:#1C2530;
  --codetext:#E9EEF5;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Public Sans',-apple-system,sans-serif;
  background:var(--bg); color:var(--body);
  font-size:16px; line-height:1.62;
}
button{font-family:'Public Sans',sans-serif; cursor:pointer;}

/* ============ layout ============ */
#app{display:flex; min-height:100vh;}
.sidenav{
  width:216px; background:var(--card); border-right:1px solid var(--line);
  padding:1.6rem 0; position:fixed; top:0; bottom:0; left:0; z-index:80;
  display:flex; flex-direction:column;
}
.brand{padding:0 1.4rem 1.2rem; border-bottom:1px solid var(--line); margin-bottom:.9rem;}
.brand .t{font-family:'Sora',sans-serif; font-weight:800; font-size:1.02rem; color:var(--ink); line-height:1.25;}
.brand .s{font-size:.66rem; color:var(--dim); text-transform:uppercase; letter-spacing:.12em; margin-top:.2rem;}
.sidenav .nav-btn{
  display:flex; align-items:center; gap:.7rem; width:100%;
  background:none; border:none; text-align:left;
  padding:.6rem 1.4rem; font-size:.86rem; font-weight:600; color:var(--dim);
  border-left:3px solid transparent; transition:all .15s;
}
.sidenav .nav-btn:hover{color:var(--ink); background:var(--bg);}
.sidenav .nav-btn.on{color:var(--blue); border-left-color:var(--blue); background:var(--blue-soft);}
.sidenav .nav-btn .ic{font-size:1rem; width:20px; text-align:center;}
.lane-chip{
  margin:auto 1.4rem 0; padding:.7rem .9rem; border-radius:10px;
  background:var(--bg); border:1px solid var(--line); font-size:.72rem;
}
.lane-chip b{display:block; color:var(--ink); font-size:.78rem; margin-bottom:.15rem;}
.lane-chip button{
  margin-top:.45rem; background:none; border:1px solid var(--line);
  border-radius:6px; padding:.35rem .7rem; font-size:.68rem; font-weight:600; color:var(--blue);
}
.sync-line{margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line);}
.sync-line .who{display:block; color:var(--dim); font-size:.66rem; margin-bottom:.1rem;}
.content{margin-left:216px; flex:1; min-width:0;}
.screen{max-width:720px; margin:0 auto; padding:2.6rem 2.2rem 5rem;}

/* mobile tabs */
.tabbar{display:none;}
@media (max-width:900px){
  .sidenav{display:none;}
  .content{margin-left:0;}
  .screen{padding:1.6rem 1.2rem 6.5rem;}
  .tabbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90;
    background:var(--card); border-top:1px solid var(--line);
  }
  .tabbar button{
    flex:1; background:none; border:none; padding:.65rem 0 .8rem;
    font-size:.62rem; font-weight:700; color:var(--dim);
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
  }
  .tabbar button .ic{font-size:1.15rem;}
  .tabbar button.on{color:var(--blue);}
}

/* ============ shared type ============ */
h1{font-family:'Sora',sans-serif; font-weight:800; color:var(--ink);
   font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.12; letter-spacing:-.015em;}
h2{font-family:'Sora',sans-serif; font-weight:700; color:var(--ink); font-size:1.28rem; line-height:1.2;}
h3{font-size:.95rem; font-weight:700; color:var(--ink); margin:1.5rem 0 .35rem;}
p{margin-bottom:.85rem;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:.6rem;}
.sub{color:var(--dim); font-size:.92rem;}

/* ============ cards ============ */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem; margin-bottom:.9rem;}
.card.click{cursor:pointer; transition:all .15s;}
.card.click:hover{border-color:var(--blue); transform:translateY(-1px); box-shadow:0 4px 14px rgba(28,37,48,.06);}
.mod-row{display:flex; align-items:center; gap:1rem;}
.mod-num{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--blue-soft); color:var(--blue);
  font-family:'Sora',sans-serif; font-weight:800; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.mod-num.done{background:var(--green-text); color:#fff;}
.mod-row .mt{font-weight:700; color:var(--ink); font-size:.95rem;}
.mod-row .ms{font-size:.78rem; color:var(--dim); margin-top:.1rem;}
.mod-row .go{margin-left:auto; color:var(--dim); font-size:1.1rem;}
.badge{display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.18rem .55rem; border-radius:20px; vertical-align:middle;}
.badge.deep{background:var(--orange-soft); color:var(--orange-text);}
.badge.core{background:var(--blue-soft); color:var(--blue);}

/* ============ notes / callouts ============ */
.note{border-left:3px solid var(--blue); background:var(--blue-soft);
  border-radius:0 10px 10px 0; padding:.95rem 1.15rem; margin:1.1rem 0; font-size:.9rem;}
.note.warn{border-left-color:var(--red); background:var(--red-soft);}
.note.gold{border-left-color:var(--orange); background:var(--orange-soft);}
.note.ok{border-left-color:var(--green); background:var(--green-soft);}
.note b.nt{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:.25rem; color:var(--ink);}

/* ============ prompts ============ */
.prompt{background:var(--code); border-radius:12px; padding:1.15rem 1.25rem 1rem; margin:.9rem 0 1.2rem; position:relative;}
.prompt .tag{position:absolute; top:0; right:0; background:var(--blue); color:#fff;
  font-size:.56rem; font-weight:700; letter-spacing:.1em; padding:.22rem .65rem; border-radius:0 12px 0 8px;}
.prompt code{font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--codetext);
  line-height:1.68; white-space:pre-wrap; word-break:break-word; display:block;}
.copy-btn{margin-top:.8rem; background:transparent; border:1px solid #40506A; color:#9DB0C8;
  font-size:.7rem; font-weight:600; padding:.45rem .9rem; border-radius:6px; transition:all .15s;}
.copy-btn:hover{border-color:#7FB4E8; color:#AFCDEC;}
.try-btn{display:inline-block; margin:.8rem 0 0 .45rem; background:transparent; border:1px solid #40506A; color:#9DB0C8;
  font-size:.7rem; font-weight:600; padding:.45rem .9rem; border-radius:6px; text-decoration:none; transition:all .15s;}
.try-btn:hover{border-color:#7FB4E8; color:#AFCDEC;}
.prompt-meta{font-size:.8rem; margin:-.7rem 0 1.4rem; padding:0 .15rem; line-height:1.55;}
.prompt-meta div{margin-bottom:.15rem;}
.prompt-meta b{color:var(--ink);}

/* ============ grids ============ */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1rem 0;}
.mini{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.95rem 1.05rem;}
.mini h4{font-size:.83rem; font-weight:700; color:var(--blue); margin-bottom:.25rem;}
.mini p{font-size:.8rem; margin:0; line-height:1.5;}
.vs{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1rem 0;}
.vs .col{border-radius:10px; padding:.95rem 1.05rem; border:1px solid var(--line);}
.vs .bad{background:var(--red-soft); border-color:#EAC7BD;}
.vs .good{background:var(--green-soft); border-color:#BADFCE;}
.vs .lbl{font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.45rem;}
.vs .bad .lbl{color:var(--red-text);}
.vs .good .lbl{color:var(--green-text);}
.vs code{font-size:.78rem; line-height:1.55; color:var(--body); white-space:pre-wrap; display:block; font-family:'JetBrains Mono',monospace;}
ul.plain{margin:.35rem 0 .9rem 1.2rem;}
ul.plain li{margin-bottom:.4rem; font-size:.92rem;}
table.rules{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.85rem;}
table.rules th{text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:var(--dim); padding:.45rem .7rem; border-bottom:2px solid var(--line);}
table.rules td{padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top;}
table.rules td:first-child{font-weight:600; color:var(--ink);}
.pill{display:inline-block; font-size:.64rem; font-weight:700; padding:.13rem .55rem; border-radius:20px; white-space:nowrap;}
.pill.ok{background:var(--green-soft); color:var(--green-text);}
.pill.no{background:var(--red-soft); color:var(--red-text);}
.pill.ask{background:var(--orange-soft); color:var(--orange-text);}

/* ============ deep-lane blocks ============ */
.deep-block{border:1.5px dashed var(--orange); border-radius:12px; padding:1.2rem 1.3rem; margin:1.2rem 0; background:#FFFDF9;}
.deep-block .dtag{font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-text); margin-bottom:.5rem;}
body.lane-casual .deep-block{display:none;}
body.lane-casual .deep-only{display:none;}

/* ============ skill check ============ */
.quiz{margin-top:1.4rem;}
.q-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.15rem 1.25rem; margin-bottom:.8rem;}
.q-card .qq{font-weight:700; color:var(--ink); font-size:.92rem; margin-bottom:.7rem;}
.q-opt{display:block; width:100%; text-align:left; background:var(--bg); border:1.5px solid var(--line);
  border-radius:8px; padding:.6rem .85rem; margin-bottom:.5rem; font-size:.86rem; color:var(--body); transition:all .12s;}
.q-opt:hover{border-color:var(--blue);}
.q-opt.correct{border-color:var(--green); background:var(--green-soft); color:var(--green-text); font-weight:600;}
.q-opt.wrong{border-color:var(--red); background:var(--red-soft); color:var(--red-text);}
/* non-color cues so red/green is never the only signal */
.q-opt.correct::before{content:'✓  '; font-weight:800;}
.q-opt.wrong::before{content:'✗  '; font-weight:800;}
.q-exp{display:none; font-size:.8rem; color:var(--body); background:var(--bg); border-radius:8px; padding:.7rem .9rem; margin-top:.3rem;}
.q-exp.show{display:block;}

/* ============ nav footer of module ============ */
.mod-footer{display:flex; gap:.7rem; margin-top:2.2rem; flex-wrap:wrap;}
.btn{border-radius:10px; padding:.65rem 1.3rem; font-weight:700; font-size:.86rem; border:1.5px solid var(--line); background:var(--card); color:var(--body); transition:all .15s;}
.btn:hover{border-color:var(--blue); color:var(--blue);}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn.primary:hover{background:#1B3F8F;}
.btn.done-state{background:var(--green-text); border-color:var(--green-text); color:#fff;}

/* ============ glossary ============ */
.gsearch{width:100%; padding:.75rem 1rem; border:1.5px solid var(--line); border-radius:10px;
  font-size:1rem; font-family:'Public Sans',sans-serif; margin-bottom:1.1rem; background:var(--card); color:var(--ink);}
.gsearch:focus{outline:none; border-color:var(--blue);}
.gcat{font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:1.5rem 0 .6rem;}
.gterm{background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:.55rem; overflow:hidden;}
.gterm .ghead{display:flex; align-items:center; gap:.7rem; padding:.75rem 1.05rem; cursor:pointer;}
.gterm .ghead:hover{background:var(--bg);}
.gterm .gname{font-weight:700; color:var(--ink); font-size:.9rem;}
.gterm .gtools{margin-left:auto; font-size:.62rem; color:var(--dim); font-family:'JetBrains Mono',monospace; text-align:right;}
.gterm .gbody{display:none; padding:0 1.05rem .95rem; font-size:.86rem;}
.gterm.open .gbody{display:block;}
.gterm .gwhy{font-size:.8rem; color:var(--blue); margin-top:.4rem;}
.gterm .gwhy b{font-weight:700;}

/* ============ hero / home ============ */
.hero-home{background:var(--ink); border-radius:18px; padding:2.2rem 2rem; color:#E9EEF5; margin-bottom:1.6rem; position:relative; overflow:hidden;}
.hero-home::after{content:''; position:absolute; right:-90px; top:-90px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(36,81,179,.5), transparent 70%);}
.hero-home h1{color:#fff; position:relative; z-index:2;}
.hero-home p{color:#9DB0C8; max-width:520px; position:relative; z-index:2;}
.progress-line{height:8px; background:var(--line); border-radius:6px; overflow:hidden; margin:.5rem 0 .3rem;}
.progress-fill{height:100%; background:var(--green); width:0%; transition:width .4s;}

/* home module map */
.mod-map{margin:.9rem 0 .1rem; border-top:1px solid var(--line);}
.mm-row{display:flex; align-items:center; gap:.65rem; width:100%; background:none; border:none;
  border-bottom:1px solid var(--line); padding:.5rem .15rem; font-size:.85rem; color:var(--body);
  text-align:left; transition:background .15s;}
.mm-row:last-of-type{border-bottom:none;}
.mm-row:hover{background:var(--bg);}
.mm-row:hover .mm-title{color:var(--blue);}
.mm-num{width:24px; height:24px; border-radius:7px; flex-shrink:0;
  background:var(--blue-soft); color:var(--blue);
  font-family:'Sora',sans-serif; font-weight:800; font-size:.7rem;
  display:flex; align-items:center; justify-content:center;}
.mm-num.done{background:var(--green-text); color:#fff;}
.mm-title{font-weight:600; color:var(--ink);}
.mm-time{margin-left:auto; font-size:.7rem; color:var(--dim); font-family:'JetBrains Mono',monospace;}

/* lane picker overlay */
.overlay{position:fixed; inset:0; background:rgba(16,22,30,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1.2rem;}
.overlay.hidden{display:none;}
.picker{background:var(--card); border-radius:18px; max-width:560px; width:100%; padding:2rem 1.9rem;}
.picker h2{margin-bottom:.4rem;}
.picker .sub{margin-bottom:1.2rem;}
.lane-opt{display:block; width:100%; text-align:left; background:var(--bg); border:2px solid var(--line);
  border-radius:12px; padding:1rem 1.15rem; margin-bottom:.7rem; transition:all .15s;}
.lane-opt:hover{border-color:var(--blue);}
.lane-opt .lt{font-weight:800; color:var(--ink); font-size:.98rem; font-family:'Sora',sans-serif;}
.lane-opt .ls{font-size:.82rem; color:var(--dim); margin-top:.15rem;}

/* ============ final assessment ============ */
.assess-card{border-color:var(--blue);}
.score-big{font-family:'Sora',sans-serif; font-weight:800; font-size:2.4rem; color:var(--ink); line-height:1; margin:.2rem 0 .1rem;}
.result-row{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.88rem;}
.result-row:last-of-type{border-bottom:none;}
.result-row .rmod{font-weight:600; color:var(--ink);}
.result-row.click{cursor:pointer;}
.result-row.click:hover .rmod{color:var(--blue);}

/* ============ print (cheat sheet) ============ */
@media print{
  .sidenav,.tabbar,.backlink,.mod-footer,.home-foot,.overlay{display:none !important;}
  .content{margin-left:0;}
  .screen{max-width:100%; padding:0;}
  body{background:#fff; font-size:12px; line-height:1.45;}
  h1{font-size:1.35rem !important;}
  .sub{margin-bottom:.5rem !important;}
  .card{box-shadow:none; border:1px solid #C9CFD8; border-radius:8px; padding:.75rem 1rem; margin-bottom:.55rem; break-inside:avoid;}
  .cheat-sec h3{margin:0 0 .3rem; font-size:.85rem;}
  .cheat-sec ul.plain li{font-size:.78rem; margin-bottom:.22rem;}
  .cheat-sec p{font-size:.78rem; margin-bottom:.3rem;}
}

/* home footer */
.home-foot{margin-top:2.6rem; text-align:center;}
.home-foot button{background:none; border:none; color:var(--dim); font-size:.72rem; font-weight:600; text-decoration:underline; padding:.3rem;}
.home-foot button:hover{color:var(--red-text);}

/* ============ accessibility ============ */
:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
.tabbar button:focus-visible,.nav-btn:focus-visible{outline-offset:-3px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important;}
  html{scroll-behavior:auto;}
  .card.click:hover{transform:none;}
}

.screen-view{display:none;}
.screen-view.on{display:block;}
.backlink{background:none; border:none; color:var(--dim); font-size:.82rem; font-weight:600; margin-bottom:1.1rem; padding:0;}
.backlink:hover{color:var(--blue);}
@media (max-width:640px){
  .grid2,.vs{grid-template-columns:1fr;}
  /* the rules table scrolls in its own container instead of breaking page reflow */
  table.rules{display:block; overflow-x:auto;}
}