/* ============ FLAGSHIP LAYER — writing-chapter engine styles ============ */
:root{ --pcCol:#B3261E; --impCol:#1D6FB8; --trapCol:#B45309; --examCol:#157347; --ink2:#40506B; }
#mfw{display:grid; grid-template-columns:250px 1fr; gap:26px; max-width:1180px; margin:0 auto; padding:18px 20px 80px;}
@media(max-width:900px){ #mfw{grid-template-columns:1fr;} .mfw-rail{position:static; display:flex; flex-wrap:wrap; gap:6px; max-height:none; padding:10px; } .mfw-phase{flex-basis:100%;} }

/* rail */
.mfw-rail{position:sticky; top:12px; align-self:start; background:#FCFDFE; border:1px solid var(--line,#D8DEE9); border-radius:14px; padding:14px 12px; max-height:calc(100vh - 40px); overflow:auto;}
.mfw-phase{font:700 10.5px/1 "IBM Plex Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#7A8AA5; margin:14px 4px 6px;}
.mfw-phase:first-child{margin-top:0;}
.mfw-navb{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:1px solid transparent; background:none; border-radius:9px; padding:7px 9px; cursor:pointer; font:500 13.5px/1.2 "IBM Plex Sans",sans-serif; color:var(--ink2);}
.mfw-navb:hover{background:#EEF2F8;}
.mfw-navb.cur{background:#21356B; color:#fff;}
.mfw-navb.done .lb::after{content:" ✓"; color:#2E7D4F; font-weight:700;}
.mfw-navb.cur.done .lb::after{color:#9FE3BC;}
.mfw-navb.part .lb::after{content:" ◐"; color:var(--trapCol);}
.mfw-navb .ic{flex:0 0 auto;} .mfw-navb .lb{flex:1;} .mfw-navb .tm{font-size:11px; color:#9AA7BD;}
.mfw-navb.cur .tm{color:#C8D2E8;}
.mfw-teachb{border-top:1px dashed var(--line,#D8DEE9); margin-top:12px; padding-top:12px; border-radius:0 0 9px 9px;}

/* main */
.mfw-main{min-width:0;}
.mfw-main h1{font-family:Spectral,serif; font-size:30px; margin:4px 0 10px; color:#1E2C48;}
.mfw-main h2{font-family:Spectral,serif; font-size:21px; margin:22px 0 8px;}
.lede{font-size:15px; color:#4A5A75; line-height:1.65; margin:0 0 16px; max-width:72ch;}
.mfw-alerts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.mfw-alert{border:1px solid #EAC98F; background:#FFF7E8; color:#7A5A1E; border-radius:999px; padding:6px 13px; font:600 12.5px/1 "IBM Plex Sans",sans-serif; cursor:pointer;}
.mfw-hero{background:linear-gradient(135deg,#21356B,#2C4A8F); color:#fff; border-radius:16px; padding:26px 28px; margin-bottom:18px;}
.mfw-hero h1{color:#fff; margin:0 0 4px;}
.mfw-hero .sub{color:#C8D2E8; margin:0 0 14px; font-size:15.5px;}
.mfw-hero .obj{font-size:13.5px; line-height:1.6; margin:6px 0; color:#E7ECF7;}
.mfw-hero .obj.exam{border-left:3px solid #6FCF97; padding-left:10px;}
.mfw-journey{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 16px;}
.jstep{border:1px solid var(--line,#D8DEE9); background:#fff; border-radius:999px; padding:6px 12px; font:600 12.5px/1 "IBM Plex Sans",sans-serif; color:var(--ink2);}
.mfw-continue h2{margin-top:0;}
.mfw-cta{border:0; background:#157347; color:#fff; font:700 15px/1 "IBM Plex Sans",sans-serif; padding:13px 22px; border-radius:11px; cursor:pointer; margin:8px 0;}
.mfw-cta:hover{background:#0E5C37;} .mfw-cta:disabled{opacity:.55; cursor:default;}
.mfw-cta.ghost{background:#fff; color:#21356B; border:1.5px solid #21356B;}
.mfw-warn{color:#8A4B08; background:#FFF7E8; border:1px solid #EAC98F; border-radius:9px; padding:8px 12px; font-size:13px;}
.mfw-card{background:#fff; border:1px solid var(--line,#D8DEE9); border-radius:13px; padding:16px 18px; margin:12px 0; box-shadow:0 1px 4px rgba(20,35,70,.05);}
.mfw-minibar{font:600 13px/1.4 "IBM Plex Sans",sans-serif; color:var(--ink2); background:#EEF2F8; border-radius:8px; padding:8px 12px; margin:10px 0;}
.mfw-disc{font-size:11.5px; color:#7A8AA5; line-height:1.5; margin:10px 0 0;}
.backlink{background:none; border:0; color:#21356B; font:600 13px/1 "IBM Plex Sans",sans-serif; cursor:pointer; padding:4px 0; margin-bottom:6px;}

/* details blocks */
details.mfw-block,details.mfw-lesson,details.mfw-model,details.mfw-legacy{background:#fff; border:1px solid var(--line,#D8DEE9); border-radius:12px; margin:10px 0; overflow:hidden;}
details.mfw-block>summary,details.mfw-lesson>summary,details.mfw-model>summary,details.mfw-legacy>summary{cursor:pointer; padding:13px 16px; font:600 14.5px/1.35 "IBM Plex Sans",sans-serif; color:#1E2C48; list-style:none;}
details>summary::-webkit-details-marker{display:none;}
details.mfw-block>summary::before,details.mfw-lesson>summary::before,details.mfw-model>summary::before,details.mfw-legacy>summary::before{content:"▸ "; color:#8DA0C0;}
details[open]>summary::before{content:"▾ ";}
details.mfw-block>*:not(summary),details.mfw-lesson .lesson-body,details.mfw-model .model-body{padding:2px 16px 16px;}
details.mfw-legacy>div{padding:4px 16px 16px;}
.mnote{font-weight:500; color:#8DA0C0; font-size:12px;}
details.mfw-lesson.passed>summary{color:#2E7D4F;}
.mfw-lesson .ln{display:inline-block; min-width:22px; height:22px; border-radius:6px; background:#21356B; color:#fff; text-align:center; line-height:22px; font-size:12px; margin-right:6px;}
.passmark{color:#2E7D4F; font-weight:700;} .rwneed{color:#B3261E; font-weight:700; font-size:12px;}

/* chips */
.chipbar{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 14px;}
.chip{border:1px solid var(--line,#D8DEE9); background:#fff; border-radius:999px; padding:7px 13px; font:600 12.5px/1.3 "IBM Plex Sans",sans-serif; color:var(--ink2); cursor:pointer; text-align:left;}
.chip.on{background:#21356B; border-color:#21356B; color:#fff;}

/* MCQ */
.mcq{background:#fff; border:1px solid var(--line,#D8DEE9); border-radius:12px; padding:14px 16px; margin:10px 0;}
.mcq-q{font-family:Spectral,serif; font-size:16.5px; line-height:1.55; margin-bottom:10px;}
.mcq-opts{display:flex; flex-wrap:wrap; gap:8px;}
.mcq-opt{border:1px solid var(--line,#D8DEE9); background:#FCFDFE; border-radius:9px; padding:9px 15px; font:500 14.5px/1.3 Spectral,serif; cursor:pointer; min-height:44px;}
.mcq-opt:hover{border-color:#21356B;}
.mcq-opt.ok{background:#E7F5EC; border-color:#9CD3B2; color:#1D6B40; font-weight:700;}
.mcq-opt.bad{background:#FBECEA; border-color:#EEC4BE; color:#B3261E;}
.mcq-ex{margin-top:10px; font-size:13.5px; color:#7A3B33; background:#FBF1EF; border-radius:8px; padding:8px 12px; line-height:1.5;}
.mcq-ex.good{color:#1D6B40; background:#EFF8F2;}
.mfw-next{margin-top:10px; border:0; background:#21356B; color:#fff; border-radius:9px; padding:9px 18px; font:600 13.5px/1 "IBM Plex Sans",sans-serif; cursor:pointer;}
.checkpoint{border-top:1px dashed var(--line,#D8DEE9); margin-top:14px; padding-top:10px;}
.checkpoint h4{margin:0 0 4px; font:700 12px/1 "IBM Plex Sans",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#7A8AA5;}

/* lessons */
.lesson-en{font-size:15px; line-height:1.7; color:#33415C; max-width:74ch;}
.exline{display:grid; gap:2px; border-left:3px solid #C9D3E4; padding:6px 12px; margin:8px 0; background:#FBFCFE; border-radius:0 8px 8px 0;}
.exline .fr{font-family:Spectral,serif; font-size:16px; color:#16233F;}
.exline .en{font-size:12.5px; color:#7A8AA5;}
.exline .why{font-size:12.5px; color:#1D6FB8;}
.ctxbox{background:#F2F6FC; border-radius:9px; padding:10px 14px; font-size:13.5px; line-height:1.6; margin:10px 0;}
.wrongright{display:grid; gap:6px; margin:10px 0;}
.wr{border-radius:9px; padding:9px 13px; font-family:Spectral,serif; font-size:15px; line-height:1.55;}
.wr .tag{font:700 10.5px/1 "IBM Plex Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; margin-right:8px; opacity:.75;}
.wr.bad{background:#FBECEA; color:#7A2A22;}
.wr.good{background:#E9F6EE; color:#1D5B38;}
.wr.fix{background:#FFF7E8; color:#6E4E14; font-family:"IBM Plex Sans",sans-serif; font-size:13.5px;}
.wr.en{background:#F4F6FA; color:#5A6A85; font-family:"IBM Plex Sans",sans-serif; font-size:13px;}
.wr.locked{opacity:.9;}
.exambox{background:#EDF7F1; border-left:3px solid var(--examCol); border-radius:0 9px 9px 0; padding:9px 13px; font-size:13.5px; line-height:1.6; margin:10px 0;}
.why{font-size:13.5px; color:#4A5A75; line-height:1.6;}
.why.good{color:#1D6B40;}
.recyc{font-size:12.5px; color:#6E4E14; background:#FFFAF0; border-radius:8px; padding:7px 11px;}

/* examples */
.contrast{display:grid; grid-template-columns:110px 1fr 1fr; gap:8px; align-items:start; border-top:1px solid #EEF1F6; padding:10px 0;}
@media(max-width:760px){ .contrast{grid-template-columns:1fr;} }
.contrast .cv{font:700 13px/1.3 "IBM Plex Sans",sans-serif; color:#40506B; padding-top:4px;}
.contrast .side{border-radius:9px; padding:8px 11px; display:grid; gap:2px;}
.contrast .side.pc{background:#FBF0EF; border-left:3px solid var(--pcCol);}
.contrast .side.imp{background:#EFF5FB; border-left:3px solid var(--impCol);}
.contrast .tt{font:800 10px/1 "IBM Plex Sans",sans-serif; letter-spacing:.1em;}
.contrast .side.pc .tt{color:var(--pcCol);} .contrast .side.imp .tt{color:var(--impCol);}
.contrast .fr{font-family:Spectral,serif; font-size:15px;}
.contrast .en{font-size:12px; color:#7A8AA5;}
.contrast .point{grid-column:1/-1; font-size:12.5px; color:#4A5A75; background:#F7F9FC; border-radius:7px; padding:6px 10px;}
.upgrade{border:1px solid var(--line,#D8DEE9); border-radius:11px; padding:12px 14px; margin:10px 0; display:grid; gap:6px;}
.upgrade .codes code{background:#EEF2F8; border-radius:5px; padding:2px 6px; font-size:11px; margin-left:4px;}
.fr.big{font-family:Spectral,serif; font-size:16.5px; line-height:1.75; color:#16233F;}
.en{font-size:13px; color:#7A8AA5; line-height:1.6;}
.prompt{background:#F2F6FC; border-left:3px solid #21356B; border-radius:0 9px 9px 0; padding:10px 14px; font-size:14px; line-height:1.6; margin:10px 0;}
.bandtag{font:800 10.5px/1 "IBM Plex Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; border-radius:5px; padding:4px 8px; margin-right:6px;}
.bandtag.weak{background:#FBECEA; color:#B3261E;} .bandtag.developing{background:#FFF3DF; color:#9A6A00;}
.bandtag.strong{background:#EAF3FB; color:#1D6FB8;} .bandtag.exam-ready{background:#E7F5EC; color:#1D6B40;}
.annlist{margin:8px 0; padding-left:18px; font-size:13.5px; line-height:1.7; color:#4A5A75;}
.gradecmp{width:100%; border-collapse:collapse; font-size:12.5px; margin:14px 0;}
.gradecmp th,.gradecmp td{border:1px solid #E3E8F0; padding:7px 9px; text-align:left; vertical-align:top;}
.gradecmp thead th{background:#21356B; color:#fff;}
.gradecmp tbody th{background:#F2F6FC; font-weight:700; width:130px;}

/* annotations */
.annpara{font-family:Spectral,serif; font-size:16.5px; line-height:2.1; background:#fff; border:1px solid var(--line,#D8DEE9); border-radius:11px; padding:16px 18px; margin:10px 0;}
.ann{position:relative; border-bottom:2px solid; cursor:help; border-radius:2px;}
.ann-pc{border-color:var(--pcCol); background:#FBF0EF;}
.ann-imp{border-color:var(--impCol); background:#EFF5FB;}
.ann-bonus{border-color:#7A4FB8; background:#F4EFFB;}
.ann-note1{border-color:#B45309;}
.ann .ann-mark{font:800 8.5px/1 "IBM Plex Sans",sans-serif; vertical-align:super; margin-left:2px; letter-spacing:.04em;}
.ann-pc .ann-mark{color:var(--pcCol);} .ann-imp .ann-mark{color:var(--impCol);} .ann-bonus .ann-mark,.ann-note .ann-mark{color:#7A4FB8;}
.ann .ann-note{display:none; position:absolute; left:0; bottom:calc(100% + 6px); z-index:60; width:min(320px,74vw); background:#1E2C48; color:#fff; font:400 12.5px/1.5 "IBM Plex Sans",sans-serif; border-radius:8px; padding:9px 12px; box-shadow:0 8px 26px rgba(10,20,45,.3);}
.ann:hover .ann-note,.ann:focus .ann-note{display:block;}

/* models */
.layermap{display:grid; gap:8px; margin:10px 0;}
.lay{border-radius:10px; padding:11px 14px; font-size:13.5px; line-height:1.55;}
.lay.l1{background:#EFF5FB; border-left:4px solid var(--impCol);}
.lay.l2{background:#FBF0EF; border-left:4px solid var(--pcCol);}
.lay.l3{background:#F7F3FB; border-left:4px solid #7A4FB8;}
.lay.l4{background:#EDF7F1; border-left:4px solid var(--examCol);}

/* mistakes */
.mcode{background:#1E2C48; color:#fff; border-radius:5px; padding:3px 8px; font-size:11.5px; margin-right:6px;}
details.mistake>summary{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}

/* drills */
.stagecard{display:grid; grid-template-columns:70px 1fr 130px; grid-template-areas:"n l st" "n d st" "n bar st"; gap:2px 14px; align-items:center; width:100%; text-align:left; background:#fff; border:1px solid var(--line,#D8DEE9); border-radius:13px; padding:13px 16px; margin:8px 0; cursor:pointer;}
@media(max-width:700px){ .stagecard{grid-template-columns:56px 1fr; grid-template-areas:"n l" "n d" "n bar" "n st";} }
.stagecard:hover{border-color:#21356B;}
.stagecard.locked{opacity:.6; cursor:not-allowed;}
.stagecard .sn{grid-area:n; font:800 13px/1.2 "IBM Plex Sans",sans-serif; color:#21356B; align-self:start;}
.stagecard .sl{grid-area:l; font:700 15px/1.3 "IBM Plex Sans",sans-serif; color:#1E2C48;}
.stagecard .sd{grid-area:d; font-size:12.5px; color:#7A8AA5;}
.stagecard .sbar{grid-area:bar; height:6px; border-radius:4px; background:#EEF2F8; overflow:hidden; margin-top:4px;}
.stagecard .sbar span{display:block; height:100%; background:#157347;}
.stagecard .sst{grid-area:st; font-size:12px; color:#4A5A75; text-align:right;}
.stagecard .sdiff{position:absolute;} /* replaced by inline badge */
.sdiff{font:700 10px/1 "IBM Plex Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; border-radius:5px; padding:3px 7px; background:#EEF2F8; color:#40506B; justify-self:start;}
.sdiff.inline{margin-left:8px; vertical-align:middle;}
.diff-foundation .sn{color:#1D6FB8;} .diff-exam .sn{color:#B3261E;}

/* cloze / textareas / tasks */
select.clz{font:500 14.5px/1.3 Spectral,serif; border:1.5px solid #C9D3E4; border-radius:7px; padding:4px 6px; margin:0 3px; background:#FCFDFE; max-width:230px;}
select.clz.ok{border-color:#2E7D4F; background:#E7F5EC;}
select.clz.bad{border-color:#B3261E; background:#FBECEA;}
.mfw-ta{width:100%; box-sizing:border-box; border:1.5px solid #C9D3E4; border-radius:10px; padding:12px 14px; font:400 16px/1.7 Spectral,serif; color:#16233F; background:#fff; resize:vertical;}
.mfw-ta:focus{outline:2px solid #21356B; outline-offset:1px;}
.mfw-ta.plan{background:#FBFCFE; font-size:14px; font-family:"IBM Plex Sans",sans-serif;}
.wc{font:600 12px/1 "IBM Plex Sans",sans-serif; color:#7A8AA5; margin:6px 0 10px; text-align:right;}
.wc.warn{color:#B3261E;}
.selfcheck{display:grid; gap:5px; background:#F7F9FC; border-radius:9px; padding:10px 13px; margin:8px 0; font-size:13px;}
.selfcheck label{display:flex; gap:8px; align-items:flex-start; line-height:1.45; cursor:pointer;}
.vocabkit code{background:#EFF5FB; border-radius:5px; padding:2px 7px; font-size:12.5px; margin:0 3px 3px 0; display:inline-block;}
.lvl{display:inline-block; background:#157347; color:#fff; border-radius:6px; font:800 11px/1 "IBM Plex Sans",sans-serif; padding:4px 7px; margin-right:6px;}
.skill{font-size:13px; color:#4A5A75;}

/* timed room */
.timedroom{border:2px solid #21356B; border-radius:14px; padding:16px 18px; margin:14px 0; background:#fff;}
.timedroom.mock{border-color:#B3261E;}
.troom-head{display:flex; gap:16px; align-items:center; flex-wrap:wrap; position:sticky; top:0; background:#fff; padding:6px 0; z-index:5;}
.tclock{font:800 26px/1 "IBM Plex Mono","IBM Plex Sans",monospace; color:#21356B;}
.tclock.low{color:#B3261E;}
.tphase{font:600 12px/1.4 "IBM Plex Sans",sans-serif; color:#157347; flex:1;}
.twc{font:600 13px/1 "IBM Plex Sans",sans-serif; color:#7A8AA5;}
.twc.warn{color:#B3261E;}
.troom-ta{min-height:260px;}
.troom-controls{display:flex; gap:10px; flex-wrap:wrap;}

/* feedback / criteria */
.critgrid{display:grid; gap:8px; margin:12px 0;}
.crit{display:grid; grid-template-columns:170px 1fr 56px; grid-template-areas:"n b s" "note note note"; gap:3px 10px; align-items:center; font-size:13px;}
@media(max-width:640px){ .crit{grid-template-columns:1fr 56px; grid-template-areas:"n s" "b b" "note note";} }
.crit .cn{grid-area:n; font-weight:600; color:#33415C;}
.crit .cb{grid-area:b; height:8px; border-radius:5px; background:#EEF2F8; overflow:hidden;}
.crit .cb span{display:block; height:100%; background:linear-gradient(90deg,#1D6FB8,#157347);}
.crit .cs{grid-area:s; font-weight:700; text-align:right;}
.crit .cnote{grid-area:note; color:#7A8AA5; font-size:12px;}
.faultlist{margin:6px 0; padding-left:18px; font-size:13.5px; line-height:1.8;}
.faultlist code{background:#1E2C48; color:#fff; border-radius:4px; padding:1px 6px; font-size:11px;}

/* rewrite / ledger / progress */
.rwgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0;}
@media(max-width:820px){ .rwgrid{grid-template-columns:1fr;} }
.rwcol{background:#fff; border:1px solid var(--line,#D8DEE9); border-radius:12px; padding:14px 16px;}
.rwcol h3,.rwcol h4{margin:0 0 8px;}
.fr.locked{background:#F7F8FA; border-radius:8px; padding:10px 12px; color:#4A5A75;}
.fr.good{background:#F3FAF5; border-radius:8px; padding:10px 12px;}
.heat{display:grid; gap:6px; margin:12px 0;}
.heatbar{display:grid; grid-template-columns:110px 1fr 34px; gap:10px; align-items:center; border:0; background:none; cursor:pointer; text-align:left;}
.heatbar .hb{height:12px; background:#F1F3F8; border-radius:6px; overflow:hidden;}
.heatbar .hb span{display:block; height:100%; background:#B3261E;}
.ledrow{position:relative;}
.ledrow .lstat{font:700 10.5px/1 "IBM Plex Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; border-radius:5px; padding:3px 8px; background:#EEF2F8; color:#40506B;}
.ledrow.status-new .lstat{background:#FBECEA; color:#B3261E;}
.ledrow.status-improving .lstat{background:#FFF3DF; color:#9A6A00;}
.ledrow.status-mastered .lstat{background:#E7F5EC; color:#1D6B40;}
.readycard{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center;}
@media(max-width:600px){ .readycard{grid-template-columns:1fr;} }
.readycard .rscore{font:800 44px/1 Spectral,serif; color:#21356B;}
.readycard .rscore span{font-size:18px; color:#8DA0C0;}
.readycard.mastered{border-color:#2E7D4F; box-shadow:0 0 0 3px #E7F5EC;}
.readycard .badge{margin-top:8px; font:700 14px/1.3 "IBM Plex Sans",sans-serif; color:#1D6B40;}
.skillgrid{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0;}
.skillchip{border-radius:999px; padding:6px 12px; font:600 12px/1.3 "IBM Plex Sans",sans-serif;}
.skillchip.ok{background:#E7F5EC; color:#1D6B40;}
.skillchip.bad{background:#FBECEA; color:#B3261E;}
.pathway{background:#F2F6FC; border-radius:9px; padding:10px 14px; font-size:13.5px; line-height:1.6;}
.dl-links a{color:#21356B; font-weight:600;}

/* legacy content wrapper — the ported chapter panels keep their own look */
.legacy-wrap{overflow-x:auto;}
.legacy-wrap .panel{display:block !important;}

/* print mode */
body.mfw-print{background:#fff;}
body.mfw-print .mfp-btn,body.mfw-print .mfw-rail{display:none !important;}
@media print{
  .mfw-rail,.mfp-btn,.mfw-alerts,.mfw-cta,.mfw-next{display:none !important;}
  #mfw{display:block;}
  .mfw-card,details.mfw-block{break-inside:avoid;}
}

/* contrast side variants beyond PC/IMP (Ch8+: FLAT→PRESSE, Ch9: FAIBLE→FORT) */
.contrast .side.flat{background:#F4F6FA; border-left:3px solid #9AA7BD;}
.contrast .side.flat .tt{color:#7A8AA5;}
.contrast .side.press{background:#EDF7F1; border-left:3px solid #157347;}
.contrast .side.press .tt{color:#157347;}