:root{
  --navy:#1f3864; --blue:#2a5caa; --blue-soft:#eaf0f9; --ink:#232733; --muted:#5c6472;
  --bg:#f4f7fb; --card:#ffffff; --line:#e2e8f1; --line-strong:#c9d3e2;
  --good:#2e7d6b; --good-soft:#e5f2ee; --warn:#b4562a; --warn-soft:#f7ece5;
  --amber:#9a6b12; --shadow:0 1px 3px rgba(20,40,80,.06),0 6px 24px rgba(20,40,80,.06);
  --radius:14px; --maxw:920px;
}
@media (prefers-color-scheme: dark){
  :root{
    --navy:#a9c2ec; --blue:#7ea8e6; --blue-soft:#1a2740; --ink:#e7ecf5; --muted:#a3adbf;
    --bg:#0f1626; --card:#161f33; --line:#26324a; --line-strong:#33425f;
    --good:#5fbfa6; --good-soft:#16301f; --warn:#e0895f; --warn-soft:#33221a;
    --amber:#d9ad5a; --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue)}
h1,h2,h3,h4{color:var(--navy); line-height:1.2; margin:0 0 .4em}
h1{font-size:1.7rem} h2{font-size:1.35rem} h3{font-size:1.08rem}
p{margin:0 0 .8em}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.kicker{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); font-weight:700}

/* Top bar */
header.top{position:sticky; top:0; z-index:20; background:var(--card); border-block-end:1px solid var(--line); box-shadow:var(--shadow)}
.top .row{display:flex; align-items:center; gap:14px; padding-block:12px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand svg{flex:0 0 auto}
.brand .t{min-width:0}
.brand .t b{display:block; color:var(--navy); font-size:1rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand .t span{font-size:.74rem; color:var(--muted)}
.score-pill{margin-inline-start:auto; text-align:end; white-space:nowrap}
.score-pill b{font-size:1.15rem; color:var(--navy)} .score-pill span{font-size:.72rem; color:var(--muted); display:block}
.saved{font-size:.7rem; color:var(--good); opacity:0; transition:opacity .3s}
.saved.show{opacity:1}

/* Stepper */
.steps{display:flex; gap:6px; padding-block:10px; overflow-x:auto}
.steps button{
  flex:1 1 auto; min-width:92px; background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:999px; padding:7px 10px; font-size:.78rem; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:inherit
}
.steps button .n{display:inline-flex; width:18px; height:18px; border-radius:50%; background:var(--line);
  color:var(--muted); align-items:center; justify-content:center; font-size:.68rem; margin-inline-end:6px; vertical-align:middle}
.steps button[aria-current="true"]{border-color:var(--blue); color:var(--navy); background:var(--blue-soft)}
.steps button[aria-current="true"] .n{background:var(--blue); color:#fff}
.steps button.done .n{background:var(--good); color:#fff}
.progress{height:4px; background:var(--line)}
.progress i{display:block; height:100%; background:var(--blue); width:0; transition:width .3s}

main{padding-block:26px 60px}
.step{display:none; animation:fade .25s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.lead{font-size:1.05rem; color:var(--muted); max-width:60ch}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-block:16px}
.card h3{margin-block-start:0}
.chapter-tag{display:inline-block; font-size:.7rem; font-weight:700; color:var(--blue); background:var(--blue-soft); padding:2px 8px; border-radius:999px; margin-inline-start:8px; vertical-align:middle}

/* Assessment */
.dim{border-block-end:1px solid var(--line); padding-block:16px}
.dim:last-child{border-block-end:0; padding-block-end:0}
.dim .dh{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-block-end:4px}
.dim .dh b{color:var(--navy); font-size:1.02rem}
.dim .dsub{font-size:.75rem; color:var(--muted); margin-inline-start:auto}
.stmt{padding-block:10px}
.stmt p{margin:0 0 8px; font-size:.97rem}
.scale{display:flex; gap:6px; flex-wrap:wrap}
.scale label{flex:1 1 0; min-width:54px; cursor:pointer}
.scale input{position:absolute; opacity:0; width:0; height:0}
.scale .box{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--line-strong);
  border-radius:10px; padding:8px 4px; font-size:.72rem; color:var(--muted); transition:.12s; text-align:center; background:var(--card)}
.scale .box b{font-size:1rem; color:var(--ink)}
.scale label:hover .box{border-color:var(--blue)}
.scale input:checked + .box{background:var(--blue); border-color:var(--blue); color:#fff}
.scale input:checked + .box b{color:#fff}
.scale input:focus-visible + .box{outline:2px solid var(--blue); outline-offset:2px}

/* Buttons */
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-block-start:20px}
.btn{font-family:inherit; font-size:.9rem; font-weight:600; border-radius:10px; padding:11px 18px; cursor:pointer; border:1px solid transparent}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn.primary:hover{background:var(--navy); border-color:var(--navy)}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn.wide{margin-inline-start:auto}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Results */
.stagebadge{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.ring{--p:0; width:120px; height:120px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--blue) calc(var(--p)*1%), var(--line) 0); display:grid; place-items:center}
.ring .inner{width:92px; height:92px; border-radius:50%; background:var(--card); display:grid; place-items:center; text-align:center}
.ring .inner b{font-size:1.5rem; color:var(--navy); line-height:1} .ring .inner span{font-size:.68rem; color:var(--muted)}
.stagebadge .meta b{font-size:1.5rem; color:var(--navy); display:block}
.stagebadge .meta .st{display:inline-block; font-weight:700; padding:3px 12px; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-size:.85rem; margin-block:4px}
.bars{margin-block-start:6px}
.bar{display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding-block:7px; border-block-end:1px solid var(--line)}
.bar:last-child{border-block-end:0}
.bar .lab{font-size:.9rem} .bar .lab small{color:var(--muted); font-weight:400}
.bar .track{grid-column:1/-1; height:9px; background:var(--line); border-radius:6px; overflow:hidden}
.bar .track i{display:block; height:100%; border-radius:6px; background:var(--blue)}
.bar .val{font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums}
.bar.prio .val{color:var(--warn)} .bar.prio .track i{background:var(--warn)}
.flag{display:inline-block; font-size:.68rem; font-weight:700; color:var(--warn); background:var(--warn-soft); padding:1px 7px; border-radius:999px; margin-inline-start:6px}
.obs{list-style:none; padding:0; margin:0}
.obs li{position:relative; padding-inline-start:26px; margin-block:10px}
.obs li::before{content:""; position:absolute; inset-inline-start:6px; inset-block-start:8px; width:8px; height:8px; border-radius:50%; background:var(--blue)}
.obs li.warn::before{background:var(--warn)} .obs li.good::before{background:var(--good)}

/* Forms */
label.fld{display:block; margin-block:12px}
label.fld .lt{font-weight:600; font-size:.9rem; display:block; margin-block-end:5px; color:var(--ink)}
input[type=text], textarea, .ti{width:100%; font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--card);
  border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px}
textarea{min-height:70px; resize:vertical}
input[type=text]:focus, textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.check{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-block:8px; cursor:pointer; background:var(--card)}
.check:hover{border-color:var(--blue)}
.check input{margin-block-start:3px; width:18px; height:18px; accent-color:var(--good); flex:0 0 auto}
.check span{font-size:.93rem}
.check.on{background:var(--good-soft); border-color:var(--good)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:620px){.two{grid-template-columns:1fr}}
.hint{font-size:.82rem; color:var(--muted); margin-block:6px 0}
.tool-note{font-size:.85rem; color:var(--muted); border-inline-start:3px solid var(--line-strong); padding-inline-start:12px; margin-block:10px}

/* Plan */
.phase{border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-block:14px; background:var(--card)}
.phase .ph{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-block-end:6px}
.phase .wk{font-weight:700; color:#fff; background:var(--navy); padding:3px 10px; border-radius:8px; font-size:.78rem}
.phase .bd{font-weight:700; color:var(--navy)}
.phase .moves{font-size:.9rem; color:var(--muted); margin-block:4px 10px}
.prefill{background:var(--blue-soft); border-radius:10px; padding:10px 12px; font-size:.88rem; margin-block:8px}
.prefill b{color:var(--navy)}
.prefill .empty{color:var(--muted); font-style:italic}

/* Export */
.privacy{display:flex; gap:10px; font-size:.86rem; color:var(--muted); background:var(--card); border:1px dashed var(--line-strong); border-radius:10px; padding:12px 14px; margin-block:14px}
.grid-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:620px){.grid-cards{grid-template-columns:1fr}}
.xcard{border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; background:var(--card)}
.xcard h3{margin-block-start:0}
.foot{color:var(--muted); font-size:.8rem; text-align:center; padding-block:30px 10px; border-block-start:1px solid var(--line); margin-block-start:30px}

/* Report (print + capture) */
#report{display:none}
@media print{
  header.top,.steps,.progress,.btnrow,#exportControls,.foot{display:none !important}
  body{background:#fff}
  .step{display:none !important}
  #report{display:block !important}
  .card,.phase{break-inside:avoid}
}
.report-body h2{border-block-end:2px solid var(--navy); padding-block-end:4px; margin-block-start:22px}
.report-body table{width:100%; border-collapse:collapse; margin-block:8px}
.report-body th,.report-body td{border:1px solid var(--line-strong); padding:6px 9px; text-align:start; font-size:.9rem; vertical-align:top}
.report-body th{background:var(--blue-soft)}
.rtag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:.8rem}
/* Enhanced results */
.narr .kicker{color:var(--blue)}
.startcard{background:var(--blue-soft); border:1px solid var(--blue); border-inline-start:6px solid var(--blue); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); margin-block:16px}
.startcard h3{color:var(--navy); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.startcard .kicker{color:var(--blue)}
.phase-tag,.rmtag{display:inline-block; font-size:.7rem; font-weight:700; color:var(--blue); background:var(--card); border:1px solid var(--line-strong); padding:2px 9px; border-radius:999px}
.rmtag{margin-inline-start:4px; vertical-align:middle}
.roadmap{margin:8px 0 0; padding-inline-start:22px}
.roadmap li{margin-block:10px; padding-inline-start:4px}
.roadmap li b{color:var(--navy)}
.dg{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-block:12px; background:var(--card)}
.dg.prio{border-color:var(--warn); background:var(--warn-soft)}
.dg-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-block-end:8px}
.dg-h b{color:var(--navy); font-size:1.02rem}
.dg-score{margin-inline-start:auto; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; font-size:.95rem}
.dg .track{height:8px; background:var(--line); border-radius:6px; overflow:hidden; margin-block-end:9px}
.dg .track i{display:block; height:100%; background:var(--blue); border-radius:6px}
.dg.prio .track i{background:var(--warn)}
.dg-mean{font-size:.92rem; margin:0 0 9px}
.dg-two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:620px){.dg-two{grid-template-columns:1fr}}
.dg-lab{display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); margin-block-end:2px}
.dg-two p{font-size:.88rem; margin:0}
.flag.good{color:var(--good); background:var(--good-soft)}
.commit-lead{font-weight:600; font-size:.9rem; margin:14px 0 4px; color:var(--ink)}
.rlist{margin-block:4px 12px}
.rrow{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; margin-block:6px}
.rrow .ti{flex:1 1 120px; width:auto}
.rrow .ti.grow{flex:3 1 200px}
.rrow .rdel{flex:0 0 auto; width:36px; height:39px; border:1px solid var(--line-strong); background:var(--card); color:var(--muted); border-radius:8px; cursor:pointer; font-size:1.15rem; line-height:1}
.rrow .rdel:hover{border-color:var(--warn); color:var(--warn)}
.rrow .rdetails{flex:1 1 100%; min-height:44px; font-family:inherit; font-size:.9rem; color:var(--ink); background:var(--card); border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; resize:vertical}
.rrow .rdetails:focus,.rrow .ti:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.btn.small{padding:7px 13px; font-size:.82rem; margin-block-start:2px}
.pf-note{color:var(--muted)}
.refnote{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-block:12px}
.refnote ul{margin:5px 0 0; padding-inline-start:18px}
.refnote li{font-size:.85rem; color:var(--muted); margin-block:4px}

