/* NOVA(TM) Ltd — the look of the activity library.
   Lifted from nova-assessment-catalogue.html alongside js/nova-mechanics.js.
   Every colour is a variable, so a host page reskins the activities by setting
   the variables and changing nothing else. Load this wherever the library is
   used. Nothing here is specific to any one course.
   ----------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════
   NOVA™ Ltd — Assessment Catalogue, Batch 1
   Eight mechanics. Each one works. Each one carries real Bowman content.

   FORMATIVE AND SUMMATIVE ARE NOT THE SAME QUESTIONS
     Formative  — end of module, or a confirmation of learning. Covers the
                  module just taught. Feedback is the point of it. Nothing
                  is recorded and it can be repeated.
     Summative  — end of course. Sampled across every module, against a
                  definitive pass mark for the whole course. Answered blind,
                  submitted once, recorded and reported.

   So a mechanic can serve both, but the content must differ. Putting the
   formative questions into the summative measures memory of the practice
   rather than mastery of the course.

   Some mechanics cannot carry a summative at all, and each one below says
   which it is and why.

   Self-contained: no libraries, no internet, no browser storage.
   Everything here will run inside a sealed SCORM package.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --oat:#EDEFE9; --oat-2:#F6F7F3; --paper:#FFFFFF;
  --pine:#14211C; --pine-2:#2F5D50; --rule:#C9CFC3;
  --brass:#9C7326; --brass-lt:#E7CE8E; --brass-dk:#7E5C1D;
  --mute:#5D6A62; --ok:#2F5D50; --no:#9A3B25;
  --on-solid:#FFFFFF; --on-brass:#FFFFFF;
  --pass-bg:#F2F7F4; --fail-bg:#FBF3F0;
  --invert-bg:#14211C; --invert-fg:#EDEFE9; --invert-accent:#E7CE8E;
  --bar-bg:#14211C; --bar-fg:#EDEFE9;
  --grd:#DDE2D8; --grd-2:#C9CFC3;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-scheme="field"]{
  color-scheme:light;
  --oat:#F7F4EC; --oat-2:#EFEADE; --paper:#FFFDF8; --rule:#DCD3C0;
  --pine:#1B2A4A; --pine-2:#2C3F63; --mute:#5E6B85;
  --brass:#9C2C22; --brass-lt:#E8B4AC; --brass-dk:#7A231B;
  --on-brass:#FFFDF8; --on-solid:#FFFDF8;
  --invert-bg:#141F38; --invert-fg:#F0EBDD; --invert-accent:#D9A441;
  --bar-bg:#141F38; --bar-fg:#F0EBDD;
  --ok:#1F6F4A; --no:#9B2C2C; --pass-bg:#F1F6F2; --fail-bg:#FBF2F1;
  --grd:#E4DDCB; --grd-2:#D3C9B4;
}
html[data-scheme="night"]{
  color-scheme:dark;
  --oat:#161B21; --oat-2:#1E242C; --paper:#20272F; --rule:#333C47;
  --pine:#E6EBF0; --pine-2:#C6D0DA; --mute:#8B98A6;
  --brass:#D9A441; --brass-lt:#F0CE85; --brass-dk:#B9862C;
  --on-brass:#161B21; --on-solid:#161B21;
  --invert-bg:#0E1218; --invert-fg:#E6EBF0; --invert-accent:#D9A441;
  --bar-bg:#0E1218; --bar-fg:#E6EBF0;
  --ok:#4CAF7D; --no:#E0655F; --pass-bg:#18241E; --fail-bg:#261A19;
  --grd:#2A323B; --grd-2:#39424D;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Inter Tight",system-ui,Arial,sans-serif;
  background:var(--oat); color:var(--pine); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.official{
  background:var(--bar-bg); color:var(--bar-fg);
  font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.28em; text-align:center; padding:7px 8px; text-transform:uppercase;
}
.mast{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:18px 32px 14px;
  border-bottom:1px solid var(--rule); background:var(--oat-2);
}
.mast .lock{font-family:"Instrument Serif",Georgia,serif;font-size:25px;line-height:1.1}
.mast .sub{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);display:block;margin-top:3px}

/* colour scheme switch */
.schemes{display:flex;border:1px solid var(--rule);border-radius:999px;
  background:var(--paper);padding:3px}
.schemes button{font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;border:0;background:transparent;
  color:var(--mute);padding:6px 13px;border-radius:999px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease)}
