/* ============================================================
   Academy Model Stations — exercise details.
   Loaded after signalling-panel.css, which carries the palette, and
   after course.css, whose furniture this page shares.

   This is the course page's sibling screen: the same top bar, head,
   board plate, bands and cards, for the same reason — a trainer and a
   trainee discussing an exercise should not be learning two layouts.
   Only what the course page has no vocabulary for is written here:
   the trains, the fault plan, the model answer, the rubric, the locked
   blocks and the launch bar.

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

/* the launch bar is fixed to the foot of the glass, so the page needs
   room under its last band or the bar sits on top of it */
.ex-page #page{padding-bottom:132px;}
.ex-page .topbar-acts{gap:8px;}
/* an author display: outranks the browser's [hidden] rule, so anything
   the script hides has to say so again — course.css makes the same
   note about the bands and the view switch, and the edit link is the
   third of them: .back sets display:inline-flex, which would otherwise
   show a trainee a control that is not theirs */
#edit-link[hidden]{display:none;}

/* ---------------------------------------------------------------
   Cards laid out across a band

   Three at most, and they wrap rather than shrink past legibility —
   a rubric column narrower than its own penalty labels reads as an
   error in the scheme rather than in the layout.
   --------------------------------------------------------------- */
.runs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;
  align-items:start;}
.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
  align-items:start;}
.runcard{gap:11px;}
.ex-page .card h3{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0;}

/* a label-and-value list where the values are short and the labels
   are the quieter half — the reverse of the head stats, where the
   figure is the point */
.statelist{display:flex;flex-direction:column;gap:7px;margin:0;}
.statelist div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;}
.statelist dt{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}
.statelist dd{margin:0;font-size:13.5px;color:var(--ink);}
.statenote{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;
  border-left:2px solid var(--case-edge);padding-left:11px;}

/* ---------------------------------------------------------------
   Trains
   --------------------------------------------------------------- */
.trains{display:flex;flex-direction:column;gap:8px;}
.train{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start;}
.train-n{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--brass);
  border:1px solid rgba(201,162,39,.4);border-radius:2px;text-align:center;padding:2px 0;}
.train-body{display:flex;flex-direction:column;gap:5px;min-width:0;}
.train-body b{font-size:13.5px;font-weight:500;color:var(--ink);}

/* ---------------------------------------------------------------
   Fault plan

   The left edge carries the severity, which is the one thing an
   instructor reads first when a plan has four faults in it.
   --------------------------------------------------------------- */
.faultlist{display:flex;flex-direction:column;gap:9px;}
.fault{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--ink-3);
  border-radius:0 4px 4px 0;padding:13px 15px;}
.fault.sev-medium  {border-left-color:var(--brass);}
.fault.sev-high    {border-left-color:var(--amber);}
.fault.sev-critical{border-left-color:var(--red);}
.fault-n{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--case-edge);border-radius:2px;text-align:center;padding:3px 0;}
.fault-body{display:flex;flex-direction:column;gap:8px;min-width:0;}
.fault-body > b{font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.3;}
.faultwhen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;margin:0;}
.faultwhen div{display:flex;flex-direction:column;gap:1px;}
.faultwhen dt{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);}
.faultwhen dd{margin:0;font-size:13px;color:var(--ink-2);}
.fault-note{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;
  border-left:2px solid var(--case-edge);padding-left:11px;}

/* ---------------------------------------------------------------
   The model answer

   Numbered, because the order is half of what is being marked. A
   prohibited step is the one thing on the page that must not be read
   as an instruction, so it is the one thing coloured red.
   --------------------------------------------------------------- */
.steplist{display:flex;flex-direction:column;gap:8px;}
.step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;align-items:start;
  background:var(--case);border:1px solid var(--case-edge);border-left:3px solid var(--case-edge);
  border-radius:0 4px 4px 0;padding:13px 15px;}
.step.rule-prohibited{border-left-color:var(--red);}
.step.rule-optional  {border-left-color:var(--cyan);}
.step.rule-mandatory {border-left-color:#3d5b70;}
.step-n{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--brass);
  padding-top:1px;font-variant-numeric:tabular-nums;}
