/* engineering-topic.css — shared component layer for Engineering Science topic pages.
   Extracted 27 August 2026 from the eight N5 topic pages' inline <style> blocks
   (Phase 0 of _notes/engineering-pages-visual-update-plan.md). Rules here were byte-identical
   across every page that carried them; anything that had drifted, was duplicated within a page,
   or is unique to one page stays in that page's inline block, which still follows this link and
   therefore still wins. No value was changed by the extraction.

   Linked AFTER engineering-science.css and BEFORE the page's own <style>. */

main.container > section { scroll-margin-top: 150px; }

/* ---------- panels & text ---------- */
.panel {
      background: var(--eng-surface);
      border: 1px solid var(--eng-border);
      border-radius: var(--eng-radius);
      padding: 1.2rem;
      box-shadow: var(--eng-shadow);
      margin-bottom: 1rem;
    }

.panel h2 { margin: 0 0 .35rem; font-size: 1.18rem; font-weight: 900; color: var(--eng-text); }

.panel h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; font-weight: 900; color: var(--eng-text); }

.concept-tag {
      display: inline-block; font-size: .72rem; font-weight: 900;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--tagink); margin-bottom: .1rem;
    }

.backlink {
      display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
      font-weight: 900; color: var(--tagink); text-decoration: none; margin-bottom: .3rem;
    }

.intro h1 { margin: .15rem 0 .3rem; font-size: 1.5rem; font-weight: 900; }

.btnrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* ---------- mode chooser ---------- */
.modebar { margin: 1rem 0 .4rem; }

.mode-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(160px,100%), 1fr)); }

.mode-card:hover, .mode-card:focus-visible { transform: translateY(-2px); border-color: var(--eng-orange); }

.mode-card:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.mode-card .mc-top { font-weight: 900; font-size: 1rem; }

.mode-card .mc-sub { font-weight: 700; font-size: .84rem; color: var(--eng-muted); }

.legend { margin: .55rem 0 0; font-size: .84rem; font-weight: 700; color: var(--eng-muted); }

/* each reference holds together; the list of them wraps freely */
.exam-ref b { color: var(--eng-text); font-weight: 900; white-space: nowrap; }

.ref-sep { opacity: .5; padding: 0 .15rem; }

.exam-ref-lab {
      display: inline-block; font-size: .66rem; font-weight: 900; letter-spacing: .06em;
      text-transform: uppercase; color: var(--tagink); margin-right: .4rem;
    }

/* ---------- exam / assignment badges ---------- */
.badge {
      display: inline-block; font-size: .66rem; font-weight: 900; letter-spacing: .04em;
      text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: .4rem;
      vertical-align: middle; white-space: nowrap;
    }

.badge.exam   { color: #111; background: var(--eng-orange); }

.badge.assign { color: var(--eng-text); background: transparent; border: 1.5px solid var(--eng-orange); }

/* ---------- collapsible sections ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0 .8rem; }

.toolbar .tb-label { font-size: .8rem; font-weight: 800; color: var(--eng-muted); margin-right: .15rem; }

.tb-btn:hover { border-color: var(--eng-orange); }

.tb-btn:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; cursor: pointer; }

.sec-head .concept-tag { flex-basis: 100%; margin-bottom: .1rem; }

.sec-toggle {
      margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
      min-width: 44px; min-height: 44px; border: 1px solid var(--eng-border); border-radius: 10px;
      background: var(--eng-surface-2); color: var(--eng-text); cursor: pointer; font-size: 1rem;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }

.sec-toggle:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.sec-chev { display: inline-block; transition: transform .18s ease; font-weight: 900; }

.sec.collapsed .sec-chev { transform: rotate(-90deg); }

.sec.collapsed .sec-body { display: none; }

/* ---------- tables ---------- */
.tblwrap { overflow-x: auto; margin-top: .7rem; }

.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }

.tbl th { background: var(--eng-surface-2); font-weight: 900; color: var(--eng-text); }

.tbl td { color: var(--eng-muted); font-weight: 700; }

.tbl td strong, .tbl td b { color: var(--eng-text); }

.note strong { color: var(--eng-text); }

.warn {
      border: 1px solid var(--eng-border); border-left: 5px solid var(--bad);
      border-radius: 12px; background: var(--eng-surface-2); padding: .75rem .9rem; margin-top: .9rem;
    }

.warn h3 { margin: 0 0 .3rem; }

.warn ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--eng-muted); font-weight: 700; line-height: 1.55; }

.warn li { margin: .3rem 0; }

.warn strong { color: var(--eng-text); }

.eq-name { font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--tagink); }

.eq-formula { font-family: "Times New Roman", Times, Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--eng-text); text-align: center; margin: .5rem 0 .35rem; display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap; }

.eq-desc { font-size: .84rem; font-weight: 800; color: var(--eng-muted); text-align: center; }

.frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; line-height: 1.1; }

.frac > span { padding: 0 .4em; }

.frac > .fr-n { border-bottom: 2.5px solid currentColor; padding-bottom: 1px; }

.frac > .fr-d { padding-top: 1px; }

.ex-q { font-weight: 800; color: var(--eng-text); margin: .1rem 0 .5rem; line-height: 1.5; }

.calc { display: inline-grid; grid-template-columns: auto auto auto auto; gap: .32rem .6rem; justify-content: center; text-align: left; font-family: "Times New Roman", Times, Georgia, serif; font-weight: 600; color: var(--eng-text); font-size: 1.1rem; }

