/* MediLab · chapters 10-12 and 14 inside the course page (units 1-3 of "physiology of the human body").
   Built by engine/site_css/build_units_css.py. Everything is scoped to .mlu, the block the course page draws a
   chapter part into, so nothing here touches the rest of the site. Colours follow the site theme (theme.css):
   white and near-black surfaces, the site ink, the cyan accent. The book's box families keep their meaning
   (orange for a misconception, green for a chain of causes...), in softened site tones. */
.mlu{
  --bg:var(--ml-bg); --paper:var(--ml-surface); --ink:var(--ml-ink); --muted:var(--ml-muted);
  --line:var(--ml-line);
  --green:var(--ml-accent-text); --green-2:var(--ml-ink); --blue:var(--ml-accent); --blue-ink:var(--ml-accent-text);
  --ok:var(--ml-success); --ok-ring:var(--ml-success); --ok-bg:var(--ml-success-soft); --bad:var(--ml-danger); --bad-ring:var(--ml-danger); --bad-bg:var(--ml-danger-soft); --warn-bg:var(--ml-warning-soft);
  --rail-blue:var(--ml-accent); --fill-blue:var(--ml-accent-soft); --title-blue:var(--ml-accent-text);
  --rail-green:var(--ml-success); --fill-green:var(--ml-success-soft); --title-green:var(--ml-success);
  --rail-purple:#8F68CB; --fill-purple:#F5F1FF; --title-purple:#623E96;
  --rail-gold:var(--ml-warning); --fill-gold:var(--ml-warning-soft); --title-gold:var(--ml-warning-text);
  --rail-orange:#C26300; --fill-orange:#FFF0E7; --title-orange:#8D3800;
  --rail-red:var(--ml-danger); --fill-red:var(--ml-danger-soft); --title-red:var(--ml-danger);
  --th:var(--ml-sunken); --th-ink:var(--ml-ink); --zebra:transparent;
  --act:var(--ml-accent); --act-ink:var(--ml-accent-text); --act-soft:var(--ml-accent-soft); --act-line:var(--ml-accent-line);
  --focus:var(--ml-accent);
  --chart-grid:var(--ml-line); --chart-band:var(--ml-accent-soft); --c1:var(--ml-accent); --c2:#C26300; --c3:var(--ml-success);
  --lung:#F4B6C2;
  --font-body:var(--ml-font);
  --font-head:var(--ml-font);
  --font-voice:var(--ml-font-voice);
  --radius:var(--ml-r-md);
  display:block; color:inherit; font-family:var(--font-body); overflow-wrap:break-word;
}
html[data-ml-theme="dark"] .mlu{
  --rail-purple:#9F7ED6; --fill-purple:#292335; --title-purple:#D2BFF8;
  --rail-orange:#CE7A3B; --fill-orange:#342215; --title-orange:#F4BD99;
  --c2:#CE7A3B;
  --lung:#8E4A5A;
  --rbc:#B5534C; --rbc-in:#8E3B35; --agA:#7DB8FF; --agB:#A98BFA; --agRh:#FBBF24;
}

/* ---- from app.css ---- */
.mlu *{box-sizing:border-box}
.mlu [hidden]{display:none!important}
.mlu fieldset{border:0;padding:0;margin:0;min-width:0}
.mlu img{max-width:100%;height:auto}
.mlu button,.mlu input,.mlu select,.mlu textarea{font:inherit;color:inherit}
.mlu :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--ml-r-sm)}
.mlu .opt:has(input:focus-visible),.mlu .seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.mlu .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mlu .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;
  border-radius:var(--ml-r-md);border:1px solid var(--line);background:var(--paper);cursor:pointer;font-weight:600;font-size:var(--ml-fs-3);line-height:1.3}
