/* ============================================================================
   LIVELOPORAIL PLATFORM — departure board skin (.rail-board)
   ----------------------------------------------------------------------------
   PROVENANCE: vendored from the ecosystem board skin
   (website design files/assets/board-skin.css, the board plugin's own file).
   It is self-contained (its own --rb-* namespace; reads no site token) so it
   drops into the live platform's live board unchanged. If the board lane
   restyles a skin, re-sync this copy — or, better, link a shared copy once the
   design system publishes one (see the design-system CSS-bundle hand-off).
   ========================================================================== */

/* ── base component tokens — the board's own namespace ─────────────────── */
.rail-board {
  --rb-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --rb-serif: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  --rb-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --rb-font-dest: var(--rb-sans);
  --rb-font-num: var(--rb-mono);

  /* default skin = platform (classic station departure board, dark ground, amber time) */
  --rb-ground: oklch(19% 0.018 262);
  --rb-head: oklch(23% 0.02 262);
  --rb-ink: oklch(96% 0.004 95);
  --rb-muted: oklch(71% 0.012 255);
  --rb-line: oklch(32% 0.016 260);
  --rb-hover: oklch(26% 0.02 262);
  --rb-time: oklch(85% 0.13 82);
  --rb-plat: oklch(88% 0.15 96);
  --rb-ok: oklch(79% 0.16 152);
  --rb-warn: oklch(85% 0.14 78);
  --rb-danger: oklch(74% 0.19 27);
  --rb-info: oklch(81% 0.10 235);

  --rb-radius: 5px;
  --rb-cols: 92px minmax(0, 1fr) 84px 118px 150px;

  background: var(--rb-ground);
  color: var(--rb-ink);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
  font-family: var(--rb-sans);
}

/* ── bar (direction tabs + board note) ───────────────────────────────────── */
.rail-board__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rb-line);
}
.rail-board__bar-note {
  font-family: var(--rb-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

/* ── head ────────────────────────────────────────────────────────────────── */
.rail-board__head,
.rail-board__row {
  display: grid;
  grid-template-columns: var(--rb-cols);
  gap: 22px;
  align-items: center;
}
.rail-board__head {
  padding: 11px 20px;
  background: var(--rb-head);
  border-bottom: 1px solid var(--rb-line);
  font-family: var(--rb-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rail-board__body { padding: 4px 0; }

/* ── rows ────────────────────────────────────────────────────────────────── */
.rail-board__row {
  padding: 15px 20px;
  border-top: 1px solid var(--rb-line);
  transition: background 0.12s ease;
  cursor: pointer;
}
.rail-board__row:first-child { border-top: 0; }
.rail-board__row:hover { background: var(--rb-hover); }
.rail-board__row:focus-visible { outline: 2px solid var(--rb-time); outline-offset: -2px; }
.rail-board__row.is-hidden { display: none; }

.rail-board__time {
  font-family: var(--rb-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--rb-time);
  align-self: baseline;
}
.rail-board__time--delayed { color: var(--rb-warn); }
.rail-board__time--cancelled { color: var(--rb-danger); text-decoration: line-through; }

.rail-board__dest {
  font-family: var(--rb-font-dest);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  min-width: 0;
}
.rail-board__via {
  display: block;
  font-family: var(--rb-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--rb-muted);
  margin-top: 3px;
}
.rail-board__plat {
  font-family: var(--rb-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  color: var(--rb-plat);
}
.rail-board__plat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-muted);
  font-family: var(--rb-mono);
}
.rail-board__op {
  font-family: var(--rb-mono);
  font-size: 12.5px;
  color: var(--rb-muted);
  min-width: 0;
}

/* ── status lamps ────────────────────────────────────────────────────────── */
.rail-board__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--rb-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  justify-self: start;
}
.rail-board__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rail-board__status--ok      { color: var(--rb-ok);     background: color-mix(in oklch, var(--rb-ok) 16%, var(--rb-ground));     border-color: color-mix(in oklch, var(--rb-ok) 38%, transparent); }
.rail-board__status--warn    { color: var(--rb-warn);   background: color-mix(in oklch, var(--rb-warn) 16%, var(--rb-ground));   border-color: color-mix(in oklch, var(--rb-warn) 40%, transparent); }
.rail-board__status--danger  { color: var(--rb-danger); background: color-mix(in oklch, var(--rb-danger) 18%, var(--rb-ground)); border-color: color-mix(in oklch, var(--rb-danger) 38%, transparent); }
.rail-board__status--info    { color: var(--rb-info);   background: color-mix(in oklch, var(--rb-info) 16%, var(--rb-ground));   border-color: color-mix(in oklch, var(--rb-info) 36%, transparent); }
.rail-board__status--muted   { color: var(--rb-muted);  background: color-mix(in oklch, var(--rb-ink) 8%, var(--rb-ground));    border-color: var(--rb-line); }
.rail-board__status--live::before { animation: rail-board-pulse 1.6s ease-in-out infinite; }
@keyframes rail-board-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rail-board__empty { padding: 26px 20px; color: var(--rb-muted); font-family: var(--rb-mono); font-size: 13px; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .rail-board__head { display: none; }
  .rail-board__row {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 6px 18px;
    padding: 16px 16px;
    align-items: start;
  }
  .rail-board__time { grid-row: span 4; }
  .rail-board__plat,
  .rail-board__op,
  .rail-board__status { grid-column: 2; }
  .rail-board__plat { display: flex; align-items: baseline; gap: 8px; }
}

/* #3834 boards layout: the departures + arrivals pair sits side-by-side only when
   there is room for two full 5-column boards; otherwise stack them so each board
   gets the full width instead of overflowing. */
.boards-grid { grid-template-columns: 1fr; }
@media (min-width: 1180px) { .boards-grid { grid-template-columns: 1fr 1fr; } }
/* Guard against any residual horizontal overflow on small screens. */
@media (max-width: 560px) {
  .rail-board { overflow-x: auto; }
  .rail-board__time { font-size: 15px; }
}