/* --- site integration --- */
.sitebar{background:var(--navy); color:#fff; font-size:.85rem}
.sitebar .row2{display:flex; align-items:center; gap:16px; padding-block:9px; flex-wrap:wrap}
.sitebar a{color:#cddcf0; font-weight:600; text-decoration:none}
.sitebar a:hover{color:#fff; text-decoration:underline}
.sitebar .sep{margin-inline-start:auto; display:flex; gap:16px; flex-wrap:wrap}
.sitefoot{background:var(--blue-soft); border-block-start:1px solid var(--line); padding-block:34px; text-align:center}
.sitefoot h3{margin-block-end:.3em}
.sitefoot p{color:var(--muted); max-width:56ch; margin-inline:auto}
.sitefoot .acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-block-start:16px}
.sitefoot .acts a{display:inline-block; font-weight:600; font-size:.92rem; padding:11px 20px;
  border-radius:10px; text-decoration:none; border:1.5px solid transparent}
.sitefoot .acts a.p{background:var(--navy); color:#fff}
.sitefoot .acts a.p:hover{background:var(--blue)}
.sitefoot .acts a.g{border-color:var(--line-strong); color:var(--navy); background:var(--card)}
.sitefoot .acts a.g:hover{border-color:var(--blue); color:var(--blue)}
@media print{.sitebar,.sitefoot{display:none}}