.mlu .btn:hover{border-color:var(--act)}
.mlu .btn.primary{background:var(--act);border-color:var(--act);color:var(--ml-on-accent)}
.mlu .btn.ghost{background:transparent}
.mlu .btn[disabled]{opacity:.5;cursor:not-allowed}
.mlu .btn svg{width:16px;height:16px}
.mlu .checks{list-style:none;margin:0 0 16px;padding:0}
.mlu .checks li{position:relative;padding-inline-start:32px;margin:0 0 8px}
.mlu .checks li::before{content:"";position:absolute;inset-inline-start:4px;top:8px;width:16px;height:8px;border-inline-start:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg) scaleX(-1)}
.mlu .checks ul{list-style:none;padding-inline-start:16px;margin:8px 0}
.mlu .checks ul.sub li::before{width:8px;height:8px;border:2px solid var(--green);border-radius:var(--ml-r-full);transform:none;top:12px}
.mlu .cover-strip{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:var(--ml-fs-3);margin:0 0 8px}
.mlu .term{font-family:var(--font-voice);font-weight:700}
.mlu .tg{display:inline-flex;flex-direction:column;align-items:center;vertical-align:baseline;line-height:1.25;margin:0 0px}
.mlu .tg .gl{font-family:var(--font-body);font-weight:500;font-size:var(--ml-fs-1);color:var(--muted);direction:ltr;unicode-bidi:isolate;line-height:1.2;letter-spacing:.01em;display:flex;justify-content:center;text-align:center;width:0;min-width:100%}
.mlu .ltr{direction:ltr;unicode-bidi:isolate}
.mlu u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.mlu .box{border:1px solid var(--rail);border-inline-start:5px solid var(--rail);background:var(--fill);border-radius:var(--ml-r-md);padding:16px;margin:20px 0}
.mlu .box .bt{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;color:var(--title);font-size:var(--ml-fs-3);line-height:1.45}
.mlu .box .bt svg{flex:none;width:24px;height:24px}
.mlu .box.voice .bt,.mlu .box.voice p,.mlu .box.voice li{font-family:var(--font-voice)}
.mlu .box.opener .bt{font-family:var(--font-head);font-size:var(--ml-fs-4)}
.mlu .box p:last-child{margin-bottom:0}
.mlu .box.blue{--rail:var(--rail-blue);--fill:var(--fill-blue);--title:var(--title-blue)}
.mlu .box.green{--rail:var(--rail-green);--fill:var(--fill-green);--title:var(--title-green)}
.mlu .box.purple{--rail:var(--rail-purple);--fill:var(--fill-purple);--title:var(--title-purple)}
.mlu .box.gold{--rail:var(--rail-gold);--fill:var(--fill-gold);--title:var(--title-gold)}
.mlu .box.orange{--rail:var(--rail-orange);--fill:var(--fill-orange);--title:var(--title-orange)}
.mlu .box.red{--rail:var(--rail-red);--fill:var(--fill-red);--title:var(--title-red)}
.mlu .xlist{list-style:none;margin:0;padding:0}
.mlu .xlist li{position:relative;padding-inline-start:28px;margin:0 0 8px}
.mlu .xlist li::before{content:"✗";position:absolute;inset-inline-start:0px;top:0;color:var(--bad);font-weight:800}
.mlu .stoplist{margin:0;padding-inline-start:0;list-style:none;counter-reset:q}
.mlu .stoplist > li{counter-increment:q;margin:0 0 12px;padding-inline-start:32px;position:relative}
.mlu .stoplist > li::before{content:counter(q) ".";position:absolute;inset-inline-start:0;top:0;font-weight:700;color:var(--title-blue)}
.mlu details.comp{margin:4px 0 0;font-size:var(--ml-fs-2)}
.mlu details.comp summary{cursor:pointer;color:var(--blue-ink);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.mlu details.comp ul{margin:8px 0 4px;padding-inline-start:20px}
.mlu .newtag{display:inline-block;font-size:var(--ml-fs-1);font-weight:700;color:var(--act);border:1px solid var(--act-line);background:var(--act-soft);border-radius:var(--ml-r-full);padding:0 8px;margin-inline-start:8px;vertical-align:middle;line-height:1.6}
.mlu .formula{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:4px 0 8px;align-items:baseline}
.mlu .formula dt{font-weight:700}
.mlu .formula dd{margin:0}
.mlu .formula .math{direction:ltr;unicode-bidi:isolate;font-family:var(--font-body);font-weight:700;letter-spacing:.02em}
.mlu .tbl{margin:8px 0 24px}
.mlu .tbl caption{caption-side:top;text-align:right;font-weight:700;color:var(--green);font-size:var(--ml-fs-3);padding:0 0 8px;line-height:1.5}
.mlu table.data{width:100%;border-collapse:collapse;background:var(--paper);font-size:var(--ml-fs-3);line-height:1.55}
.mlu table.data th{background:var(--th);color:var(--th-ink);font-weight:700;padding:8px;text-align:center;border:1px solid var(--th)}
.mlu table.data td{border:1px solid var(--line);padding:8px;vertical-align:middle;text-align:center}
.mlu table.data td.rowh{font-weight:700;text-align:right}
.mlu table.data td[dir="ltr"]{direction:ltr}
@media (max-width:620px){
.mlu table.data.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mlu table.data.stack{background:transparent}
.mlu table.data.stack caption{display:block;width:100%}
.mlu table.data.stack,.mlu table.data.stack tbody,.mlu table.data.stack tr,.mlu table.data.stack td{display:block;width:100%}
.mlu table.data.stack tr{border:1px solid var(--line);border-radius:var(--ml-r-md);margin:0 0 8px;overflow:hidden;background:var(--paper)!important}
.mlu table.data.stack td{border:0;border-bottom:1px solid var(--line);text-align:right;display:grid;grid-template-columns:38% 1fr;gap:8px;padding:8px 12px}
.mlu table.data.stack td:last-child{border-bottom:0}
.mlu table.data.stack td::before{content:attr(data-label);font-weight:700;color:var(--green)}
.mlu table.data.stack td.rowh{background:var(--fill-green);display:block}
.mlu table.data.stack td.rowh::before{content:none}
}
.mlu figure.fig{margin:16px 0 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.mlu figure.fig .imgbox{position:relative;overflow:hidden;border-radius:var(--ml-r-sm);background:var(--ml-surface)}
.mlu figure.fig img{display:block;width:100%;height:auto}
.mlu figure.fig.zoomed .imgbox{overflow:auto;max-height:560px;-webkit-overflow-scrolling:touch}
.mlu figure.fig.zoomed img{width:200%;max-width:none}
.mlu figure.fig figcaption{font-size:var(--ml-fs-2);color:var(--muted);margin:8px 0px 0;line-height:1.6}
.mlu .fig-tools{display:flex;justify-content:flex-start;gap:8px;margin-top:8px}
.mlu .fig-tools .btn{min-height:44px;padding:8px 12px;font-size:var(--ml-fs-2)}
.mlu .legend{margin:8px 0 0;display:grid;gap:8px}
.mlu .legend .row{border:1px solid var(--line);border-radius:var(--ml-r-sm);padding:8px 12px;background:var(--paper)}
.mlu .legend .en{direction:ltr;unicode-bidi:isolate;text-align:left;font-size:var(--ml-fs-2);color:var(--muted);display:block}
.mlu .legend .he{display:block;font-size:var(--ml-fs-3)}
.mlu .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.mlu .pair > div{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.mlu .pair h5{margin:0 0 8px;font-family:var(--font-head);font-weight:600;font-size:var(--ml-fs-3);color:var(--green)}
.mlu .cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 16px}
.mlu .cards section{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.mlu .cards h4{margin:0 0 8px}
@media (max-width:700px){
.mlu .pair,.mlu .cards{grid-template-columns:minmax(0,1fr)}
}
.mlu .act{margin:24px 0;border:2px solid var(--act-line);border-radius:var(--ml-r-lg);background:var(--paper);overflow:hidden}
.mlu .act-head{background:var(--act-soft);padding:12px 16px;border-bottom:1px solid var(--act-line)}
.mlu .act-kind{display:inline-flex;align-items:center;gap:8px;font-size:var(--ml-fs-1);font-weight:800;color:var(--act);letter-spacing:.02em}
.mlu .act-kind svg{width:16px;height:16px}
.mlu .act-title{font-family:var(--font-head);font-weight:600;font-size:var(--ml-fs-4);margin:0px 0 0;line-height:1.4;color:var(--ink)}
.mlu .act-goal{font-size:var(--ml-fs-2);color:var(--muted);margin:4px 0 0;line-height:1.55}
.mlu .act-body{padding:16px 16px}
.mlu .act-body > p{margin:0 0 8px}
.mlu .act fieldset{border:0;margin:0 0 8px;padding:0;min-width:0}
.mlu .act legend{font-weight:700;margin:0 0 8px;padding:0;line-height:1.6}
.mlu .opts{display:grid;gap:8px}
.mlu .opt{display:flex;align-items:flex-start;gap:8px;border:1.5px solid var(--line);border-radius:var(--ml-r-md);padding:8px 12px;cursor:pointer;min-height:48px;background:var(--paper);line-height:1.55}
.mlu .opt:hover{border-color:var(--act)}
.mlu .opt input{margin-top:4px;width:20px;height:20px;flex:none;accent-color:var(--act)}
.mlu .opt .l{font-weight:800;color:var(--act);flex:none;min-width:24px}
.mlu .opt.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .opt.is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .opt.is-dim{opacity:.62}
.mlu .opt.is-picked{border-color:var(--act);border-width:2px;background:var(--paper)}
.mlu .row-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.mlu .fb{margin:12px 0 0;border-radius:var(--ml-r-md);padding:8px 16px;line-height:1.65;display:none}
.mlu .fb.show{display:block}
.mlu .fb.ok{background:var(--ok-bg);border:1px solid var(--ok)}
.mlu .fb.bad{background:var(--bad-bg);border:1px solid var(--bad)}
.mlu .fb.info{background:var(--act-soft);border:1px solid var(--act-line)}
.mlu .fb .v{font-weight:800;margin-inline-end:8px}
.mlu .fb.ok .v{color:var(--ok)}
.mlu .fb.bad .v{color:var(--bad)}
.mlu .note{font-size:var(--ml-fs-2);color:var(--muted);border-top:1px dashed var(--line);margin:16px 0 0;padding-top:8px;line-height:1.55}
.mlu .hintbox{margin:8px 0 0;padding:8px 16px;border-radius:var(--ml-r-md);background:var(--warn-bg);border:1px dashed var(--rail-gold);display:none}
.mlu .hintbox.show{display:block}
.mlu .stage[hidden]{display:none}
.mlu .stage{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mlu .cl-row{display:grid;grid-template-columns:1fr minmax(180px,42%);gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.mlu .cl-row:last-child{border-bottom:0}
.mlu .cl-row.stacked{grid-template-columns:1fr;gap:8px}
.mlu .cl-row .it{font-weight:600}
.mlu .cl-row select{min-height:44px;width:100%;border-radius:var(--ml-r-sm);border:1.5px solid var(--line);background:var(--paper);padding:8px}
.mlu .seg{display:flex;flex-wrap:wrap;gap:8px}
.mlu .seg label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--ml-r-full);cursor:pointer;background:var(--paper);font-size:var(--ml-fs-2);line-height:1.3}
.mlu .seg input{accent-color:var(--act);width:16px;height:16px}
.mlu .seg label:has(input:checked){border-color:var(--act);background:var(--act-soft)}
.mlu .cl-fb{grid-column:1/-1;font-size:var(--ml-fs-2);line-height:1.55;border-radius:var(--ml-r-sm);padding:8px;display:none}
.mlu .cl-fb.show{display:block}
.mlu .cl-fb.ok{color:var(--ok);background:var(--ok-bg)}
.mlu .cl-fb.bad{color:var(--ink);background:var(--bad-bg);border-inline-start:4px solid var(--bad)}
@media (max-width:620px){
.mlu .cl-row{grid-template-columns:1fr}
}
.mlu .order{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mlu .order li{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:var(--ml-r-md);padding:8px;background:var(--paper)}
.mlu .order li .n{font-weight:800;color:var(--act);min-width:24px;text-align:center}
.mlu .order li .tx{flex:1;line-height:1.5}
.mlu .order li .mv{display:flex;flex-direction:column;gap:4px}
.mlu .order li .mv button{min-width:44px;min-height:44px;border-radius:var(--ml-r-sm);border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:var(--ml-fs-3);line-height:1}
.mlu .order li.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .order li.is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .order li{position:relative}
.mlu .order li .ost{position:absolute;top:-8px;inset-inline-start:-8px;font-weight:800;line-height:1;background:var(--paper);border-radius:var(--ml-r-full)}
.mlu .order li .ost:empty{display:none}
.mlu .order li .ost > span[aria-hidden]{display:inline-block;padding:4px;border:1.5px solid currentColor;border-radius:var(--ml-r-full);font-size:var(--ml-fs-2)}
.mlu .order li.is-ok .ost{color:var(--ok)}
.mlu .order li.is-bad .ost{color:var(--bad)}
.mlu .checks-multi{display:grid;gap:8px}
.mlu .slotgrid{display:grid;gap:16px}
.mlu .slot{border:1.5px solid var(--line);border-radius:var(--ml-r-md);padding:8px 12px}
.mlu .slot h5{margin:0 0 8px;font-size:var(--ml-fs-3);font-family:var(--font-head);font-weight:600;color:var(--green)}
.mlu .slot.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .slot.is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .loop{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;grid-template-rows:auto 40px auto;gap:0;align-items:stretch;margin:8px 0 4px}
.mlu .loop .node{border:1.5px solid var(--line);border-radius:var(--ml-r-md);padding:8px;background:var(--paper);display:flex;flex-direction:column;gap:8px;min-width:0}
.mlu .loop .node .role{font-weight:800;font-size:var(--ml-fs-2);color:var(--green)}
.mlu .loop .node.stim{background:var(--fill-orange);border-color:var(--rail-orange)}
.mlu .loop .node select{min-height:44px;width:100%;border-radius:var(--ml-r-sm);border:1.5px solid var(--line);background:var(--paper);padding:4px 8px;font-size:var(--ml-fs-2)}
.mlu .loop .node.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .loop .node.is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .loop .ar{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--ml-fs-5);font-weight:700;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display)}
.mlu .loop .ar.v{grid-column:span 1}
.mlu .loop-fb{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.mlu .loop-fb li{border-radius:var(--ml-r-sm);padding:8px;font-size:var(--ml-fs-2);line-height:1.55}
.mlu .loop-fb li.ok{background:var(--ok-bg)}
.mlu .loop-fb li.bad{background:var(--bad-bg);border-inline-start:4px solid var(--bad)}
@media (max-width:700px){
.mlu .loop{display:flex;flex-direction:column;gap:8px}
.mlu .loop .ar{transform:none;height:24px;font-size:var(--ml-fs-1)}
.mlu .loop .ar::after{content:'↓';font-size:var(--ml-fs-5);letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display)}
.mlu .loop .ar.back{height:auto}
.mlu .loop .ar.back::after{content:'↓ והלולאה חוזרת אל הגירוי';font-size:var(--ml-fs-2);font-weight:600}
}
.mlu .chain{display:grid;gap:8px;justify-items:stretch}
.mlu .chain .cnode{border:1.5px solid var(--line);border-radius:var(--ml-r-md);padding:8px 12px;background:var(--paper);line-height:1.5}
.mlu .chain .cnode.fixed{background:var(--fill-green);border-color:var(--rail-green)}
.mlu .chain .cnode select{min-height:44px;width:100%;border-radius:var(--ml-r-sm);border:1.5px solid var(--line);background:var(--paper);padding:4px 8px}
.mlu .chain .cnode.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .chain .cnode.is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .chain .down{text-align:center;color:var(--muted);font-weight:700;line-height:1}
.mlu .branches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mlu .branches > div{display:grid;gap:8px;align-content:start}
.mlu .branches > .branch{border:1.5px dashed var(--line);border-radius:var(--ml-r-md);padding:8px}
.mlu .branch .br-t{font-weight:800;font-size:var(--ml-fs-2);color:var(--green)}
.mlu .chain .br-note{margin:0px 0;text-align:center;color:var(--muted);font-weight:700;font-size:var(--ml-fs-2)}
@media (max-width:700px){
.mlu .branches{grid-template-columns:minmax(0,1fr)!important}
}
.mlu .lab{display:grid;gap:16px}
.mlu .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
.mlu .ctl{border:1px solid var(--line);border-radius:var(--ml-r-md);padding:8px;background:var(--bg)}
.mlu .ctl label,.mlu .ctl .cap{display:block;font-weight:700;font-size:var(--ml-fs-2);margin-bottom:4px}
.mlu .ctl select,.mlu .ctl input[type=number]{min-height:44px;width:100%;border-radius:var(--ml-r-sm);border:1.5px solid var(--line);background:var(--paper);padding:4px 8px}
.mlu .stepper{display:flex;align-items:center;gap:8px}
.mlu .stepper button{min-width:44px;min-height:44px;border-radius:var(--ml-r-sm);border:1px solid var(--line);background:var(--paper);font-size:var(--ml-fs-4);cursor:pointer}
.mlu .stepper output{flex:1;text-align:center;font-weight:800;font-size:var(--ml-fs-3)}
.mlu .stepper input[type=range]{flex:1;accent-color:var(--act);min-height:44px}
.mlu .readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.mlu .ro{border:1px solid var(--line);border-radius:var(--ml-r-md);padding:8px;background:var(--paper)}
.mlu .ro .k{font-size:var(--ml-fs-2);color:var(--muted);display:block}
.mlu .ro .v{font-size:var(--ml-fs-4);font-weight:800}
.mlu .ro .v .ltr{font-variant-numeric:tabular-nums}
.mlu .chart{width:100%;height:auto;display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--ml-r-md)}
.mlu .chart text{font-family:var(--font-body);fill:var(--muted);font-size:var(--ml-fs-1)}
.mlu .chart.narrow text{font-size:var(--ml-fs-2)}
.mlu .chart .axis{stroke:var(--muted);stroke-width:1}
.mlu .chart .grid{stroke:var(--chart-grid);stroke-width:1}
.mlu .chart .band{fill:var(--chart-band)}
.mlu .mechs{display:flex;flex-wrap:wrap;gap:8px}
.mlu .mech{border:1.5px solid var(--line);border-radius:var(--ml-r-full);padding:4px 12px;font-size:var(--ml-fs-2);font-weight:700;background:var(--paper)}
.mlu .mech.on{border-color:var(--act);background:var(--act-soft)}
.mlu .mech .lvl{font-weight:500;color:var(--muted)}
.mlu .tasks{display:grid;gap:8px}
.mlu .task{border:1px solid var(--line);border-radius:var(--ml-r-md);padding:8px 12px}
.mlu .task.done{border-color:var(--ok);background:var(--ok-bg)}
.mlu .task h5{margin:0 0 4px;font-size:var(--ml-fs-3);font-family:var(--font-head);font-weight:600}
.mlu .task .tstate{font-size:var(--ml-fs-2);font-weight:700;color:var(--muted)}
.mlu .task.done .tstate{color:var(--ok)}
.mlu .bars{display:grid;gap:8px}
.mlu .bar{display:grid;grid-template-columns:112px 1fr 56px;gap:8px;align-items:center;font-size:var(--ml-fs-2)}
.mlu .bar .track{height:16px;border-radius:var(--ml-r-sm);background:var(--bg);border:1px solid var(--line);overflow:hidden}
.mlu .bar .fill{height:100%;background:var(--act)}
.mlu .bar .fill.loss{background:var(--c3)}
.mlu .datatable-toggle{margin-top:8px}
.mlu .datatable-toggle > summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.mlu textarea.answer{width:100%;min-height:128px;border-radius:var(--ml-r-md);border:1.5px solid var(--line);background:var(--paper);padding:8px 12px;line-height:1.6;resize:vertical}
.mlu .recall{background:var(--act-soft);border:1px dashed var(--act-line);border-radius:var(--ml-r-md);padding:8px 12px;margin:0 0 8px;font-size:var(--ml-fs-3)}
.mlu .counter{font-weight:700;color:var(--act)}
.mlu .tf-row{border-bottom:1px solid var(--line);padding:8px 0}
.mlu .tf-row:last-child{border-bottom:0}
.mlu .tf-row .st{font-weight:600;margin:0 0 8px}
.mlu .tf-fix{margin:8px 0 0}
.mlu .numin{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mlu .numin input{width:120px;min-height:44px;border-radius:var(--ml-r-sm);border:1.5px solid var(--line);background:var(--paper);padding:4px 8px;text-align:center;font-weight:700}
.mlu .qlist{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:8px 0 24px}
.mlu .q{border:1px solid var(--line);border-radius:var(--ml-r-lg);background:var(--paper);padding:16px}
.mlu .q .qh{font-weight:700;margin:0 0 8px;line-height:1.65}
.mlu .q .qh .qn{color:var(--green)}
.mlu .q .qmeta{font-size:var(--ml-fs-2);color:var(--muted);font-weight:600}
.mlu .sol{margin:12px 0 0;border-top:1px dashed var(--line);padding-top:8px}
.mlu .sol[hidden]{display:none}
.mlu .sol .solh{font-weight:800;color:var(--green);font-size:var(--ml-fs-3);margin:0 0 4px}
.mlu .sol .ansline{font-weight:700}
.mlu .verdict-ok{color:var(--ok);font-weight:800}
.mlu .verdict-bad{color:var(--bad);font-weight:800}
.mlu .an{margin:0 0 8px;padding:4px 8px;border-radius:var(--ml-r-sm);line-height:1.7}
.mlu .an .an-v{font-weight:700}
.mlu .an.bad .an-v,.mlu .an.bad .an-x{color:var(--an-bad)}
.mlu .an.ok{font-family:var(--font-voice);color:var(--an-ok);font-weight:600}
.mlu .an.ok .an-v{font-weight:800}
.mlu .an.pick{outline:2px solid var(--act)}
@media (max-width:620px){
.mlu .box{padding:12px 16px}
.mlu .act-body{padding:12px 16px 16px}
.mlu .opt{padding:8px}
}
.mlu .act-status{margin:4px 0 0;font-size:var(--ml-fs-2);font-weight:700;color:var(--muted);min-height:0}
.mlu .act-status:empty{display:none}
.mlu .pop{animation:mlu-pop .45s ease-out}
.mlu .fb.show{animation:mlu-in .2s ease-out}
.mlu .simbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.mlu .simbar .simstate{font-size:var(--ml-fs-2);color:var(--muted);font-weight:700}
@media (prefers-reduced-motion: reduce){
.mlu *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.mlu .credits{list-style:none;padding:0;margin:0 0 16px}
.mlu .credits li{padding:8px 0;border-bottom:1px solid var(--line)}
.mlu .credits li:last-child{border-bottom:0}
.mlu .cr-en{display:block;text-align:right;font-size:var(--ml-fs-3);color:var(--ink-2,inherit);margin:0px 0}
.mlu .chain > .branch.side{border:1.5px dashed var(--line);border-radius:var(--ml-r-md);padding:8px;display:grid;gap:8px;margin-top:8px}
.mlu .cgrid{list-style:none;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.mlu .cgrid li{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--ml-r-md);padding:8px;min-height:52px}
.mlu .cgrid .cn{font-size:var(--ml-fs-1);font-weight:800;color:var(--muted);min-width:16px;text-align:center}
.mlu .hintbox .hint{margin:0 0 8px}
.mlu .hintbox .hint:last-child{margin-bottom:0}
.mlu .match{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.25fr);align-items:start;margin:4px 0 8px}
.mlu .match .mcol{display:grid;gap:8px;position:relative;z-index:1}
.mlu .match .mterms{grid-column:1}
.mlu .match .mgap{grid-column:2}
.mlu .match .mdefs{grid-column:3}
.mlu .match .mhead{margin:0;font-weight:800;font-size:var(--ml-fs-2);color:var(--green)}
.mlu .match .mt,.mlu .match .md{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:8px;border:1.5px solid var(--line);border-radius:var(--ml-r-md);background:var(--paper);cursor:pointer;text-align:right;line-height:1.45;font-size:var(--ml-fs-3)}
.mlu .match .mt{font-weight:700}
.mlu .match .mt:hover,.mlu .match .md:hover{border-color:var(--act)}
.mlu .match .mt.on{border-color:var(--act);background:var(--act-soft);box-shadow:inset 0 0 0 2px var(--act)}
.mlu .match .mn{flex:none;min-width:20px;height:20px;border-radius:var(--ml-r-full);display:inline-flex;align-items:center;justify-content:center;font-size:var(--ml-fs-1);font-weight:800;background:var(--act-soft);color:var(--act);border:1px solid var(--act-line)}
.mlu .match .md .mn:empty{background:transparent;border:1.5px dashed var(--line)}
.mlu .match .mtx{flex:1;min-width:0}
.mlu .match .mk{flex:none;font-weight:800;min-width:16px}
.mlu .match .is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .match .is-ok .mk{color:var(--ok)}
.mlu .match .is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .match .is-bad .mk{color:var(--bad)}
.mlu .match-lines{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0}
.mlu .match-lines .mline{stroke:var(--act);stroke-width:2.5}
.mlu .match-lines .mline.ok{stroke:var(--ok)}
.mlu .match-lines .mline.bad{stroke:var(--bad);stroke-dasharray:6 5}
.mlu .match-lines .mdot{fill:var(--act)}
.mlu .match-lines .mdot.ok{fill:var(--ok)}
.mlu .match-lines .mdot.bad{fill:var(--bad)}
@media (max-width:520px){
.mlu .match{grid-template-columns:minmax(0,.85fr) 24px minmax(0,1.15fr)}
.mlu .match .mt,.mlu .match .md{padding:8px;font-size:var(--ml-fs-2);gap:4px}
.mlu .match .mn{min-width:24px;height:24px}
}
.mlu .cloze{line-height:2.5;margin:0 0 8px}
.mlu .cz{display:inline-flex;align-items:center;gap:4px;margin:0 0px;vertical-align:middle;max-width:100%}
.mlu .cz select{min-height:44px;max-width:100%;border-radius:var(--ml-r-sm);border:1.5px solid var(--act-line);background:var(--act-soft);padding:4px 8px;font-size:var(--ml-fs-3);font-weight:700;color:var(--ink)}
.mlu .cz-n{font-size:var(--ml-fs-1);font-weight:800;color:var(--act);align-self:flex-start}
.mlu .cz-mark{font-weight:800;min-width:16px}
.mlu .cz.is-ok select{border-color:var(--ok);background:var(--ok-bg)}
.mlu .cz.is-ok .cz-mark{color:var(--ok)}
.mlu .cz.is-bad select{border-color:var(--bad);background:var(--bad-bg)}
.mlu .cz.is-bad .cz-mark{color:var(--bad)}
.mlu .lbl-fig{position:relative;max-width:520px;margin:8px auto 4px;border:1px solid var(--line);border-radius:var(--ml-r-md);overflow:hidden;background:var(--ml-surface)}
.mlu .lbl-fig img{display:block;width:100%;height:auto}
.mlu .lbl-badge{position:absolute;transform:translate(-50%,-50%);min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ml-r-full);border:2px solid var(--ml-surface);background:var(--ml-accent);color:var(--ml-on-accent);font-weight:800;font-size:var(--ml-fs-2);line-height:1;cursor:pointer;box-shadow:var(--ml-elev-3);white-space:nowrap}
.mlu .lbl-badge.on{background:var(--ml-warning);color:var(--ml-ink)}
.mlu .lbl-badge.is-ok{background:var(--ml-success)}
.mlu .lbl-badge.is-bad{background:var(--ml-danger)}
.mlu .lbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:8px 0 0}
.mlu .lbl-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:var(--ml-r-md);padding:8px;background:var(--paper)}
.mlu .lbl-row select{min-height:44px;width:100%;border-radius:var(--ml-r-sm);border:1.5px solid var(--line);background:var(--paper);padding:4px 8px}
.mlu .lbl-row .cl-fb{grid-column:1/-1}
.mlu .lbl-num{min-width:28px;height:28px;border-radius:var(--ml-r-full);background:var(--act);color:var(--ml-on-accent);font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:var(--ml-fs-2)}
html[data-ml-theme="dark"] .mlu .lbl-num{color:var(--ml-on-accent)}
.mlu .lbl-row.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mlu .lbl-row.is-ok .cz-mark{color:var(--ok)}
.mlu .lbl-row.is-bad{border-color:var(--bad);background:var(--bad-bg)}
.mlu .lbl-row.is-bad .cz-mark{color:var(--bad)}
.mlu .ctl.wide{grid-column:1/-1}
.mlu .stops{margin:0 0 8px}
.mlu .chip{min-height:44px;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--ml-r-full);background:var(--paper);cursor:pointer;font-weight:600;font-size:var(--ml-fs-2);line-height:1.3}
.mlu .chip[aria-pressed="true"]{border-color:var(--act);background:var(--act-soft)}
.mlu .locnote{font-size:var(--ml-fs-2);margin:4px 0 0;min-height:20px}
.mlu .togs{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mlu .opt.tog{align-items:center}
.mlu .bar{grid-template-columns:minmax(112px,34%) 1fr 56px}
.mlu .task .tmsg{font-size:var(--ml-fs-2)}
.mlu .lab .note{margin-top:8px}
.mlu figure.fig .imgbox img{width:auto;max-width:100%;max-height:680px;margin:0 auto}
.mlu figure.fig.zoomed .imgbox img{width:200%;max-width:none;max-height:none}
.mlu .lbl-badge.is-bad{border-style:dashed;border-color:var(--ml-surface)}
@media (max-width:520px){
.mlu .lbl-badge{min-width:24px;height:24px;font-size:var(--ml-fs-1);padding:0 4px;border-width:1.5px}
}
.mlu .ctl input[type=range]{direction:ltr}
.mlu .bar .track,.mlu .bar .fill{display:block}
.mlu .legend-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0;font-size:var(--ml-fs-2);font-weight:700;color:var(--muted)}
.mlu .legend-row .lg{display:inline-flex;align-items:center;gap:8px}
.mlu .order li .mv{flex-direction:row;gap:8px}
.mlu .order li .mv button{min-height:44px;min-width:44px}
.mlu .cgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,11em),1fr))}
.mlu .cgrid li{min-width:0}
.mlu .cgrid .tb,.mlu .match .mtx{overflow-wrap:anywhere}
.mlu .match .mt,.mlu .match .md{min-width:0}
.mlu .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
@keyframes mlu-pop{0%{opacity:.2;transform:translateY(3px)}100%{opacity:1;transform:none}}
@keyframes mlu-in{0%{opacity:0}100%{opacity:1}}
/* ---- from labs_ch12.css ---- */
.mlu .breath-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:12px;align-items:start}
@media (max-width:620px){
.mlu .breath-grid{grid-template-columns:1fr}
}
.mlu .thorax-box{border:1px solid var(--line);border-radius:var(--ml-r-md);background:var(--paper);padding:8px}
.mlu .thorax{width:100%;height:auto;display:block}
.mlu .thorax .tlbl{font-family:var(--font-body);font-size:var(--ml-fs-1);font-weight:700;fill:var(--ink)}
.mlu .clock{margin:0;font-size:var(--ml-fs-3)}
.mlu .fignote{display:block;font-size:var(--ml-fs-2);color:var(--muted);margin-top:4px}
.mlu ol.parts,.mlu ol.nums{padding-inline-start:0;list-style:none;margin:8px 0}
.mlu ol.parts li,.mlu ol.nums li{margin:8px 0}
.mlu ol.nums{list-style:decimal;padding-inline-start:24px}
.mlu ol.parts .pl{font-weight:800;margin-inline-end:4px}
.mlu .mathrow{margin:8px 0}
.mlu .mathrow .math,.mlu .formula .math{font-family:var(--ml-font);font-size:var(--ml-fs-3);unicode-bidi:isolate;direction:ltr;display:inline-block}
/* ---- from labs_ch14.css ---- */
.mlu .cap-line{margin:8px 0 4px;font-weight:700;font-size:var(--ml-fs-3)}
.mlu .fv-state,.mlu .vx-result,.mlu .bl-result{margin:8px 0;padding:8px 12px;border-radius:var(--ml-r-md);border:1px solid var(--line);border-inline-start:5px solid var(--muted);background:var(--paper)}
.mlu .fv-state.heat{border-inline-start-color:var(--c2)}
.mlu .fv-state.cool{border-inline-start-color:var(--c1)}
.mlu .fv-state.steady{border-inline-start-color:var(--c3)}
.mlu .vx-result.ok,.mlu .bl-result.ok{border-inline-start-color:var(--ok);background:var(--ok-bg)}
.mlu .vx-result.bad,.mlu .bl-result.bad{border-inline-start-color:var(--bad);background:var(--bad-bg)}
.mlu .bl-result.warn{border-inline-start-color:var(--agRh);background:var(--warn-bg)}
.mlu .bl-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){
.mlu .bl-pick{grid-template-columns:1fr}
}
.mlu .bl-types .chip{direction:ltr;unicode-bidi:isolate;min-width:52px}
.mlu .bl-exp{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:var(--ml-fs-3)}
.mlu .bl-exp input{width:20px;height:20px;flex:none}
.mlu .bl-scene{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:620px){
.mlu .bl-scene{grid-template-columns:1fr}
}
.mlu .bl-side{border:1px solid var(--line);border-radius:var(--ml-r-md);background:var(--paper);padding:8px 12px}
.mlu .bl-h{margin:0 0 8px;font-weight:700}
.mlu .bl-l{margin:8px 0 0;font-size:var(--ml-fs-3)}
.mlu .rbc{width:100%;max-width:220px;height:auto;display:block;margin:0 auto}
.mlu .bl-abs{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;align-items:center}
.mlu .bl-ab{display:inline-block;padding:4px 8px;border-radius:var(--ml-r-full);border:1.5px solid var(--bad);color:var(--bad);font-weight:700;background:var(--bad-bg)}
.mlu .bl-none{color:var(--muted)}
.mlu .bl-mtx{font-size:var(--ml-fs-2);text-align:center}
.mlu .bl-mtx th,.mlu .bl-mtx td{padding:4px 8px;text-align:center}
.mlu .bl-c{font-weight:800}
.mlu .bl-c.ok{color:var(--ok)}
.mlu .bl-c.bad{color:var(--bad)}
.mlu .bl-c.warn{color:var(--title-orange)}
.mlu .lab > *{min-width:0}
@media (max-width:620px){
.mlu .bl-mtx{font-size:var(--ml-fs-1)}
.mlu .bl-mtx th,.mlu .bl-mtx td{padding:4px}
}

