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

   One layout, two readers. Nothing here is role-specific except the
   blocks the trainer's view adds; the spine is identical, on purpose.

   Colour discipline: brass is the interface accent and never means
   status. Green passes, amber is in progress or needs attention, red
   failed, cyan is what is open to you now.
   ============================================================ */

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

/* ---------------------------------------------------------------
   Top bar
   --------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 20px;padding:10px 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-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.who-name{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
.who-fact{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);}
.who-fact b{color:var(--rail);font-weight:500;}
.topbar-acts{margin-left:auto;display:flex;align-items:center;gap:10px;}
.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-arrow{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--brass);}
.viewswitch{display:flex;gap:3px;}
.viewswitch button{font-size:12px;padding:6px 12px;background:transparent;border-color:transparent;
  color:var(--ink-3);}
.viewswitch button:hover{color:var(--ink-2);background:#141f28;}
.viewswitch button[aria-pressed="true"]{color:var(--ink);background:#1d3243;border-color:#3d5b70;}

/* ---------------------------------------------------------------
   Page
   --------------------------------------------------------------- */
#page{max-width:1440px;margin:0 auto;padding:22px 24px 90px;
  display:flex;flex-direction:column;gap:34px;}
.band{display:flex;flex-direction:column;gap:13px;}
/* an author display: outranks the browser's [hidden] rule, so any block
   the script hides has to say so again — the trainer-only sections and
   the view switch both do */
.band[hidden],.viewswitch[hidden]{display:none;}
.band-head{display:flex;flex-direction:column;gap:3px;}
.course-page h2{font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin:0;}
.band-sub{margin:0;font-size:13px;color:var(--ink-2);max-width:84ch;}
.band-sub b{color:var(--ink);}
.card{background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.empty{margin:0;padding:14px 16px;border:1px dashed var(--case-edge);border-radius:3px;
  font-size:13px;color:var(--ink-3);}
.hintline{margin:0;font-size:12px;color:var(--ink-3);}
.hintline a{color:var(--cyan);}

.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;}

/* ---------------------------------------------------------------
   Header — the course itself
   --------------------------------------------------------------- */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%),var(--case);
  border:1px solid var(--case-edge);border-radius:4px;padding:20px 24px;}
.head-code{margin:0 0 4px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);}
.head h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:.05em;text-transform:uppercase;
  margin:0;line-height:1.02;}
.head-about{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);max-width:78ch;}
.head-meta{margin:12px 0 0;}
.head-right{display:flex;align-items:center;gap:22px;}

/* the progress ring — one number, read at a glance */
.ring{position:relative;width:92px;height:92px;flex:none;}
.ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);}
.ring .bg{fill:none;stroke:#16252f;stroke-width:9;}
.ring .fg{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.ring .fg.good{stroke:var(--green);} .ring .fg.mid{stroke:var(--amber);} .ring .fg.low{stroke:var(--red);}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.head-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:12px;margin:0;}
.head-stats div{border-left:1px solid var(--case-edge);padding-left:11px;}
.head-stats dt{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.head-stats 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;}

.prereq{margin:12px 0 0;font-size:12.5px;color:#ffd08a;border-left:2px solid var(--amber);
  padding-left:11px;}
.prereq a{color:var(--cyan);}
.blocked-note{margin:12px 0 0;font-size:12.5px;color:#ffb4ad;border-left:2px solid var(--red);
  padding-left:11px;}

/* ---------------------------------------------------------------
   The board plate
   --------------------------------------------------------------- */
.plate{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.6fr);gap:18px;
  background:var(--case);border:1px solid var(--case-edge);border-radius:4px;padding:16px 18px;}
