/* ============================================================
   Academy Model Stations — the track graph explorer.

   The palette, the fonts and the page chrome come from
   signalling-panel.css; this file is only the furniture this screen
   adds: the board picker, the control rail above the canvas, the
   canvas itself and the reading panel beside it.

   The canvas is the page. Everything else is kept narrow and quiet so
   that the graph, not the controls, is what the eye lands on.
   ============================================================ */

body.graph{padding-bottom:28px;}
.graph .wrap{max-width:1720px;}

/* ---- the board picker ---------------------------------------- */
.pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;
  border:1px solid var(--case-edge);border-radius:2px;background:var(--plate);
  padding:14px 16px;margin-bottom:14px;}
.pick label{display:block;font-family:"Barlow Condensed",sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  margin-bottom:5px;}
.pick .field{min-width:280px;}
select,input[type=search]{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink);
  background:var(--case);border:1px solid var(--case-edge);border-radius:2px;
  padding:7px 9px;width:100%;}
select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.pick .facts{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--ink-3);letter-spacing:.04em;}
.pick .facts b{color:var(--rail);font-weight:500;}
.pick .acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;}

/* ---- buttons, in the house's flat brass-on-slate ------------- */
.gbtn{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:var(--case);border:1px solid var(--case-edge);border-radius:2px;
  padding:7px 12px;cursor:pointer;white-space:nowrap;}
.gbtn:hover{color:var(--ink);background:#1a2b38;border-color:#2c4557;}
.gbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.gbtn.on{color:var(--void);background:var(--brass);border-color:var(--brass);}
.gbtn[disabled]{opacity:.4;cursor:default;}

/* ---- the control rail above the canvas ----------------------- */
.rail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:10px;}
.rail .grp{display:flex;align-items:center;gap:7px;border:1px solid var(--case-edge);
  border-radius:2px;background:var(--plate);padding:5px 9px;}
.rail .grp > span{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
.rail .grp select{width:auto;padding:4px 7px;}
.rail .find{min-width:200px;margin-left:auto;}
.sw{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;}
.sw input{width:13px;height:13px;margin:0;accent-color:var(--cyan);cursor:pointer;}
.sw input:checked + span{color:var(--ink);}

/* ---- canvas and the panel beside it -------------------------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:14px;align-items:start;}
#cy{height:min(72vh,760px);min-height:420px;border:1px solid var(--case-edge);border-radius:2px;
  background:
    radial-gradient(120% 90% at 50% 0%, #0f1c25 0%, var(--void) 70%),
    var(--void);}
#cy.busy{opacity:.45;}

.side{display:flex;flex-direction:column;gap:12px;}
.card{border:1px solid var(--case-edge);border-radius:2px;background:var(--plate);padding:12px 14px;}
.card h2{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 8px;}
.card p{margin:0 0 8px;font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.card p.hint{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);}
.card:last-child{margin-bottom:0;}

/* the reading of whatever was tapped */
dl.props{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;}
dl.props dt{color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;
  padding-top:2px;}
dl.props dd{margin:0;color:var(--rail);word-break:break-word;}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  border:1px solid var(--case-edge);border-radius:2px;padding:2px 6px;color:var(--ink-2);
  background:var(--case);cursor:pointer;}
.tag:hover{color:var(--ink);border-color:#2c4557;}

/* counts */
.counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:0;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);}
.counts b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:600;
  color:var(--ink);letter-spacing:.04em;line-height:1.1;}

/* legend */
.key{list-style:none;margin:0;padding:0;display:grid;gap:5px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);}
.key li{display:flex;align-items:center;gap:8px;}
.key i{width:14px;height:14px;flex:0 0 14px;display:inline-block;}
.key i.exitk{background:var(--brass);}
.key i.bufk{background:var(--red);}
.key i.jointk{background:var(--rail-dim);border-radius:50%;transform:scale(.6);}
.key i.pointk{background:var(--cyan);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.key i.railk{height:3px;background:var(--rail-dim);}
.key i.revk{height:0;border-top:3px dashed var(--amber);}
.key i.hitk{height:3px;background:var(--green);}

/* what the checks found */
.finds{list-style:none;margin:0;padding:0;display:grid;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.45;}
.finds li{border-left:2px solid var(--amber);padding-left:8px;color:var(--ink-2);cursor:pointer;}
.finds li.bad{border-left-color:var(--red);}
.finds li:hover{color:var(--ink);}
.finds li b{color:var(--rail);font-weight:500;}
.clean{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--green);margin:0;}

/* the query card's two chosen ends */
.ends{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--ink-3);}
.ends b{color:var(--cyan);font-weight:500;}
.answer{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);margin:8px 0 0;
  line-height:1.5;}
.answer.no{color:var(--red);}
.answer.yes{color:var(--green);}

.note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--amber);
  border:1px solid rgba(255,176,32,.35);border-radius:2px;padding:10px 12px;margin:0 0 14px;}

@media (max-width:1080px){
  .stage{grid-template-columns:minmax(0,1fr);}
  .side{flex-direction:row;flex-wrap:wrap;}
  .side .card{flex:1 1 260px;}
  #cy{height:60vh;}
}