.schemes button:hover{color:var(--pine)}
.schemes button[aria-pressed="true"]{background:var(--pine);color:var(--on-solid)}
.schemes button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.wrap{max-width:1180px;margin:0 auto;padding:26px 32px 90px}

/* the picker */
.picker{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.picker button{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--rule);background:var(--paper);
  color:var(--mute);padding:9px 13px;cursor:pointer;transition:.18s var(--ease)}
.picker button:hover{border-color:var(--brass);color:var(--brass)}
.picker button[aria-pressed="true"]{background:var(--pine);color:var(--on-solid);border-color:var(--pine)}

h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin:0 0 6px}
h1 em{color:var(--pine-2)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.tag{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);background:var(--oat-2);
  color:var(--mute);padding:5px 9px}
.tag.k{border-color:var(--pine-2);color:var(--pine-2)}
.tag.lvl{border-color:var(--brass);color:var(--brass)}
.lead{max-width:74ch;margin:0 0 18px;color:var(--mute)}
.rulehr{border:0;border-top:1px solid var(--rule);margin:0 0 22px}

.panel{background:var(--paper);border:1px solid var(--rule);padding:22px 24px;margin:0 0 18px}
.panel h3{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);font-weight:400;margin:0 0 14px}
.panel.pass{background:var(--pass-bg);border-color:var(--ok)}
.panel.fail{background:var(--fail-bg);border-color:var(--no)}
.panel.pass h3{color:var(--ok)} .panel.fail h3{color:var(--no)}

.btn{font-family:"Inter Tight",sans-serif;font-size:14px;font-weight:600;
  border:0;background:var(--pine);color:var(--on-solid);padding:11px 22px;
  cursor:pointer;transition:.18s var(--ease)}
.btn:hover{background:var(--pine-2)}
.btn:disabled{background:var(--rule);color:var(--mute);cursor:not-allowed}
.btn.brass{background:var(--brass);color:var(--on-brass)}
.btn.brass:hover{background:var(--brass-dk)}
.btn.ghost{background:transparent;color:var(--pine);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent}

.bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.note{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}

/* mode switch */
.modes{display:flex;border:1px solid var(--rule);background:var(--paper)}
.modes button{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;border:0;background:transparent;color:var(--mute);
  padding:8px 14px;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--pine-2);color:var(--on-solid)}

/* ── 1 matching ─────────────────────────────────────────────────── */
.match{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mcol h4{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);font-weight:400;margin:0 0 9px}
.mitem{border:1px solid var(--rule);background:var(--oat-2);padding:11px 13px;
  margin-bottom:8px;cursor:pointer;font-size:14px;transition:.15s var(--ease)}
.mitem:hover{border-color:var(--brass)}
.mitem.sel{border-color:var(--pine);background:var(--pine);color:var(--on-solid)}
.mitem.done{border-color:var(--ok);background:var(--pass-bg);color:var(--pine);cursor:default;opacity:.72}
.mitem.wrong{border-color:var(--no);background:var(--fail-bg)}
.mitem .pin{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--brass);
  display:block;letter-spacing:.1em}

/* ── 2 order the steps ──────────────────────────────────────────── */
.steps{list-style:none}
.step{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--rule);
  background:var(--oat-2);padding:12px 14px;margin-bottom:8px;cursor:grab}
.step.drag{opacity:.4}
.step.over{border-color:var(--brass);border-style:dashed}
.step .h{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mute);
  min-width:20px;padding-top:2px}
.step .t{flex:1;font-size:14px}
.step .mv{display:flex;flex-direction:column;gap:2px}
.step .mv button{border:1px solid var(--rule);background:var(--paper);color:var(--mute);
  width:26px;height:20px;cursor:pointer;font-size:10px;line-height:1;padding:0}
.step .mv button:hover{border-color:var(--brass);color:var(--brass)}
.step.right{border-color:var(--ok);background:var(--pass-bg)}
.step.wrongp{border-color:var(--no);background:var(--fail-bg)}

/* ── 3 sort into categories ─────────────────────────────────────── */
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;padding:12px;
  border:1px dashed var(--rule);background:var(--oat-2);margin-bottom:16px}
.chip{border:1px solid var(--rule);background:var(--paper);padding:8px 12px;
  font-size:13px;cursor:grab;transition:.15s var(--ease)}
