/* ===== _teach-engine.css — the Teach Mode engine stylesheet (A1, 2026-09-25) =====
   Was an inline <style> in every teach-*.html. ONE copy now: edit here, every lesson
   gets it. Loads before _pml-fix.css, exactly where the inline block sat. */
  :root{--navy:#0f1d3a;--navy-2:#1d2d52;--ink:#1a1f36;--muted:#5b6680;--line:#e3e7f0;
    --bg:#f6f8fc;--accent:#ff7a3d;--good:#1f9d6e;--bad:#c0492f;--tint:#fff6f1;}
  *{box-sizing:border-box;} html,body{margin:0;padding:0;}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sukhumvit Set","Noto Sans Thai",Roboto,sans-serif;
    color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
    background:radial-gradient(60vw 60vh at 6% -10%, rgba(255,122,61,.13), transparent 56%),
               radial-gradient(54vw 56vh at 102% 110%, rgba(35,57,91,.12), transparent 55%),
               linear-gradient(180deg,#eaf0f8,#f6f8fc 32%);background-attachment:fixed;min-height:100vh;}
  body.lang-th .en{display:none;} body:not(.lang-th) .th{display:none;}
  .wrap{max-width:860px;margin:0 auto;padding:14px 15px 120px;}

  .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
  .brand{font-weight:800;color:var(--navy);font-size:16px;text-decoration:none;} .brand b{color:var(--accent);}
  .btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:800;color:var(--navy);cursor:pointer;}
  .btn.on{background:var(--navy);color:#fff;border-color:var(--navy);}
  @media(max-width:560px){#modeBtn .mdl{display:none}}  /* the long label wrapped the top bar at 390px (+15-19px); the ☰ row keeps it */
  .kicker{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);}

  /* rung rail */
  .ladder{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;}
  .ladder::-webkit-scrollbar{display:none;}
  .rchip{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center;}
  .rchip .n{width:19px;height:19px;border-radius:50%;background:#eef2f7;color:#8d97a8;font-size:11px;display:flex;align-items:center;justify-content:center;}
  .rchip.now{border-color:var(--accent);background:var(--tint);color:var(--navy);}
  .rchip.now .n{background:var(--accent);color:#fff;}
  .rchip.done{color:var(--ink);} .rchip.done .n{background:var(--good);color:#fff;}
  .rchip.lock{opacity:.45;cursor:not-allowed;}

  /* slide */
  .stage{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;box-shadow:0 6px 26px rgba(15,29,58,.08);min-height:340px;}
  .slbl{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);background:var(--tint);border-radius:999px;padding:4px 11px;margin-bottom:12px;}
  .slbl.grey{color:var(--muted);background:#f2f5fa;}
  h2.sh{font-size:22px;line-height:1.28;margin:0 0 10px;color:var(--navy);}
  .sbody{font-size:15.5px;color:var(--navy-2);margin:0 0 14px;}
  .mathbig{font-size:24px;text-align:center;background:#f8fafd;border:1px solid var(--line);border-radius:13px;padding:16px 12px;margin:14px 0;}
  .mathrow{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0;}
  .mathrow>div{flex:1 1 220px;background:#f8fafd;border:1px solid var(--line);border-radius:13px;padding:14px 12px;text-align:center;font-size:19px;}
  .mathrow .cl{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px;}

  .qtext{font-size:19px;font-weight:700;color:var(--navy);margin:2px 0 16px;line-height:1.45;}
  .choices{display:flex;flex-direction:column;gap:9px;}
  .choice{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:13px 15px;font-size:16px;cursor:pointer;text-align:left;color:var(--ink);transition:.12s;}
  .choice:hover{border-color:#b9c4d6;background:#fafbfe;}
  .choice.sel{border-color:var(--accent);background:var(--tint);box-shadow:0 0 0 3px rgba(255,122,61,.18);}
  .khint{margin-top:7px;font-size:12px;font-weight:700;color:var(--muted);}
  #ansbox.answered .khint{display:none;}
  .ghint{flex:1 0 100%;font-size:12.5px;font-weight:700;color:#a4633c;}
  .choice.ok{border-color:var(--good);background:#eef8f2;}
  .choice.no{border-color:var(--bad);background:#fdeeea;}
  .choice[disabled]{cursor:default;}
  /* an answered multiple choice: the right line stays, the rest step back */
  .choices.settled{gap:7px;}
  .choice.past{opacity:.42;background:#f8fafd;border-style:dashed;}
  .choice.ok{position:relative;font-weight:700;}
  .choices.settled .choice.ok{padding-left:40px;}
  .choice .ctick{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--good);font-weight:900;font-size:17px;line-height:1;}
  .shortrow{display:flex;gap:8px;flex-wrap:wrap;}
  .shortrow input{flex:1 1 180px;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-size:17px;font-family:inherit;}
  .shortrow input:focus{outline:none;border-color:var(--accent);}

  /* math keypad + live preview */
  .keys{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px;}
  .keys button{border:1.5px solid var(--line);background:#fff;border-radius:10px;min-width:44px;height:40px;padding:0 11px;
    font-size:16px;font-weight:700;color:var(--navy);cursor:pointer;font-family:"Times New Roman",Georgia,serif;}
  .keys button:hover{border-color:var(--accent);background:var(--tint);}
  .keys button:active{transform:translateY(1px);}
  .keys .sep{width:1px;background:var(--line);margin:2px 3px;}
  .prev{margin-top:9px;min-height:44px;border:1px dashed var(--line);border-radius:11px;padding:9px 13px;
    background:#f8fafd;font-size:20px;color:var(--navy);display:flex;align-items:center;gap:10px;}
  .prev .plbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);flex:0 0 auto;}
  .prev.empty{color:#a8b1c2;font-size:13.5px;}
  .go{border:none;background:var(--navy);color:#fff;border-radius:12px;padding:13px 22px;font-size:15px;font-weight:800;cursor:pointer;}
  .go.idk{background:transparent;color:var(--muted);border:1.5px solid var(--line);box-shadow:none;padding-left:14px;padding-right:14px;}
  .go.idk:disabled{opacity:.45;cursor:default;}
  /* phone: the box may share its row with Check + ไม่รู้, so Thai keeps the one-row layout it had (BRIL-1) */
  @media(max-width:560px){.shortrow:has(.idk) input{flex-basis:130px;min-width:0;}.go.idk{padding-left:10px;padding-right:10px;}}
  .go.sec{background:#fff;color:var(--navy);border:1.5px solid var(--line);}

  .fb{margin-top:14px;border-radius:13px;padding:13px 15px;font-size:14.5px;line-height:1.55;border-left:3px solid;}
  .fb.good{background:#eef8f2;border-color:var(--good);color:#12603f;}
  .fb.bad{background:#fdeeea;border-color:var(--bad);color:#8c2f1c;}
  .fb.hint{background:#fdf6e8;border-color:#c98600;color:#7a5300;}
  .fb b{color:inherit;}
  .why{margin-top:16px;background:#eef3fb;border:1px solid #d7e0f0;border-left:5px solid var(--navy-2);border-radius:13px;padding:18px 20px;font-size:17px;line-height:1.72;color:#20305a;}
  .why .wlbl{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin-bottom:9px;}
  .why b{color:var(--navy);}
  .why p{margin:0 0 .7em;} .why p:last-child{margin-bottom:0;}

  .gate{margin:14px 0;border:1.5px dashed var(--accent);background:var(--tint);border-radius:13px;padding:14px 15px;font-size:14.5px;font-weight:700;color:#8a4a23;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .gate .btn{border-color:#ffcfb4;}

  .streak{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:12px;}
  .dot{width:11px;height:11px;border-radius:50%;background:#e3e7f0;}
  .dot.on{background:var(--good);}

  .navbar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px);}
  .navin{max-width:860px;margin:0 auto;padding:10px 15px;display:flex;align-items:center;gap:10px;}
  .prog{flex:1;height:7px;background:#eef2f7;border-radius:99px;overflow:hidden;}
  .prog>i{display:block;height:100%;background:var(--accent);width:0;transition:width .35s;}
  .pnum{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;}

  .exlist{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
  .exrow{border:1px solid var(--line);border-radius:13px;padding:13px 15px;background:#fff;}
  .exrow .tag,.exone .tag{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--navy-2);border-radius:999px;padding:3px 9px;margin-bottom:7px;}
  .exrow .tag.t1,.exone .tag.t1{background:#1f9d6e;}.exrow .tag.t2,.exone .tag.t2{background:#2563eb;}.exrow .tag.t3,.exone .tag.t3{background:#7c4dbd;}
  .exrow .tag.t4,.exone .tag.t4{background:#c98600;}.exrow .tag.t5,.exone .tag.t5{background:#0f766e;}.exrow .tag.t6,.exone .tag.t6{background:var(--navy);}.exrow .tag.t7,.exone .tag.t7{background:var(--bad);}
  .exq{font-size:16px;color:var(--navy);}
  /* --- visual explain components --- */
  .flow{display:flex;flex-direction:column;margin:12px 0 4px;}
  .fstep{display:flex;gap:11px;align-items:flex-start;}
  .fbadge{flex:0 0 28px;height:28px;border-radius:9px;background:var(--navy-2);color:#fff;font-weight:800;
    font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px;}
  .fstep.key .fbadge{background:var(--accent);}
  .fbody{flex:1;font-size:16px;color:var(--navy);padding-bottom:13px;}
  .fbody small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.45;}
  .frail{flex:0 0 28px;display:flex;justify-content:center;}
  .frail i{width:2px;background:var(--line);display:block;height:14px;}
  .maptab{width:100%;border-collapse:collapse;margin:12px 0 4px;font-size:15.5px;}
  .maptab th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:800;
    padding:5px 7px;border-bottom:2px solid var(--line);text-align:left;}
  .maptab td{padding:10px 7px;border-bottom:1px solid var(--line);color:var(--navy);}
  .maptab td.arrow{color:var(--accent);font-weight:800;text-align:center;width:30px;}
  .maptab tr:last-child td{border-bottom:none;}
  .keynote{background:var(--tint);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;
    padding:9px 12px;font-size:13.5px;color:var(--navy-2);font-weight:700;margin-top:10px;}
  .more{margin-top:9px;}
  .more>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:800;color:var(--muted);
    display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;}
  .more>summary::-webkit-details-marker{display:none;}
  .more>summary:hover{color:var(--accent);border-color:var(--accent);}
  .more .sbody{margin-top:8px;}
  /* --- end-of-lesson next step --- */
  .doneWrap{text-align:center;padding:6px 0 0;}
  .doneTick{width:54px;height:54px;border-radius:50%;background:var(--good);color:#fff;font-size:27px;
    display:flex;align-items:center;justify-content:center;margin:6px auto 12px;}
  .doneWrap h2{margin:.1em 0 .3em;color:var(--navy);font-size:22px;}
  .doneSub{color:var(--muted);font-size:14px;margin:0 0 16px;}
  .nextlist{display:flex;flex-direction:column;gap:9px;text-align:left;margin-top:4px;}
  .nextcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:13px;
    padding:13px 15px;background:#fff;text-decoration:none;color:var(--ink);}
  .nextcard:hover{background:var(--tint);border-color:var(--accent);}
  .nextcard.primary{background:linear-gradient(160deg,#1d2d52,#0f1d3a);border-color:transparent;color:#fff;}
  .nextcard.primary .nlab{color:#ffd9c2;} .nextcard.primary .ngo{color:var(--accent);}
  .nic{font-size:21px;flex:0 0 24px;text-align:center;}
  .ntxt{flex:1;}
  .nlab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);}
  .nname{display:block;font-weight:800;font-size:15px;margin-top:1px;}
  .nsub{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;}
  .nextcard.primary .nsub{color:#c7d0e6;}
  .ngo{font-weight:800;color:var(--accent);}
  .saved{margin-top:14px;font-size:12.5px;color:var(--muted);}
  .saved b{color:var(--good);}
  .exwhy{font-size:13px;color:var(--muted);margin-top:5px;}
  .exans{font-size:14.5px;color:var(--good);font-weight:700;margin-top:6px;display:none;}
  body.reveal .exans{display:block;}
  /* paged exercise set: one question at a time */
  .exnav{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;}
  .exdot{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line);background:#fff;color:var(--muted);
    font-size:13px;font-weight:800;cursor:pointer;padding:0;line-height:1;}
  .exdot.on{background:var(--navy);border-color:var(--navy);color:#fff;}
  .exdot.seen{border-color:var(--good);color:var(--good);}
  .exdot.on.seen{background:var(--good);border-color:var(--good);color:#fff;}
  .excount{font-size:12.5px;font-weight:800;color:var(--muted);margin-left:auto;align-self:center;}
  .exone{border:1px solid var(--line);border-radius:14px;padding:15px 16px;background:#fff;}
  .exone .exq{font-size:17px;line-height:1.55;}
  .exsol{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
  .exsol .exans{display:block;font-size:16px;}
  .exfoot{display:flex;gap:8px;margin-top:14px;align-items:center;}
  .exfoot .btn{flex:0 0 auto;}
  .exfoot .sp{flex:1;}

  /* ===== JR4-COMPONENTS (2026-08-14) : reveal steps + fill-the-formula slots ===== */
  /* a rule that arrives one step at a time instead of all at once */
  .rv{margin:14px 0 2px;}
  .rvstep{opacity:0;max-height:0;overflow:hidden;transform:translateY(9px);
    transition:opacity .30s ease,max-height .40s ease,transform .30s ease;}
  .rvstep.on{opacity:1;max-height:600px;transform:none;}
  .rvrow{display:flex;gap:11px;align-items:flex-start;padding-bottom:13px;}
  .rvbadge{flex:0 0 28px;height:28px;border-radius:9px;background:var(--navy-2);color:#fff;font-weight:800;
    font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px;}
  .rvbody{flex:1;min-width:0;font-size:16px;color:var(--navy);line-height:1.5;}
  .rvbody .rvt{font-weight:700;display:block;}
  .rvex{margin-top:7px;background:#f8fafd;border:1px solid var(--line);border-radius:11px;
    padding:10px 12px;font-size:18px;color:var(--navy);text-align:center;overflow-x:auto;}
  .rvex small{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
    color:var(--muted);margin-bottom:4px;}
  .rvbtn{border:1.5px solid var(--accent);background:var(--tint);color:#8a4a23;border-radius:999px;
    padding:10px 18px;font-size:13.5px;font-weight:800;cursor:pointer;}
  .rvbtn:hover{background:#ffeee3;}
  .rvhint{display:inline-block;margin-left:11px;font-size:12.5px;color:var(--muted);font-weight:600;}
  .rvhint b{color:var(--accent);}
  /* the one symbol the whole step is about - it must read from across the room */
  .rvtag{display:inline-block;margin-top:8px;background:var(--tint);border:1.5px solid rgba(255,122,61,.42);
    border-radius:12px;padding:7px 16px;font-size:26px;line-height:1.15;color:#8a4a23;}
  .rvtag .MathJax{color:#8a4a23!important;}
  body.tight .rvtag{font-size:23px;} body.tighter .rvtag{font-size:20px;}
  .rvall{background:#eef3fb;border:1px solid #d7e0f0;border-left:5px solid var(--navy-2);
    border-radius:13px;padding:15px 17px;margin-top:4px;}
  .rvall .wlbl{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
    color:var(--accent);margin-bottom:9px;}
  .rvline{font-size:17px;color:var(--navy);padding:4px 0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
  .rvline i{font-style:normal;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;}
  /* the formula arrives pre-written: only the numbers are missing */
  .slotwrap{margin:4px 0 2px;}
  .slotf{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
    background:#f8fafd;border:1px solid var(--line);border-radius:13px;padding:18px 12px;
    font-family:"Times New Roman",Georgia,serif;font-size:23px;color:var(--navy);}
  .slotf .lhs{font-style:italic;}
  .qfrac{display:inline-flex;flex-direction:column;align-items:center;}
  .qfrac .qnum{padding:0 8px 5px;border-bottom:2px solid var(--navy);white-space:nowrap;}
  .qfrac .qden{padding:6px 8px 0;white-space:nowrap;}
  .sl{display:inline-block;min-width:32px;padding:0 4px;margin:0 1px;border-bottom:2px dashed #c3ccdd;
    text-align:center;font-style:normal;font-weight:800;color:#b9c3d4;}
  .sl.f{border-bottom-style:solid;border-bottom-color:rgba(255,122,61,.42);color:var(--accent);}
  .qrad{border-top:1.6px solid var(--navy);padding:3px 5px 0;margin-left:-1px;display:inline-block;}
  .qrad sup{font-size:.58em;vertical-align:super;line-height:0;}
  .slotin{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:13px;}
  .slotin label{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:800;color:var(--navy);
    font-family:"Times New Roman",Georgia,serif;font-style:italic;}
  .slotin input{width:76px;border:1.5px solid var(--line);border-radius:10px;padding:10px 8px;font-size:17px;
    text-align:center;font-family:inherit;font-style:normal;font-weight:700;}
  .slotin input:focus{outline:none;border-color:var(--accent);}
  .slotin input:disabled{background:#eef8f2;border-color:var(--good);color:#12603f;}
  body.tight .slotf{font-size:20px;padding:13px 10px;} body.tighter .slotf{font-size:17px;padding:10px 8px;}
  body.tight .rvex{font-size:16px;} body.tighter .rvex{font-size:14.5px;}
  @media(max-width:560px){
    .slotf{font-size:16px;flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:14px 6px;}
    .sl{min-width:26px;padding:0 3px;}
    .slotin{gap:7px;} .slotin input{width:62px;padding:9px 6px;} .slotin label{font-size:16px;}
    .rvex{font-size:16px;padding:9px 8px;} .rvbody{font-size:15px;} .rvline{font-size:15.5px;}
    .rvtag{font-size:21px;padding:6px 13px;}
  }
  /* ===== PML-PHYS-2026-09-21 · number+unit answer box, sentence builder ===== */
  .numrow{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;justify-content:center;margin-top:12px;}
  .numrow .nb{display:flex;flex-direction:column;gap:4px;}
  .numrow .nl{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--muted);text-align:center;}
  .numrow input{border:1.5px solid var(--line);border-radius:10px;padding:11px 10px;font-size:17px;
    font-weight:700;text-align:center;font-family:inherit;background:#fff;color:var(--ink);}
  .numrow input.nv{width:134px;} .numrow input.nu{width:104px;}
  .numrow input:focus{outline:none;border-color:var(--accent);}
  .numrow input:disabled{background:#eef8f2;border-color:var(--good);color:#12603f;}
  .numrow .go{border:0;border-radius:10px;padding:12px 18px;font:inherit;font-size:15px;font-weight:800;
    background:var(--accent);color:#fff;cursor:pointer;}
  .numask{font-size:13px;font-weight:700;color:var(--muted);text-align:center;margin-top:9px;}
  .numask b{color:var(--navy);}
  /* --- sentence builder: the phrases a marker gives marks for, in order --- */
  .sentwrap{margin-top:10px;}
  .built{border:1.5px dashed var(--line);border-radius:12px;padding:11px 12px;min-height:48px;
    font-size:16px;line-height:1.85;background:#fbfcfe;}
  .built .ph{color:var(--muted);font-size:13.5px;font-weight:700;}
  .built b{font-weight:600;background:rgba(31,157,110,.14);border-radius:7px;padding:2px 7px;
    margin:0 5px 4px 0;display:inline-block;}
  .built b .mk{font-size:10.5px;font-weight:800;color:var(--good);margin-left:6px;vertical-align:1px;}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;}
  .chips button{font:inherit;font-size:15px;line-height:1.35;text-align:left;padding:10px 13px;
    border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
    max-width:100%;}
  .chips button:hover{border-color:var(--accent);}
  .chips button.used{opacity:.38;cursor:default;border-style:dashed;}
  .chips button.no{border-color:var(--bad);background:#fdf3f1;}
  @media(max-width:560px){
    .numrow{gap:7px;} .numrow input.nv{width:112px;} .numrow input.nu{width:88px;}
    .numrow input{font-size:16px;padding:10px 8px;} .numrow .go{padding:11px 14px;font-size:14px;}
    .built{font-size:15px;padding:10px;} .chips button{font-size:14px;padding:9px 11px;}
  }
  /* A long worded formula ("efficiency = useful energy output / total energy input
     x 100%") is wider than a 320px phone card. .mathbig used to hand it a horizontal
     scrollbar; a formula is not a box you scroll, so it scales to fit instead.
     NOT applied to .wkline - a walk keeps its "=" column, so those lines are written
     short enough to fit rather than scaled. */
  .mathbig mjx-container{max-width:100%;}
  .mathbig mjx-container>svg{max-width:100%;height:auto;}
  /* ===== /PML-PHYS ===== */
  /* ===== PML-WRITTEN-2026-09-21 =============================================
     type:"written" — the student writes the answer in their own words, the
     machine says which mark-scheme ideas it could SEE, and the student marks
     themselves against the scheme. The machine never says "wrong".
     ========================================================================= */
  .wrwrap{margin-top:10px;}
  .wrbox{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
    padding:12px 13px;font:inherit;font-size:16px;line-height:1.7;color:var(--ink);background:#fff;
    resize:none;overflow:hidden;min-height:74px;}
  .wrbox:focus{outline:none;border-color:var(--accent);}
  .wrbox:disabled{background:#f7f9fc;color:var(--ink);}
  .wrmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;}
  .wrmeta .wrfmt{font-size:13px;font-weight:700;color:var(--muted);}
  .wrmeta .wrfmt b{color:var(--navy);}
  .wrmeta .go{border:0;border-radius:10px;padding:11px 18px;font:inherit;font-size:15px;
    font-weight:800;background:var(--accent);color:#fff;cursor:pointer;margin-left:auto;}
  .wrcmd{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.7px;
    text-transform:uppercase;color:#fff;background:var(--navy);border-radius:999px;
    padding:3px 10px;margin-bottom:8px;}
  /* --- what the machine could see in their own words --- */
  .wrmine{border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-size:15.5px;
    line-height:1.85;background:#fbfcfe;color:var(--ink);white-space:pre-wrap;}
  .wrmine mark{background:rgba(31,157,110,.22);border-radius:6px;padding:1px 3px;color:inherit;}
  .wrsay{font-size:12.5px;font-weight:700;color:var(--muted);margin:9px 0 7px;}
  .wrchips{display:flex;flex-wrap:wrap;gap:7px;}
  .wrchip{font-size:12.5px;font-weight:800;border-radius:999px;padding:5px 11px;
    border:1.5px solid var(--line);background:#fff;color:var(--muted);}
  .wrchip.on{border-color:var(--good);background:rgba(31,157,110,.12);color:#12603f;}
  /* --- the mark scheme, ticked by the student --- */
  .wrscheme{margin-top:13px;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;}
  .wrsh{background:#f6f8fc;padding:9px 13px;font-size:12.5px;font-weight:800;color:var(--navy);
    border-bottom:1.5px solid var(--line);}
  .wrpt{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-bottom:1px solid var(--line);}
  .wrpt:last-child{border-bottom:0;}
  .wrpt .wmk{font-size:11.5px;font-weight:800;color:var(--good);min-width:26px;padding-top:2px;}
  .wrpt .wtx{flex:1;font-size:15px;line-height:1.6;color:var(--ink);}
  .wrpt .wbt{display:flex;gap:6px;}
  .wrpt .wbt button{border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:9px;
    padding:7px 11px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;line-height:1;}
  .wrpt .wbt button.y.sel{border-color:var(--good);background:var(--good);color:#fff;}
  .wrpt .wbt button.n.sel{border-color:var(--bad);background:var(--bad);color:#fff;}
  .wrpt.gotit{background:rgba(31,157,110,.06);}
  .wrmodel{margin-top:12px;border-left:4px solid var(--accent);background:#fff7f2;border-radius:0 12px 12px 0;
    padding:11px 13px;font-size:15px;line-height:1.75;color:var(--ink);}
  .wrmodel .wlbl{display:block;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    color:var(--accent);margin-bottom:5px;}
  .wrscore{margin-top:11px;font-size:15px;font-weight:800;color:var(--navy);text-align:center;}
  .wrscore span{color:var(--good);}
  .wrflag{margin-top:9px;font-size:13px;font-weight:700;color:#8a5a1c;background:#fff6e6;
    border-radius:10px;padding:9px 12px;line-height:1.6;}
  @media(max-width:560px){
    .wrbox{font-size:15px;padding:10px 11px;min-height:68px;}
    .wrmine{font-size:14.5px;padding:10px 11px;}
    .wrpt{padding:10px;gap:8px;} .wrpt .wtx{font-size:14px;}
    .wrpt .wbt button{padding:7px 9px;font-size:13px;}
    .wrmodel{font-size:14px;}
  }

  /* --- qlines: bold emphasis + progressive reveal for written question text
     (PML-QLINES-2026-09-21) - same fade-up animation as .nstep.fresh above,
     scoped to .qtext.qlines so no other slide type is touched. --- */
  .qtext.qlines .qline{display:block;}
  .qtext.qlines .qline+.qline{margin-top:6px;}
  .qtext.qlines .qline.fresh{animation:nsin .32s ease both;}
  .qtext b{font-weight:800;background:linear-gradient(transparent 64%, rgba(255,122,61,.30) 0);}
  .qfigin.fresh{animation:nsin .32s ease both;}
  /* --- PML-X3-2026-09-23 · one mark at a time: the explanation is the mark
     scheme, one row per mark, one row per Enter. Option ③ of the 23 Sep mocks. --- */
  /* script layout (27 Sep 2026): one sheet, the working centred, M1/A1 in the left margin,
     ✓ ✗ + flip in the right margin — no box per row (peat: "แต่ละอันมันแยกกัน … clean") */
  .x3box{margin-top:13px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:4px 0 4px;}
  .x3head{font-size:12.5px;font-weight:800;color:var(--navy);margin:6px 14px 6px;}
  .x3row{display:grid;grid-template-columns:56px minmax(0,1fr) 88px;gap:2px 8px;align-items:center;
    padding:9px 8px 9px 0;border-top:1px dashed var(--line);position:relative;}
  .x3row.fresh{animation:nsin .32s ease both;}
  .x3row.cur{background:rgba(255,122,61,.06);}
  .x3row.cur:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--accent);}
  .x3row.got{background:rgba(31,157,110,.05);}
  .x3code{justify-self:center;font-size:11.5px;font-weight:800;color:#12603f;background:rgba(31,157,110,.13);
    border-radius:7px;padding:3px 7px;white-space:nowrap;}
  .x3code.link{color:var(--muted);background:#eef1f6;}
  .x3txt{min-width:0;text-align:center;}
  .x3tag{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--muted);margin-top:1px;}
  body.lang-th .x3tag{letter-spacing:0;text-transform:none;font-size:12px;}
  .x3star{display:inline-block;margin-left:7px;font-size:10.5px;letter-spacing:0;text-transform:none;
    color:#8a5a1c;background:#fff3d6;border-radius:6px;padding:1px 6px;}
  .x3say{display:block;font-size:19px;line-height:1.5;color:var(--ink);font-weight:600;}
  .x3say mark{color:inherit;font-weight:800;padding:0 2px;border-radius:3px;
    background:linear-gradient(#ffe08a,#ffe08a) no-repeat 0 88%/100% 58%;}
  .x3row.fresh .x3say mark{animation:x3hl .7s ease .18s both;}
  @keyframes x3hl{from{background-size:0% 58%}to{background-size:100% 58%}}
  .x3side{display:flex;align-items:center;justify-content:flex-end;gap:5px;}
  .x3tk{display:flex;gap:5px;}
  .x3tk button{border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:9px;
    padding:6px 9px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;line-height:1;}
  .x3tk button.y.sel{border-color:var(--good);background:var(--good);color:#fff;}
  .x3tk button.n.sel{border-color:var(--bad);background:var(--bad);color:#fff;}
  .x3flip{border:0;background:none;padding:4px 5px;cursor:pointer;border-radius:7px;
    font:inherit;font-size:15px;font-weight:800;color:var(--bad);line-height:1;}
  .x3row.flip .x3flip{background:#fdf0ec;}
  /* the losing version = a second row on the SAME grid: ✗ in the code margin, the working centred at
     the same size, red, one line through all of it (maths included — MathJax ignores line-through) */
  .x3nm{grid-column:1/4;display:none;grid-template-columns:inherit;gap:inherit;align-items:center;
    margin:7px 0 0;padding:8px 0;background:#fdf0ec;border-radius:10px;}
  .x3row.flip .x3nm{display:grid;animation:nsin .25s ease both;}
  .x3code.bad{color:var(--bad);background:rgba(192,73,47,.14);}
  .x3nm .x3say{color:var(--bad);}
  .x3x{text-decoration:line-through;text-decoration-thickness:2px;}
  .x3x mjx-container{position:relative;}
  .x3x mjx-container:after{content:"";position:absolute;left:-2px;right:-2px;top:50%;border-top:2px solid var(--bad);}
  .x3why{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;font-weight:500;color:var(--ink);}
  .x3tip{display:flex;gap:10px;margin-top:10px;border:1px solid #ebd9a8;background:#fff9e8;border-radius:12px;
    padding:10px 12px;font-size:15px;line-height:1.5;color:var(--ink);}
  .x3tip.fresh{animation:nsin .32s ease both;}
  .x3tip b{display:block;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#8a5a1c;}
  body.lang-th .x3tip b{letter-spacing:0;text-transform:none;font-size:12.5px;}
  .x3more{margin:8px 12px 4px;}
  .x3box .x3tip{margin:8px 10px 4px;}
  @media(max-width:560px){
    .x3row{grid-template-columns:44px minmax(0,1fr) 74px;padding:8px 4px 8px 0;gap:2px 4px;}
    .x3code{font-size:10.5px;padding:2px 5px;}
    .x3tk button{padding:6px 7px;}
    .x3say{font-size:17px;} .x3why{font-size:13px;} .x3tip{font-size:14px;}
  }
  @media (prefers-reduced-motion:reduce){ .x3row.fresh,.x3tip.fresh,.x3row.flip .x3nm{animation:none;}
    .x3row.fresh .x3say mark{animation:none;} }
  /* ===== /PML-WRITTEN ===== */
  /* ===== /JR4-COMPONENTS ===== */
  body.big .stage{padding:34px 30px;} body.big h2.sh{font-size:28px;}
  body.big .qtext{font-size:24px;} body.big .choice{font-size:19px;padding:16px 18px;}
  body.big .sbody{font-size:18px;} body.big .mathbig{font-size:30px;}

  /* lift the whiteboard launch button clear of the fixed nav bar */
  #wbFab{bottom:74px !important;}
  /* 9 Sep 2026 — lift the WHOLE bottom-left column clear of the fixed nav bar,
     not just this one pill.  #pmlNoteFab (added 7 Sep) stayed behind at 74px and
     the two sat on top of each other: "ปุ่มล่างซ้าย มันซ้อนกันอะ".  _tracker.js stacks
     the pills inside whatever base offset it finds here. */
  :root{--pml-bl-base:62px;}
  /* ============ visual hierarchy: question > answer > next, everything else quiet ============ */
  .wrap{max-width:720px;}
  /* on a roomy desktop screen, sit the card in the middle instead of stranding it at the top */
  @media(min-width:820px) and (min-height:720px){
    .wrap{min-height:calc(100vh - 108px);display:flex;flex-direction:column;justify-content:center;}
    .topbar{margin-bottom:14px;}
  }
  /* rung rail — context, not content */
  .ladder{padding:2px 0 12px;}
  .rchip{border-color:#edf0f5;color:#a2abbb;font-size:11.5px;padding:6px 11px;}
  .rchip .n{background:#f3f6fa;color:#a2abbb;width:17px;height:17px;font-size:10px;}
  .rchip.now{border-color:var(--accent);background:var(--tint);color:var(--navy);}
  .rchip.done{color:#7d8798;}
  /* the card holds one thing at a time */
  .stage{min-height:0;padding:30px 30px 26px;}
  /* THE QUESTION — the loudest thing on the screen */
  .qtext{font-size:26px;font-weight:800;line-height:1.36;color:var(--navy);margin:8px 0 22px;}
  body.big .qtext{font-size:31px;}
  /* THE ANSWER — second loudest */
  .shortrow{gap:10px;}
  .shortrow input{border-width:2px;font-size:19px;padding:15px 17px;}
  .shortrow input::placeholder{color:#b6bfcd;font-size:16px;}
  .shortrow input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,61,.16);}
  .go{padding:15px 26px;font-size:16px;box-shadow:0 3px 10px rgba(15,29,58,.18);}
  .choice{font-size:17px;padding:15px 17px;}
  /* keypad — a helper, tucked under the answer and kept quiet */
  .keys{margin:11px 0 0;gap:5px;align-items:center;}
  .keys .klbl{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#aab3c2;margin-right:2px;}
  .keys button{height:32px;min-width:34px;padding:0 9px;font-size:14px;font-weight:600;
    border-color:#edf0f5;color:#8d97a8;background:#fbfcfe;}
  .keys button:hover{border-color:var(--accent);background:var(--tint);color:var(--navy);}
  .keys .sep{margin:2px 2px;}
  /* once the answer is right, the typing tools step out of the way */
  #ansbox.answered .keys,#ansbox.answered .prev,#ansbox.answered .go{display:none;}
  .keys button.xk{border-color:#ffd3bd;background:#fff6f1;color:#b4470f;}
  #ansbox.answered .shortrow input{border-color:var(--good);background:#f6fbf8;color:var(--good);font-weight:800;}
  /* live preview — only exists once there is something to show */
  .prev{margin-top:10px;}
  .prev.empty{display:none;}
  /* NEXT — the way forward, obvious once the answer is in */
  #nextBtn{background:var(--navy);color:#fff;border-color:var(--navy);padding:9px 18px;font-size:14px;}
  #nextBtn.hot{background:var(--accent);border-color:var(--accent);box-shadow:0 3px 12px rgba(255,122,61,.4);}
  .navin{padding:11px 15px;max-width:720px;}
  /* long equations scroll instead of being cut off at the card edge */
  .mathbig,.qtext,.exq,.fbody,.sbody,.fb,.why,.exone .exq,.mathrow>div{overflow-x:auto;overflow-y:hidden;}
  .maptab{display:block;overflow-x:auto;}
  mjx-container{max-width:100%;}
  mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;padding-bottom:2px;}
  /* class summary card */
  .rcard{border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px 18px 16px;margin:18px 0 6px;text-align:center;
    box-shadow:0 2px 10px rgba(15,29,58,.05);}
  .rlbl{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
  .rscore{font-size:40px;font-weight:800;color:var(--navy);line-height:1.05;}
  .rscore span{font-size:22px;color:var(--muted);font-weight:800;}
  .rsub{font-size:13px;color:var(--muted);font-weight:700;margin-top:2px;}
  .rverdict{margin:12px 0 4px;border-radius:11px;padding:10px 13px;font-size:14px;font-weight:800;}
  .rverdict.good{background:#eef8f2;color:#12603f;} .rverdict.warn{background:#fdf6e8;color:#7a5300;}
  .rgrid{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:12px 0 8px;}
  .rq{width:26px;height:26px;border-radius:7px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .rq.ok{background:#1f9d6e;color:#fff;} .rq.slow{background:#f0b429;color:#5b4300;} .rq.miss{background:#eef2f7;color:#a2abbb;}
  .rkey{display:flex;gap:14px;justify-content:center;font-size:11.5px;color:var(--muted);font-weight:700;flex-wrap:wrap;}
  .rkey span{display:flex;align-items:center;gap:5px;}
  .rkey i{width:11px;height:11px;border-radius:4px;display:block;}
  .rkey i.ok{background:#1f9d6e;} .rkey i.slow{background:#f0b429;} .rkey i.miss{background:#eef2f7;}
  .rweak{margin-top:11px;font-size:13.5px;color:var(--navy-2);background:#f6f8fc;border-radius:10px;padding:9px 12px;}
  .rname{display:flex;align-items:center;gap:9px;margin-top:14px;text-align:left;}
  .rname span{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;}
  .rname input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;}
  .rname input:focus{outline:none;border-color:var(--accent);}
  .rsync{font-size:12.5px;color:var(--muted);margin-top:9px;font-weight:700;}
  .codebox{display:flex;gap:7px;margin-top:9px;}
  .codebox input{flex:1;border:1.5px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:13px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy);background:#f8fafd;}
  .codebox .btn{white-space:nowrap;}
  /* resume notice */
  .resumebar{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 14px;border-radius:12px;
    background:var(--tint);border:1px solid #ffd9c2;font-size:13px;font-weight:700;color:#8a4a23;}
  .resumebar span{flex:1;}
  .resumebar .rlink{border:1px solid #ffb98f;background:#fff;border-radius:999px;padding:5px 12px;
    font-size:12.5px;font-weight:800;color:#c2521f;cursor:pointer;font-family:inherit;}
  .resumebar .rlink:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
  .resumebar .rx{border:none;background:none;color:#c9a08a;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;}
  .resumebar .rx:hover{color:var(--accent);}
  /* end-of-page links — quiet */
  .pmlfoot a{text-decoration:none;color:#98a2b3 !important;font-weight:700;}
  .pmlfoot a:hover{color:var(--accent) !important;}
  #wbFab{transform:scale(.84);transform-origin:bottom right;opacity:.9;}
  #wbFab:hover{opacity:1;}
  @media(max-width:560px){.wrap{padding:12px 11px 120px;}.stage{padding:22px 17px 20px;}h2.sh{font-size:19px;}
    .qtext{font-size:21px;margin:6px 0 18px;}.shortrow input{font-size:17px;}}
/* PML-UX-2026-08 */

/* ================= PML-UX-2026-08 · slide fits the screen ================= */
/* data tables written inline in a question: readable, bordered, never cramped */
.qtext table,.sbody table,.exq table,.fbody table,.why table{border-collapse:collapse;margin:13px auto;
  font-size:.84em;font-weight:600;background:#fff;}
.qtext table td,.qtext table th,.sbody table td,.exq table td,.fbody table td,.why table td{
  border:1px solid #c9d1e4 !important;padding:8px 13px !important;text-align:center;white-space:nowrap;}
.qtext table tr:first-child td,.qtext table th{background:#f2f6fc;color:var(--navy);font-weight:800;}
.qtext table tr td:first-child{background:#f8fafd;font-weight:800;color:var(--muted);
  white-space:normal;text-align:left;}
/* engine-rendered table (slide.table) */
.dtabwrap{margin:13px 0 15px;overflow-x:auto;}
.dtab{width:100%;border-collapse:collapse;background:#fff;font-size:16.5px;}
.dtab th,.dtab td{border:1px solid #c9d1e4;padding:10px 12px;text-align:center;font-weight:800;color:var(--navy);}
.dtab th{background:#eef3fb;font-size:13px;color:var(--muted);font-weight:800;white-space:nowrap;}
.dtab td.rh{background:#f8fafd;color:var(--muted);text-align:left;white-space:nowrap;font-size:14px;}
.dtab tr:hover td{background:#fcfdff;}
.dtab tr:hover td.rh{background:#f5f8fd;}
/* definition boxes — aligned, big, emphasised, never a paragraph */
.defgrid{display:grid;gap:11px;margin:15px 0 6px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));}
.defgrid.two{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.defbox{background:#f8fafd;border:1.5px solid var(--line);border-radius:14px;padding:14px 14px;text-align:center;}
.defbox .dt{display:block;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;}
.defbox .dv{font-size:21px;font-weight:800;color:var(--navy);line-height:1.32;}
.defbox small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.45;}
.defgrid.two .defbox{text-align:left;padding:16px 17px;}
.defgrid.two .defbox .dv{font-size:18px;line-height:1.4;}
.defbox.wide{text-align:left;}
.defbox.wide .dv{font-size:17px;}
/* figure block */
.figbox{margin:13px 0 10px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:12px 10px 9px;}
.figbox>svg{max-width:100%;height:auto;display:block;margin:0 auto;}
.figbox mjx-container svg{display:inline-block;margin:0;}
.figcap{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:7px;}
/* recap strip — a question never arrives without its context */
.recap{display:flex;gap:9px;align-items:flex-start;background:#f5f8fd;border-left:3px solid var(--navy-2);
  border-radius:0 11px 11px 0;padding:10px 13px;margin:0 0 15px;font-size:13.5px;color:var(--navy-2);
  font-weight:600;line-height:1.5;}
.recap b{color:var(--navy);}
/* only a real diagram dropped into the strip — never MathJax's own inline <svg>,
   which lives inside an mjx-container and must keep its natural size */
.recap > span > svg{display:block;margin:7px auto 2px;max-width:230px;width:100%;height:auto;}
/* 'type it like this' — a question must never leave the format to guesswork */
.fmtline{margin:-2px 0 2px;font-size:12.5px;color:var(--muted);font-weight:600;}
.fmtline b{color:var(--navy);font-weight:800;}
.recap .ric{flex:0 0 auto;opacity:.55;font-weight:800;}
/* quiet tool chips under the answer box */
.tools{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;}
.tools button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;
  font:inherit;font-size:12px;font-weight:800;color:#98a2b3;cursor:pointer;}
.tools button:hover{border-color:var(--accent);color:var(--accent);background:var(--tint);}
#ansbox.answered .tools{display:none;}
  /* --- multi-part exam questions (2026-09-08) --- */
  .parts{margin:10px 0 2px;}
  .parts .prow{display:flex;gap:9px;align-items:baseline;padding:7px 10px;border-radius:10px;margin-bottom:6px;}
  .parts .pdone{background:#f2faf6;border:1px solid #cdeadc;}
  .parts .pnow{background:#fff7ef;border:1px solid #f2d9bd;}
  .parts .plb{font-weight:900;color:#0f1d3a;flex:0 0 auto;}
  .parts .pok{color:#1c8b5a;font-weight:800;}
  .parts .pq{color:#1d2d52;}

/* auto-fit — the slide shrinks to the screen instead of making you scroll */
body.tight .stage{padding:22px 22px 18px;}
body.tight h2.sh{font-size:20px;}
body.tight .qtext{font-size:21px;margin:4px 0 15px;}
body.tight .choice{font-size:15px;padding:12px 14px;}
body.tight .choices{gap:7px;}
body.tight .sbody,body.tight .fb{font-size:14px;} body.tight .why{font-size:16px;padding:15px 17px;}
body.tight .defbox .dv{font-size:18px;}
body.tight .defbox{padding:11px 12px;}
body.tight .mathbig{font-size:20px;padding:12px 10px;margin:11px 0;}
body.tight .dtab{font-size:15px;}body.tight .dtab th,body.tight .dtab td{padding:7px 9px;}
body.tight .shortrow input{font-size:17px;padding:12px 14px;}
body.tight .ladder{padding:0 0 8px;}
body.tight .recap{font-size:12.5px;padding:8px 11px;margin-bottom:11px;}
body.tighter .stage{padding:16px 18px 14px;}
body.tighter h2.sh{font-size:18px;}
body.tighter .qtext{font-size:18px;margin:2px 0 11px;}
body.tighter .choice{font-size:14px;padding:9px 12px;}
body.tighter .choices{gap:6px;}
body.tighter .sbody,body.tighter .fb{font-size:13px;padding:9px 11px;} body.tighter .why{font-size:15px;padding:13px 15px;}
body.tighter .defbox{padding:9px 11px;}
body.tighter .defbox .dv{font-size:16px;}
body.tighter .defbox small{font-size:11.5px;}
body.tighter .defgrid{gap:8px;margin:10px 0 4px;}
body.tighter .mathbig{font-size:18px;padding:9px 8px;margin:8px 0;}
/* .pin — a formula carried across a run of slides. The fitter may shrink everything
   around it, but the one thing the student is tracking must not move or resize. */
.mathbig.pin,body.tight .mathbig.pin,body.tighter .mathbig.pin{font-size:24px;padding:16px 12px;margin:14px 0;}
body.big .mathbig.pin,body.big.tight .mathbig.pin,body.big.tighter .mathbig.pin{font-size:30px;}
@media(max-width:560px){.mathbig.pin,body.tight .mathbig.pin,body.tighter .mathbig.pin{font-size:19px;padding:9px 8px;margin:9px 0;}
  body.big .mathbig.pin,body.big.tight .mathbig.pin,body.big.tighter .mathbig.pin{font-size:24px;}}
/* ---- roomy: a tall screen (iPad held upright) gets a bigger card, not a
   letterboxed one. Only ever applied when the fitter did NOT have to shrink
   anything, so it can never fight tight/tighter. ---- */
@media(orientation:portrait) and (min-height:900px) and (min-width:700px){
  body.roomy .stage{padding:40px 34px 34px;}
  body.roomy .qtext{font-size:31px;}
  body.roomy.big .qtext{font-size:35px;}
  body.roomy .choice{font-size:20px;padding:17px 19px;}
  body.roomy .mathbig{font-size:31px;}
  body.roomy .mathbig.pin{font-size:29px;}
  body.roomy .sbody{font-size:19px;}
  body.roomy .why{font-size:19px;}
  body.roomy .dtab{font-size:18px;}
  body.roomy .figbox>svg{max-width:none !important;width:min(100%,460px) !important;margin:0 auto;}
  body.roomy .exq{font-size:20px;}
}
/* ---- assign this lesson as homework (teacher strip on the exercises page) ---- */
.hwbar{margin:18px 0 4px;padding:14px 15px;border:1px dashed #ffd3bb;background:#fff8f4;border-radius:14px;}
.hwbar .hwt{font-size:13px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;list-style:none;}
.hwbar .hwt::-webkit-details-marker{display:none;}
.hwbar .hwt::before{content:'\25B8 ';}
.hwbar[open] .hwt::before{content:'\25BE ';}
.hwbar .hwrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:9px;}
.hwbar input{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  background:#fff;color:var(--navy);min-width:0;}
.hwbar input#hwName{flex:1 1 150px;}
.hwbar input#hwLink{flex:1 1 100%;font-size:12.5px;color:#5b6680;}
.hwbar .hwhint{font-size:12.5px;color:#5b6680;margin-top:8px;line-height:1.5;}
.hwbanner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;padding:10px 14px;
  border-radius:12px;background:#0f1d3a;color:#fff;font-size:13.5px;font-weight:700;}
.hwbanner b{color:#ffb489;}
body.tighter .qtext table,body.tighter .sbody table{font-size:.74em;}
body.tighter .qtext table td{padding:5px 8px !important;}
body.tighter .dtab{font-size:13.5px;}body.tighter .dtab th,body.tighter .dtab td{padding:5px 7px;}
body.tighter .shortrow input{font-size:16px;padding:10px 13px;}
body.tighter .prev{display:none;}
body.tighter .keys{margin-top:7px;}
body.tighter .keys button{height:27px;min-width:29px;padding:0 7px;font-size:12.5px;}
body.tighter .tools button{padding:4px 10px;font-size:11px;}
body.tighter .figbox{padding:8px 6px 5px;}
body.tighter .recap{font-size:12px;padding:7px 10px;margin-bottom:9px;}
body.tighter .streak{margin-bottom:8px;}
/* if it still will not fit, stop centring so nothing is clipped off the top */
body.overflowy .wrap{justify-content:flex-start !important;}
/* wide content scales down rather than running off the card edge */
.stage.squeeze .qtext,.stage.squeeze .dtab,.stage.squeeze .figbox,.stage.squeeze .mathbig{font-size:.9em;}
.stage.squeeze .qtext table{font-size:.72em;}
/* reclaim the dead space under the card, and drop the footer links when space is short */
.wrap{padding-bottom:66px;}   /* exactly clears the fixed nav bar — no phantom scrollbar */
body.tight .pmlfoot,body.tighter .pmlfoot{display:none;}
/* boxes can hold a small table too */
.defbox table{border-collapse:collapse;margin:2px auto 0;font-size:13.5px;font-weight:700;}
.defbox table td{border:1px solid #c9d1e4;padding:4px 9px;color:var(--navy);}
.defbox table tr:first-child td{background:#eef3fb;color:var(--muted);}
.defbox table tr td:first-child{background:#f4f7fc;color:var(--muted);font-size:12px;}
/* a diagram shrinks with the rest of the slide instead of forcing a scroll */
.figbox svg,.qtext svg{max-width:100%;}
body.tight .figbox{margin:9px 0 7px;padding:9px 8px 6px;}

body.tighter .figbox{margin:7px 0 5px;padding:7px 6px 4px;}

body.tighter .figcap{font-size:11px;margin-top:4px;}
.defbox .dv{overflow-x:auto;}
.defbox mjx-container{max-width:100%;}
/* a "what it means" block that hands over one line at a time */
.nsteps{padding:15px 18px 13px;}
.nstep{display:flex;gap:11px;align-items:flex-start;margin-top:11px;}
.nstep:first-of-type{margin-top:2px;}
.nstep .nn{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--navy-2);color:#fff;
  font-size:11.5px;font-weight:800;line-height:21px;text-align:center;margin-top:3px;}
.nstep .nb{flex:1 1 auto;}
.nstep.fresh{animation:nsin .3s ease both;}
@keyframes nsin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.nsmore{display:block;width:-moz-max-content;width:max-content;max-width:100%;margin:11px auto 0;text-align:center;
  font-size:12.5px;font-weight:800;color:#98a2b3;cursor:pointer;
  border:1px dashed var(--line);border-radius:999px;padding:7px 12px;background:#fff;}
.nsmore:hover{color:var(--accent);border-color:var(--accent);}
body.tight .nstep{margin-top:9px;} body.tight .nsteps{padding:12px 15px 11px;}
body.tighter .nstep{margin-top:7px;} body.tighter .nsteps{padding:10px 13px 9px;}
/* ================= /PML-UX-2026-08 ================= */
/* A0.5 2026-09-25 · promoted from teach-igcse-simultaneous; teach-pure4-partial-fractions uses .xout too */
/* PML-XOUT-2026-09-01 · a term struck out at the moment it cancels */
.xout{position:relative;display:inline-block;opacity:.55;}
.xout::after{content:'';position:absolute;left:-13%;right:-13%;top:50%;height:0;
  border-top:2.5px solid #b3261e;transform:rotate(-12deg);}

/* ===== PML-MARK-2026-09-27 · type:"mark" — check the working, line by line (MVONE-1) =====
   Rows: no · move · left · = · right · ✓✗, one grid, so every = sits in one column.
   Borders are written as border-color, never a var() shorthand (dark-mode rule 1). */
.mkwrap{margin-top:10px;}
.mkwrap.hasms{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.mkmain{min-width:0;}
.mkhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:9px 12px;background:#f6f8fc;border:1.5px solid;border-color:var(--line);border-bottom:0;
  border-radius:12px 12px 0 0;font-size:12.5px;font-weight:700;color:var(--muted);}
.mkhead>b{font-size:14px;font-weight:800;color:var(--navy);}
.mkhead span b{color:var(--navy);}
.mkhow{padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--muted);background:#fbfcfe;
  border:1.5px solid;border-color:var(--line);border-bottom:0;}
.mkgrid{display:grid;grid-template-columns:22px max-content max-content max-content minmax(0,1fr) auto;
  border:1.5px solid;border-color:var(--line);border-radius:0 0 12px 12px;background:#fff;padding:2px 8px 4px;
  font-size:17px;}
.mkc{display:flex;align-items:center;min-height:46px;border-bottom:1px solid;border-color:#eef1f6;min-width:0;padding:0 3px;}
.mkc.sy{background:rgba(31,157,110,.07);}
.mkc.sx{background:rgba(192,73,47,.07);}
.mkno{font-size:11px;font-weight:800;color:#9aa3b5;justify-content:flex-end;padding-right:6px;}
.mklab{font-size:12px;font-weight:700;color:var(--muted);justify-content:flex-end;text-align:right;
  white-space:nowrap;padding-right:6px;}
.mkl{justify-content:flex-end;white-space:nowrap;}
.mke{justify-content:center;padding:0 5px;}
.mkr{white-space:nowrap;gap:6px;}
.mkcir{width:1.55em;height:1.55em;border:1.5px solid;border-color:var(--navy);border-radius:50%;font-size:12px;
  font-weight:800;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;line-height:1;
  margin-left:4px;transform:rotate(-2deg);flex:none;}
.mkci{font-size:1.3em;line-height:1;vertical-align:-.08em;}
.mktk{gap:5px;padding-left:8px;justify-content:flex-end;}
.mkb{width:38px;height:34px;border-radius:9px;border:1.5px solid;border-color:var(--line);background:#fff;
  color:var(--muted);font:inherit;font-size:15px;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;}
.mkb.y.on{background:var(--good);border-color:var(--good);color:#fff;}
.mkb.x.on{background:var(--bad);border-color:var(--bad);color:#fff;}
.mkchip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border-radius:8px;
  font-size:14px;font-weight:800;border:1.5px solid;border-color:var(--line);color:#9aa3b5;background:#fff;}
.mkchip.y{border-color:var(--good);color:var(--good);}
.mkchip.x{border-color:var(--bad);color:var(--bad);}
/* the reveal: the planted mistakes are marked on the sheet itself */
.mkc.kbad{background:rgba(192,73,47,.12);}
.mkc.mkno.kbad{background:var(--bad);color:#fff;border-radius:6px 0 0 6px;}
.mkent{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 2px 10px 26px;
  background:rgba(192,73,47,.07);border-bottom:1px solid;border-color:#f1cdc8;}
.mkent label{display:block;font-size:11.5px;font-weight:800;color:var(--bad);}
.mkent textarea{display:block;width:100%;box-sizing:border-box;margin-top:3px;font:inherit;font-size:15px;
  line-height:1.4;padding:7px 9px;border:1.5px solid;border-color:#e3b7b1;border-radius:9px;resize:vertical;
  background:#fff;color:var(--ink);}
.mkent textarea:focus{outline:none;border-color:var(--accent);}
.mkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.mkbar .go{border:0;border-radius:10px;padding:11px 20px;font:inherit;font-size:15px;font-weight:800;
  background:var(--accent);color:#fff;cursor:pointer;}
.mkbar .go:disabled{opacity:.4;cursor:default;}
.mkmsg{font-size:13px;font-weight:700;color:var(--muted);}
.mkmsg.need{color:var(--bad);}
.mklock{margin-top:8px;font-size:12.5px;font-weight:700;color:#9aa3b5;}
.mkkey{margin-top:12px;background:rgba(31,157,110,.07);border:1.5px solid;border-color:rgba(31,157,110,.3);
  border-radius:12px;padding:10px 13px;font-size:14.5px;line-height:1.55;color:var(--ink);}
.mkkh{font-size:13.5px;font-weight:800;color:#12603f;margin-bottom:4px;}
.mkke{border-top:1px solid;border-color:rgba(31,157,110,.25);padding:8px 0 5px;}
.mkke:first-of-type{border-top:0;}
.mkfx{margin-top:3px;color:var(--navy);font-weight:600;}
.mkyw{margin-top:3px;font-size:13px;color:var(--muted);white-space:pre-wrap;}
.mkfoot{font-size:12.5px;color:var(--muted);}
.mkkc{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px;margin-right:6px;}
.mkkc.y{background:rgba(31,157,110,.16);color:#12603f;}
.mkkc.x{background:rgba(192,73,47,.14);color:var(--bad);}
.mkkc.n{background:#eef1f6;color:var(--muted);}
/* the paper's mark scheme: beside the sheet when there is room, behind a button when not */
.mkside{min-width:0;}
.mkmsbtn{border:1.5px solid;border-color:rgba(31,157,110,.4);background:#fff;color:#12603f;border-radius:999px;
  padding:7px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;}
.mkms{display:none;margin-top:8px;border:1.5px solid;border-color:rgba(31,157,110,.3);border-radius:12px;
  background:rgba(31,157,110,.05);overflow:hidden;}
.mkwrap.msopen .mkms{display:block;}
.mkmh{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#12603f;
  padding:7px 12px;border-bottom:1px solid;border-color:rgba(31,157,110,.25);}
.mkms table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.45;}
.mkms td{padding:6px 10px;vertical-align:top;border-top:1px solid;border-color:rgba(31,157,110,.15);}
.mkms tr:first-child td{border-top:0;}
.mkms td.c{font-weight:800;color:var(--good);white-space:nowrap;width:1%;}
.mkms td.c.a{color:var(--accent);}
@media(min-width:980px){
  .mkwrap.hasms{grid-template-columns:minmax(0,1fr) 250px;align-items:start;}
  .mkwrap.hasms .mkside{position:sticky;top:10px;}
  .mkmsbtn{display:none;}
  .mkms{display:block;margin-top:0;}
}
@media(max-width:979px){ .mkwrap.hasms .mkside{order:-1;} }
@media(max-width:560px){
  .mkgrid{font-size:14.5px;padding:2px 4px 4px;grid-template-columns:16px max-content max-content max-content minmax(0,1fr) auto;}
  .mkc{min-height:42px;padding:0 1px;}
  .mkno{font-size:10px;padding-right:3px;}
  .mklab{font-size:10px;white-space:normal;max-width:4.6em;line-height:1.15;padding-right:4px;}
  .mke{padding:0 3px;}
  .mktk{gap:3px;padding-left:4px;}
  .mkb{width:30px;height:32px;font-size:13.5px;}
  .mkchip{width:26px;height:26px;font-size:13px;}
  .mkent{grid-template-columns:1fr;padding-left:6px;}
  .mkhow{font-size:11.5px;}
  .mkkey{font-size:13.5px;padding:9px 11px;}
}

/* PWA-1 (2026-10-03): opened from the home screen (display-mode: standalone) the nav bar
   keeps clear of the iPhone home indicator. The fit lock reads the bar's real top
   (measureRoom → .navbar getBoundingClientRect), so the slide budget follows by itself. */
@media (display-mode: standalone){
  .navbar{padding-bottom:env(safe-area-inset-bottom,0px);}
}

/* BRIL-2: a walk-line hint — the icon beside the working, not above it */
.fb.hint.hwalk{display:flex;gap:8px;align-items:flex-start}
.fb.hint.hwalk>.wkfig{flex:1 1 auto;min-width:0;margin:0}
/* a figure layer marked .hwl is not drawn until a hint line reaches it */
.figbox .hwl[data-b]:not(.on){opacity:0}

/* BRIL-3 PML-EXPLORE: drag P along the curve, the tangent follows; rounds, then the typed question.
   Every state has the same size: the round result has a reserved width, the lock is only opacity. */
.toy{max-width:440px;margin:4px auto 6px}
.toy>svg{display:block;width:100%;height:auto;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.toy .toyax{stroke:var(--muted);stroke-width:1.4}
.toy .toytk{stroke:var(--muted);stroke-width:1.4}
.toy .toytl{font-size:15px;font-weight:700;fill:var(--muted);text-anchor:middle}
.toy .toysm{font-size:18px;font-weight:700;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.toy .toycurve{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linejoin:round}
.toy .toyline{stroke:var(--accent);stroke-width:2.8;stroke-linecap:round}
.toy .toyP{fill:var(--accent);stroke:var(--bg);stroke-width:2.5}
.toy .toylab{font-size:18px;font-weight:800;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.toy .toyrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:4px}
.toy .toyv{text-align:center;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.toy .toym{color:var(--accent)}
.toy .toyb{width:40px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--navy);font-size:20px;font-weight:800;cursor:pointer}
.toy .toyb:disabled{opacity:.35;cursor:default}
.toy .toyrd{list-style:none;margin:6px 0 0;padding:0}
.toy .toyrd li{display:grid;grid-template-columns:24px 1fr 5.6em;align-items:center;gap:8px;padding:4px 8px;border-radius:9px;font-size:15px;color:var(--muted)}
.toy .toyrd .toyok{white-space:nowrap}
.toy .toyrd .toyk{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:12.5px;font-weight:800}
.toy .toyrd .toyok{text-align:right;font-weight:800;color:var(--good)}
.toy .toyrd li.now{color:var(--ink);background:var(--line)}
.toy .toyrd li.ok{color:var(--good)}
.toy .toyrd li.pulse{animation:toypulse .9s ease}
@keyframes toypulse{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 3px var(--accent)}}
.qtext.toyq.toylock,#ansbox.toylock{opacity:.4;pointer-events:none}
@media(max-width:560px){.toy .toyv{font-size:14.5px}.toy .toyb{width:34px}.toy .toyrow{gap:6px}}
/* PML-PPW (19 Oct 2026) · past-paper walks: the question box under a walk slide's title (slide field ppw) */
.ppwq{margin:8px 0 2px;padding:8px 12px;background:var(--paper-2,#f4f6fb);border-left:4px solid var(--navy-2,#3b6fd4);border-radius:6px;color:var(--ink,#33415c);font:500 15.5px/1.5 system-ui,-apple-system,"Sukhumvit Set","Noto Sans Thai",sans-serif;letter-spacing:0;overflow-wrap:anywhere}
.ppwq .ppwm{font-weight:800;color:var(--muted);white-space:nowrap}
.ppwq .ppwsrc{margin-top:4px;font-size:12px;font-weight:700;color:var(--muted);font-style:italic}
.ppwq .ppwsrc a{color:inherit;text-decoration:underline}
@media(max-width:560px){.ppwq{font-size:14.5px;padding:7px 10px}.ppwq .ppwsrc{font-size:11.5px}}
/* PML-PPW: a past-paper picture carries the question's data (tables, grids), so on a phone it takes the card
   width instead of the 130px body.tighter gives walk pictures (the pic sits above the working there) */
@media(max-width:700px){body.ppw .wkpic,body.ppw.tighter .wkpic{width:min(86vw,330px);padding:8px}}
/* PML-PPW portrait (20 Oct 2026): short source line on a phone, figure capped so question + figure + working share
   one screen, and the revealed line clears the bottom bar when the engine scrolls it into view */
.ppwq .ppwshort{display:none}
@media(max-width:560px){.ppwq .ppwlong{display:none}.ppwq .ppwshort{display:inline}}
@media(max-width:700px){body.ppw .wkpic svg{max-height:30vh}}
body.ppw .wkcur{scroll-margin-bottom:84px;scroll-margin-top:8px}
/* PML-PPW portrait: a walk row is 1fr | = | 1fr, so every px of side padding costs the maths twice; on a phone a
   past-paper page gives the card's 26px and the current line's 12px side padding back to the working */
@media(max-width:560px){body.ppw #stage.stage{padding-left:12px;padding-right:12px}body.ppw .wkcur{padding-left:6px;padding-right:6px}}