/* gct-tracks.css — Grand Central platform occupancy.
   ───────────────────────────────────────────────────────────────────────────
   Design intent: the page should read as the terminal floor, not a table of
   rows. Three devices carry that:

     1. Every lane has a rail line running its full width, so an empty track
        still looks like a track rather than a blank row.
     2. A hatched bumper-block bar caps the left end of every lane. It is the
        page's fixed reference point — cars always sit to the right of it, so
        train length is readable at a glance across the whole level.
     3. Cars are coupled, not chipped: 1px gaps with a coupler nub between,
        so a consist reads as one physical object.

   Numerics are set in mono throughout — track numbers, car numbers, times.
   Everything an operator scans for on this page is a number, and mono keeps
   them in vertical register down the level. Names and destinations stay in
   the app's inherited sans so the page doesn't feel like a terminal emulator.

   Colors come from styles.css variables. Only the rail steel and the diesel
   ochre are local, because nothing in the shared palette meant "equipment". */

.gct-page {
  --rail: #2b3138;
  --rail-live: #3d4650;
  --tie: #1b2026;
  --loco: #b0703a;
  --loco-edge: #d08a4a;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

.gct-header {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 3;
}
.gct-back { align-self: center; }

.gct-title { display: flex; flex-direction: column; gap: 2px; }
.gct-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.gct-title h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.gct-tallies { margin-left: auto; display: flex; gap: 20px; }
.gct-tally { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.gct-tally b {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gct-tally span {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gct-tally.is-berthed b  { color: var(--early); }
.gct-tally.is-arriving b { color: var(--text); }
.gct-tally.is-assigned b { color: var(--held); }

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */

.gct-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  font-size: 12px;
  color: var(--muted);
}
.gct-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.gct-toggle input { margin: 0; cursor: pointer; }

.gct-status { font-family: var(--mono); font-size: 11px; }

/* Orientation key: a miniature of the lane itself, so it teaches the diagram
   rather than describing it in a sentence. */
.gct-compass {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gct-compass-rule {
  width: 54px;
  height: 1px;
  background: linear-gradient(to right, var(--muted), transparent);
}
.gct-compass-end:first-child { color: var(--text); }

/* ─── Level sections ──────────────────────────────────────────────────────── */

.gct-main { padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }

.gct-level { margin-bottom: 18px; }
.gct-level summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 8px;
}
.gct-level summary::-webkit-details-marker { display: none; }
.gct-level summary:focus-visible { outline: 2px solid var(--early); outline-offset: 3px; }

.gct-chevron {
  width: 0; height: 0;
  border-left: 5px solid var(--muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.gct-level[open] .gct-chevron { transform: rotate(90deg); }

.gct-levelname {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.gct-levelcount {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.gct-tracks { display: flex; flex-direction: column; }

/* ─── Lane ────────────────────────────────────────────────────────────────── */

.gct-lane {
  display: grid;
  grid-template-columns: 12px 40px 1fr;
  align-items: stretch;
  min-height: 40px;
  border-bottom: 1px solid var(--tie);
}
.gct-lane:last-child { border-bottom: 0; }
.gct-lane.is-empty .gct-plate { color: var(--rail-live); }

/* Bumper block — hatched, the way a real one is painted. This is the page's
   anchor: every consist starts here, so length reads across the level. */
.gct-bumper {
  background: repeating-linear-gradient(
    -45deg,
    var(--rail) 0 3px,
    transparent 3px 6px
  );
  border-right: 2px solid var(--rail-live);
}
.gct-lane.is-berthed .gct-bumper { border-right-color: var(--early); }
.gct-lane.is-assigned .gct-bumper { border-right-color: var(--held); }

.gct-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.gct-lane.is-berthed .gct-plate { color: var(--text); }

/* The rail: a hairline that runs the full lane width behind the consist. */
.gct-rail {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 14px 5px 10px;
  min-width: 0;
}
.gct-rail::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--rail);
}
.gct-lane.is-berthed .gct-rail::before,
.gct-lane.is-arriving .gct-rail::before { background: var(--rail-live); }

.gct-vacant {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--rail-live);
  background: var(--bg);
  padding-right: 8px;
}

/* ─── Train ───────────────────────────────────────────────────────────────── */

.gct-train { position: relative; width: 100%; min-width: 0; }

.gct-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 12px;
}
.gct-num {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
}
.gct-dest { color: var(--text); }
.gct-state {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gct-lane.is-berthed .gct-state { color: var(--early); }
.gct-lane.is-assigned .gct-state { color: var(--held); }
.gct-otp { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.gct-otp.is-late  { color: var(--late); }
.gct-otp.is-early { color: var(--early); }
.gct-fleet {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--bg);
  padding-left: 8px;
}

/* Consist — coupled cars. The 1px gap plus the coupler nub is what makes a
   row of boxes read as a single train. */
.gct-consist {
  display: flex;
  align-items: center;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 1px;
}
.gct-car {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: #1a2028;
  border: 1px solid var(--rail-live);
  color: var(--text);
}
.gct-car + .gct-car::before {
  content: "";
  position: absolute;
  left: -2px; top: 50%;
  width: 2px; height: 3px;
  transform: translateY(-50%);
  background: var(--rail-live);
}
.gct-car:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.gct-car:last-child  { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }

/* Locomotives read as equipment, not another coach. Builder sets the body
   color — the GE and Siemens fleets are visually distinct on the property and
   should be here too, so a glance down a level tells you what's working. */
.gct-car.is-loco {
  background: var(--loco);
  border-color: var(--loco-edge);
  color: #14100b;
  font-weight: 700;
  min-width: 50px;
}
.gct-car.is-heritage { padding-top: 10px; }   /* room for the livery band */
.gct-car.is-loco.is-ge      { background: var(--loco);   border-color: var(--loco-edge); }
.gct-car.is-loco.is-siemens { background: #6b8ba4;       border-color: #8aa9c0; }

/* Heritage wrap: the actual livery, banded the way the unit is painted. Taller
   than a hairline because the geometry is the point — a 3px strip can show two
   colors but not a lightning stripe or a beach-ball wedge. */
.gct-car.is-heritage { position: relative; }
.gct-livery {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.gct-car.is-heritage::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.gct-car.is-nonrev { opacity: 0.5; border-style: dashed; }

/* Loading, as a fill line under the number. */
.gct-car.occ-many-seats { box-shadow: inset 0 -2px 0 rgba(88, 166, 255, 0.45); }
.gct-car.occ-few-seats  { box-shadow: inset 0 -2px 0 rgba(210, 153, 34, 0.5); }
.gct-car.occ-standing   { box-shadow: inset 0 -2px 0 rgba(255, 84, 84, 0.5); }

/* Cars recovered from the consist archive rather than the live feed —
   the same train, but the numbers are last-known, not this minute's. */
.gct-consist.is-archived .gct-car { border-style: dotted; opacity: 0.8; }
.gct-archivetag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-left: 7px;
}
.gct-pending {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: var(--bg);
  padding-right: 8px;
}

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

@media (max-width: 620px) {
  .gct-header { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .gct-main, .gct-toolbar { padding-left: 14px; padding-right: 14px; }
  .gct-tallies { gap: 14px; }
  .gct-tally b { font-size: 16px; }
  .gct-compass { display: none; }
  .gct-lane { grid-template-columns: 8px 32px 1fr; }
  .gct-car { min-width: 40px; font-size: 10px; }
}

/* Predicted equipment: inherited from the previous occupant of this track,
   not yet confirmed by the feed. Deliberately more tentative than the
   "last known" archive styling — this is an inference, and the label carries
   the source train so it can be checked rather than taken on trust. */
.gct-consist.is-predicted .gct-car {
  border-style: dashed;
  opacity: 0.72;
}
.gct-consist.is-predicted .gct-archivetag { color: var(--held); }


/* ─── Heritage fleet legend ─────────────────────────────────────────────────
   Side elevations only. A head-on view of a locomotive reads as a face, and at
   this size that's a cartoon; the side profile is what a roster shot looks like
   and it's the only view where the stripe geometry is legible. */
.gct-heritage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  padding: 4px 0 8px;
}
.gct-hcard {
  margin: 0;
  background: rgba(22, 27, 34, 0.7);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 10px;
}
.gct-hcard svg { display: block; width: 100%; height: auto; }
.gct-hcard figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.gct-hcard b {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.gct-hscheme { font-size: 12px; color: var(--text); }
.gct-hdesc   { font-size: 11px; color: var(--muted); line-height: 1.4; }
.gct-hdate   {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}