.calc-row { display: contents; }

.calc .lhs { text-align: right; white-space: nowrap; }

.calc .eq { text-align: center; }

.calc .rhs { text-align: left; white-space: nowrap; }

.calc .note-cell { font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif; text-align: left; font-weight: 800; font-size: .76rem; color: var(--tagink); white-space: normal; max-width: 18ch; align-self: center; }

.calc .note-cell:not(:empty)::before { content: "← "; }

.ex-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem 1.3rem; }

.ex-flow .calc { grid-column: 2; justify-self: center; }

.ex-conv { grid-column: 1; justify-self: end; text-align: left; font-family: "Times New Roman", Times, Georgia, serif; font-weight: 600; font-size: 1.02rem; color: var(--eng-text); border-left: 3px solid var(--eng-orange); padding: .2rem 0 .2rem .7rem; }

.ex-conv > div { margin: .15rem 0; white-space: nowrap; }

.ex-conv .conv-label { display: block; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--tagink); margin-bottom: .25rem; }

.ex-conv .u { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; font-size: .7rem; font-weight: 800; color: var(--tagink); margin-left: .3rem; }

@media (max-width: 600px) { .ex-flow { grid-template-columns: 1fr; } .ex-conv { grid-column: 1; justify-self: center; border-left: 0; border-top: 3px solid var(--eng-orange); padding: .5rem 0 0; } .ex-flow .calc { grid-column: 1; } }

@media (max-width: 520px) { .calc { grid-template-columns: auto auto auto; } .calc .note-cell { grid-column: 1 / -1; max-width: none; text-align: center; } .calc .note-cell:empty { display: none; } .calc .note-cell:not(:empty)::before { content: "↳ "; } }

.practice-tag {
      display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .05em;
      text-transform: uppercase; color: #111; background: var(--eng-orange);
      padding: 3px 10px; border-radius: 999px; margin-bottom: .4rem;
    }

.stem { margin: .9rem 0 0; font-weight: 900; color: var(--eng-text); line-height: 1.5; }

.marks {
      display: inline-block; font-size: .74rem; font-weight: 900; letter-spacing: .03em;
      color: var(--tagink); border: 1px solid var(--eng-border); border-radius: 999px;
      padding: 2px 8px; margin-left: .45rem; white-space: nowrap; vertical-align: middle;
    }

details.reveal {
      margin-top: .5rem; border: 1px solid var(--eng-border); border-radius: 10px;
      overflow: hidden; background: var(--eng-surface); padding: 0; box-shadow: none;
    }

details.reveal > summary {
      cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem;
      min-height: 44px; padding: .6rem .8rem; font-weight: 900; color: var(--eng-text);
      background: var(--eng-surface-2);
    }

details.reveal > summary::-webkit-details-marker { display: none; }

details.reveal > summary::after { content: "▾"; margin-left: auto; font-weight: 900; opacity: .8; transition: transform .18s ease; }

details.reveal[open] > summary::after { transform: rotate(180deg); }

details.reveal .reveal-body strong { color: var(--eng-text); }

details.reveal .reveal-body ul, details.reveal .reveal-body ol { margin: .3rem 0 0; padding-left: 1.2rem; }

details.reveal .reveal-body li { margin: .25rem 0; }

.model-tag { display: block; font-size: .78rem; font-weight: 900; color: var(--tagink); margin-bottom: .25rem; }

.page-ref {
      font-size: .74rem; font-weight: 900; color: var(--eng-muted);
      border: 1px solid var(--eng-border); border-radius: 999px; padding: 2px 8px;
      margin-left: .45rem; white-space: nowrap;
    }

/* ---------- energy diagrams ---------- */
.figure { margin: .8rem 0 .2rem; }

.figure figcaption { color: var(--eng-muted); font-weight: 700; font-size: .85rem; text-align: center; margin-top: .3rem; }

.bd { display: block; width: 100%; height: auto; margin: 0 auto; }

.bd.w520 { max-width: 520px; }

.bd.w640 { max-width: 640px; }

.bd .blk { fill: var(--eng-surface-2); stroke: var(--eng-text); stroke-width: 2; }

.bd .arr { stroke: var(--eng-text); stroke-width: 2; fill: none; }

.bd .arrh { fill: var(--eng-text); stroke: none; }

.bd .waste { stroke: var(--bad); stroke-width: 2; fill: none; }

.bd .wasteh { fill: var(--bad); stroke: none; }

.bd .wt { fill: var(--bad); font-size: 11.5px; font-weight: 800; }

.bd .use { stroke: var(--good); stroke-width: 2; fill: none; }

.bd .useh { fill: var(--good); stroke: none; }

.bd .ut { fill: var(--good); font-size: 11.5px; font-weight: 800; }

.widget h3 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 900; color: var(--eng-text); }

.widget .hint { color: var(--eng-muted); font-weight: 700; font-size: .9rem; margin: 0 0 .6rem; }

.btn {
      display: inline-flex; align-items: center; gap: .4rem; min-height: 48px;
      padding: .55rem .95rem; border-radius: 10px; border: 1px solid var(--eng-border);
      background: var(--eng-surface); color: var(--eng-text); font-weight: 900; cursor: pointer;
      font-family: inherit; font-size: 1rem;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }

.btn:hover { border-color: var(--eng-orange); }