/* ================= site layer: fitting the book components into the course lesson ================= */
/* typography follows .ml-lesson (Assistant 16px, Fredoka headings). Only what the book needs on top of it. */
.mlu .mlu-body > h3:first-child{margin-top:8px}
.mlu .term{font-family:var(--font-voice);font-weight:700;color:inherit}
.mlu .tg .gl{color:var(--muted)}
.mlu .box.voice .bt,.mlu .box.voice p,.mlu .box.voice li{font-family:var(--font-voice)}
.mlu .box.voice .bt{font-weight:700;font-size:var(--ml-fs-3)}
.mlu .box.opener .bt{font-family:var(--font-head);font-weight:600}
.mlu .box{border-radius:var(--ml-r-md);box-shadow:none}
.mlu .box p{margin:8px 0 0;text-align:start}
.mlu .box .bt + p,.mlu .box p:first-child{margin-top:0}
.mlu .box ul,.mlu .box ol{margin:8px 0 0}
.mlu .checks li{margin:0 0 8px}
.mlu p.note,.mlu .note{text-align:start}
/* tables: the site's lesson table, plus the book's row headings and phone stacking */
.mlu .tbl{margin:8px 0 24px;border-radius:var(--ml-r-md)}
.mlu .tbl caption{color:var(--ink);font-family:var(--font-body);font-size:var(--ml-fs-3)}
.mlu table.data{background:var(--paper);font-size:var(--ml-fs-2);line-height:1.6}
.mlu table.data th{background:var(--th);color:var(--th-ink);border:0;border-bottom:1px solid var(--ml-line);text-align:center}
.mlu table.data td{border:0;border-bottom:1px solid var(--line)}
.mlu table.data td.rowh{background:transparent}
.mlu table.data tr:last-child td{border-bottom:0}
html[data-ml-theme="dark"] .mlu table.data th{border-bottom-color:var(--line)}
/* figures: a clean white card for the drawing in both modes (the book's pictures have white backgrounds) */
.mlu figure.fig{background:var(--paper);border:1px solid var(--line);border-radius:var(--ml-r-lg);padding:8px;margin:20px 0 24px}
.mlu figure.fig .imgbox{background:var(--ml-surface);border-radius:var(--ml-r-md)}
.mlu figure.fig img{border-radius:0;cursor:zoom-in}
.mlu figure.fig figcaption{text-align:start}
.mlu .fig-tools .btn{min-height:44px}
/* buttons inside activities, in the site's button language */
.mlu .btn{border-radius:var(--ml-r-md);border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:700;font-family:inherit}
.mlu .btn:hover{border-color:var(--act)}
.mlu .btn.primary{background:var(--act);border-color:var(--act);color:var(--ml-on-accent)}
.mlu .btn.primary:hover{background:var(--ml-accent);border-color:var(--ml-accent)}
html[data-ml-theme="dark"] .mlu .btn.primary{background:var(--ml-accent);border-color:var(--ml-accent);color:var(--ml-on-accent)}
html[data-ml-theme="dark"] .mlu .btn.primary:hover{background:var(--ml-accent)}
.mlu .btn.ghost{background:transparent}
/* activities: a card like the site's cards, with the activity accent */
.mlu .act{border:1px solid var(--act-line);border-radius:var(--ml-r-lg);background:var(--paper);box-shadow:var(--ml-elev-1);margin:28px 0}
.mlu .act-head{background:var(--act-soft);border-bottom:1px solid var(--act-line);padding:12px 16px}
.mlu .act-kind{color:var(--act-ink)}
.mlu .act-title{font-family:var(--font-head);font-weight:600;color:var(--ink);margin:0px 0 0}
.mlu .act-goal{margin:4px 0 0;text-align:start}
.mlu .act p{text-align:start}
.mlu .act-body > p,.mlu .act-body p{margin:0 0 8px}
.mlu .act-body .fb p,.mlu .act-body .hintbox p{margin:0 0 8px}
.mlu .act.is-done{border-color:var(--ok-ring)}
.mlu .act-status{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:8px 0 0;font-size:var(--ml-fs-2);font-weight:700;color:var(--muted)}
.mlu .act-status[hidden]{display:none!important}
.mlu .mlu-learn:empty,.mlu .mlu-save:empty{display:none}
.mlu .mlu-save{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--ml-r-full);font-size:var(--ml-fs-1);background:var(--bg);color:var(--muted)}
.mlu .mlu-save.is-ok{background:var(--ok-bg);color:var(--ok)}
.mlu .mlu-save.is-wait{background:var(--act-soft);color:var(--act-ink)}
.mlu .mlu-save.is-bad{background:var(--bad-bg);color:var(--bad)}
.mlu .opt.is-ok{border-color:var(--ok-ring)}
.mlu .opt.is-bad{border-color:var(--bad-ring)}
.mlu .fb.ok{border-color:var(--ok-ring)}
.mlu .fb.bad{border-color:var(--bad-ring)}
.mlu .fb.ok .v{color:var(--ok)}
.mlu .fb.bad .v{color:var(--bad)}
.mlu textarea.answer{font-family:inherit;font-size:var(--ml-fs-3)}
.mlu select{font-family:inherit;color:var(--ink)}
html[data-ml-theme="dark"] .mlu select,html[data-ml-theme="dark"] .mlu .ctl,html[data-ml-theme="dark"] .mlu .order li .mv button,
html[data-ml-theme="dark"] .mlu .stepper button{background:var(--ml-surface);color:var(--ink);border-color:var(--line)}

