/* ============================================================
   Academy Model Stations — the instructor console.
   Loaded after signalling-panel.css, which carries the palette. Only
   the console's own furniture is here.

   Colour discipline: brass is the interface accent and never means
   status. The signal colours carry state, and only state —
     cyan   running, selected, live
     amber  paused, fault standing, needs attention
     red    a mistake just made, or a service that is down
     green  completed, healthy
   ============================================================ */

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:12px 22px;
  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:12px;}
.clock{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--rail);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.ghost{background:transparent;}
.ghost:hover{background:#1a2b38;}

/* ---------------------------------------------------------------
   Page
   --------------------------------------------------------------- */
.console-page{max-width:1560px;margin:0 auto;padding:22px 24px 90px;
  display:flex;flex-direction:column;gap:32px;}

.band{display:flex;flex-direction:column;gap:13px;}
.band-head{display:flex;flex-direction:column;gap:3px;}
.console 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:82ch;}
.band-sub b{color:var(--ink);}

.card{background:var(--case);border:1px solid var(--case-edge);border-radius:4px;
  padding:16px 18px 18px;display:flex;flex-direction:column;gap:13px;min-width:0;}
.card h2{font-size:17px;}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));gap:16px;}

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

/* ---------------------------------------------------------------
   The floor — tiles and the alert column
   --------------------------------------------------------------- */
.floor{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,352px);gap:20px;
  align-items:start;}
.floor-main{display:flex;flex-direction:column;gap:13px;min-width:0;}
.side{display:flex;flex-direction:column;gap:13px;min-width:0;}
.floor-hint{margin:0;font-size:12px;color:var(--ink-3);}
.floor-hint b{color:var(--ink-2);font-family:"IBM Plex Mono",monospace;font-size:11px;}

/* ---- control bar ---- */
.control{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:3px;padding:11px 14px;}
.control .sel{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);
  min-width:150px;}
.control .sel b{color:var(--cyan);}
.ctl-group{display:flex;gap:6px;padding-right:12px;margin-right:2px;
  border-right:1px solid var(--case-edge);}
.ctl-group:last-of-type{border-right:0;padding-right:0;}
.control button{font-size:13px;padding:7px 12px;}
.control button[disabled]{opacity:.38;cursor:not-allowed;}
.ctl-label{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);align-self:center;margin-right:2px;}

/* ---- the tiles, laid out in the arrangement of the room ---- */
.tiles{display:grid;gap:10px;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));}
.tile{
  position:relative;text-align:left;display:flex;flex-direction:column;gap:8px;
  background:var(--case);border:1px solid var(--case-edge);border-radius:3px;
  padding:11px 12px 12px;cursor:pointer;font:inherit;color:inherit;
  text-transform:none;letter-spacing:normal;
  transition:border-color .15s,background .15s;
}
.tile:hover{border-color:#3d5b70;}
.tile:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.tile[aria-pressed="true"]{border-color:var(--cyan);background:#12222c;
  box-shadow:0 0 0 1px rgba(127,215,255,.35);}
.tile.st-empty{cursor:default;opacity:.55;}
.tile.st-empty:hover{border-color:var(--case-edge);}

/* the state stripe down the left edge */
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px 0 0 3px;background:var(--ink-3);}

.tile.st-running::before  {background:var(--cyan);}
.tile.st-paused::before   {background:var(--amber);}
.tile.st-fault::before    {background:var(--amber);}
.tile.st-error::before    {background:var(--red);}
.tile.st-completed::before{background:var(--green);}
.tile.st-idle::before     {background:var(--ink-3);}
.tile.st-empty::before    {background:transparent;}

.tile-head{display:flex;align-items:center;gap:8px;}
.tile-no{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  color:var(--brass);letter-spacing:.06em;}
.tile-lamp{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none;}
.st-running   .tile-lamp{background:var(--cyan);box-shadow:0 0 7px var(--cyan);}
.st-paused    .tile-lamp{background:var(--amber);}
.st-fault     .tile-lamp{background:var(--amber);box-shadow:0 0 7px var(--amber);
  animation:blip 1.4s steps(2,end) infinite;}
.st-error     .tile-lamp{background:var(--red);box-shadow:0 0 8px var(--red);
  animation:blip .7s steps(2,end) infinite;}
.st-completed .tile-lamp{background:var(--green);}
@keyframes blip{50%{opacity:.25;}}
.tile-elapsed{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--ink-2);font-variant-numeric:tabular-nums;}

