/* ============================================================
   Academy Model Stations — the index of panels.
   Loaded after signalling-panel.css, which carries the palette and
   the page chrome — the top bar included — that this page shares
   with the panels themselves. Only the listing's own furniture is
   here.
   ============================================================ */

/* the listing sits under its heading on the same 38px indent the
   panels' legends and tables use */
.first{margin-top:0;}
.stations{
  display:grid;gap:18px;margin:0 0 0 38px;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
}
/* the row stretches the item; the anchor has to fill it, or two cards
   of unequal text end at different depths */
.stations>li{display:flex;}

/* Each card is one anchor, so the whole plate is the target. */
.station{
  flex:1;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 22%),var(--case);
  border:1px solid var(--case-edge);border-radius:4px;
  padding:16px 18px 18px;text-decoration:none;color:inherit;
  box-shadow:0 22px 60px -34px #000;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.station:hover,.station:focus-visible{
  border-color:#3d5b70;transform:translateY(-2px);
  box-shadow:0 26px 60px -28px #000,0 0 0 1px rgba(127,215,255,.18);
}
.station:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

.station-no{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin:0;
}
.station h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:26px;
  letter-spacing:.06em;text-transform:uppercase;margin:2px 0 0;line-height:1.05;
}
.station h3 span{color:var(--rail-dim);}
.station-strap{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);
  letter-spacing:.04em;margin:6px 0 0;
}

/* the thumbnail — the station's own track, drawn to the same
   co-ordinates as the working board, so the two agree */
.thumb{
  background:var(--plate);border:1px solid #1a2b38;border-radius:3px;
  padding:6px;box-shadow:0 0 0 3px #080e13 inset;
}
.thumb svg{display:block;width:100%;height:auto;}
.thumb .rail{stroke-width:7;}
.thumb .diag,.thumb .lead{stroke-width:6;}
.thumb .pf{fill:#1b2c38;stroke:#2c4557;}
.thumb .sig{fill:#ff4438;stroke:#0d151d;stroke-width:2;}
.thumb .sig-dim{fill:#4a5f70;stroke:#0d151d;stroke-width:2;}
.thumb .stop{stroke:#9fb8c9;stroke-width:6;}
.thumb .tlbl{font-family:"IBM Plex Mono",monospace;font-size:30px;fill:#93a9ba;letter-spacing:.1em;}

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

.station-go{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
}
.station-go::after{content:"";flex:1;height:1px;background:var(--case-edge);}
.station:hover .station-go,.station:focus-visible .station-go{color:#c7ecff;}

.note code{color:var(--cyan);}

@media (max-width:900px){.stations{grid-template-columns:1fr;}}
@media (max-width:720px){.stations{margin-left:0;}}

/* the way through to the same boards read as topology. Cyan rather
   than the warning amber the note below it carries: this one is an
   offer, not a caution. */
.note.graphnote{border-color:rgba(127,215,255,.35);color:var(--cyan);}
.note.graphnote a{color:var(--cyan);}