/* one line that says what is saved, and where */
.mlu-savebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:8px 16px;border-radius:var(--ml-r-md);
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--ml-fs-2);line-height:1.5;color:var(--ink)}
.mlu-savebar .mlu-dot{width:8px;height:8px;border-radius:var(--ml-r-full);background:var(--muted);flex:none}
.mlu-savebar.is-ok .mlu-dot{background:var(--ok-ring)}
.mlu-savebar.is-wait .mlu-dot{background:var(--act);animation:mlu-breathe 1.2s ease-in-out infinite}
.mlu-savebar.is-bad{background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad-ring)}
.mlu-savebar.is-bad .mlu-dot{background:var(--bad-ring)}
.mlu-savebar .mlu-savetext{font-weight:700}
.mlu-savebar details{margin-inline-start:auto}
.mlu-savebar summary{cursor:pointer;color:var(--act-ink);font-weight:700;min-height:32px;display:inline-flex;align-items:center}
.mlu-savebar details[open]{flex-basis:100%;margin-inline-start:0}
.mlu-savebar details p{margin:8px 0 0;font-size:var(--ml-fs-2);text-align:start}
@keyframes mlu-breathe{50%{opacity:.35}}
.mlu .mlu-subs{margin:0 0 16px;font-size:var(--ml-fs-2);color:var(--muted);text-align:start}
.mlu .mlu-subs strong{color:var(--ink)}