.step-body{display:flex;flex-direction:column;gap:8px;min-width:0;}
.step-text{margin:0;font-size:14px;color:var(--ink);line-height:1.45;}
.step.rule-prohibited .step-text{color:#ffc9c4;}

.prompt{display:grid;grid-template-columns:78px minmax(0,1fr);gap:11px;align-items:baseline;
  font-size:12.5px;line-height:1.5;}
.prompt-k{font-family:"Barlow Condensed",sans-serif;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);}
.prompt-t{color:var(--ink-2);}
.prompt-guided .prompt-k{color:var(--cyan);}
.prompt-corrected .prompt-k{color:var(--amber);}

/* ---------------------------------------------------------------
   The locked blocks

   Deliberately not an empty space and deliberately not a wall: the
   block says what is behind it and what opens it. A trainee who
   cannot see that a model answer exists will not go looking for it.
   --------------------------------------------------------------- */
.locked{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;
  background:var(--case);border:1px dashed var(--case-edge);border-radius:4px;padding:18px 20px;}
.locked-mark{font-size:19px;line-height:1.2;filter:grayscale(1);opacity:.8;}
.locked-body{display:flex;flex-direction:column;gap:8px;min-width:0;}
.locked-body b{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
.locked-body p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:80ch;}

/* ---------------------------------------------------------------
   Authorities
   --------------------------------------------------------------- */
.formlist{display:flex;flex-direction:column;gap:9px;}
.formrow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;}
.formrow b{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--brass);}
.formrow span{font-size:13px;color:var(--ink-2);line-height:1.45;}
.notewarn{border:1px solid rgba(255,176,32,.35);border-left:3px solid var(--amber);
  border-radius:0 3px 3px 0;background:rgba(255,176,32,.05);padding:12px 14px;
  display:flex;flex-direction:column;gap:5px;}
.notewarn b{font-family:"Barlow Condensed",sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);}
.notewarn p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;}

/* ---------------------------------------------------------------
   Rubric
   --------------------------------------------------------------- */
.penlist{display:flex;flex-direction:column;gap:6px;}
.pen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;
  border-bottom:1px solid var(--case-edge);padding-bottom:6px;}
.pen:last-child{border-bottom:none;padding-bottom:0;}
.pen-t{font-size:13px;color:var(--ink-2);line-height:1.4;}
.pen-c{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;color:var(--amber);
  font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------
   The launch bar

   Fixed to the foot of the glass. It is the one control on the page
   that has to be reachable from any point in a long record, which is
   the whole argument for it not scrolling away.
   --------------------------------------------------------------- */
.launchbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:11px 24px;
  background:rgba(9,15,21,.96);border-top:1px solid var(--case-edge);backdrop-filter:blur(6px);}
.launchbar[hidden]{display:none;}
.launch-what{display:flex;flex-direction:column;gap:1px;min-width:0;}
.launch-what b{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.launch-what span{font-size:12px;color:var(--ink-3);}
.launch-modes{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto;}
.mode{display:flex;flex-direction:column;gap:1px;text-align:left;text-decoration:none;
  background:#1d3243;border:1px solid #3d5b70;border-radius:3px;padding:7px 14px;
  color:var(--ink);font:inherit;cursor:pointer;}
.mode:hover:not([disabled]){background:#26445a;border-color:var(--cyan);}
.mode b{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#eaf6ff;}
.mode span{font-size:11px;color:var(--ink-2);}
.mode[disabled]{opacity:.38;cursor:not-allowed;background:transparent;}
.launch-acts{display:flex;gap:7px;}
.launch-acts button{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--ink-2);
  border:1px solid var(--case-edge);border-radius:2px;padding:9px 13px;cursor:pointer;}
.launch-acts button[disabled]{opacity:.4;cursor:not-allowed;}

/* ---------------------------------------------------------------
   Narrow
   --------------------------------------------------------------- */
@media (max-width: 900px){
  .statelist div{grid-template-columns:100px minmax(0,1fr);}
  .formrow{grid-template-columns:minmax(0,1fr);gap:2px;}
  .prompt{grid-template-columns:minmax(0,1fr);gap:1px;}
  .launch-modes{margin-left:0;width:100%;}
  .mode{flex:1;}
}