*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#F6F1E9; --surface:#FFFDF9; --surface-2:#EFE7DA; --surface-3:#FBF7F0;
  --ink:#1B2433; --ink-2:#4A5466; --ink-3:#808897;
  --line:#E2D8C8; --line-2:#CFC2AE;
  --accent:#C2502E; --accent-ink:#9C3B1E; --accent-soft:#F8E1D6;
  --sky:#1F4E79; --sky-soft:#DDE8F2;
  --gold:#A87412; --gold-soft:#F5E7C8;
  --done:#2F7A55; --done-soft:#DAEDE2;
  --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(27,36,51,.05), 0 16px 34px -20px rgba(27,36,51,.30);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11151C; --surface:#181E27; --surface-2:#212833; --surface-3:#151A22;
    --ink:#EEF0F3; --ink-2:#B3BAC6; --ink-3:#7F8897;
    --line:#2A323E; --line-2:#3A4351;
    --accent:#F08A62; --accent-ink:#F7AA8B; --accent-soft:#3A2219;
    --sky:#8DB8E0; --sky-soft:#1A2A3A;
    --gold:#E2B355; --gold-soft:#332915;
    --done:#6CC596; --done-soft:#16301F;
    --on-accent:#1A0F0A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 36px -22px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --paper:#11151C; --surface:#181E27; --surface-2:#212833; --surface-3:#151A22;
  --ink:#EEF0F3; --ink-2:#B3BAC6; --ink-3:#7F8897;
  --line:#2A323E; --line-2:#3A4351;
  --accent:#F08A62; --accent-ink:#F7AA8B; --accent-soft:#3A2219;
  --sky:#8DB8E0; --sky-soft:#1A2A3A;
  --gold:#E2B355; --gold-soft:#332915;
  --done:#6CC596; --done-soft:#16301F;
  --on-accent:#1A0F0A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 36px -22px rgba(0,0,0,.75);
}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:500; margin:0; letter-spacing:-.015em; text-wrap:balance}
p{margin:0 0 .9em}
a{color:var(--accent-ink)}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:none; background:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.hidden{display:none !important}

