:root{
  --blue:#000094;
  --blue-alt:#0000ce;
  --blue-bg:#1e007d;
  --yellow:#ffff00;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--blue-bg);}
html,body{height:100%;}
body{
  background:var(--blue);
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ───── shared column widths (mirror real departure.css vw values) ───── */
.c-status{width:2.2vw;}
.c-time{width:7.2vw;font-variant-numeric:tabular-nums;}
.c-est{width:7.2vw;font-variant-numeric:tabular-nums;}
.c-op{width:6vw;}
.c-train{width:13vw;}
.c-station{width:29vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.c-remarks{width:27vw;}
.c-track{width:8vw;text-align:right;font-variant-numeric:tabular-nums;}

/* ───── header (.headline) ───── */
header.headline{
  display:flex;
  align-items:center;
  height:9.3vh;
  padding-left:.5vw;
  font-size:3.77vw;
  flex-shrink:0;
}
.glyph{width:5%;display:flex;align-items:center;}
.glyph img{height:6vh;width:auto;display:block;}
.h-de{width:25%;color:var(--yellow);}
.h-en{width:25%;color:var(--yellow);font-style:italic;}
#clock{width:36%;color:#fff;font-variant-numeric:tabular-nums;}
.brand{flex:1;display:flex;justify-content:flex-end;align-items:center;padding-right:1.4vw;}
.brand img{height:7.5vh;object-fit:contain;}

/* ───── column header row ───── */
.cols{
  display:flex;
  align-items:flex-start;
  color:#fff;
  font-size:1.8vw;
  flex-shrink:0;
  padding-right:12px;
}
.cols .fl,.cols .sl{display:block;line-height:4.4vh;}
.cols .sl{font-style:italic;}

/* ───── rows: 12 fixed-height slots ───── */
.rows{flex:1;list-style:none;}
.rows li{display:flex;height:6.8249vh;}
.rows li.data:nth-child(odd){background:var(--blue-alt);}
.rows li.data:nth-child(even){background:var(--blue);}
.rows li.empty{background:var(--blue);}

.row{
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
  padding-right:12px;
  text-decoration:none;
  color:#fff;
  font-size:2.53vw;
  transition:filter .12s;
}
.row:hover,.row:focus-visible{filter:brightness(1.45);outline:none;}
.row:hover .c-station{text-decoration:underline;}

/* status dot (white blink, like real .available) */
.c-status{display:flex;justify-content:center;padding-left:.4vw;}
.dot{
  width:1.6vw;height:1.6vw;max-width:14px;max-height:14px;
  border-radius:50%;background:#fff;opacity:.85;
  animation:blink 1.5s steps(2) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* estimated (delay) value — the ONLY yellow in a row */
.c-est .est{color:var(--yellow);}

/* operator white box: square corners, near full row height */
.c-op{display:flex;align-items:center;padding-right:.5vw;}
.opbox{
  background:#fff;border-radius:0;
  height:5.8vh;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.opbox img{width:88%;height:80%;object-fit:contain;}
.opbox .emoji{font-size:3.4vh;line-height:1;}

/* train code */
.c-train{font-weight:bold;}


/* via / remarks */
.c-remarks{
  font-size:2.4vh;line-height:1.2;
  overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* track */
.lock{font-size:.7em;margin-right:4px;vertical-align:2px;}

/* ───── narrow / portrait fallback (keep usable on phones) ───── */
@media (max-width:860px){
  header.headline{font-size:clamp(20px,5.5vw,34px);}
  .glyph img{height:28px;}
  .brand img{height:30px;}
  .cols{font-size:11px;}
  .cols .fl,.cols .sl{line-height:1.2;}
  .row{font-size:clamp(15px,4.2vw,22px);}
  .c-status,.c-est,.c-remarks{display:none;}
  .h-en{display:none;}
  .c-time{width:auto;min-width:3.4em;padding-right:8px;}
  .c-op{width:13vw;}
  .c-train{width:16vw;}
  .c-station{width:auto;flex:1;}
  .opbox{height:4.4vh;}
}
@media (prefers-reduced-motion:reduce){
  .dot{animation:none;}
}