.tile-who{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-ex{font-size:11.5px;color:var(--ink-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tile-none{font-size:12px;color:var(--ink-3);font-style:italic;}
.tile-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;}
.tile-group{position:absolute;top:9px;right:11px;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}

/* the live board, drawn small from the station's own co-ordinates */
.tile-board{background:var(--plate);border:1px solid #1a2b38;border-radius:2px;padding:5px;}
.tile-board svg{display:block;width:100%;height:auto;}
.b-rail{fill:none;stroke:#f0a63c;stroke-width:9;stroke-linecap:round;opacity:.8;}
.b-diag{fill:none;stroke:#4a5f70;stroke-width:8;stroke-linecap:round;}
.b-stop{stroke:#9fb8c9;stroke-width:8;}
.b-pf{fill:#1b2c38;stroke:#2c4557;}
.st-paused .tile-board,.st-idle .tile-board{opacity:.45;}

/* ---- chips ---- */
.chip{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:#101c25;
  border:1px solid var(--case-edge);border-radius:2px;padding:2px 6px;white-space:nowrap;}
.chip.mode-guided   {color:#9fe6b4;border-color:rgba(34,197,94,.4);}
.chip.mode-corrected{color:#ffd08a;border-color:rgba(255,176,32,.4);}
.chip.mode-assessed {color:#ff9a91;border-color:rgba(255,68,56,.42);}
.chip.cyan {color:var(--cyan);border-color:rgba(127,215,255,.4);}
.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);}
.chip.brass{color:var(--brass);border-color:rgba(201,162,39,.45);}

/* ---------------------------------------------------------------
   Alerts
   --------------------------------------------------------------- */
/* tall enough for a normal morning's alerts; it still scrolls when the
   lab is having a bad day, but it should not clip a row's buttons in half */
.alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:min(78vh,860px);overflow-y:auto;}
.alert{background:var(--case);border:1px solid var(--case-edge);
  border-left:3px solid var(--ink-3);border-radius:0 3px 3px 0;padding:11px 13px;
  display:flex;flex-direction:column;gap:8px;}
.alert.k-critical{border-left-color:var(--red);}
.alert.k-fault   {border-left-color:var(--amber);}
.alert.k-stalled {border-left-color:var(--brass);}
.alert.k-help    {border-left-color:var(--cyan);}
.alert.gone{opacity:.4;}
.alert-top{display:flex;align-items:center;gap:8px;}
.alert-cub{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--brass);}
.alert-kind{font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;}
.k-critical .alert-kind{color:#ff9a91;}
.k-fault    .alert-kind{color:var(--amber);}
.k-stalled  .alert-kind{color:var(--brass);}
.k-help     .alert-kind{color:var(--cyan);}
.alert-at{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);}
.alert-text{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.4;}
.alert-acts{display:flex;flex-wrap:wrap;gap:6px;}
.alert-acts button{font-size:11px;padding:5px 9px;letter-spacing:.1em;}

/* ---------------------------------------------------------------
   Fault tray
   --------------------------------------------------------------- */
.tray{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;}
.tray button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;text-transform:none;letter-spacing:normal;padding:9px 11px;
  background:var(--plate);border-color:#22384a;}
.tray button:hover:not([disabled]){background:#1a2b38;border-color:#3d5b70;}
.tray button[disabled]{opacity:.4;cursor:not-allowed;}
.tray b{font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:500;color:var(--ink);
  line-height:1.3;}
.tray span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);}
.tray-sub{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}
.macros{display:flex;flex-direction:column;gap:6px;}
.macro{display:flex;align-items:center;gap:11px;background:var(--plate);
  border:1px solid var(--case-edge);border-left:2px solid var(--brass);
  border-radius:0 3px 3px 0;padding:9px 12px;}
.macro .m{flex:1;min-width:0;}
.macro b{display:block;font-size:12.5px;color:var(--ink);font-weight:500;}
.macro span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);}
.macro button{font-size:11px;padding:5px 10px;}

/* ---------------------------------------------------------------
   Observer
   --------------------------------------------------------------- */
.obs{display:flex;flex-direction:column;gap:11px;}
.obs-now{display:flex;align-items:center;gap:12px;background:var(--plate);
  border:1px solid var(--case-edge);border-left:3px solid var(--cyan);
  border-radius:0 3px 3px 0;padding:12px 14px;}
.obs-now .n{flex:1;min-width:0;}
.obs-now b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:17px;
  font-weight:600;letter-spacing:.06em;color:var(--ink);}
.obs-now span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;}
.obs-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:6px;}
.obs-pick button{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:8px 4px;
  text-transform:none;letter-spacing:.04em;}