.btn.primary { background: var(--eng-orange); color: #111; border-color: transparent; }

.btn:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.score { font-weight: 900; margin-top: .6rem; color: var(--eng-text); }

.match-rows { display: grid; gap: .55rem; }

.match-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
      padding: .5rem .6rem; border: 1px solid var(--eng-border); border-radius: 10px;
      background: var(--eng-surface);
    }

.match-q { flex: 1; min-width: 220px; font-weight: 800; color: var(--eng-text); line-height: 1.45; }

.match-ctl { display: inline-flex; align-items: center; gap: .4rem; }

.match-ctl select {
      min-height: 44px; padding: .35rem .5rem; border-radius: 8px;
      border: 1px solid var(--eng-border); background: var(--eng-surface);
      color: var(--eng-text); font-family: inherit; font-weight: 800; font-size: .95rem;
    }

.match-mark { font-weight: 900; min-width: 1.2em; }

.match-mark.ok { color: var(--good); }

.match-mark.no { color: var(--bad); }

.build-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .4rem; }

.build-row .flow { font-weight: 900; color: var(--eng-muted); }

.slot-col { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; }

.slot-head { font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--tagink); }

.slot.filled { border-style: solid; color: var(--eng-text); }

.slot.ok { border-color: var(--good); }

.slot.no { border-color: var(--bad); }

.slot:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.slot .slot-mark { font-weight: 900; }

.slot.ok .slot-mark { color: var(--good); }

.slot.no .slot-mark { color: var(--bad); }

.tile {
      display: inline-flex; align-items: center; min-height: 48px; padding: .45rem .8rem;
      border: 1px solid var(--eng-border); border-radius: 10px;
      background: var(--eng-surface); color: var(--eng-text);
      font-family: inherit; font-weight: 900; font-size: .92rem; cursor: pointer;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }

.tile:hover { border-color: var(--eng-orange); }

.tile:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.tile:disabled { opacity: .35; cursor: not-allowed; }

.q { margin-top: .9rem; padding: .8rem; border: 1px solid var(--eng-border); border-radius: 12px; background: var(--eng-surface); }

.q p.qstem { margin: 0 0 .5rem; font-weight: 900; color: var(--eng-text); line-height: 1.5; }

.opt {
      display: block; padding: .65rem .6rem; border-radius: 8px;
      border: 1px solid var(--eng-border); margin-bottom: .4rem;
      font-weight: 700; color: var(--eng-text); cursor: pointer;
    }

.opt input { margin-right: .5rem; }

.opt.correct { border-color: var(--good); background: rgba(21,128,61,.12); }

.opt.wrong { border-color: var(--bad); background: rgba(185,28,28,.10); }

.opt .mark-note { font-weight: 900; white-space: nowrap; margin-left: .4rem; }

.opt.correct .mark-note { color: var(--good); }

.opt.wrong .mark-note { color: var(--bad); }

.rag-group { margin-top: 1rem; font-weight: 900; color: var(--eng-text); border-bottom: 2px solid var(--eng-border); padding-bottom: .25rem; }

.rag-item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--eng-border); }

.rag-item .crit { flex: 1; min-width: 200px; font-weight: 700; color: var(--eng-text); line-height: 1.45; }

.rag-btns { display: inline-flex; gap: .35rem; }

.rag-btns button {
      min-width: 44px; min-height: 44px; border-radius: 8px;
      border: 1px solid var(--eng-border); background: var(--eng-surface);
      color: var(--eng-text); font-weight: 900; cursor: pointer; font-family: inherit;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }

.rag-btns button:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.rag-btns button[data-on="R"][aria-pressed="true"] { background: #c2410c; color: #fff; border-color: transparent; }

.rag-btns button[data-on="A"][aria-pressed="true"] { background: #b45309; color: #fff; border-color: transparent; }

.rag-btns button[data-on="G"][aria-pressed="true"] { background: #15803d; color: #fff; border-color: transparent; }

.rag-btns button[aria-pressed="true"] { outline: 2px solid var(--eng-text); outline-offset: 2px; }

.rag-summary { margin-top: .7rem; font-weight: 900; color: var(--eng-text); }

/* chunk a section into clear stops */
.sec-body > h3 { margin-top: 1.7rem; padding-top: 1.05rem; border-top: 1px solid var(--eng-border); }

.sec-body > h3:first-child { margin-top: .3rem; padding-top: 0; border-top: 0; }

.keypoint strong { color: var(--eng-text); }

.keypoint::before {
      content: "Key idea"; display: block; margin-bottom: .25rem;
      font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--tagink);
    }

.practice .stem:not(:first-of-type) { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--eng-border); }

.tbl tbody tr:nth-child(even) td { background: rgba(0,0,0,.025); }

.mode-card[href="#check"] { border-left-color: var(--eng-orange); }

/* ===== Live efficiency + Sankey (WP-2) / energy-balance (WP-10) / calc gen (WP-11) ===== */
.kit-row { display:grid; grid-template-columns:auto 1fr 4.5rem; align-items:center; gap:.6rem; margin:.5rem 0; }

.kit-row input[type=range] { width:100%; accent-color:var(--eng-orange); min-height:32px; }

.kit-row input[type=number] { width:100%; min-height:40px; padding:.3rem .4rem; border:1px solid var(--eng-border); border-radius:8px; background:var(--eng-surface); color:var(--eng-text); font-weight:900; text-align:center; }

.effsim-readout b { font-size:1.8rem; font-weight:900; color:var(--eng-orange); line-height:1.1; }

.effsim-readout span { display:block; font-size:.78rem; font-weight:800; color:var(--eng-muted); }

.effsim-bar { display:flex; height:36px; border-radius:10px; overflow:hidden; border:1px solid var(--eng-border); background:var(--eng-surface); margin:.55rem 0 .2rem; }

.effsim-seg { display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.8rem; white-space:nowrap; overflow:hidden; transition:width .25s ease; }

/* same green/red grammar as the block diagrams; both clear AA on white text */
.effsim-useful { background:#15803d; color:#fff; }

.effsim-wasted { background:#b91c1c; color:#fff; }

.bal-track { position:relative; height:34px; border:1px solid var(--eng-border); border-radius:10px; background:var(--eng-surface); overflow:visible; margin:1.3rem 0 .2rem; }

.bal-track .bal-fill { border-radius:9px; overflow:hidden; }

.bal-fill { display:flex; height:100%; }

.bal-fill .effsim-seg { font-size:.78rem; }

.bal-target { position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--eng-text); }

.bal-target::after { content:"input"; position:absolute; top:-1.1rem; left:50%; transform:translateX(-50%); font-size:.66rem; font-weight:900; color:var(--eng-text); white-space:nowrap; }

.bal-status { text-align:center; font-weight:900; font-size:.9rem; margin:.5rem 0 0; }

.bal-status.ok { color:var(--good); }

.bal-status.off { color:var(--bad); }

.kit-task { margin-top:.8rem; border:1px solid var(--eng-border); border-left:5px solid var(--eng-orange); border-radius:12px; background:var(--eng-surface-2); padding:.7rem .9rem; }

.kit-task .kit-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.5rem; }

.kit-task input[type=number] { width:5.5rem; min-height:40px; padding:.3rem .4rem; border:1px solid var(--eng-border); border-radius:8px; background:var(--eng-surface); color:var(--eng-text); font-weight:900; text-align:center; }

.kit-task button { min-height:44px; padding:.5rem 1rem; border:1px solid var(--eng-orange); border-radius:10px; background:var(--eng-orange); color:#111; font-weight:900; font-family:inherit; cursor:pointer; }

.kit-fb { margin:.55rem 0 0; font-weight:900; font-size:.9rem; min-height:1.2em; }

.kit-fb.ok { color:var(--good); }

.kit-fb.no { color:var(--bad); }

.gen-q { font-weight:900; color:var(--eng-text); font-size:1rem; margin:.3rem 0; }

.gen-given { font-family:"Times New Roman", Times, Georgia, serif; font-size:1.05rem; color:var(--eng-text); margin:.25rem 0; }

.gen-given var { font-style:italic; }

.gen-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.5rem; }

.gen-actions input[type=number] { width:7rem; min-height:44px; padding:.3rem .5rem; border:1px solid var(--eng-border); border-radius:8px; background:var(--eng-surface); color:var(--eng-text); font-weight:900; text-align:center; }

.gen-actions button { min-height:44px; padding:.5rem 1rem; border-radius:10px; font-weight:900; font-family:inherit; cursor:pointer; }

#gen-check { border:1px solid var(--eng-orange); background:var(--eng-orange); color:#111; }

#gen-new { border:1px solid var(--eng-border); background:var(--eng-surface); color:var(--eng-text); }

.notes ul { padding-left: 1.1rem; margin: .4rem 0 0; }

.notes li { margin: .3rem 0; }

.chk-list { margin: .5rem 0 0; padding-left: 0; list-style: none; }

.chk-list li { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0; color: var(--eng-muted); font-weight: 700; line-height: 1.5; }

.chk-list li::before { content: "☑"; color: var(--tagink); font-weight: 900; }

.notes, .notes li { color: var(--eng-muted); font-weight: 500; line-height: 1.6; }

.symdef .s { stroke: var(--eng-text); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.symdef .sf { fill: var(--eng-surface); stroke: var(--eng-text); stroke-width: 2.2; }

.symdef .fill { fill: var(--eng-text); }

.sym-name { font-weight: 900; color: var(--eng-text); font-size: .88rem; }

.sym-fn { font-weight: 700; color: var(--eng-muted); font-size: .78rem; line-height: 1.4; margin-top: .15rem; }

/* ---------- simulator task cards ---------- */
.simcard {
      margin-top: .9rem; border: 1px solid var(--eng-border); border-left: 5px solid var(--eng-orange);
      border-radius: 12px; background: var(--eng-surface-2); padding: .75rem .9rem;
    }

.simcard .sim-tag {
      display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .05em;
      text-transform: uppercase; color: #111; background: var(--eng-orange);
      padding: 3px 10px; border-radius: 999px; margin-bottom: .4rem;
    }

.simcard h4 { margin: 0 0 .3rem; font-size: .98rem; font-weight: 900; color: var(--eng-text); }

.simcard ol { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--eng-muted); font-weight: 500; line-height: 1.6; }

.simcard ol li { margin: .3rem 0; }

.simcard strong { color: var(--eng-text); }

.simcard .btnrow { margin-top: .6rem; }

.sim-readout { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:center; text-align:center; margin:.6rem 0 .2rem; }

.sim-readout .sr-item b { display:block; font-size:1.7rem; font-weight:900; color:var(--eng-orange); line-height:1.1; }

.sim-readout .sr-item span { display:block; font-size:.76rem; font-weight:800; color:var(--eng-muted); }

/* ---------- beta-testing notice ---------- */
.beta-note {
      display: flex; align-items: flex-start; gap: .5rem;
      margin: .2rem 0 .8rem; padding: .6rem .85rem; max-width: 72ch;
      border: 1.5px dashed var(--eng-orange); border-radius: 12px;
      background: var(--key-bg); color: var(--eng-text);
      font-weight: 700; font-size: .9rem; line-height: 1.5;
    }

.beta-note .beta-tag {
      flex-shrink: 0; font-size: .66rem; font-weight: 900; letter-spacing: .05em;
      text-transform: uppercase; color: #111; background: var(--eng-orange);
      padding: 2px 8px; border-radius: 999px; margin-top: .1rem;
    }

.eyebrow { margin: 0; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--tagink); }