/* prior knowledge */
.mlu details.mlu-prior{padding:0;margin:0 0 16px}
.mlu details.mlu-prior > summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:8px 16px;font-weight:700;color:var(--title)}
.mlu .mlu-prior-body{padding:0 16px 16px}
.mlu .mlu-prior-body .qh{font-weight:700}

/* book questions on the site */
.mlu .q{border-radius:var(--ml-r-lg)}
.mlu .q .sol{margin-top:12px}
.mlu .q .row-actions{margin-top:8px}
.mlu .mlu-prev{margin-top:8px}

/* the end of a section */
.mlu .mlu-foot{margin:32px 0 0;padding:16px 20px;border-radius:var(--ml-r-xl);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line), var(--ml-elev-1)}
.mlu .mlu-foot-h{margin:0 0 8px!important;font-size:var(--ml-fs-4)!important}
.mlu .mlu-foot .mlp-track{margin:0}
.mlu .mlu-foot-msg{margin:8px 0 0!important;font-weight:700;font-size:var(--ml-fs-2);text-align:start!important}
.mlu .mlu-foot-msg.is-ok{color:var(--ok)}
.mlu .mlu-foot-msg.is-bad{color:var(--bad)}
.mlu .mlu-foot-msg.is-wait{color:var(--act-ink)}
.mlu .mlu-foot .ml-btn-secondary{margin-top:12px}

