/* ============================================================================
   RAIL BOARD — plugin-owned station board widget + skins
   ----------------------------------------------------------------------------
   BOUNDARY (do not cross):
   This file belongs to the board plugin, not the site theme. It is
   deliberately self-contained: it reads no site token (--bg / --fg / --accent
   / --surface / --border / --muted) and defines its own --rb-* namespace on
   .rail-board. A redesign of the website must not restyle anything here, and
   nothing here may leak into the site. Change a skin only in this file.

   MARKUP CONTRACT
     <div class="rail-board" data-skin="platform|editorial|signalling">
       <div class="rail-board__head">
         <span class="rail-board__col">Time</span> … (5 columns)
       </div>
       <div class="rail-board__body">
         <div class="rail-board__row" data-dir data-station data-dest data-operator>
           <span class="rail-board__time">06:45</span>
           <span class="rail-board__dest">Paris Gare du Nord
             <span class="rail-board__via">Eurostar · via Lille</span></span>
           <span class="rail-board__plat"><span class="rail-board__plat-label">Plat</span>5</span>
           <span class="rail-board__op">Eurostar</span>
           <span class="rail-board__status rail-board__status--info">Boarding</span>
         </div>
       </div>
     </div>

   SKINS
     platform   (default) — the plugin's original format: a classic station
                 departure board, dark ground, amber time column.
     editorial            — the light paper skin, for use on editorial pages.
     signalling           — luminous lamps on graphite, for night/cab use.
   ========================================================================== */

/* ── base component tokens — the plugin'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 (original plugin format) */
  --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: minmax(52px, 64px) minmax(0, 1fr) 44px 84px 92px;

  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);
  column-gap: 12px;
  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;
}
.rail-board__row:first-child { border-top: 0; }
.rail-board__row:hover { background: var(--rb-hover); }
.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    { 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--live::before { animation: rail-board-pulse 1.6s ease-in-out infinite; }
@keyframes rail-board-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── direction tabs (part of the board's own mode switch) ────────────────── */
.rail-board__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: color-mix(in oklch, var(--rb-ink) 7%, var(--rb-ground));
  border: 1px solid var(--rb-line);
  border-radius: calc(var(--rb-radius) + 4px);
}
.rail-board__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rb-muted);
  font-family: var(--rb-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: var(--rb-radius);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.rail-board__tab:hover { color: var(--rb-ink); }
.rail-board__tab[aria-selected="true"] {
  color: var(--rb-ground);
  background: var(--rb-ink);
}
.rail-board__tab:focus-visible { outline: 2px solid var(--rb-time); outline-offset: 2px; }

/* ── skin: editorial (light paper) ───────────────────────────────────────── */
.rail-board[data-skin="editorial"] {
  --rb-ground: oklch(100% 0.002 95);
  --rb-head: transparent;
  --rb-ink: oklch(20% 0.018 70);
  --rb-muted: oklch(48% 0.012 70);
  --rb-line: oklch(90% 0.006 95);
  --rb-hover: color-mix(in oklch, var(--rb-ink) 5%, transparent);
  --rb-time: oklch(20% 0.018 70);
  --rb-plat: oklch(20% 0.018 70);
  --rb-ok: oklch(46% 0.11 155);
  --rb-warn: oklch(52% 0.12 70);
  --rb-danger: oklch(50% 0.16 25);
  --rb-info: oklch(46% 0.10 252);

  --rb-font-dest: var(--rb-serif);
  --rb-radius: 0;
  border: 0;
  border-top: 1px solid var(--rb-ink);
  border-bottom: 1px solid var(--rb-ink);
  border-radius: 0;
  box-shadow: none;
}
.rail-board[data-skin="editorial"] .rail-board__head { padding-inline: 4px; }
.rail-board[data-skin="editorial"] .rail-board__row { padding-inline: 4px; }
.rail-board[data-skin="editorial"] .rail-board__tabs {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: 0;
  gap: 24px;
}
.rail-board[data-skin="editorial"] .rail-board__tab { border-radius: 0; padding: 12px 0; }
.rail-board[data-skin="editorial"] .rail-board__tab[aria-selected="true"] {
  color: var(--rb-ink);
  background: transparent;
  box-shadow: inset 0 -2px 0 0 var(--rb-ink);
}

/* ── skin: signalling (luminous lamps on graphite) ───────────────────────── */
.rail-board[data-skin="signalling"] {
  --rb-ground: oklch(15% 0.012 265);
  --rb-head: oklch(19% 0.013 265);
  --rb-ink: oklch(94% 0.006 95);
  --rb-muted: oklch(66% 0.012 265);
  --rb-line: oklch(28% 0.012 265);
  --rb-hover: oklch(21% 0.014 265);
  --rb-time: oklch(85% 0.16 80);
  --rb-plat: oklch(87% 0.17 95);
  --rb-ok: oklch(78% 0.17 152);
  --rb-warn: oklch(84% 0.15 78);
  --rb-danger: oklch(73% 0.20 25);
  --rb-info: oklch(81% 0.11 245);
  --rb-radius: 12px;
}

/* ── 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; }
}

/* #6045 compact guard — the time stays tabular mono but drops to 15px on the
   narrowest screens so the 5-column board does not overflow. */
@media (max-width: 560px) {
  .rail-board { overflow-x: auto; }
  .rail-board__time { font-size: 15px; }
}

.rail-board__empty { padding: 26px 20px; color: var(--rb-muted); font-family: var(--rb-mono); font-size: 13px; }
.rail-board__row:focus-visible { outline: 2px solid var(--rb-time); outline-offset: -2px; }