.obs-pick button[aria-pressed="true"]{background:#1d3243;border-color:var(--cyan);color:#eaf6ff;}
.obs-pick button[disabled]{opacity:.35;cursor:not-allowed;}

/* ---------------------------------------------------------------
   Schedule and assessment
   --------------------------------------------------------------- */
.rows{display:flex;flex-direction:column;gap:7px;}
.row{display:flex;align-items:center;gap:13px;background:var(--plate);
  border:1px solid var(--case-edge);border-left:3px solid var(--case-edge);
  border-radius:0 3px 3px 0;padding:11px 13px;}
.row.now{border-left-color:var(--cyan);}
.row.next{border-left-color:var(--brass);}
.row.warn{border-left-color:var(--amber);}
.row-at{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;color:var(--rail);
  font-variant-numeric:tabular-nums;}
.row-main{flex:1;min-width:0;}
.row-main b{display:block;font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.25;}
.row-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.row button{font-size:11px;padding:5px 10px;white-space:nowrap;}
.row-wait{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);
  white-space:nowrap;text-align:right;}
.row-wait b{display:block;color:var(--amber);font-weight:600;}

/* ---------------------------------------------------------------
   Cohort snapshot
   --------------------------------------------------------------- */
.cohort{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;}
.cohort .card{gap:11px;}
.sk{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;gap:11px;align-items:center;}
.sk-name{font-size:12.5px;color:var(--ink-2);}
.sk-track{position:relative;height:7px;border-radius:3px;background:#16252f;overflow:hidden;}
.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-target{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink-2);opacity:.7;}
.sk-val{font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.hard{display:flex;align-items:center;gap:12px;padding:9px 0;
  border-top:1px solid var(--case-edge);}
.hard:first-of-type{border-top:0;}
.hard-id{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--brass);
  white-space:nowrap;}
.hard-t{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hard-rate{font-family:"IBM Plex Mono",monospace;font-size:13px;font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.hard-rate b{font-size:15px;}
.hard-rate span{color:var(--ink-3);font-size:11px;}
.cohort-foot{margin:2px 0 0;font-size:11.5px;color:var(--ink-3);
  border-top:1px solid var(--case-edge);padding-top:10px;}

/* ---------------------------------------------------------------
   Workbench
   --------------------------------------------------------------- */
.bench{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));}
.bench li > *{display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:3px;
  padding:13px 15px;text-decoration:none;text-align:left;
  text-transform:none;letter-spacing:normal;font:inherit;color:inherit;}
.bench a:hover{border-color:#3d5b70;background:#16252f;}
.bench a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.bench b{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.bench span{font-size:12px;color:var(--ink-2);line-height:1.4;}
.bench .soon{opacity:.5;cursor:default;}
.bench .soon b::after{content:" · soon";font-size:10px;color:var(--ink-3);letter-spacing:.14em;}

/* ---------------------------------------------------------------
   Health and log
   --------------------------------------------------------------- */
.health{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));}
.health li{display:flex;align-items:flex-start;gap:11px;background:var(--case);
  border:1px solid var(--case-edge);border-radius:3px;padding:11px 14px;}
.health .lamp{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;
  background:var(--ink-3);}
.health li.ok   .lamp{background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.55);}
.health li.warn .lamp{background:var(--amber);box-shadow:0 0 8px rgba(255,176,32,.55);}
.health li.fail .lamp{background:var(--red);box-shadow:0 0 8px rgba(255,68,56,.55);}
.health b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.health span{display:block;font-size:12px;line-height:1.45;color:var(--ink-2);margin-top:2px;}

.conlog{list-style:none;margin:0;padding:0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  max-height:230px;overflow-y:auto;background:var(--case);border:1px solid var(--case-edge);
  border-radius:3px;}
.conlog li{padding:7px 14px;border-bottom:1px solid rgba(29,44,57,.8);color:var(--ink-2);}
.conlog li:last-child{border-bottom:0;}
.conlog time{color:var(--ink-3);margin-right:10px;}
.conlog li.ok{color:#9fe6b4;} .conlog li.no{color:#ff9a91;} .conlog li.mv{color:var(--cyan);}

.bootfail{margin:26px 24px;}

@media (prefers-reduced-motion:reduce){
  .tile-lamp{animation:none !important;}
  .tile{transition:none;}
}

/* ---------------------------------------------------------------
   Narrow
   --------------------------------------------------------------- */
@media (max-width:1180px){
  .floor{grid-template-columns:minmax(0,1fr);}
  .alerts{max-height:none;}
}
/* below these widths the room's arrangement cannot be read anyway, and
   a tile narrower than its own clock is worse than a re-flowed grid */
@media (max-width:1080px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:860px){  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:600px){  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
  .console-page{padding:18px 14px 70px;gap:26px;}
  .duo,.cohort{grid-template-columns:minmax(0,1fr);}
  .control .sel{min-width:0;width:100%;}
  .ctl-group{border-right:0;padding-right:0;}
  .sk{grid-template-columns:minmax(0,1fr) 34px;}
  .sk-name{grid-column:1/-1;}
}