/* quizzes: the site's practice card (course-learning.css), with the book's explanation */
.mlu-quiz{margin-top:8px}
.mlu-quiz .mlp-save{margin-inline-start:auto}
.mlu-qdots{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.mlu-qdot{min-width:36px;height:36px;padding:0 8px;border-radius:var(--ml-r-md);border:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);font:inherit;font-size:var(--ml-fs-2);font-weight:700;cursor:pointer}
.mlu-qdot.is-ok{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--ok-ring);color:var(--ok)}
.mlu-qdot.is-bad{background:var(--bad-bg);box-shadow:inset 0 0 0 1.5px var(--bad-ring);color:var(--bad)}
.mlu-qdot[aria-current]{box-shadow:inset 0 0 0 2.5px var(--act);outline:0}
.mlu-quiz .mlp-card{background:var(--paper)}
.mlu-quiz .mlp-meta{flex-wrap:wrap}
.mlu-quiz .mlu-qfocus{outline:0}
.mlu-quiz .mlu-level{background:var(--ml-warning-soft);color:var(--ml-warning-text)}
html[data-ml-theme="dark"] .mlu-quiz .mlu-level{background:var(--ml-surface);color:var(--ml-warning-text)}
.mlu-quiz .mlu-stem{font-size:var(--ml-fs-4);line-height:var(--ml-lh-title);color:var(--ink)}
.mlu-quiz .mlu-stem p{margin:0 0 8px;text-align:start}
.mlu-quiz .mlu-stem .qh{font-weight:400}
.mlu-quiz .mlp-option{position:relative;flex-wrap:wrap;background:var(--paper);color:var(--ink)}
.mlu-quiz .mlp-option[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ml-accent);background:var(--ml-accent-soft)}
.mlu-quiz .mlp-option.is-correct{box-shadow:inset 0 0 0 2px var(--ok-ring);background:var(--ok-bg)}
.mlu-quiz .mlp-option.is-wrong{box-shadow:inset 0 0 0 2px var(--bad-ring);background:var(--bad-bg)}
.mlu-quiz .mlp-option:disabled{cursor:default;opacity:1}
.mlu-quiz .mlp-option:disabled:not(.is-correct):not(.is-wrong){opacity:.72}
.mlu-quiz .mlu-otext{flex:1;min-width:0}
.mlu-quiz .mlu-mark{flex-basis:100%;padding-inline-start:36px;font-size:var(--ml-fs-1);font-weight:700}
.mlu-quiz .mlp-option.is-correct .mlu-mark{color:var(--ok)}
.mlu-quiz .mlp-option.is-wrong .mlu-mark{color:var(--bad)}
.mlu-quiz .mlp-option.is-correct .mlp-letter{background:var(--ok-ring)}
.mlu-quiz .mlp-option.is-wrong .mlp-letter{background:var(--bad-ring)}
.mlu-quiz .mlu-explain{color:var(--ink)}
.mlu-quiz .mlu-explain p{margin:0 0 8px;text-align:start}
.mlu-quiz .mlu-explain .mlu-verdict{font-weight:700}
.mlu-quiz .mlu-explain .ansline{font-weight:700}
.mlu-quiz .mlu-points{margin:8px 0 0!important;font-size:var(--ml-fs-2);font-weight:700}
.mlu-quiz .mlp-feedback.ok{color:var(--ml-success)}
.mlu-quiz .mlp-feedback.bad{color:var(--ml-danger)}
html[data-ml-theme="dark"] .mlu-quiz .mlp-feedback.ok{color:var(--ml-success)}
html[data-ml-theme="dark"] .mlu-quiz .mlp-feedback.bad{color:var(--ml-danger)}
.mlu-quiz .mlu-actions-end{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.mlu-quiz .mlp-actions{margin-top:16px}
.mlu-result .mlu-rtable{width:100%;max-width:460px;margin:16px auto 4px;border-collapse:collapse;font-size:var(--ml-fs-3)}
.mlu-result .mlu-rtable caption{font-weight:700;padding-bottom:8px}
.mlu-result .mlu-rtable td,.mlu-result .mlu-rtable th{padding:8px;text-align:start}
.mlu-result p{text-align:center!important}

/* guest, errors, waiting */
.mlu .mlu-wait{padding:32px 4px}
.mlu .mlu-guest,.mlu .mlu-problem{margin-top:8px}
.mlu .mlu-guest .ml-btn-primary{margin-top:12px}

/* the picture viewer */
html.mlu-lb-open,html.mlu-lb-open body{overflow:hidden}
.mlu-lb{position:fixed;inset:0;z-index:2147483000;background:var(--ml-scrim);display:flex;flex-direction:column;direction:rtl}
.mlu-lb-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--ml-inverse);color:var(--ml-on-accent);flex-wrap:wrap}
.mlu-lb-cap{flex:1;min-width:0;font-size:var(--ml-fs-3);line-height:1.4;font-family:var(--ml-font)}

.mlu-lb-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;-webkit-overflow-scrolling:touch;touch-action:pinch-zoom pan-x pan-y}
.mlu-lb-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:var(--ml-surface);border-radius:var(--ml-r-sm)}
.mlu-lb.is-full .mlu-lb-stage{display:block}
.mlu-lb.is-full .mlu-lb-stage img{max-width:none;max-height:none;margin:0 auto}

/* phones */
@media (max-width:620px){
  .mlu .act{border-radius:var(--ml-r-lg);margin:24px 0}
  .mlu .act-head{padding:8px 16px}
  .mlu-savebar{font-size:var(--ml-fs-2)}
  .mlu-savebar details{flex-basis:100%;margin-inline-start:0}
  .mlu .mlu-foot{padding:16px}
  .mlu-quiz .mlu-stem{font-size:var(--ml-fs-3)}
  .mlu-quiz .mlu-actions-end{margin-inline-start:0;width:100%}
  .mlu-quiz .mlu-actions-end > *{flex:1 1 140px}
  .mlu-quiz .mlp-actions > .ml-btn-quiet{flex:1 1 100%}
  .mlu-qdot{min-width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){.mlu-savebar.is-wait .mlu-dot{animation:none}}
@media print{.mlu .row-actions,.mlu .fig-tools,.mlu-savebar,.mlu .act{display:none!important}}

/* ================= design-system layer =================
   Chapters 10-12 use the same components as the rest of the site: ghost and
   filled buttons with five states, tinted rows instead of boxes inside boxes,
   hairlines at 8% ink, one type family and 44px targets. Specificity is
   raised with .mlu.mlu only where the book rules above are more specific. */

/* buttons: ghost by default, filled for the one primary action */
.mlu .btn {
  position: relative;
  min-height: var(--ml-control);
  min-width: calc(var(--ml-control) * 2);
  padding: 0 var(--ml-sp-4);
  border: 0;
  border-radius: var(--ml-r-md);
  background: transparent;
  color: var(--ml-accent-text);
  font-weight: var(--ml-fw-bold);
  line-height: 1.25;
  box-shadow: none;
  transition: background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.mlu .btn:hover { background: var(--ml-accent-soft); }
.mlu .btn:active { background: var(--ml-accent-soft-2); transform: translateY(1px); }
.mlu .btn.primary, html[data-ml-theme="dark"] .mlu .btn.primary {
  background: var(--ml-accent);
  color: var(--ml-on-accent);
  box-shadow: var(--ml-elev-accent);
}
.mlu .btn.primary:hover, html[data-ml-theme="dark"] .mlu .btn.primary:hover { background: var(--ml-accent-hover); }
.mlu .btn.primary:active, html[data-ml-theme="dark"] .mlu .btn.primary:active { background: var(--ml-accent-press); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18); }
.mlu .btn:is([disabled], [aria-disabled="true"]),
html[data-ml-theme="dark"] .mlu .btn.primary:is([disabled], [aria-disabled="true"]) {
  opacity: 1;
  background: var(--ml-sunken-2);
  color: var(--ml-subtle);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.mlu .btn.primary .ml-spin { --ml-spin-color: var(--ml-on-accent); }
.mlu .fig-tools .btn { min-width: 0; min-height: var(--ml-control); padding: 0 var(--ml-sp-3); font-size: var(--ml-fs-2); }

/* icon-sized steppers and move buttons: 44 x 44, ghost */
.mlu.mlu .order li .mv button,
.mlu.mlu .stepper button,
html[data-ml-theme="dark"] .mlu.mlu .order li .mv button,
html[data-ml-theme="dark"] .mlu.mlu .stepper button {
  min-width: var(--ml-tap);
  min-height: var(--ml-tap);
  border: 0;
  border-radius: var(--ml-r-md);
  background: var(--ml-surface);
  color: var(--ml-accent-text);
  box-shadow: var(--ml-elev-1);
  transition: background-color var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.mlu.mlu .order li .mv button:hover, .mlu.mlu .stepper button:hover { background: var(--ml-accent-soft); }
.mlu.mlu .order li .mv button:active, .mlu.mlu .stepper button:active { background: var(--ml-accent-soft-2); transform: translateY(1px); }
.mlu.mlu .order li .mv button:disabled, .mlu.mlu .stepper button:disabled { background: transparent; color: var(--ml-subtle); box-shadow: none; cursor: not-allowed; }

/* fields: the site field, 44px tall inside the book */
.mlu.mlu :is(select, input[type="number"], textarea.answer),
html[data-ml-theme="dark"] .mlu.mlu select {
  min-height: var(--ml-control);
  border: 1px solid var(--ml-line-strong);
  border-radius: var(--ml-r-md);
  background-color: var(--ml-surface);
  color: var(--ml-ink);
  box-shadow: var(--ml-sunken-shadow);
}
.mlu.mlu :is(select, input, textarea):focus,
.mlu.mlu :is(select, input, textarea):focus-visible {
  outline: none;
  border-color: var(--ml-accent);
  box-shadow: 0 0 0 3px var(--ml-accent-line);
}
.mlu.mlu .cz select { min-height: var(--ml-control); border-color: var(--ml-accent-line); background-color: var(--ml-accent-soft); }
.mlu.mlu .cz.is-ok select { border-color: var(--ml-success); background-color: var(--ml-success-soft); }
.mlu.mlu .cz.is-bad select { border-color: var(--ml-danger); background-color: var(--ml-danger-soft); }
.mlu :focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }
.mlu .opt:has(input:focus-visible), .mlu .seg label:has(input:focus-visible) { outline: 2px solid var(--ml-accent); outline-offset: 2px; }

/* activity: one surface; everything inside is a tinted row, never a box */
.mlu.mlu .act {
  border: 0;
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface);
  box-shadow: var(--ml-elev-1);
  margin: var(--ml-sp-8) 0;
}
.mlu.mlu .act.is-done { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ml-success) 45%, transparent), var(--ml-elev-1); }
.mlu.mlu .act-head { background: transparent; border-bottom: 1px solid var(--ml-line); padding: var(--ml-sp-4) var(--ml-sp-4) var(--ml-sp-3); }
.mlu .act-kind { color: var(--ml-accent-text); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); letter-spacing: var(--ml-ls-label); }
.mlu.mlu .act-title { font-family: var(--ml-font); font-weight: var(--ml-fw-bold); font-size: var(--ml-fs-4); line-height: var(--ml-lh-title); letter-spacing: var(--ml-ls-title); }
.mlu.mlu .act-body { padding: var(--ml-sp-4); }