.chip:hover{border-color:var(--brass)}
.chip.drag{opacity:.4}
.chip.right{border-color:var(--ok);background:var(--pass-bg)}
.chip.wrongp{border-color:var(--no);background:var(--fail-bg)}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bin{border:1px solid var(--rule);background:var(--paper);padding:14px;min-height:130px}
.bin.over{border-color:var(--brass);border-style:dashed}
.bin h4{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);font-weight:400;margin:0 0 4px}
.bin .d{font-size:11.5px;color:var(--mute);margin-bottom:10px;line-height:1.45}
.bin .drop{display:flex;flex-direction:column;gap:6px}

/* ── 4 crossword ────────────────────────────────────────────────── */
.cwwrap{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.cwgrid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);width:max-content}
.cwcell{width:30px;height:30px;background:var(--oat);position:relative}
.cwcell.on{background:var(--paper)}
.cwcell input{width:100%;height:100%;border:0;background:transparent;text-align:center;
  font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;
  text-transform:uppercase;color:var(--pine);padding:0}
.cwcell input:focus{outline:2px solid var(--brass);outline-offset:-2px;background:var(--oat-2)}
.cwcell .n{position:absolute;top:1px;left:2px;font-family:"JetBrains Mono",monospace;
  font-size:8px;color:var(--brass);pointer-events:none}
.cwcell.good input{color:var(--ok)}
.cwcell.bad input{color:var(--no)}
.clues{font-size:13.5px}
.clues h4{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);font-weight:400;margin:0 0 8px}
.clues ol{list-style:none;margin:0 0 18px}
.clues li{margin-bottom:9px;line-height:1.45;padding-left:26px;position:relative}
.clues li b{position:absolute;left:0;font-family:"JetBrains Mono",monospace;
  font-size:11px;color:var(--brass)}
.clues li.solved{color:var(--mute);text-decoration:line-through}

/* ── 5 word search ──────────────────────────────────────────────── */
.wswrap{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.wsgrid{display:grid;gap:2px;user-select:none;width:max-content}
.wscell{width:27px;height:27px;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-size:13px;background:var(--paper);
  border:1px solid var(--rule);cursor:pointer;transition:.1s}
.wscell.hot{background:var(--brass-lt);border-color:var(--brass)}
.wscell.found{background:var(--pass-bg);border-color:var(--ok);color:var(--ok);font-weight:700}

/* ── 6 hotspot ──────────────────────────────────────────────────── */
.hs{background:var(--paper);border:1px solid var(--rule);padding:14px}
.hs svg{width:100%;height:auto;display:block;max-height:420px}
.hz{cursor:pointer;fill:transparent;stroke:transparent;stroke-width:2}
.hz:hover{fill:rgba(156,115,38,.16);stroke:var(--brass)}
.hz.good{fill:rgba(47,93,80,.22);stroke:var(--ok)}
.hz.bad{fill:rgba(154,59,37,.20);stroke:var(--no)}
.ask{font-size:16px;margin-bottom:14px;padding:14px 16px;background:var(--oat-2);
  border-left:3px solid var(--brass)}

/* ── 7 fill the gap ─────────────────────────────────────────────── */
.cloze{font-size:15.5px;line-height:2.5;max-width:76ch}
.gap{display:inline-block;min-width:132px;border:0;border-bottom:2px solid var(--brass);
  background:var(--oat-2);font-family:inherit;font-size:14.5px;color:var(--pine);
  padding:3px 8px;text-align:center}
.gap:focus{outline:0;background:var(--paper);border-bottom-color:var(--pine)}
.gap.good{border-bottom-color:var(--ok);color:var(--ok)}
.gap.bad{border-bottom-color:var(--no);color:var(--no)}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule)}
.bank span{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;
  border:1px solid var(--rule);background:var(--oat-2);padding:6px 10px;color:var(--mute)}

/* ── 8 rank and justify ─────────────────────────────────────────── */
.rank{list-style:none;counter-reset:r}
.rk{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--rule);
  background:var(--oat-2);padding:13px 15px;margin-bottom:8px;cursor:grab}
.rk .p{font-family:"Instrument Serif",Georgia,serif;font-size:22px;color:var(--brass);
  min-width:26px;line-height:1.1}
.rk .t{flex:1;font-size:14px}
.rk.drag{opacity:.4} .rk.over{border-color:var(--brass);border-style:dashed}
textarea{width:100%;border:1px solid var(--rule);background:var(--paper);
  font-family:inherit;font-size:14px;color:var(--pine);padding:12px 14px;
  line-height:1.6;resize:vertical;min-height:96px}
