/* gtfs.media, site-specific styles.
   ==================================================================
   Everything shared with the other FivePaths microsites comes from
   cdn.fivepaths.com/microsite/v2/base.css. What is left here is only what
   this site alone has, which after migrating to the engine is a much shorter
   list than it used to be: the departure board mockup and its route pills.

   The previous version of this file was 610 lines defining 74 classes. The
   engine's components replaced almost all of it. What went where is recorded
   in COMPONENTS.md; the short version is that 24 of those classes were the API
   reference, which is a generator rather than a component, and most of the
   rest were patterns general enough to belong in the shared library.

   Colours come from --fp-* tokens. Nothing here is hardcoded, so every part of
   it follows the dark-band remap. */

:root {
  /* A route badge's ink is white in both schemes, because its background is a
     fixed saturated route colour rather than a themed ground. That makes it a
     genuine exception to the token rule, so it gets a name rather than a
     literal at the point of use. */
  --gtfs-route-ink: #ffffff;
}

/* ---------- departure board mockup ---------- */
/* A picture of a rider-facing screen. The board carries one image role, so
   everything inside it is presentational. */

.board {
  background: var(--fp-board);
  border: 1px solid var(--fp-board-line);
  border-radius: var(--fp-radius);
  overflow: hidden;
  font-family: var(--fp-mono);
  color: var(--fp-board-ink);
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--fp-board-line);
  font-size: 0.82rem;
  color: var(--fp-board-ink);
}

/* The live indicator is a static dot. A blink is motion a reader cannot stop
   and it carries nothing the word "Live" does not already say. */
.live-dot { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--fp-board-accent); }
.live-dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fp-board-accent);
}

.board-rows { display: flex; flex-direction: column; }
.board-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--fp-board-line);
}
.board-row:last-child { border-bottom: 0; }
.board-dest { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-eta { font-size: 1.05rem; font-weight: 600; color: var(--fp-amber); }

/* Route blips: the one place multicolour is allowed, and only for data. The
   badge always carries the route number as well, so colour is never the only
   thing identifying a route. */
.route-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--fp-pill);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gtfs-route-ink);
  background: var(--fp-route-blue);
}
.r-blue { background: var(--fp-route-blue); }
.r-green { background: var(--fp-route-green); }
.r-red { background: var(--fp-route-red); }
.r-orange { background: var(--fp-route-orange); color: var(--fp-amber-ink); }
.r-purple { background: var(--fp-route-purple); }

.board-alert {
  padding: 0.7rem 1rem;
  background: var(--fp-board-2);
  border-top: 1px solid var(--fp-board-line);
  font-size: 0.82rem;
  color: var(--fp-board-ink);
}