/* ============================================================
   Academy Model Stations — the authoring tools.
   Loaded after signalling-panel.css, which carries the palette.

   Colour discipline as everywhere else: brass is the interface accent
   and never means status; cyan marks what is selected or live; amber
   warns; red refuses; green passes.
   ============================================================ */

body.app{padding:0;}
.app section{margin-top:0;}
.app h2::before{content:none;}

/* ---------------------------------------------------------------
   Top bar and the tool switch
   --------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 22px;padding:9px 22px;background:rgba(9,15,21,.95);
  border-bottom:1px solid var(--case-edge);backdrop-filter:blur(6px);}
.topbar-mark{display:flex;flex-direction:column;text-decoration:none;line-height:1.1;}
.topbar-zone{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass);}
.topbar-name{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.topbar-acts{margin-left:auto;}
.back{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--case-edge);border-radius:2px;padding:7px 13px;}
.back:hover{color:var(--ink);background:#1a2b38;}
/* the way back reads first, so it sits ahead of the mark rather than
   at the far end of the bar with the page's own controls */
.back{display:inline-flex;align-items:center;gap:8px;order:-1;}
/* .back carries order:-1 so it leads the top bar. Used anywhere else in
   a column it climbs above whatever it was put under — the link out of
   the board preview sat above the preview's own heading — so the two
   places that reuse the class put it back in document order, the way
   .topbar-acts .back already does */
.preview .back,.detail-acts .back{order:0;}
.back-arrow{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--brass);}

/* the tool bar is links now rather than a switch inside one page, so
   each tool is an address a reader can bookmark and send */