/* ---------- shell ---------- */
.wrap{max-width:1200px; margin:0 auto; padding:0 24px 100px}
@media (max-width:600px){ .wrap{padding:0 16px 80px} }
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0 16px; border-bottom:1px solid var(--line); margin-bottom:30px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:38px; height:38px; border-radius:12px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; flex:none}
.brand-name{font-family:"Fraunces",serif; font-size:20px; font-weight:600; line-height:1.1}
.brand-sub{font-size:12px; color:var(--ink-3)}
.nav{display:flex; gap:4px; flex-wrap:wrap}
.nav button{padding:8px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-2)}
.nav button:hover{background:var(--surface-2)}
.nav button.on{background:var(--ink); color:var(--paper)}
.who{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2)}
.linkish{padding:0; font-size:13px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px}
.linkish:hover{color:var(--accent)}
.save-dot{width:8px; height:8px; border-radius:50%; background:var(--done); display:inline-block}
.save-dot.busy{background:var(--gold)}
.save-dot.off{background:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:12px; font-weight:700; font-size:15px; background:var(--accent); color:var(--on-accent); transition:transform .15s, background .15s}
.btn:hover{background:var(--accent-ink)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.small{padding:8px 14px; font-size:13.5px; border-radius:10px}
.btn[disabled]{opacity:.5; cursor:default}

/* ---------- login ---------- */
.login{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr}
@media (max-width:860px){ .login{grid-template-columns:1fr} .login-art{min-height:240px} }
.login-art{background:var(--sky); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.login-art h1{font-size:clamp(34px,5vw,56px); line-height:1.05; max-width:12ch; position:relative}
.login-art h1 em{font-style:italic; color:#FFC9A8}
.login-art p{max-width:44ch; opacity:.85; position:relative}
.login-art svg.route{position:absolute; right:-40px; top:90px; width:min(460px,80%); opacity:.25}
.login-form{display:flex; align-items:center; justify-content:center; padding:40px 24px}
.login-card{width:100%; max-width:400px}
.login-card h2{font-size:28px; margin-bottom:6px}
.login-card .hint{color:var(--ink-2); font-size:14.5px; margin-bottom:24px}
.field{display:block; margin-bottom:16px}
.field span{display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--ink-2)}
.input,textarea.input{width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); font-size:16px}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea.input{min-height:92px; resize:vertical; line-height:1.5}
.err{color:var(--accent-ink); font-size:14px; min-height:1.4em; margin:4px 0 10px}
.login-foot{margin-top:28px; font-size:13px; color:var(--ink-3)}

/* ---------- roadmap ---------- */
.hero{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:28px}
@media (max-width:760px){ .hero{grid-template-columns:1fr} }
.hero h1{font-size:clamp(28px,4vw,42px); line-height:1.1; margin-bottom:10px}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero p{color:var(--ink-2); max-width:62ch; margin:0}
.ring{display:flex; align-items:center; gap:14px}
.ring svg{transform:rotate(-90deg); flex:none}
.ring-num{font-family:"Fraunces",serif; font-size:32px; font-weight:600; line-height:1}
.ring-lab{font-size:12.5px; color:var(--ink-3)}

.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:44px}
@media (max-width:900px){ .phases{grid-template-columns:1fr} }
.phase{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); position:relative}
.phase-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:4px}
.phase-n{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.phase h3{font-size:21px; margin:2px 0 4px}
.phase .when{font-size:13px; color:var(--ink-3); margin-bottom:14px}
.pmods{display:flex; flex-direction:column; gap:6px}
.pmod{display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:10px 12px; border-radius:12px; background:var(--surface-3); border:1px solid var(--line)}
.pmod:hover{border-color:var(--line-2); background:var(--surface-2)}
.pmod-ic{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; font-weight:800; background:var(--surface-2); color:var(--ink-2)}
.pmod.done .pmod-ic{background:var(--done); color:#fff}
.pmod.cur .pmod-ic{background:var(--accent); color:var(--on-accent)}
.pmod-t{font-weight:700; font-size:14.5px; line-height:1.3}
.pmod-s{font-size:12px; color:var(--ink-3)}
.bar{height:5px; border-radius:5px; background:var(--surface-2); overflow:hidden; margin-top:5px}
.bar i{display:block; height:100%; background:var(--done); border-radius:5px}
.jalon{display:flex; gap:10px; align-items:center; margin-top:10px; padding:10px 12px; border-radius:12px; border:1px dashed var(--line-2); font-size:13.5px; color:var(--ink-2)}
.jalon b{color:var(--ink)}

/* ---------- module view ---------- */
.layout{display:grid; grid-template-columns:270px 1fr; gap:50px; align-items:start}
@media (max-width:920px){ .layout{grid-template-columns:minmax(0,1fr); gap:22px} .side{position:static !important} }
.side{position:sticky; top:20px; min-width:0}
.layout > *{min-width:0}
.side .back{margin-bottom:16px}
.side h4{font-size:19px; margin:4px 0 14px; line-height:1.25}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.steps button{display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; padding:8px 10px; border-radius:10px; font-size:14px; color:var(--ink-2)}
.steps button:hover{background:var(--surface-2)}
.steps button.on{background:var(--surface); color:var(--ink); font-weight:700; box-shadow:var(--shadow)}
.steps .dot{width:18px; height:18px; flex:none; border-radius:50%; border:2px solid var(--line-2); margin-top:2px; display:grid; place-items:center}
.steps .done .dot{background:var(--done); border-color:var(--done)}
.steps .done .dot::after{content:""; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
@media (max-width:920px){ .steps{flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:6px} .steps button{white-space:nowrap} }

.lesson{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,4vw,48px); box-shadow:var(--shadow); min-width:0}
.lesson-head{margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.lesson-head h2{font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin:6px 0 8px}
.lesson-head .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-3)}
.body{max-width:70ch}
.body h3{font-size:22px; margin:30px 0 10px}
.body h4{font-family:"Manrope",sans-serif; font-size:15px; font-weight:800; margin:22px 0 8px}
.body ul,.body ol{padding-left:1.25em; margin:0 0 1em}
.body li{margin:.3em 0}
.body li::marker{color:var(--accent)}
.body strong{font-weight:800}
.body .lead{font-size:18px; color:var(--ink-2)}

.callout{border-radius:14px; padding:14px 18px; margin:18px 0; background:var(--surface-2); border-left:4px solid var(--ink-3)}
.callout p:last-child{margin:0}
.callout .lab{display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px}
.callout.tip{background:var(--gold-soft); border-color:var(--gold)} .callout.tip .lab{color:var(--gold)}
.callout.key{background:var(--sky-soft); border-color:var(--sky)} .callout.key .lab{color:var(--sky)}
.callout.todo{background:var(--accent-soft); border-color:var(--accent)} .callout.todo .lab{color:var(--accent-ink)}
.quote{font-family:"Fraunces",serif; font-style:italic; font-size:21px; line-height:1.4; border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin:22px 0; color:var(--ink)}
.quote small{display:block; font-family:"Manrope",sans-serif; font-style:normal; font-size:13px; color:var(--ink-3); margin-top:6px}

.tbl-wrap{overflow-x:auto; margin:14px 0 20px; border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--surface-2); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap}

