/* ============================================================
   lesson.css —— 讲课脚本渲染器样式（学生课件 + 教师讲义）
   视觉沿用 JiaJiao 标准库：纸色、墨色、朱红点缀、细线、无阴影
   新增两种“部件色”，只用于区分两种零件（靛 / 赭）
   ============================================================ */
:root{
  --paper:#F6F3EA; --paper2:#EEE9DC; --paper3:#E5DFCF;
  --ink:#181611; --ink2:#3B372E; --mut:#8C8676;
  --acc:#C2452A; --acc-soft:rgba(194,69,42,.12);
  --a:#2D5B7A; --a-soft:rgba(45,91,122,.14);
  --b:#B06E1C; --b-soft:rgba(176,110,28,.15);
  --ok:#3D7A4C; --ok-soft:rgba(61,122,76,.12);
  --line:rgba(24,22,17,.16); --line2:rgba(24,22,17,.28);
  --sans:"PingFang SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
b,strong{font-weight:700}
.katex{font-size:1.08em}

/* ============================================================
   学生课件
   ============================================================ */
body.deck{height:100vh;overflow:hidden;font-size:clamp(13px,.95vw + .42vh,26px)}
#bar{position:fixed;top:0;left:0;right:0;height:3.2em;display:flex;align-items:center;justify-content:space-between;padding:0 2.6em;border-bottom:1px solid var(--line);background:var(--paper);z-index:20}
#bar .topic{display:flex;align-items:baseline;gap:1em}
#bar .topic b{font-size:1.05em;letter-spacing:.12em}
#bar .topic span{font-size:.72em;color:var(--mut);letter-spacing:.08em}
#bar .sec{font-size:.78em;color:var(--acc);letter-spacing:.14em}

#stage{position:fixed;top:3.2em;bottom:3.6em;left:0;right:0}
.scene{position:absolute;inset:0;padding:1.5em 2.6em .6em;display:none;flex-direction:column;gap:1em}
.scene.on{display:flex;animation:sceneIn .45s cubic-bezier(.2,.7,.3,1)}
@keyframes sceneIn{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}

.s-head{display:flex;align-items:baseline;gap:1.1em}
.s-head .no{font-family:Georgia,serif;font-style:italic;color:var(--acc);font-size:1.25em}
.s-head h1{font-size:1.95em;font-weight:800;letter-spacing:.02em;line-height:1.2}
.s-head .opt{font-size:.7em;color:var(--mut);border:1px solid var(--line2);padding:.15em .6em;letter-spacing:.1em;align-self:center}

.problem{font-family:var(--serif);font-size:1.12em;line-height:1.75;padding:.55em 1em;border-left:3px solid var(--acc);background:var(--paper2)}
.mk{padding:0 .05em;background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .5s ease,background-color .3s}
.mk.on{background-size:100% 2px}
.mk.now{background-color:var(--acc-soft)}

.s-body{flex:1;min-height:0;display:grid;gap:2.2em}
.s-body.split{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.s-body.board{grid-template-columns:minmax(0,1fr);max-width:56em}
.visual{min-height:0;display:flex;flex-direction:column;justify-content:flex-start;padding-top:.2em}
.boardcol{min-height:0;display:flex;flex-direction:column;gap:.8em}

/* 当前问题 */
.ask{display:flex;gap:.7em;align-items:flex-start;font-size:1.08em;font-weight:600;line-height:1.55;min-height:1.6em}
.ask .qmark{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--acc);color:#fff;font-size:.8em;display:flex;align-items:center;justify-content:center;margin-top:.15em;font-weight:700}
.ask .qt{display:none}
.ask .qt.on{display:block;animation:fadeUp .35s ease}
.ask.empty{visibility:hidden}

/* 板书 */
.items{display:flex;flex-direction:column;gap:.7em;overflow:hidden}
.it{line-height:1.7;display:none;position:relative}
.it.on{display:block;animation:fadeUp .4s ease}
.it.now::before{content:"";position:absolute;left:-.9em;top:.35em;bottom:.35em;width:2px;background:var(--acc)}
@keyframes fadeUp{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.it.key{border-top:1px solid var(--acc);border-bottom:1px solid var(--acc);padding:.45em .1em;font-weight:600}
.it.key b{color:var(--acc)}
.it.check{color:var(--ok);font-size:.95em}
.it.math{padding:.2em 0}
.it.math .katex-display{margin:.15em 0;text-align:left}
.it.math .katex-display>.katex{text-align:left}
.it.math .mnote{font-size:.78em;color:var(--mut);letter-spacing:.04em}
.it.steps ol{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:.15em}
.it.steps li{counter-increment:st;display:flex;gap:.8em;align-items:baseline}
.it.steps li::before{content:counter(st);font-family:Georgia,serif;font-style:italic;color:var(--mut);font-size:.85em;width:1em}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .2em}
.flow span{border:1px solid var(--line2);padding:.2em .7em;background:var(--paper)}
.flow i{font-style:normal;color:var(--acc);padding:0 .15em}
table.tb{border-collapse:collapse;width:100%;font-size:.95em}
table.tb th{font-weight:600;color:var(--mut);font-size:.82em;letter-spacing:.06em;text-align:left;padding:.35em .7em;border-bottom:1px solid var(--line2)}
table.tb td{padding:.45em .7em;border-bottom:1px solid var(--line)}
table.tb td:first-child{font-weight:600}
table.tb tr.r{display:none}
table.tb tr.r.on{display:table-row;animation:fadeUp .4s ease}

/* 输入与选择 */
.inp{display:flex;flex-wrap:wrap;gap:.6em 1.4em;align-items:center}
.inp label{display:flex;align-items:center;gap:.45em}
.inp input{font:inherit;width:5.2em;padding:.2em .4em;border:none;border-bottom:2px solid var(--ink);background:transparent;text-align:center;outline:none}
.inp input:focus{border-bottom-color:var(--acc);background:var(--acc-soft)}
.inp input.right{border-bottom-color:var(--ok);color:var(--ok)}
.inp input.wrong{border-bottom-color:var(--acc);color:var(--acc)}
.btn{font:inherit;font-size:.86em;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:.3em 1em;letter-spacing:.08em}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn:hover{opacity:.85}
.fb{width:100%;font-size:.9em;min-height:1.4em}
.fb.ok{color:var(--ok)}.fb.no{color:var(--acc)}
.hintbox{width:100%;display:flex;flex-direction:column;gap:.3em;font-size:.9em}
.hintbox div{border-left:2px solid var(--b);padding:.15em .7em;background:var(--b-soft)}
.choice{display:flex;gap:.8em}
.choice button{font:inherit;cursor:pointer;min-width:6em;padding:.35em 1.2em;border:1px solid var(--line2);background:var(--paper)}
.choice button.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.choice button.wrong{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}

/* 底栏 */
#foot{position:fixed;left:0;right:0;bottom:0;height:3.6em;display:flex;align-items:center;gap:1.2em;padding:0 2.6em 0 4.4em;font-size:.82em;color:var(--mut)}
#dots{display:flex;gap:.45em;align-items:center}
#dots i{width:.55em;height:.55em;border-radius:50%;border:1px solid var(--line2);transition:all .25s}
#dots i.done{background:var(--ink);border-color:var(--ink)}
#dots i.cur{background:var(--acc);border-color:var(--acc);transform:scale(1.25)}
#keys{letter-spacing:.06em;font-size:.9em}
#foot .sp{flex:1}
#pg{letter-spacing:.1em;color:var(--ink)}
#pg b{color:var(--acc)}
.nav{width:2.5em;height:2.5em;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;font-size:1em;color:var(--ink)}
.nav:hover{background:var(--ink);color:var(--paper)}
#link{display:flex;align-items:center;gap:.4em;font-size:.9em}
#link i{width:.55em;height:.55em;border-radius:50%;background:var(--mut);opacity:.5}
#link.on i{background:var(--ok);opacity:1}
#prog{position:fixed;left:0;bottom:0;height:2px;background:var(--acc);transition:width .4s;z-index:30}

/* 封面 */
.scene.cover{justify-content:center;padding-left:8vw;padding-right:8vw}
.cover-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:4em;align-items:center}
.cover .unit{color:var(--mut);letter-spacing:.14em;font-size:.9em;margin-bottom:1em;display:flex;align-items:center;gap:.9em}
.cover .unit::before{content:"";width:2.6em;height:1px;background:var(--acc)}
.cover h1.big{font-size:4.6em;font-weight:900;letter-spacing:.06em;line-height:1.05;margin-bottom:.6em}
.cover .goals{list-style:none;display:flex;flex-direction:column;gap:.55em;max-width:30em}
.cover .goals li{display:flex;gap:.9em;line-height:1.6}
.cover .goals li span{font-family:Georgia,serif;font-style:italic;color:var(--acc)}
.route{border-left:1px solid var(--line2);padding-left:2em;display:flex;flex-direction:column;gap:.15em}
.route h3{font-size:.75em;color:var(--mut);letter-spacing:.24em;font-weight:500;margin-bottom:.6em}
.route a{display:flex;gap:1em;align-items:baseline;color:var(--ink);text-decoration:none;padding:.3em 0;cursor:pointer}
.route a:hover{color:var(--acc)}
.route a em{font-family:Georgia,serif;color:var(--mut);font-size:.85em;width:1.6em}
.route a small{color:var(--mut);font-size:.72em;border:1px solid var(--line2);padding:0 .4em}
.qr{margin-top:1.4em;display:none;gap:1em;align-items:center;font-size:.78em;color:var(--mut)}
.qr.on{display:flex}
.qr svg{width:6.2em;height:6.2em;background:#fff;padding:.3em}

/* ============================================================
   组件：split（分配资源 → 产量 → 配套）
   ============================================================ */
.w-split{display:flex;flex-direction:column;gap:1.05em;font-size:.95em}
.w-split .ly{display:none}
.w-split .ly.on{display:block;animation:fadeUp .4s ease}
.w-split .cap{font-size:.78em;color:var(--mut);letter-spacing:.08em;margin-bottom:.35em;display:flex;justify-content:space-between}
.cells{display:flex;gap:2px;height:1.9em}
.cells i{flex:1;background:var(--b);transition:background .25s}
.cells i.a{background:var(--a)}
.cells.dense{gap:0}
.cells.dense i{border-right:1px solid rgba(246,243,234,.35)}
.legend{display:flex;justify-content:space-between;margin-top:.4em;font-size:.95em}
.legend .a{color:var(--a)}.legend .b{color:var(--b)}
.legend b{font-size:1.25em;font-variant-numeric:tabular-nums;padding:0 .1em}
input.slider{-webkit-appearance:none;appearance:none;width:100%;height:1.6em;background:transparent;margin-top:.35em;cursor:pointer;display:none}
input.slider.on{display:block}
input.slider::-webkit-slider-runnable-track{height:2px;background:var(--line2)}
input.slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.25em;height:1.25em;border-radius:50%;background:var(--paper);border:2px solid var(--acc);margin-top:calc(-.625em + 1px)}
input.slider::-moz-range-track{height:2px;background:var(--line2)}
input.slider::-moz-range-thumb{width:1.1em;height:1.1em;border-radius:50%;background:var(--paper);border:2px solid var(--acc)}
.drag-tip{font-size:.75em;color:var(--acc);letter-spacing:.1em;display:none;margin-top:.15em}
.drag-tip.on{display:block}
.row{display:grid;grid-template-columns:4.6em 1fr;gap:.2em .9em;align-items:center;margin:.35em 0}
.row .nm{font-weight:600}
.row.a .nm{color:var(--a)}.row.b .nm{color:var(--b)}
.track{position:relative;height:1.35em;background:var(--paper2)}
.fill{position:absolute;left:0;top:0;bottom:0;transition:width .45s cubic-bezier(.3,.7,.3,1)}
.row.a .fill{background:var(--a)}.row.b .fill{background:var(--b)}
.need{position:absolute;top:-.35em;bottom:-.35em;border-left:2px dashed var(--ink);transition:left .45s cubic-bezier(.3,.7,.3,1);display:none}
.need.on{display:block}
.need span{position:absolute;left:.4em;top:-1.35em;white-space:nowrap;font-size:.72em;color:var(--ink);background:var(--paper);padding:0 .2em}
.gap{position:absolute;top:0;bottom:0;transition:all .45s cubic-bezier(.3,.7,.3,1);display:none}
.gap.on{display:block}
.gap.short{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(194,69,42,.45) 4px 6px)}
.gap.over{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(24,22,17,.25) 4px 6px)}
.row .fx{grid-column:2;font-size:.8em;color:var(--ink2);font-variant-numeric:tabular-nums;display:flex;justify-content:space-between}
.row .fx b{font-size:1.15em}
.status{font-weight:700;padding:.5em .8em;border:1px solid var(--line2);display:none;font-size:1.02em}
.status.on{display:block}
.status.short{color:var(--acc);border-color:var(--acc);background:var(--acc-soft)}
.status.over{color:var(--ink2);background:var(--paper2)}
.status.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--sans);font-size:13px;fill:var(--mut)}
.chart text.lab{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.chart .la{stroke:var(--a);stroke-width:2;fill:none}
.chart .lb{stroke:var(--b);stroke-width:2;fill:none}
.chart .lm{stroke:var(--acc);stroke-width:4.5;fill:none;stroke-linejoin:round;opacity:.85}
.chart .ax{stroke:var(--line2);stroke-width:1}
.chart .cur{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;transition:all .3s}
.chart .dot{fill:var(--acc);transition:all .3s}
.chart .pk{display:none}
.chart .pk.on{display:inline}
.chart .pk line{stroke:var(--acc);stroke-dasharray:4 3}
.chart .pk text{fill:var(--acc);font-weight:700;font-size:14px}

/* ============================================================
   组件：sets（实物配组）
   ============================================================ */
.w-sets svg{width:100%;height:auto;display:block;max-height:46vh}
.w-sets .item{transition:transform .7s cubic-bezier(.3,.7,.25,1),opacity .4s}
.w-sets .item.hide{opacity:0}
.w-sets .frame{fill:none;stroke:var(--acc);stroke-width:1.6;opacity:0;transition:opacity .4s .45s}
.w-sets .frame.on{opacity:1}
.w-sets .flab{font-size:13px;fill:var(--acc);opacity:0;transition:opacity .4s .45s;font-family:var(--sans)}
.w-sets .flab.on{opacity:1}
.w-sets .left{fill:none;stroke:var(--mut);stroke-dasharray:5 4;opacity:0;transition:opacity .4s .45s}
.w-sets .left.on{opacity:1}
.w-sets .llab{font-size:13px;fill:var(--mut);opacity:0;transition:opacity .4s .45s;font-family:var(--sans)}
.w-sets .llab.on{opacity:1}
.w-sets .ic{stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.w-sets .p0 .ic{fill:#D7E1E8}
.w-sets .p1 .ic{fill:#EBDABF}
.w-sets .ic-l{stroke:var(--ink);stroke-width:1;fill:none}
.w-sets .tally{font-family:var(--sans);font-size:15px}
.w-sets .tally .t0{fill:var(--a)}.w-sets .tally .t1{fill:var(--b)}
.w-sets .cap2{font-size:.85em;color:var(--mut);text-align:center;margin-top:.4em;letter-spacing:.06em}

/* 批注模式不挡底栏 */
body.ink-on #foot{pointer-events:none}

/* ============================================================
   教师讲义（手机优先）
   ============================================================ */
body.guide{font-size:16px;line-height:1.7;padding-bottom:5.2em}
.g-top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line);padding:.6em 1.1em;display:flex;justify-content:space-between;align-items:center;font-size:.82em}
.g-top b{letter-spacing:.1em}
.g-top .lk{display:flex;align-items:center;gap:.4em;color:var(--mut)}
.g-top .lk i{width:.55em;height:.55em;border-radius:50%;background:var(--mut);opacity:.5}
.g-top .lk.on{color:var(--ok)}.g-top .lk.on i{background:var(--ok);opacity:1}
.card{display:none;padding:1.1em 1.1em 0;max-width:40em;margin:0 auto}
.card.on{display:block}
.c-head{display:flex;align-items:baseline;gap:.7em;margin-bottom:.2em}
.c-head .no{font-family:Georgia,serif;font-style:italic;color:var(--acc);font-size:1.9em;line-height:1}
.c-head .sec{font-size:.78em;color:var(--mut);letter-spacing:.1em}
.c-head .tm{margin-left:auto;font-size:.75em;border:1px solid var(--ink);padding:.05em .55em;white-space:nowrap}
.card h2{font-size:1.25em;line-height:1.4;margin-bottom:.7em}
.gl{border-left:3px solid var(--ink);background:var(--paper2);padding:.5em .8em;margin-bottom:.8em;font-size:.93em}
.gl small{display:block;font-size:.7em;color:var(--mut);letter-spacing:.18em}
.c-prob{font-family:var(--serif);font-size:.93em;border-left:2px solid var(--acc);padding:.2em .8em;margin-bottom:.8em}
.c-teach{font-size:.95em;margin-bottom:1em}
.c-teach small,.c-src small{color:var(--mut);letter-spacing:.14em;font-size:.72em;display:block}
.c-src{font-size:.8em;color:var(--mut);margin:1em 0}
.stp{border-top:1px solid var(--line);padding:.75em 0 .8em .2em;position:relative;cursor:pointer;transition:background .2s}
.stp .sn{font-family:Georgia,serif;font-style:italic;font-size:.82em;color:var(--mut);letter-spacing:.06em}
.stp.cur{background:var(--acc-soft);margin:0 -1.1em;padding-left:1.3em;padding-right:1.1em;border-top-color:var(--acc)}
.stp.cur .sn{color:var(--acc);font-weight:700}
.stp.cur .sn::after{content:" · 屏幕上正在这一步";font-family:var(--sans);font-style:normal;font-size:.9em}
.stp.past{opacity:.62}
.stp .scr{font-size:.85em;color:var(--ink2);background:var(--paper2);padding:.35em .6em;margin:.3em 0;border-left:2px solid var(--line2)}
.stp .scr .katex{font-size:1em}
.stp .f{display:grid;grid-template-columns:3.2em 1fr;gap:.1em .4em;font-size:.94em;margin-top:.25em}
.stp .f>span{color:var(--mut);font-size:.82em;padding-top:.15em}
.stp .f.q>div{font-weight:700}
.stp .f.e>div{color:var(--ok)}
.stp .f.h ol{padding-left:1.1em}
.stp .f.n>div{color:var(--acc);font-size:.9em}
.g-bot{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.5em .8em calc(.5em + env(safe-area-inset-bottom));gap:.6em;z-index:10}
.g-bot button{font:inherit;font-weight:600;border:1px solid var(--line2);background:var(--paper);padding:.75em .4em;cursor:pointer;color:var(--ink)}
.g-bot button.pri{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-bot .pos{font-size:.78em;color:var(--mut);text-align:center;min-width:5.5em}
.g-bot .pos b{color:var(--acc);font-size:1.2em}
.toc{position:fixed;inset:0;background:rgba(24,22,17,.35);display:none;z-index:20}
.toc.on{display:block}
.toc>div{position:absolute;left:0;right:0;bottom:0;max-height:75vh;overflow:auto;background:var(--paper);padding:1em 1.1em 2em}
.toc a{display:flex;gap:.8em;padding:.6em 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.toc a em{font-family:Georgia,serif;color:var(--acc);width:1.6em}
.toc a small{margin-left:auto;color:var(--mut)}

@media print{
  body.deck{height:auto;overflow:visible}
  #bar,#foot,#prog{display:none}
  #stage{position:static}
  .scene{position:relative;display:flex!important;page-break-after:always;height:100vh}
  .it,.qt,table.tb tr.r{display:block!important}
  body.guide .card{display:block;page-break-after:always}
  .g-top,.g-bot{display:none}
}