.plate-board{background:var(--plate);border:1px solid #1a2b38;border-radius:3px;padding:10px;
  box-shadow:0 0 0 3px #080e13 inset;}
.plate-board svg{display:block;width:100%;height:auto;}
.c-rail{fill:none;stroke:#f0a63c;stroke-width:7;stroke-linecap:round;}
.c-diag{fill:none;stroke:#4a5f70;stroke-width:6;stroke-linecap:round;}
.c-stop{stroke:#9fb8c9;stroke-width:6;}
.c-pf{fill:#1b2c38;stroke:#2c4557;}
.plate-side{display:flex;flex-direction:column;gap:12px;min-width:0;}
.plate-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:10px;margin:0;}
.plate-facts div{border-left:1px solid var(--case-edge);padding-left:10px;}
.plate-facts dt{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.plate-facts dd{margin:1px 0 0;font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  color:var(--rail);}
.plate-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;}
.plate-acts a,.plate-acts button{font-family:"Barlow Condensed",sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:#1a2b38;border:1px solid #2c4557;border-radius:2px;padding:8px 13px;
  cursor:pointer;}
.plate-acts a:hover,.plate-acts button:hover:not([disabled]){background:#22384a;}
.plate-acts button[disabled]{opacity:.4;cursor:not-allowed;}

/* ---------------------------------------------------------------
   Modules
   --------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:16px;
  align-items:start;}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:60px;min-width:0;}

.modules{display:flex;flex-direction:column;gap:9px;min-width:0;}
.module{background:var(--case);border:1px solid var(--case-edge);
  border-left:3px solid var(--case-edge);border-radius:0 3px 3px 0;overflow:hidden;}
.module.st-passed  {border-left-color:var(--green);}
.module.st-current {border-left-color:var(--cyan);}
.module.st-locked  {border-left-color:var(--ink-3);}
.module.st-failed  {border-left-color:var(--red);}

.module-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;
  align-items:center;width:100%;text-align:left;font:inherit;color:inherit;
  text-transform:none;letter-spacing:normal;background:transparent;border:0;
  padding:13px 16px;cursor:pointer;}
.module-head:hover{background:#111d26;}
.module-head:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.module-lamp{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:none;}
.st-passed  .module-lamp{background:var(--green);}
.st-current .module-lamp{background:var(--cyan);box-shadow:0 0 7px var(--cyan);}
.st-failed  .module-lamp{background:var(--red);}
.module-name{min-width:0;}
.module-name b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:17px;
  font-weight:600;letter-spacing:.05em;color:var(--ink);line-height:1.2;}
.module-name span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ink-3);margin-top:3px;}
.module.st-locked .module-name b{color:var(--ink-2);}
.module-prog{display:flex;align-items:center;gap:9px;min-width:118px;}
.meter-track{flex:1;height:5px;border-radius:3px;background:#16252f;overflow:hidden;}
.meter-fill{height:100%;border-radius:3px;background:var(--rail-dim);}
.meter-fill.good{background:var(--green);} .meter-fill.mid{background:var(--amber);}
.meter-fill.low{background:var(--red);}
.meter-pct{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right;}
.module-caret{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);}

.module-body{border-top:1px solid var(--case-edge);padding:11px 16px 14px;
  display:flex;flex-direction:column;gap:9px;}
.module-body[hidden]{display:none;}
.module-skills{display:flex;flex-wrap:wrap;gap:5px;}

/* ---- exercise rows ---- */
.exlist{display:flex;flex-direction:column;gap:5px;}
.exrow{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:13px;align-items:center;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:2px;padding:9px 12px;}
.exrow.passed{border-left:2px solid var(--green);}
.exrow.failed{border-left:2px solid var(--red);}
.exrow.available{border-left:2px solid var(--cyan);}
.exrow.locked{opacity:.55;}
.exrow-no{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--brass);}
.exrow-main{min-width:0;}
.exrow-main b{display:block;font-size:13px;color:var(--ink);font-weight:500;line-height:1.3;}
.exrow-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.exrow-score{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;min-width:34px;}
.exrow.passed .exrow-score{color:var(--green);}
.exrow.failed .exrow-score{color:var(--red);}
.exrow-score span{display:block;font-family:"Barlow Condensed",sans-serif;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-top:2px;}
.exrow button,.exrow a{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  background:#1a2b38;border:1px solid #2c4557;border-radius:2px;padding:6px 11px;
  white-space:nowrap;cursor:pointer;}
.exrow button:hover:not([disabled]){background:#22384a;}
.exrow button[disabled]{opacity:.4;cursor:not-allowed;}
/* the exercise number opens that exercise's own record. It is a link
   and not one of the row's buttons, so it has to say so again: the
   rule above dresses every a inside a row as a button, and a number
   dressed as a button reads as a second action rather than as the
   number it still is */
.exrow a.exrow-no{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:normal;text-transform:none;color:var(--brass);background:transparent;
  border:none;border-bottom:1px solid transparent;border-radius:0;padding:0;
  justify-self:start;white-space:nowrap;}
.exrow a.exrow-no:hover{border-bottom-color:var(--brass);}
.exrow .lockword{font-family:"Barlow Condensed",sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
.exgap{margin:2px 0 0;font-size:11.5px;color:var(--ink-3);font-style:italic;}

/* ---------------------------------------------------------------
   Side — skills covered, progression rules
   --------------------------------------------------------------- */
.sk{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:9px;align-items:center;}
.sk-name{font-size:12.5px;color:var(--ink-2);}
.sk-track{grid-column:1/-1;height:6px;border-radius:3px;background:#16252f;overflow:hidden;
  position:relative;margin-top:-4px;}
.sk-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;}
.sk-fill.tone-green{background:var(--green);}
.sk-fill.tone-amber{background:var(--amber);}
.sk-fill.tone-red{background:var(--red);}
.sk-val{font-family:"IBM Plex Mono",monospace;font-size:12px;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.rules li{position:relative;padding-left:16px;font-size:12.5px;color:var(--ink-2);line-height:1.45;}
.rules li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--ink-3);}
.rules b{color:var(--ink);}

/* ---------------------------------------------------------------
   Trainer only — enrolment matrix
   --------------------------------------------------------------- */
.matrix-wrap{overflow-x:auto;border:1px solid var(--case-edge);border-radius:3px;
  background:var(--case);}
table.matrix{border-collapse:collapse;width:100%;min-width:700px;font-size:12.5px;}
table.matrix th,table.matrix td{padding:8px 10px;text-align:center;
  border-top:1px solid var(--case-edge);}
table.matrix thead th{border-top:0;background:var(--plate);font-family:"Barlow Condensed",sans-serif;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;font-weight:600;}
table.matrix th.who{text-align:left;position:sticky;left:0;background:var(--plate);z-index:1;
  min-width:172px;}
table.matrix td.who{text-align:left;position:sticky;left:0;background:var(--case);z-index:1;
  color:var(--ink);white-space:nowrap;}
table.matrix td.who a{color:var(--ink);text-decoration:none;border-bottom:1px solid #2c4557;}
table.matrix td.who a:hover{color:var(--cyan);border-bottom-color:var(--cyan);}
table.matrix td.who span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--ink-3);}
table.matrix tr.me td{background:#12222c;}
table.matrix tr.me td.who{background:#12222c;color:var(--cyan);}
.cell{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  border-radius:2px;padding:5px 0;font-variant-numeric:tabular-nums;}
.cell.b-none{color:var(--ink-3);background:#111c24;}
.cell.b-red  {color:#1a0f0f;background:#c93b32;}
.cell.b-amber{color:#1a1408;background:#d9931b;}
.cell.b-green{color:#08170d;background:#2f9e52;}
.matrix-key{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11.5px;color:var(--ink-3);}
.matrix-key span{display:inline-flex;align-items:center;gap:6px;}
.matrix-key i{width:12px;height:12px;border-radius:2px;display:inline-block;font-style:normal;}

/* ---------------------------------------------------------------
   Trainer only — common errors
   --------------------------------------------------------------- */
.errlist{display:flex;flex-direction:column;gap:7px;}
.err{display:grid;grid-template-columns:60px minmax(0,1fr) 130px auto;gap:13px;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--red);
  border-radius:0 3px 3px 0;padding:11px 13px;}
.err-no{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--brass);}
.err-text{min-width:0;font-size:13px;color:var(--ink);}
.err-bar{display:flex;align-items:center;gap:9px;}
.err-track{flex:1;height:6px;border-radius:3px;background:#16252f;overflow:hidden;}
.err-fill{height:100%;background:var(--red);border-radius:3px;}
.err-pct{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink);
  font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------
   The exam, set apart
   --------------------------------------------------------------- */
.band.exam{border-top:1px solid var(--case-edge);padding-top:26px;}
.examcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 26px;align-items:center;
  background:var(--plate);border:1px solid var(--case-edge);border-left:3px solid var(--brass);
  border-radius:0 4px 4px 0;padding:18px 22px;}
.examcard.open{border-left-color:var(--cyan);}
.examcard h3{font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  letter-spacing:.06em;margin:0;color:var(--ink);}
.exam-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.exam-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-2);}
.exam-act{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.exam-act button{font-size:14px;padding:11px 20px;}
.exam-act button[disabled]{opacity:.45;cursor:not-allowed;}
.exam-lock{font-family:"Barlow Condensed",sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}

.bootfail{margin:24px 22px;}

@media (prefers-reduced-motion:reduce){ .ring .fg{transition:none;} }

/* ---------------------------------------------------------------
   Narrow
   --------------------------------------------------------------- */
@media (max-width:1100px){
  .split{grid-template-columns:minmax(0,1fr);}
  .side{position:static;}
  .plate{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:820px){
  .head{grid-template-columns:minmax(0,1fr);}
  .head-right{flex-wrap:wrap;}
  .module-head{grid-template-columns:auto minmax(0,1fr) auto;row-gap:9px;}
  .module-prog{grid-column:2/-1;}
  .exrow{grid-template-columns:48px minmax(0,1fr);row-gap:9px;}
  .exrow-score,.exrow button,.exrow a,.exrow .lockword{grid-column:2;justify-self:start;text-align:left;}
  .err{grid-template-columns:52px minmax(0,1fr);row-gap:9px;}
  .err-bar{grid-column:2;}
  .examcard{grid-template-columns:minmax(0,1fr);}
  .exam-act{align-items:flex-start;}
}
@media (max-width:600px){
  #page{padding:18px 13px 70px;gap:26px;}
  /* a chip holds whatever the board's yaml says the interlocking is,
     and nowrap on a long one pushes the whole page sideways */
  .chip{white-space:normal;}
}