textarea:focus{outline:0;border-color:var(--brass)}

/* ── 9–16 the second batch ──────────────────────────────────────── */
.opts{display:flex;flex-direction:column;gap:9px}
.opts.two{flex-direction:row}
.opts.two .opt{flex:1;justify-content:center;font-size:17px;padding:22px}
.opt{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;
  border:1px solid var(--rule);background:var(--oat-2);color:var(--pine);
  font-family:inherit;font-size:14.5px;line-height:1.55;padding:13px 15px;
  cursor:pointer;transition:.15s var(--ease)}
.opt:hover:not(:disabled){border-color:var(--brass)}
.opt .k{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--brass);
  min-width:18px;padding-top:2px;flex:0 0 auto}
.opt.sel{border-color:var(--pine);background:var(--paper);box-shadow:inset 0 0 0 1px var(--pine)}
.opt.right{border-color:var(--ok);background:var(--pass-bg)}
.opt.wrong{border-color:var(--no);background:var(--fail-bg)}
.opt.used{opacity:.62;cursor:default;flex-direction:column;align-items:flex-start}
.opt:disabled{cursor:default}

.numin{border:1px solid var(--rule);background:var(--paper);font-family:"JetBrains Mono",monospace;
  font-size:22px;color:var(--pine);padding:12px 16px;width:170px;text-align:center}
.numin:focus{outline:0;border-color:var(--brass)}
.numin.good{border-color:var(--ok);color:var(--ok)}
.numin.bad{border-color:var(--no);color:var(--no)}

.gauge{height:9px;background:var(--oat-2);border:1px solid var(--rule);overflow:hidden}
.gfill{height:100%;transition:width .45s var(--ease)}

.step.pick{cursor:pointer}
.step.pick:hover{border-color:var(--brass)}
.step.sel{border-color:var(--pine);background:var(--paper)}

.lslot{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;border:1px dashed var(--rule);background:var(--oat-2);
  color:var(--mute);height:100%;display:flex;align-items:center;justify-content:center;
  padding:0 6px;text-align:center}
.lslot.full{border-style:solid;border-color:var(--pine-2);background:var(--paper);color:var(--pine)}
.lslot.good{border-color:var(--ok);background:var(--pass-bg);color:var(--ok)}
.lslot.bad{border-color:var(--no);background:var(--fail-bg);color:var(--no)}

/* the line above every activity saying what this run is and what it counts for */
.scope{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  color:var(--mute);padding:11px 14px;margin:0 0 16px;background:var(--oat-2);
  border-left:3px solid var(--pine-2)}
.scope.s{border-left-color:var(--brass);background:var(--paper)}
.scope .k{text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--pine-2)}
.scope.s .k{color:var(--brass)}

.tag.use.both{border-color:var(--ok);color:var(--ok)}
.tag.use.formOnly{border-color:var(--pine-2);color:var(--pine-2)}
.tag.use.tutor{border-color:var(--brass);color:var(--brass)}