.tools{display:flex;gap:4px;}
.tools a{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:8px 15px;border:1px solid transparent;border-radius:2px;color:var(--ink-3);}
.tools a:hover{color:var(--ink-2);background:#141f28;}
.tools a[aria-current="page"]{color:var(--ink);background:#1d3243;border-color:#3d5b70;}

/* a link that acts: same weight as a button, because it is one */
.act{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#eaf6ff;background:#1d3243;border:1px solid #3d5b70;border-radius:2px;
  padding:7px 13px;display:inline-flex;align-items:center;}
.act:hover{background:#26445a;border-color:var(--cyan);}

/* ---------------------------------------------------------------
   Shared furniture
   --------------------------------------------------------------- */
#page{max-width:1660px;margin:0 auto;padding:20px 22px 90px;}
.gen h2{font-family:"Barlow Condensed",sans-serif;font-size:22px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:0;}
.gen h3{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0;}
.card{background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:16px 18px;display:flex;flex-direction:column;gap:13px;min-width:0;}
.sub{margin:0;font-size:13px;color:var(--ink-2);}
.hintline{margin:0;font-size:12px;color:var(--ink-3);}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;}
.col{display:flex;flex-direction:column;gap:16px;min-width:0;}

.field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.field > label{font-family:"Barlow Condensed",sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:14px;
  background:#0f1a23;color:var(--ink);border:1px solid #2c4557;border-radius:2px;padding:9px 11px;}
.field textarea{resize:vertical;min-height:62px;line-height:1.5;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;}
.field .why{font-size:11.5px;color:var(--ink-3);}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;}

.chip{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:#101c25;border:1px solid var(--case-edge);
  border-radius:2px;padding:2px 7px;white-space:nowrap;}
.chip.cyan {color:var(--cyan);border-color:rgba(127,215,255,.4);}
.chip.brass{color:var(--brass);border-color:rgba(201,162,39,.45);}
.chip.amber{color:var(--amber);border-color:rgba(255,176,32,.45);}
.chip.red  {color:#ff9a91;border-color:rgba(255,68,56,.45);}
.chip.green{color:#9fe6b4;border-color:rgba(34,197,94,.4);}
.chips{display:flex;flex-wrap:wrap;gap:5px;}

/* toggle pills — used for options that are a small closed set */
.pills{display:flex;flex-wrap:wrap;gap:6px;}
.pill{font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--ink-2);background:#16252f;
  border:1px solid #2c4557;border-radius:2px;padding:7px 12px;cursor:pointer;}
.pill:hover{background:#1d3243;color:var(--ink);}
.pill[aria-pressed="true"]{background:#1d3243;border-color:var(--cyan);color:#eaf6ff;}

.empty{margin:0;padding:14px 16px;border:1px dashed var(--case-edge);border-radius:3px;
  font-size:13px;color:var(--ink-3);}

/* ---------------------------------------------------------------
   The wizard
   --------------------------------------------------------------- */
.wiz{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(300px,390px);gap:16px;
  align-items:start;}

.steps{display:flex;flex-direction:column;gap:3px;position:sticky;top:60px;}
.steps button{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:start;
  text-align:left;text-transform:none;letter-spacing:normal;font:inherit;
  background:transparent;border:1px solid transparent;border-radius:3px;padding:9px 10px;
  color:var(--ink-3);}
.steps button:hover{background:var(--case);color:var(--ink-2);}
.steps button[aria-current="step"]{background:var(--case);border-color:var(--case-edge);
  color:var(--ink);}
.steps .n{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  border:1px solid var(--case-edge);border-radius:2px;padding:2px 0;text-align:center;
  color:var(--ink-3);background:var(--plate);}
.steps button[aria-current="step"] .n{color:var(--brass);border-color:rgba(201,162,39,.5);}
.steps .done .n{color:var(--green);border-color:rgba(34,197,94,.45);}
.steps .t{font-family:"Barlow Condensed",sans-serif;font-size:14.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.2;}
.steps .s{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;
  font-family:"IBM Plex Mono",monospace;}
.steps button[aria-current="step"] .s{color:var(--cyan);}

.stage{background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  display:flex;flex-direction:column;min-width:0;}
.stage-head{padding:18px 20px 14px;border-bottom:1px solid var(--case-edge);
  display:flex;flex-direction:column;gap:4px;}
.stage-no{margin:0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);}
.stage-about{margin:0;font-size:13px;color:var(--ink-2);max-width:78ch;}
.stage-body{padding:18px 20px;display:flex;flex-direction:column;gap:16px;min-width:0;}
.stage-foot{margin-top:auto;padding:13px 20px;border-top:1px solid var(--case-edge);
  display:flex;align-items:center;gap:14px;background:var(--plate);
  border-radius:0 0 4px 4px;}
.stage-note{flex:1;font-size:12px;color:var(--ink-3);}
.stage-foot button[disabled]{opacity:.4;cursor:not-allowed;}

.block{display:flex;flex-direction:column;gap:10px;}
.block > h3{display:flex;align-items:center;gap:10px;}
.block > h3::after{content:"";flex:1;height:1px;background:var(--case-edge);}

/* ---------------------------------------------------------------
   The board preview, and picking an element on it
   --------------------------------------------------------------- */
.preview{position:sticky;top:60px;display:flex;flex-direction:column;gap:12px;
  background:var(--case);border:1px solid var(--case-edge);border-radius:4px;padding:14px 16px;}
.preview h3{display:flex;align-items:center;gap:9px;}
.pv-board{background:var(--plate);border:1px solid #1a2b38;border-radius:3px;padding:8px;
  box-shadow:0 0 0 3px #080e13 inset;}
.pv-board svg{display:block;width:100%;height:auto;}
.p-rail{fill:none;stroke:#f0a63c;stroke-width:7;stroke-linecap:round;}
.p-diag{fill:none;stroke:#4a5f70;stroke-width:6;stroke-linecap:round;}
.p-stop{stroke:#9fb8c9;stroke-width:6;}
.p-pf{fill:#1b2c38;stroke:#2c4557;}
.pv-name{font-family:"Barlow Condensed",sans-serif;font-size:17px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);margin:0;}
.pv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;margin:0;}
.pv-facts div{border-left:1px solid var(--case-edge);padding-left:9px;}
.pv-facts dt{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);}
.pv-facts dd{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;
  color:var(--rail);margin:1px 0 0;}

/* the board's own elements, read from its station configuration */
.elems{display:flex;flex-direction:column;gap:9px;}
.elem-group{display:flex;flex-direction:column;gap:5px;}
.elem-group > b{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);}
.elem-row{display:flex;flex-wrap:wrap;gap:4px;}
.elem{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  text-transform:none;color:var(--ink-2);background:#16252f;border:1px solid #2c4557;
  border-radius:2px;padding:4px 8px;cursor:pointer;}
.elem:hover{background:#1d3243;color:var(--ink);}
.elem[aria-pressed="true"]{background:#1d3243;border-color:var(--cyan);color:#eaf6ff;}
.pv-note{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.45;
  border-top:1px solid var(--case-edge);padding-top:10px;}
.pv-picked{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--cyan);}

/* ---------------------------------------------------------------
   Fault plan rows
   --------------------------------------------------------------- */
.rowlist{display:flex;flex-direction:column;gap:8px;}
.rowitem{background:var(--plate);border:1px solid var(--case-edge);
  border-left:3px solid var(--brass);border-radius:0 3px 3px 0;padding:11px 13px;
  display:flex;flex-direction:column;gap:8px;}
.rowitem.bad{border-left-color:var(--red);}
.rowitem-top{display:flex;align-items:flex-start;gap:11px;}
.rowitem-top .t{flex:1;min-width:0;}
.rowitem-top b{display:block;font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.3;}
.rowitem-top .m{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ink-3);margin-top:3px;}
.rowitem button.x{font-size:11px;padding:4px 9px;background:transparent;color:var(--ink-3);}
.rowitem button.x:hover{background:#2a1a1c;color:#ff9a91;border-color:#5a2620;}

/* ---------------------------------------------------------------
   Model answer — the step editor
   --------------------------------------------------------------- */
.msteps{display:flex;flex-direction:column;gap:7px;}
.mstep{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:3px;padding:10px 12px;}
.mstep.rule-prohibited{border-left:3px solid var(--red);}
.mstep.rule-optional{border-left:3px solid var(--ink-3);}
.mstep.rule-mandatory{border-left:3px solid var(--green);}
.mstep .n{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--brass);
  border:1px solid var(--case-edge);border-radius:2px;text-align:center;padding:3px 0;
  background:var(--case);}
.mstep .body{display:flex;flex-direction:column;gap:7px;min-width:0;}
.mstep .txt{font-size:13.5px;color:var(--ink);line-height:1.4;}
.mstep .meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.mstep select{font:inherit;font-size:11px;font-family:"IBM Plex Mono",monospace;
  background:#0f1a23;color:var(--ink-2);border:1px solid #2c4557;border-radius:2px;padding:3px 6px;}
.mstep select:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.mstep .prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:7px;}
.mstep .prompts label{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}
.mstep .prompts input{width:100%;font:inherit;font-size:12px;background:#0f1a23;color:var(--ink-2);
  border:1px solid #22384a;border-radius:2px;padding:6px 8px;}
.mstep .prompts input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.mstep-acts{display:flex;gap:5px;}
.mstep-acts button{font-size:10.5px;padding:3px 7px;background:transparent;color:var(--ink-3);}
.mstep-acts button:hover:not([disabled]){background:#1a2b38;color:var(--ink);}
.mstep-acts button[disabled]{opacity:.3;cursor:not-allowed;}

/* the coverage strip — which skills this exercise actually scores */
.cover{display:flex;flex-direction:column;gap:6px;}
.cover-row{display:grid;grid-template-columns:150px minmax(0,1fr) 30px;gap:10px;align-items:center;}
.cover-row .nm{font-size:12px;color:var(--ink-2);}
.cover-track{height:6px;border-radius:3px;background:#16252f;overflow:hidden;}
.cover-fill{height:100%;background:var(--cyan);border-radius:3px;}
.cover-fill.zero{background:var(--red);}
.cover-n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;text-align:right;color:var(--ink);}

/* ---------------------------------------------------------------
   Validation
   --------------------------------------------------------------- */
.checks{display:flex;flex-direction:column;gap:6px;}
.check{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;
  font-size:12.5px;color:var(--ink-2);}
.check .mk{font-family:"IBM Plex Mono",monospace;font-size:12px;text-align:center;line-height:1.4;}
.check.pass .mk{color:var(--green);}
.check.warn .mk{color:var(--amber);}
.check.fail .mk{color:var(--red);}
.check.fail{color:#ffb4ad;}

.summary{background:#0a1219;border:1px solid var(--case-edge);border-radius:3px;padding:14px 16px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.7;color:var(--ink-2);
  overflow-x:auto;white-space:pre;}
.summary b{color:var(--cyan);font-weight:500;}

/* ---------------------------------------------------------------
   Library picker (course builder) and draw preview (test generator)
   --------------------------------------------------------------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;}
.lib{display:flex;flex-direction:column;gap:5px;max-height:520px;overflow-y:auto;
  border:1px solid var(--case-edge);border-radius:3px;padding:8px;background:var(--plate);}
.libitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);border-radius:2px;padding:9px 11px;}
.libitem.used{opacity:.45;}
.libitem .t{min-width:0;}
.libitem b{display:block;font-size:12.5px;color:var(--ink);font-weight:500;line-height:1.3;}
.libitem .m{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.libitem button{font-size:11px;padding:4px 10px;white-space:nowrap;}

.modules{display:flex;flex-direction:column;gap:9px;}
.module{background:var(--plate);border:1px solid var(--case-edge);border-left:3px solid var(--brass);
  border-radius:0 3px 3px 0;padding:11px 13px;display:flex;flex-direction:column;gap:9px;}
.module-top{display:flex;align-items:center;gap:10px;}
.module-top input{flex:1;min-width:0;font:inherit;font-size:13.5px;background:#0f1a23;
  color:var(--ink);border:1px solid #2c4557;border-radius:2px;padding:7px 10px;}
.module-top button{font-size:11px;padding:5px 9px;}
.module-top button.x{background:transparent;color:var(--ink-3);}
.module-top button.x:hover{background:#2a1a1c;color:#ff9a91;border-color:#5a2620;}
.module-top button[aria-pressed="true"]{background:#1d3243;border-color:var(--cyan);color:#eaf6ff;}
.module-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.module-list li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2);
  background:var(--case);border:1px solid var(--case-edge);border-radius:2px;padding:6px 9px;}
.module-list .id{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--brass);}
.module-list .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.module-list button{font-size:10.5px;padding:2px 7px;background:transparent;color:var(--ink-3);}
.module-list button:hover{background:#2a1a1c;color:#ff9a91;border-color:#5a2620;}

.blueprint{display:flex;flex-direction:column;gap:7px;}
.bp{display:grid;grid-template-columns:minmax(0,1fr) 74px auto;gap:10px;align-items:center;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:3px;padding:9px 11px;}
.bp .nm{font-size:12.5px;color:var(--ink-2);min-width:0;}
.bp input{width:100%;font:inherit;font-size:13px;background:#0f1a23;color:var(--ink);
  border:1px solid #2c4557;border-radius:2px;padding:5px 8px;text-align:center;}
.bp .avail{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);white-space:nowrap;}
.bp.short{border-color:#5a2620;}
.bp.short .avail{color:#ff9a91;}

.draw{display:flex;flex-direction:column;gap:5px;}
.drawrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);border-radius:2px;padding:8px 10px;}
.drawrow .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--brass);}
.drawrow .t{min-width:0;font-size:12.5px;color:var(--ink);}
.drawrow .t span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--ink-3);margin-top:3px;}

.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;margin:0;}
.stat div{border-left:1px solid var(--case-edge);padding-left:10px;}
.stat dt{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.stat dd{margin:1px 0 0;font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;
  color:var(--rail);font-variant-numeric:tabular-nums;}

.bootfail{margin:24px 22px;}

/* ---------------------------------------------------------------
   What the page is doing.

   Every authoring page states its errand before its form, and the
   create/edit page states which of its two errands this is. Same three
   parts, same order, on all four pages.
   --------------------------------------------------------------- */
.editor-head{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;}
.editor-head h1{font-family:"Barlow Condensed",sans-serif;font-size:27px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0;line-height:1.15;}
.editor-kind{margin:0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);}
.editor-about{margin:0;font-size:13px;color:var(--ink-2);max-width:78ch;}
.editor-head .chips{margin-top:2px;}

/* ---------------------------------------------------------------
   The exercise listing
   --------------------------------------------------------------- */
.listhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px 22px;margin:0 0 16px;}
.listhead-t{display:flex;flex-direction:column;gap:6px;}
.listhead .editor-about{max-width:64ch;}
.count{margin:0;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);
  white-space:nowrap;}
.count b{font-size:19px;color:var(--rail);font-weight:600;font-variant-numeric:tabular-nums;
  margin-right:6px;}

.filterwrap{display:flex;align-items:flex-end;gap:12px;background:var(--case);
  border:1px solid var(--case-edge);border-radius:4px;padding:14px 16px;margin:0 0 14px;}
.filterbar{flex:1;min-width:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));}
/* search is the control most used and the one with the longest value,
   so it is given the room the six selects do not need */
.filterbar .field:first-child{grid-column:span 2;}
.filterwrap > button{white-space:nowrap;font-size:12px;padding:8px 12px;}

.exlist{display:flex;flex-direction:column;gap:6px;}
.exrow{display:grid;grid-template-columns:minmax(0,1fr) 126px auto;gap:16px;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--brass);
  border-radius:0 3px 3px 0;padding:11px 14px;}
.exrow:hover{border-color:#3d5b70;border-left-color:var(--cyan);}
/* anything not published is dimmed rather than hidden: a draft in the
   library is a fact about the library */
.exrow.off{border-left-color:var(--ink-3);}
.exrow.off .exrow-t b{color:var(--ink-2);}
.exrow-t{min-width:0;display:flex;flex-direction:column;gap:6px;}
.exrow-t b{font-size:14px;color:var(--ink);font-weight:500;line-height:1.3;}
.exrow-skills{display:flex;flex-wrap:wrap;gap:4px 10px;}
.exrow-skills .sk{font-size:11px;color:var(--ink-3);}
.exrow-skills .sk::before{content:"·";margin-right:9px;color:var(--case-edge);}
.exrow-skills .sk:first-child::before{content:none;margin:0;}

.exrow-perf{text-align:right;}
.exrow-perf .pct{font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:600;
  color:var(--green);font-variant-numeric:tabular-nums;line-height:1.1;}
.exrow-perf .pct.low{color:var(--amber);}
.exrow-perf .pct.none{color:var(--ink-3);}
.exrow-perf .lbl{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);
  margin-top:3px;}
.exrow-acts{display:flex;gap:6px;}
.exrow-acts button{font-size:11.5px;padding:6px 12px;}
.exrow-acts .act{font-size:11.5px;padding:6px 12px;}

/* ---------------------------------------------------------------
   View — one exercise, read-only
   --------------------------------------------------------------- */
.detail{width:min(620px,92vw);background:var(--case);color:var(--ink);
  border:1px solid var(--case-edge);border-radius:4px;padding:0;}
.detail::backdrop{background:rgba(4,8,11,.72);}
.detail-body{display:flex;flex-direction:column;gap:11px;padding:20px 22px 16px;}
.detail-body h2{font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  letter-spacing:.08em;text-transform:none;color:var(--ink);margin:0;line-height:1.2;}
.detail-body h3{margin-top:4px;}
.detail-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  padding:13px 22px;border-top:1px solid var(--case-edge);background:var(--plate);
  border-radius:0 0 4px 4px;}

/* ---------------------------------------------------------------
   Narrow
   --------------------------------------------------------------- */
@media (max-width:1320px){
  .wiz{grid-template-columns:200px minmax(0,1fr);}
  .preview{grid-column:1/-1;position:static;}
}
@media (max-width:1000px){
  .two{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:1000px){
  .exrow{grid-template-columns:minmax(0,1fr) auto;}
  .exrow-perf{grid-row:2;grid-column:1;text-align:left;}
  .exrow-acts{grid-row:2;grid-column:2;}
}
@media (max-width:760px){
  #page{padding:16px 13px 70px;}
  .filterwrap{flex-direction:column;align-items:stretch;}
  .filterbar .field:first-child{grid-column:1/-1;}
  .wiz{grid-template-columns:minmax(0,1fr);}
  .steps{position:static;flex-direction:row;flex-wrap:wrap;}
  .steps button{grid-template-columns:22px auto;padding:6px 8px;}
  .steps .s{display:none;}
  .cover-row{grid-template-columns:minmax(0,1fr) 30px;}
  .cover-row .nm{grid-column:1/-1;}
  .mstep{grid-template-columns:minmax(0,1fr);}
  .bp{grid-template-columns:minmax(0,1fr) 66px;}
}