.badge.enrich { color: var(--eng-muted); background: transparent; border: 1.5px dashed var(--eng-border); }

.bd.w420 { max-width: 420px; }

.bd .ln { stroke: var(--eng-text); stroke-width: 2; fill: none; }

.gear-readout { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:center; text-align:center; margin:.6rem 0 .2rem; }

.gear-readout .gr-item b { display:block; font-size:1.7rem; font-weight:900; color:var(--eng-orange); line-height:1.1; }

.gear-readout .gr-item span { display:block; font-size:.76rem; font-weight:800; color:var(--eng-muted); }

.speedbar-wrap { margin:.6rem 0 .1rem; }

.speedbar-label { font-size:.76rem; font-weight:900; color:var(--eng-muted); margin:.35rem 0 .1rem; }

.speedbar { height:26px; border:1px solid var(--eng-border); border-radius:8px; background:var(--eng-surface); overflow:hidden; }

.speedbar > div { height:100%; display:flex; align-items:center; padding-left:.5rem; font-weight:900; font-size:.78rem; color:#111; white-space:nowrap; transition:width .25s ease; }

.speedbar .in-fill  { background: var(--eng-orange); }

.speedbar .out-fill { background: #2e8b57; color:#fff; }

.mode-card[href="#answers"], .mode-card[href="#s4"] { border-left-color: var(--ex-bd); }

.cd { display: block; width: 100%; height: auto; margin: 0 auto; }

.cd.w520 { max-width: 520px; }

.cd .s { stroke: var(--eng-text); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.cd .fill { fill: var(--eng-text); }

.cd .dn { stroke: var(--bad); stroke-width: 2.5; fill: none; }

.cd .dnh { fill: var(--bad); stroke: none; }

.cd .dnt { fill: var(--bad); font-size: 11px; font-weight: 800; }

.cd .up { stroke: var(--good); stroke-width: 2.5; fill: none; }

.cd .uph { fill: var(--good); stroke: none; }

.cd .upt { fill: var(--good); font-size: 11px; font-weight: 800; }

.symdef .solid { fill: var(--eng-text); stroke: var(--eng-text); stroke-width: 2.2; stroke-linejoin: round; }

.cd.w320 { max-width: 320px; }

.cd.w560 { max-width: 560px; }

.cd .solid { fill: var(--eng-text); stroke: var(--eng-text); stroke-width: 2; stroke-linejoin: round; }

.cd .hot { stroke: var(--tagink); }

.vbar { display:flex; height:32px; border-radius:9px; overflow:hidden; border:1px solid var(--eng-border); background:var(--eng-surface); margin:.55rem 0 .2rem; }

.vbar > div { display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.78rem; white-space:nowrap; overflow:hidden; transition:width .25s ease; }

.vbar .v1seg { background: var(--eng-orange); color:#111; }

.vbar .v2seg { background: #2e8b57; color:#fff; }

/* truth tables — monospace 0/1 cells */
.ttable { border-collapse: collapse; font-size: .95rem; margin-top: .6rem; }

.ttable th, .ttable td { border: 1px solid var(--eng-border); padding: .4rem .9rem; text-align: center; }

.ttable th { background: var(--eng-surface-2); font-weight: 900; color: var(--eng-text); }

.ttable td { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; color: var(--eng-text); }

/* ---------- code blocks ---------- */
.codeblock {
      margin: .7rem 0 0; padding: .8rem .95rem; border: 1px solid var(--eng-border);
      border-radius: 10px; background: var(--eng-surface-2); overflow-x: auto;
    }

.codeblock pre { margin: 0; }

.codeblock code {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: .88rem; line-height: 1.55; color: var(--eng-text); font-weight: 600;
      white-space: pre;
    }

.code-cols { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }

.code-col h4 { margin: .6rem 0 .2rem; font-size: .84rem; font-weight: 900; color: var(--tagink); text-transform: uppercase; letter-spacing: .04em; }

.match-q code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

/* gate playground */
.gate-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
      padding: .6rem .7rem; border: 1px solid var(--eng-border); border-radius: 12px;
      background: var(--eng-surface); margin-top: .55rem;
    }

.gate-name { min-width: 4.2rem; font-weight: 900; color: var(--eng-text); }

.gate-ins { display: inline-flex; gap: .45rem; }

.in-btn {
      min-width: 52px; min-height: 48px; border-radius: 10px; border: 2px solid var(--eng-border);
      background: var(--eng-surface); color: var(--eng-text); font-weight: 900; font-size: 1.05rem;
      font-family: inherit; cursor: pointer;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }

.in-btn[aria-pressed="true"] { background: var(--eng-orange); color: #111; border-color: transparent; }

.in-btn:focus-visible { outline: 3px solid var(--eng-orange); outline-offset: 2px; }

.gate-glyph { flex-shrink: 0; }

.gate-glyph svg { display: block; width: 84px; height: 44px; }

.gate-glyph .s { stroke: var(--eng-text); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.gate-out {
      display: inline-flex; align-items: center; gap: .45rem; font-weight: 900; color: var(--eng-text);
    }

.lamp {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 52px; min-height: 48px; border-radius: 10px; border: 2px solid var(--eng-border);
      background: var(--eng-surface); color: var(--eng-muted); font-weight: 900; font-size: 1.05rem;
    }

.lamp.on { background: #2e8b57; color: #fff; border-color: transparent; }

/* builder (flowchart sequencer) */
.build-col { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .4rem; }

.build-col .flow { font-weight: 900; color: var(--eng-muted); }

.q p.qstem code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

/* ---------- branch cards ---------- */
.branch-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); margin-top: .7rem; }

.branch {
      border: 1px solid var(--eng-border); border-left: 5px solid var(--eng-orange);
      border-radius: 12px; background: var(--eng-surface-2); padding: .65rem .8rem;
    }

.branch h4 { margin: 0 0 .15rem; font-size: .95rem; font-weight: 900; color: var(--eng-text); }

.branch p { margin: 0; font-size: .9rem; font-weight: 700; color: var(--eng-muted); line-height: 1.45; }

.howto {
      border: 2px solid var(--eng-orange); border-radius: 14px;
      background: var(--eng-surface-2); padding: .85rem 1rem; margin-top: .9rem;
    }

.howto h3 { margin: 0 0 .3rem; }

.howto p { margin: .3rem 0 0; color: var(--eng-muted); font-weight: 700; line-height: 1.55; }

.howto p strong { color: var(--eng-text); }

.bd.w400 { max-width: 400px; }

.bd.w480 { max-width: 480px; }

.bd.w560 { max-width: 560px; }

.bd .fb { stroke: var(--eng-orange); stroke-width: 2.2; fill: none; }

.bd .fbh { fill: var(--eng-orange); stroke: none; }

.bd .fbt { fill: var(--tagink); font-size: 11px; font-weight: 800; }

/* builders */
.build-head { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; margin-bottom: .35rem; }

.fb-label { font-weight: 900; color: var(--tagink); font-size: .85rem; }

/* ---------- system-boundary diagram extras ---------- */
.bd .sysbound { fill: none; stroke: var(--eng-muted); stroke-width: 1.6; stroke-dasharray: 5 4; }

.bd .boundlabel { fill: var(--eng-muted); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

.bd .ext { fill: var(--eng-muted); font-size: 10.5px; font-weight: 800; }

.bd .drv .blk { stroke-dasharray: 3 2; }

/* colour key */
.colour-key{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; }

.ck{ display:inline-flex; align-items:center; gap:.35rem; font-weight:800; font-size:.8rem; color:var(--eng-muted); }

.ck::before{ content:""; width:.85em; height:.85em; border-radius:3px; background:var(--ckc,var(--eng-orange)); }

.ck.int{ --ckc:var(--f-int); }

.ck.ex{ --ckc:var(--f-ex); }

.ck.prac{ --ckc:var(--f-prac); }

/* progress HUD + badges */
.hud-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin:.5rem 0 .7rem; }

.hud-stat{ flex:1; min-width:92px; text-align:center; padding:.6rem .4rem; border:1px solid var(--eng-border); border-radius:12px; background:var(--eng-surface); }

.hud-num{ display:block; font-size:1.55rem; font-weight:900; color:var(--eng-text); line-height:1.1; }

.hud-lab{ display:block; font-size:.76rem; font-weight:800; color:var(--eng-muted); margin-top:.15rem; }

.g-track{ height:14px; border-radius:999px; background:var(--eng-surface); border:1px solid var(--eng-border); overflow:hidden; }

.g-track>span{ display:block; height:100%; width:0; background:var(--eng-orange); transition:width .35s ease; }

.badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }

.badge-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .75rem; border:1px solid var(--eng-border); border-radius:999px; background:var(--eng-surface); font-weight:900; font-size:.85rem; color:var(--eng-muted); opacity:.55; }

.badge-chip.earned{ opacity:1; color:var(--eng-text); border-color:var(--eng-orange); background:var(--eng-surface-2); }

.badge-chip .bi{ font-size:1.05rem; }

/* cloze + predict + feedback line */
.cloze-text{ font-weight:700; color:var(--eng-text); line-height:2.2; }

.cl-sel{ min-height:44px; padding:.25rem .45rem; border-radius:8px; border:1px solid var(--eng-border); background:var(--eng-surface); color:var(--eng-text); font-weight:800; font-family:inherit; font-size:.95rem; margin:0 .12rem; }

.cl-sel.ok{ border-color:var(--good); border-width:2px; }

.cl-sel.no{ border-color:var(--bad); border-width:2px; }

.predict-btns{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem; }

.predict-fb{ margin-top:.7rem; }

.fb-line{ margin-top:.7rem; font-weight:900; min-height:1.2em; }

.fb-line.ok{ color:var(--good); }

.fb-line.no{ color:var(--bad); }

/* sticky bottom-right progress badge */
.sticky-prog{
      position:fixed; z-index:330;
      right:calc(12px + env(safe-area-inset-right));
      bottom:calc(12px + env(safe-area-inset-bottom));
      display:inline-flex; align-items:center; gap:.45rem;
      min-height:44px; padding:.5rem .85rem; border-radius:999px;
      background:var(--eng-surface); color:var(--eng-text);
      border:2px solid var(--eng-orange); box-shadow:var(--eng-shadow);
      font-weight:900; font-size:.9rem; text-decoration:none;
      -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }

.sticky-prog.complete{ border-color:var(--good); }

.sticky-prog .sp-ico{ font-size:1.05rem; }

@media (max-width:380px){ .sticky-prog{ font-size:.82rem; padding:.45rem .7rem; } }

/* ===== Runnable control loop (WP-6) ===== */
.loop-row { display:grid; grid-template-columns:auto 1fr 4rem; align-items:center; gap:.6rem; margin:.5rem 0; }

.loop-row > label { font-weight:900; font-size:.9rem; color:var(--eng-text); min-width:6rem; }

.loop-row input[type=range] { width:100%; accent-color:var(--eng-orange); min-height:32px; }

.loop-row output { font-weight:900; color:var(--eng-text); text-align:center; }

.loop-controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0; }

.loop-toggle { display:inline-flex; gap:.3rem; padding:.25rem; border:1px solid var(--eng-border); border-radius:12px; background:var(--eng-surface); }

.loop-toggle button { min-height:40px; padding:.4rem .9rem; border:0; border-radius:9px; background:transparent; color:var(--eng-muted); font-weight:900; font-family:inherit; cursor:pointer; }

.loop-toggle button[aria-pressed=true] { background:var(--eng-orange); color:#111; }

.loop-disturb { min-height:44px; padding:.5rem 1rem; border:1px solid var(--eng-border); border-radius:10px; background:var(--eng-surface); color:var(--eng-text); font-weight:900; font-family:inherit; cursor:pointer; }

.loop-stage { border:1px solid var(--eng-border); border-radius:12px; background:var(--eng-surface); padding:.5rem; }

.loop-stage svg { width:100%; height:auto; display:block; }

.loop-line { fill:none; stroke:var(--eng-orange); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }

.loop-sp { stroke:var(--eng-muted); stroke-width:1.4; stroke-dasharray:5 4; }

.loop-axis { stroke:var(--eng-border); stroke-width:1; }

.loop-axis-txt { fill:var(--eng-muted); font-size:10px; font-weight:800; font-family:inherit; }

.loop-readouts { display:flex; flex-wrap:wrap; gap:8px; margin:.6rem 0 0; }

.loop-stat { flex:1; min-width:88px; text-align:center; padding:.5rem .4rem; border:1px solid var(--eng-border); border-radius:12px; background:var(--eng-surface-2); }

.loop-stat b { display:block; font-size:1.05rem; font-weight:900; color:var(--eng-text); }

.loop-stat span { display:block; font-size:.72rem; font-weight:800; color:var(--eng-muted); margin-top:.1rem; }

.loop-heater-on { color:var(--bad); }

.loop-heater-off { color:var(--eng-muted); }

.loop-status { text-align:center; font-weight:900; font-size:.9rem; margin:.5rem 0 0; min-height:1.2em; }

.loop-status.ok { color:var(--good); }

/* Side-by-side: controls left, graph right on wide screens */
@media (min-width:720px){
      #loopSim { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:1.3rem; align-items:start; }
      #loopSim > h3, #loopSim > .hint, #loopSim > .loop-readouts, #loopSim > .loop-status { grid-column:1 / -1; }
      #loopSim > .loop-row { grid-column:1; }
      #loopSim > .loop-controls { grid-column:1; }
      #loopSim > .loop-stage { grid-column:2; grid-row:3 / span 2; align-self:start; max-width:440px; }
    }

/* skill cards */
.skillcard {
      margin-top: .9rem; border: 1px solid var(--eng-border); border-left: 5px solid var(--eng-orange);
      border-radius: 12px; background: var(--eng-surface-2); padding: .75rem .9rem;
    }

.skillcard .sk-tag {
      display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .05em;
      text-transform: uppercase; color: #111; background: var(--eng-orange);
      padding: 3px 10px; border-radius: 999px; margin-bottom: .4rem;
    }

.skillcard h4 { margin: 0 0 .3rem; font-size: .98rem; font-weight: 900; color: var(--eng-text); }

.skillcard p, .skillcard li { color: var(--eng-muted); font-weight: 500; line-height: 1.6; }

.skillcard p { margin: .3rem 0 0; }

.skillcard ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.skillcard li { margin: .25rem 0; }

.skillcard strong { color: var(--eng-text); }

.skillcard .btnrow { margin-top: .6rem; }

.mode-card[href="#s6"] { border-left-color: var(--ex-bd); }


/* ---- Phase 2 density pass -------------------------------------------------
   Opt in per page with <body class="eng-dense">. Phase 3 adds the class to the
   remaining seven topic pages — nothing below is duplicated per page.
   .keypoint deliberately keeps its tint: it is the one anchor per section. */

/* .note — a 3px left rule instead of a tinted, padded box */
.eng-dense .note{background:none;border:0;border-left:3px solid var(--eng-orange);
  border-radius:0;padding:0 0 0 .8rem;margin-top:.75rem}

/* .exam-ref — a plain labelled line; the .exam-ref-lab pill and <b> refs stay */
.eng-dense .exam-ref{background:none;border:0;border-radius:0;padding:0;margin:.45rem 0 0}

/* .widget — un-nested inside an already-framed .panel. Hairline rule for
   separation; the "do" tint stays so practice still reads apart from prose. */
.eng-dense .widget{border:0;border-top:1px solid var(--key-bd);border-radius:0;
  background:var(--do-bg);padding:.7rem .75rem .8rem;margin-top:1.15rem}

/* mode chooser as a single row of chips, label only */
.eng-dense .mode-grid.is-compact{display:flex;flex-wrap:wrap;gap:.5rem}
.eng-dense .mode-grid.is-compact .mode-card{flex:0 1 auto;display:inline-flex;align-items:center;
  min-height:44px;padding:.5rem .95rem;border-radius:999px;border-left-width:1px;
  border-left-color:var(--eng-border)}
.eng-dense .mode-grid.is-compact .mc-sub{display:none}
.eng-dense .mode-grid.is-compact .mc-top{font-size:.92rem}

/* Short landscape — the proven task-page treatment (CLAUDE.md one-screen rule).
   Note this fires at 1280x900 too, not only on an iPad: max-height is inclusive and
   900 is a common laptop viewport. So it must not hide anything a pupil needs — the
   sub-nav stays (on a topic page it is the navigation, not chrome) and so does the
   one-line intro. Only the banner art and the badge notice go. */
@media (min-width:821px) and (max-height:900px){
  /* The task pages slim the banner to a 76px strip. That works there because the art is
     decoration; here the art carries the subject title, and a 15:1 strip can only crop a
     3:1 banner straight through it. So the image goes and its overlay becomes the title
     bar — the same space is reclaimed and no artwork is shown cropped. */
  .eng-dense .banner-wrap{aspect-ratio:auto;height:auto;box-shadow:none}
  .eng-dense .banner-wrap .banner{display:none}
  .eng-dense .banner-overlay-text{position:static;padding:.45rem .9rem;border-top:0;
    border-bottom:1px solid var(--eng-border);background:var(--eng-surface-2);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .eng-dense .banner-overlay-text h1{font-size:1.02rem}
  .eng-dense .banner-overlay-text p{display:none}
  /* the intro is one line now, so it stays — only the notice goes */
  .eng-dense .legend{display:none}
  .eng-dense .toolbar{margin:.1rem 0 .5rem}
}

/* ---- measure ---------------------------------------------------------------
   Changed 27 August 2026 at the teacher's instruction, replacing the "keep the
   64ch cap" decision of 23 August.

   The complaint was not that lines were short — it was that the column edge was
   ragged. Prose and the tinted callouts stopped at ~570px while the widgets,
   tables and block diagrams beside them ran the full 1060px, so a .note read as
   a box that had been cut off rather than as a deliberate measure.

   So the two are separated:
     framed callouts  fill the content column, and line up with the other framed
                      furniture — a box should end where the boxes end;
     running prose    keeps a measure, widened 64ch -> 78ch (~660px), which is
                      still inside the readable 55-80 character range that the
                      original decision was protecting. */

/* The callouts are <p> elements too, so the prose rule has to name them —
   `.sec-body > p` (0,2,1) otherwise outranks `.eng-dense .keypoint` (0,2,0). */
.eng-dense .lead,
.eng-dense .sec-body > p:not(.exam-ref),
.eng-dense .sec-body > ul,
.eng-dense .sec-body > ol,
.eng-dense .note,
.eng-dense .keypoint{max-width:78ch}

/* .exam-ref is the exception: a short reference strip ("2024 Q7(b) · 2025 Q10(d)"),
   one or two lines, not something anyone reads across. It fills the column. */
.eng-dense .exam-ref{max-width:none}

/* ---- two columns above 1000px ----------------------------------------------
   Brought forward from the Phase 6 gate on the teacher's instruction, 27 August
   2026, because it is the actual answer to "the text does not fill the width".

   The callouts float into the empty right-hand strip and the prose runs the full
   column beside them. Floats keep source order, so a note still sits where its
   paragraph put it — a grid would have had to re-place a flat content stream.

   The original objection to two columns was that it does nothing below ~900px,
   where the pupils are. It still does nothing there — measured: at iPad-portrait
   width the page is pixel-identical with and without this block — but it costs
   that case nothing, and the laptop and the projector stop showing half an empty
   column. Energy page: 19,965px -> 18,377px, which is inside the 19,000 target.
   Reverting is deleting this one block. */

@media (min-width:1000px){
  /* Reserve the right-hand strip with padding, then pull the callouts into it with a
     negative margin. Every other block child is confined to the left column by that
     padding, so nothing can slide underneath a callout.

     The first attempt floated the callouts into the empty space without reserving it.
     A float is out of normal flow, so a following block's BORDER and BACKGROUND still
     spanned the full width and ran under it — only text lines shortened. The section
     divider rules and the widget tints cut straight through the callouts beside them.
     Clearing every framed block fixed the overlap but left large voids on the left,
     because the framed block then had to wait for the callout to finish. Reserving the
     column fixes both: no overlap, and no waiting. */
  .eng-dense .sec-body{padding-right:362px}
  .eng-dense .sec-body > .keypoint,
  .eng-dense .sec-body > .note,
  .eng-dense .sec-body > .exam-ref{
    float:right; clear:right; width:330px; max-width:330px;
    margin:.15rem -346px .85rem 0; padding-right:.35rem;
  }
  .eng-dense .sec-body > p:not(.exam-ref),
  .eng-dense .sec-body > ul,
  .eng-dense .sec-body > ol{max-width:none}
  .eng-dense .sec-body::after{content:"";display:block;clear:both}
}