/* ── 17–22 the third batch ──────────────────────────────────────── */
/* the control panel */
.order{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.order span{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;
  border:1px solid var(--brass);background:var(--oat-2);padding:7px 11px;color:var(--pine)}
.order span b{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);font-weight:400;margin-bottom:3px}
.rig{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.rig-screen{flex:1;min-width:280px;background:var(--invert-bg);border:2px solid var(--rule);
  padding:14px 16px;font-family:"JetBrains Mono",monospace;font-size:13.5px;line-height:1.9;
  color:var(--invert-accent);min-height:150px}
.rig-ttl{font-size:10px;letter-spacing:.22em;color:var(--invert-fg);opacity:.62;
  border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:7px;margin-bottom:8px}
.rig-line{white-space:pre;opacity:.72}
.rig-line.on{opacity:1;font-weight:700}
.rig-keys{display:grid;grid-template-columns:repeat(2,74px);gap:7px}
.rk{font-family:"JetBrains Mono",monospace;font-size:12px;border:1px solid var(--rule);
  background:var(--oat-2);color:var(--pine);padding:14px 0;cursor:pointer;transition:.12s}
.rk:hover{border-color:var(--brass);color:var(--brass)}
.rk:active{background:var(--pine);color:var(--on-solid)}
.rk.wide{grid-column:span 2}

/* sliders */
.sliderow{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.sliderow label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);min-width:190px}
.sliderow input[type=range]{flex:1;min-width:180px;accent-color:var(--brass)}
.dials{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.dial{border:1px solid var(--rule);background:var(--oat-2);padding:14px 16px}
.dial.ok{border-color:var(--ok);background:var(--pass-bg)}
.dial.no{border-color:var(--no);background:var(--fail-bg)}
.dial .dl{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.dial .dv{font-family:"Instrument Serif",Georgia,serif;font-size:30px;line-height:1}
.dial.ok .dv{color:var(--ok)} .dial.no .dv{color:var(--no)}
.dial .ds{font-size:11.5px;color:var(--mute);margin-top:4px}

/* the log */
table.log{width:100%;border-collapse:collapse;font-size:13px}
table.log th{background:var(--pine);color:var(--on-solid);font-family:"JetBrains Mono",monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  padding:9px 10px;text-align:left;cursor:pointer;user-select:none}
table.log th:hover{background:var(--pine-2)}
table.log td{padding:9px 10px;border-bottom:1px solid var(--rule);
  font-family:"JetBrains Mono",monospace;font-size:12.5px}
table.log tbody tr{cursor:pointer}
table.log tbody tr:hover td{background:var(--oat-2)}
table.log tr.sel td{background:var(--paper);box-shadow:inset 2px 0 0 var(--pine)}
table.log tr.right td{background:var(--pass-bg);box-shadow:inset 2px 0 0 var(--ok)}
table.log tr.wrongp td{background:var(--fail-bg);box-shadow:inset 2px 0 0 var(--no)}

/* the marks on a scene */
.mk{fill:rgba(156,115,38,.24);stroke:var(--brass);stroke-width:2}
.mk.good{fill:rgba(47,93,80,.3);stroke:var(--ok)}
.mk.bad{fill:rgba(154,59,37,.3);stroke:var(--no)}
.mk.miss{fill:none;stroke:var(--ok);stroke-width:2;stroke-dasharray:5 4}
.mkn{font-family:"JetBrains Mono",monospace;font-size:11px;fill:var(--pine);
  text-anchor:middle;pointer-events:none}

/* shared result bits */
.score{font-family:"Instrument Serif",Georgia,serif;font-size:38px;color:var(--brass);
  line-height:1;margin-bottom:6px}
.why{font-size:13.5px;color:var(--mute);margin-top:10px;line-height:1.6}
.why b{color:var(--pine)}
.hidden{display:none !important}

@media (max-width:900px){
  .match,.bins,.cwwrap,.wswrap{grid-template-columns:1fr}
  .wrap{padding:20px}
  .mast{padding:14px 20px 10px}
}

/* ═══ JOIN UP THE ROUTE ═══════════════════════════════════════════════
   The boxes sit on a frame at a percentage of its width and height, so the
   whole thing scales without the arrows coming adrift. The arrows are drawn
   in an SVG stretched over the same frame. */
.nm-route{
  position:relative;width:100%;height:0;padding-bottom:56%;
  background:var(--oat-2);border:1px solid var(--rule);
  margin:6px 0 4px;overflow:hidden;
}
.nm-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--brass)}
.nm-wire{
  stroke:var(--brass);stroke-width:.5;vector-effect:non-scaling-stroke;
  cursor:pointer;pointer-events:stroke;
}
.nm-wire:hover{stroke-width:1.2}
.nm-wire.right{stroke:var(--ok);color:var(--ok)}
.nm-wire.wrongp{stroke:var(--no);color:var(--no);stroke-dasharray:4 3}
.nm-wire.missed{stroke:var(--mute);color:var(--mute);opacity:.45;stroke-dasharray:2 4;pointer-events:none}
.nm-node{
  position:absolute;width:22%;min-height:18%;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:8px 10px;text-align:left;font:inherit;cursor:pointer;
  background:var(--paper);border:1px solid var(--rule);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.nm-node b{font-size:13.5px;font-weight:600;color:var(--pine);line-height:1.2}
.nm-node span{font-size:11px;color:var(--mute);line-height:1.25}
.nm-node:hover{border-color:var(--pine-2)}
.nm-node.picked{
  background:var(--brass-lt);border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(179,134,47,.22);
}
@media (max-width:700px){
  .nm-route{padding-bottom:86%}
  .nm-node{width:30%}
  .nm-node b{font-size:12px}
  .nm-node span{display:none}
}