.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:12px 0 18px}
.person{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface-3)}
.person b{display:block}
.person span{font-size:13px; color:var(--ink-3)}

/* scripts */
.script{border:1px solid var(--line); border-radius:14px; background:var(--surface-3); margin:12px 0; overflow:hidden}
.script-h{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.script-t{font-size:13px; font-weight:800}
.script-tag{font-size:11.5px; color:var(--ink-3); font-weight:600}
.script-b{padding:12px 16px; font-size:15px; white-space:pre-line}
.copy{font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); flex:none}
.copy:hover{border-color:var(--accent); color:var(--accent-ink)}
.copy.ok{background:var(--done); color:#fff; border-color:var(--done)}

/* flow diagram */
.flow{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:18px 0 24px; max-width:560px}
.flow .node{border:2px solid var(--accent); border-radius:22px; padding:12px 14px; text-align:center; background:var(--surface); font-size:14.5px; line-height:1.4}
.flow .node i{display:block; font-size:12px; font-style:normal; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:3px}
.flow .top{grid-column:1 / -1; justify-self:center; width:min(300px,100%)}
.flow .arr{text-align:center; color:var(--ink-3); font-size:20px; line-height:1}
.flow .arr.split{grid-column:1 / -1; display:flex; justify-content:space-around}

/* checklist */
.checks{margin:26px 0 8px; border:1px solid var(--line); border-radius:16px; padding:6px 6px; background:var(--surface-3)}
.checks-h{display:flex; justify-content:space-between; align-items:center; padding:10px 12px 6px}
.checks-h b{font-size:15px}
.checks-h span{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.check{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:15px}
.check:hover{background:var(--surface-2)}
.check input{appearance:none; -webkit-appearance:none; width:22px; height:22px; flex:none; border:2px solid var(--line-2); border-radius:7px; margin:1px 0 0; background:var(--surface); display:grid; place-items:center; cursor:pointer}
.check input:checked{background:var(--done); border-color:var(--done)}
.check input:checked::after{content:""; width:9px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
.check input:checked + span{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2)}

/* form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 16px}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
.form-grid .full{grid-column:1 / -1}
.form-note{font-size:13px; color:var(--ink-3); margin:-4px 0 14px}

/* engagement */
.engage{margin:30px 0 4px; border-radius:18px; padding:22px; background:var(--sky); color:#fff}
.engage h3{color:#fff; margin:0 0 10px; font-size:22px}
.engage ul{padding-left:1.2em; margin:0 0 16px}
.engage li::marker{color:#FFC9A8}
.engage .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.engage .input{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff; max-width:280px}
.engage .input::placeholder{color:rgba(255,255,255,.6)}
.engage .btn{background:#fff; color:var(--sky)}
.engage .signed{font-family:"Fraunces",serif; font-style:italic; font-size:22px}
.engage .signed small{display:block; font-family:"Manrope",sans-serif; font-style:normal; font-size:13px; opacity:.8}

.lesson-foot .btn{white-space:normal}
.lesson-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); align-items:center}
.done-badge{display:inline-flex; align-items:center; gap:8px; color:var(--done); font-weight:700; font-size:14px}

/* scripts page & admin */
.page-h{margin-bottom:24px}
.page-h h1{font-size:clamp(28px,4vw,40px); margin-bottom:6px}
.page-h p{color:var(--ink-2); margin:0; max-width:64ch}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 8px}
.chip{padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); font-size:13.5px; font-weight:600; background:var(--surface)}
.chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.cols{columns:2 380px; column-gap:18px}
.cols .script{break-inside:avoid; margin:0 0 16px}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{font-size:20px; margin-bottom:2px}
.card .sub{font-size:13px; color:var(--ink-3); margin-bottom:12px}
.mini-mods{display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin:10px 0 12px}
.mini-mods div{font-size:11px; text-align:center; color:var(--ink-3)}
.mini-mods .bar{margin:0 0 3px}
.kv{font-size:14px; margin:4px 0}
.kv b{font-weight:700}
details.form-ans{margin-top:10px; border-top:1px solid var(--line); padding-top:10px}
details.form-ans summary{cursor:pointer; font-weight:700; font-size:14px}
details.form-ans dl{margin:10px 0 0; font-size:14px}
details.form-ans dt{font-weight:700; color:var(--ink-2); margin-top:8px; font-size:12.5px}
details.form-ans dd{margin:2px 0 0; white-space:pre-line}

.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:12px; font-size:14px; opacity:0; transition:.25s; pointer-events:none; z-index:50; max-width:calc(100% - 32px)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.foot{margin-top:60px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
@media print{ .topbar,.side,.lesson-foot,.foot,.copy{display:none !important} .layout{display:block} .lesson{box-shadow:none; border:none} }