.mlu.mlu :is(.opt, .order li, .slot, .loop .node, .chain .cnode, .lbl-row, .match .mt, .match .md, .task, .ctl, .ro, .legend .row, .cgrid li, .thorax-box) {
  border: 0;
  border-radius: var(--ml-r-md);
  background: var(--ml-sunken);
  box-shadow: none;
}
.mlu.mlu :is(.opt, .match .mt, .match .md) { transition: background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-1) var(--ml-ease); }
.mlu.mlu :is(.opt, .match .mt, .match .md):hover { background: var(--ml-sunken-2); }
.mlu.mlu .opt:has(input:checked), .mlu.mlu .match .mt.on {
  background: var(--ml-accent-soft);
  box-shadow: inset 0 0 0 1px var(--ml-accent-line);
}
.mlu.mlu :is(.opt, .order li, .slot, .loop .node, .chain .cnode, .lbl-row, .match .mt, .match .md, .task).is-ok,
.mlu.mlu .task.done {
  background: var(--ml-success-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ml-success) 55%, transparent);
}
.mlu.mlu :is(.opt, .order li, .slot, .loop .node, .chain .cnode, .lbl-row, .match .mt, .match .md).is-bad {
  background: var(--ml-danger-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ml-danger) 55%, transparent);
}
.mlu.mlu .opt.is-dim { opacity: 1; color: var(--ml-muted); }
.mlu.mlu .loop .node.stim { background: var(--fill-orange); border-inline-start: 4px solid var(--rail-orange); }
.mlu.mlu .chain .cnode.fixed { background: var(--fill-green); }
.mlu.mlu :is(.branches > .branch, .chain > .branch.side) { border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--ml-line); }

/* feedback: tinted message, no frame */
.mlu.mlu .fb { border: 0; }
.mlu.mlu .fb.ok { background: var(--ml-success-soft); }
.mlu.mlu .fb.bad { background: var(--ml-danger-soft); }
.mlu.mlu .fb.info { background: var(--ml-accent-soft); }
.mlu.mlu .hintbox { border: 0; background: var(--ml-warning-soft); }
.mlu.mlu .recall { border: 0; background: var(--ml-accent-soft); }
.mlu.mlu :is(.note, .sol) { border-top-style: solid; border-top-color: var(--ml-line); }

/* chips inside the book */
.mlu.mlu :is(.seg label, .chip) {
  min-height: var(--ml-control-sm);
  border: 0;
  border-radius: var(--ml-r-full);
  background: var(--ml-sunken);
  box-shadow: none;
  position: relative;
}
.mlu.mlu :is(.seg label, .chip)::before { content: ""; position: absolute; inset: calc((var(--ml-control-sm) - var(--ml-tap)) / 2) 0; }
.mlu.mlu :is(.seg label, .chip):hover { background: var(--ml-sunken-2); }
.mlu.mlu :is(.seg label:has(input:checked), .chip[aria-pressed="true"]) {
  background: var(--ml-accent-soft);
  color: var(--ml-accent-text);
  box-shadow: inset 0 0 0 1px var(--ml-accent-line);
}
.mlu.mlu .mech { border: 0; background: var(--ml-sunken); }
.mlu.mlu .mech.on { background: var(--ml-accent-soft); color: var(--ml-accent-text); }
.mlu.mlu .newtag { border: 0; background: var(--ml-accent-soft); color: var(--ml-accent-text); }
.mlu.mlu .match .mn { border: 0; }

/* callout boxes keep the book's families: a 4px rail and a tint, no frame */
.mlu.mlu .box { border: 0; border-inline-start: 4px solid var(--rail); background: var(--fill); padding: var(--ml-sp-4); margin: var(--ml-sp-5) 0; }

/* figures, charts, cards and questions: a single surface each */
.mlu.mlu figure.fig { border: 0; background: var(--ml-surface); box-shadow: var(--ml-elev-1); }
.mlu.mlu :is(.chart, .lbl-fig) { border: 0; box-shadow: inset 0 0 0 1px var(--ml-line); }
.mlu.mlu :is(.pair > div, .cards section) { border: 0; background: var(--ml-sunken); }
.mlu.mlu .q { border: 0; background: var(--ml-surface); box-shadow: var(--ml-elev-1); }
.mlu.mlu .bar .track { border: 0; background: var(--ml-sunken-2); }

/* ---- labs: one surface per role, never a tinted block on a tinted block ----
   Controls: the lab's inputs share one tinted panel. Two control groups in a
   row (a slider, then switches, then another slider) join into that same
   panel with a hairline between them instead of piling up as separate gray
   blocks. Inside it, choices and switches are white. A row of switches on
   its own stays a row of plain options, with no panel around it.
   Readouts: numbers on a thin rail, no box. Figures: the chart's own hairline,
   no panel around it. Tasks and answer slots: white with a hairline, so their
   gray option rows read as rows. Groups of a chain: a rail at the side.
   Every part keeps 16px from the next. The row rule above raises its
   specificity through :is(.loop .node, ...), so these rules repeat .mlu
   three times to come after it on equal terms. */
.mlu.mlu :is(.controls, .controls + .togs, .togs:has(+ .controls)) {
  gap: var(--ml-sp-3) var(--ml-sp-4);
  padding: var(--ml-sp-3) var(--ml-sp-4);
  border-radius: var(--ml-r-lg);
  background: var(--ml-sunken);
}
.mlu.mlu.mlu .ctl, html[data-ml-theme="dark"] .mlu.mlu.mlu .ctl { padding: 0; border-radius: 0; background: transparent; }
.mlu.mlu .ctl:has(.simbar) { grid-column: 1 / -1; }
.mlu.mlu .ctl .simbar { margin: var(--ml-sp-1) 0 0; }
.mlu.mlu :is(.controls, .togs) + :is(.controls, .togs) { border-top: 1px solid var(--ml-line); border-top-left-radius: 0; border-top-right-radius: 0; }
.mlu.mlu :is(.controls, .togs):has(+ :is(.controls, .togs)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mlu.mlu .lab > :is(.controls, .togs) + :is(.controls, .togs) { margin-top: calc(-1 * var(--ml-sp-4)); }
.mlu.mlu :is(.controls, .controls + .togs, .togs:has(+ .controls)) :is(.seg label, .chip, .opt) { background: var(--ml-surface); box-shadow: inset 0 0 0 1px var(--ml-line); }
.mlu.mlu :is(.controls, .controls + .togs, .togs:has(+ .controls)) :is(.seg label, .chip, .opt):hover { background: var(--ml-accent-soft); }
.mlu.mlu :is(.controls, .controls + .togs, .togs:has(+ .controls)) :is(.seg label:has(input:checked), .chip[aria-pressed="true"], .opt:has(input:checked)) {
  background: var(--ml-accent-soft);
  color: var(--ml-accent-text);
  box-shadow: inset 0 0 0 1px var(--ml-accent-line);
}
.mlu.mlu :is(.controls, .controls + .togs, .togs:has(+ .controls)) .opt:has(input:disabled) { background: transparent; color: var(--ml-subtle); }

.mlu.mlu .readouts { gap: var(--ml-sp-3) var(--ml-sp-4); }
.mlu.mlu.mlu .ro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ml-sp-1) var(--ml-sp-3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-inline-start: 3px solid var(--ml-accent-line);
}
.mlu.mlu .ro .k { font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); color: var(--ml-muted); }
.mlu.mlu .ro .v { display: block; margin-top: var(--ml-sp-1); font-size: var(--ml-fs-5); line-height: 1.2; color: var(--ml-ink); }
/* next to a drawing the column is narrow: one step smaller */
.mlu.mlu .breath-grid .ro .v { font-size: var(--ml-fs-4); }

.mlu.mlu.mlu :is(.pair > div, .cards section) { padding: 0; background: transparent; box-shadow: none; }
.mlu.mlu.mlu .thorax-box { background: var(--ml-surface); box-shadow: inset 0 0 0 1px var(--ml-line); }

/* a task or an answer slot is a group of rows under its own heading: no
   frame of its own, a hairline between groups, and when checked a rail in
   the result colour (a fill would put its gray rows on a tint) */
.mlu.mlu.mlu :is(.task, .slot) { background: transparent; box-shadow: none; border-radius: 0; padding: var(--ml-sp-3) 0; }
.mlu.mlu.mlu :is(.task, .slot) + :is(.task, .slot) { border-top: 1px solid var(--ml-line); }
.mlu.mlu.mlu :is(.task.done, .task.is-ok, .slot.is-ok, .slot.is-bad) { background: transparent; box-shadow: none; padding-inline-start: var(--ml-sp-4); border-inline-start: 3px solid var(--ml-success); }
.mlu.mlu.mlu .slot.is-bad { border-inline-start-color: var(--ml-danger); }
.mlu.mlu.mlu .task.done .tstate { color: var(--ml-success); }
.mlu.mlu .tasks { gap: 0; }
.mlu.mlu .task .tstate { display: inline-block; margin-top: var(--ml-sp-1); }

.mlu.mlu :is(.branches > .branch, .chain > .branch.side) {
  border: 0;
  border-inline-start: 3px solid var(--ml-line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  padding-inline-start: var(--ml-sp-3);
}
/* feedback inside a row is a line of text in the row, not a box in the box */
.mlu.mlu .lbl-row .cl-fb { padding: var(--ml-sp-1) 0 0; border: 0; background: transparent; }
/* data tables inside an activity, and figures inside a bagrut question: a
   hairline, not a card in the card */
/* a table or a picture inside an activity or a question is content, not another card: no frame of its own.
   The table keeps its header band and row lines; a picture keeps its light background for the drawing. */
.mlu.mlu :is(.act, .q) table.data { box-shadow: none; }
.mlu.mlu :is(.q, .box) figure.fig { box-shadow: none; background: transparent; padding: 0; }

/* the parts of a lab keep 16px from each other (a grid lab already has the gap) */
.mlu.mlu :not(.lab) > :is(.controls, .togs, .readouts, .pair, .tasks, .breath-grid):not(:first-child) { margin-top: var(--ml-sp-4) !important; }
.mlu.mlu :not(.lab) > :is(.controls, .togs) + :is(.controls, .togs) { margin-top: 0 !important; }

@media (max-width: 620px) {
  .mlu.mlu .readouts.readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlu.mlu .ro .v { font-size: var(--ml-fs-4); }
}

/* image hotspots: 28px to the eye, 44px to the finger */
.mlu .lbl-badge::before { content: ""; position: absolute; inset: -8px; border-radius: var(--ml-r-full); }
.mlu .lbl-badge { box-shadow: var(--ml-elev-2); }

/* the save line and the end-of-section summary */
.mlu-savebar { background: var(--ml-sunken); box-shadow: none; }
.mlu-savebar.is-bad { background: var(--ml-danger-soft); box-shadow: none; }
.mlu-savebar summary { min-height: var(--ml-tap); }
.mlu.mlu .mlu-foot { background: var(--ml-surface); box-shadow: var(--ml-elev-1); }

/* quiz question dots: 44px targets, state by tint */
.mlu-qdot, .mlu-qdot.is-ok, .mlu-qdot.is-bad {
  min-width: var(--ml-tap);
  height: var(--ml-tap);
  box-shadow: none;
  background: var(--ml-sunken);
}
.mlu-qdot:hover { background: var(--ml-sunken-2); }
.mlu-qdot.is-ok { background: var(--ml-success-soft); }
.mlu-qdot.is-bad { background: var(--ml-danger-soft); }
.mlu-qdot[aria-current] { box-shadow: inset 0 0 0 2px var(--ml-accent); }

/* tables stacked on phones: one surface per row, hairlines between cells */
@media (max-width: 620px) {
  .mlu.mlu table.data.stack tr { border: 0; background: var(--ml-surface) !important; box-shadow: var(--ml-elev-1); }
  /* the rows are the cards; the table around them is not a frame */
  .mlu.mlu table.data.stack { box-shadow: none !important; background: transparent !important; }
  .mlu-qdot, .mlu-qdot.is-ok, .mlu-qdot.is-bad { min-width: var(--ml-tap); height: var(--ml-tap); }
  /* one direction on phones: the question dots scroll in one row */
  .mlu-qdots { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--ml-sp-1); }
  .mlu-qdots::-webkit-scrollbar { display: none; }
  .mlu-qdots > li { flex: none; }
  /* one direction on phones: tool grids become a single column */
  .mlu.mlu :is(.controls, .readouts, .togs, .lbl-grid, .cgrid) { grid-template-columns: minmax(0, 1fr); }
}

/* The book's handwriting voice returns for terms and the teacher's boxes
   (זכרו, דימוי, תפיסה שגויה, זהירות, מסיחים). The handwriting face is scaled
   to the letter height of the site face (size-adjust on its @font-face), so
   the boxes use the lesson's own size, 16px, like every other box. No tracking
   and more line height keep nikud clear of the line above. Terms stay at the
   size of their sentence. Every other part of the lesson stays in the site face. */
.mlu.mlu .term { letter-spacing: 0; }
.mlu.mlu .box.voice .bt { font-size: var(--ml-fs-3); line-height: 1.45; letter-spacing: 0; }
.mlu.mlu .box.voice p, .mlu.mlu .box.voice li { font-size: var(--ml-fs-3); line-height: 1.75; letter-spacing: 0; }

/* ---- 1.5.2: colours of chapter 14 and of the exam answer analysis (chapters 10-14) ----
   The colour codemod keeps only the unit variables it maps to site tokens; these are new in 1.1.57, so they are set
   here. The answer analysis keeps the book's green and red in the light theme and takes the site tokens in the dark. */
.mlu{--an-ok:#0D6E5C;--an-bad:#C00000;--rbc:#F28B82;--rbc-in:#E0645A;--agA:#5AA3FF;--agB:#8B5CF6;--agRh:#F59E0B}
html[data-ml-theme="dark"] .mlu{--an-ok:var(--ml-success);--an-bad:var(--ml-danger)}
/* a slider between its minus and plus buttons may shrink, so the row fits a 320px phone (the herd lab in 14.5) */
.mlu .stepper input[type=range]{min-width:0}

/* ---- 1.5.3: the option letter in the accent text colour, readable on every option background (4.5:1 and more) ---- */
.mlu .opt .l{color:var(--ml-accent-text)}

/* 1.6.0: a primary button inside a unit keeps its own text colour (was 2.04:1) */
.mlu .ml-btn-primary { color: var(--b-fg); }

/* 1.6.2 (p180): the picture size standard (tokens --ml-fig-* in tokens.css). The card hugs the picture: its width is the
   smallest of the shape's width, the height cap times the picture's width/height (--fig-r) and the picture's own width
   (--fig-nw), plus the card's 8px padding. The picture fills the card: a definite width, not auto, so with its width and
   height attributes the browser keeps its place while it loads (in 1.6.1 it was 0x0 until it arrived). */
.mlu.mlu figure.fig{--fig-w:var(--ml-fig-w-land,600px);width:auto;max-width:min(100%,calc(var(--fig-w) + 16px),calc(var(--ml-fig-h,min(480px,58vh)) * var(--fig-r,10) + 16px),calc(var(--fig-nw,10000px) + 16px));margin-inline:auto}
.mlu.mlu figure.fig.fig-wide{--fig-w:var(--ml-fig-w-wide,720px)}
.mlu.mlu figure.fig.fig-square{--fig-w:var(--ml-fig-w-square,460px)}
.mlu.mlu figure.fig.fig-tall{--fig-w:var(--ml-fig-w-tall,360px)}
.mlu.mlu figure.fig:not(.zoomed) .imgbox img{width:100%;height:auto;max-width:100%;max-height:none;margin:0 auto}
.mlu.mlu figure.fig.zoomed{max-width:100%}
.mlu.mlu :is(.q, .box) figure.fig{padding:0;max-width:min(100%,var(--fig-w),calc(var(--ml-fig-h,min(480px,58vh)) * var(--fig-r,10)),var(--fig-nw,10000px))}
.mlu.mlu .lbl-fig{--fig-w:var(--ml-fig-w-land,600px);max-width:min(100%,var(--fig-w),calc(var(--ml-fig-h,min(480px,58vh)) * var(--fig-r,10)),var(--fig-nw,10000px))}
.mlu.mlu .lbl-fig.fig-wide{--fig-w:var(--ml-fig-w-wide,720px)}
.mlu.mlu .lbl-fig.fig-square{--fig-w:var(--ml-fig-w-square,460px)}
.mlu.mlu .lbl-fig.fig-tall{--fig-w:var(--ml-fig-w-tall,360px)}
/* A labelling picture: the number markers shrink with the picture (18px to 24px), so on a smaller picture a marker
   does not cover the printed label next to it (unit 2, 2.1: marker 7 covered "מעי ריק" at 24px). */
.mlu.mlu .lbl-fig{container-type:inline-size}
.mlu.mlu .lbl-badge{min-width:clamp(18px,5.2cqw,24px);height:clamp(18px,5.2cqw,24px);padding:0 3px;font-size:clamp(11px,3.3cqw,var(--ml-fs-1,12px))}

/* 1.6.2 (p181): a long address in the credits breaks inside the column */
.mlu .credits .cr-en{overflow-wrap:anywhere}