/* Arrival data retains its neutral palette; the outer board shares game materials. */
.station-arrivals-toggle { width: 100%; }
#station-arrivals-board {
  --arrival-surface: #1c1c1e;
  --arrival-header: #262628;
  --arrival-text: #f5f5f7;
  --arrival-muted: #b5b5ba;
  --arrival-rule: #404043;
  --arrival-highlight: #2b2b2e;
  --arrival-time: #86dfa7;
  position: fixed;
  z-index: 2200;
  top: var(--arrivals-top, 90px);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--arrival-columns, 1) * 370px + 24px), calc(100vw - 32px));
  max-height: min(65dvh, calc(100dvh - var(--arrivals-top, 90px) - 88px));
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--arrival-rule);
  border-radius: 20px;
  background: var(--material-panel,var(--arrival-surface));
  color: var(--arrival-text);
  box-shadow: var(--material-shadow,0 16px 48px #00000033);
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;

  backdrop-filter: var(--material-blur,none);

  -webkit-backdrop-filter: var(--material-blur,none);
}
#station-arrivals-board[hidden] {display: none;}
html.cityrail-light-ui #station-arrivals-board {
  --arrival-surface: #ffffff;
  --arrival-header: var(--material-chrome,#f2f2f4);
  --arrival-text: #202023;
  --arrival-muted: #636368;
  --arrival-rule: #dedee2;
  --arrival-highlight: var(--material-inset,#f5f5f7);
  --arrival-time: #14703c;
}
.station-arrivals-heading {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 10px 10px;}
#station-arrivals-name {margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.4px;}
#station-arrivals-close {
  flex: 0 0 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--arrival-header);
  color: var(--arrival-text);
  font-size: 24px;
  cursor: pointer;
}
#station-arrivals-columns {
  display: grid;
  grid-template-columns: repeat(var(--arrival-columns, 1), minmax(340px, 1fr));
  gap: 12px;
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.station-arrivals-column {min-width: 0; align-self: start; border: 1px solid var(--arrival-rule); border-radius: 12px; overflow: hidden;}
.station-arrivals-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  margin: 0;
  padding: 12px 14px;
  border-left: 5px solid var(--arrival-line);
  background: var(--arrival-header);
  color: var(--arrival-text);
  font-size: 15px;
  font-weight: 650;
}
.station-arrivals-direction {font-size: 12px; font-weight: 550; overflow-wrap: anywhere;}
.station-arrivals-vacant {height: 24px; color: var(--arrival-muted); text-align: center;}
.station-arrivals-table {width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums;}
.station-arrivals-table th {color: var(--arrival-muted); font-weight: 500; font-size: 10px;}
.station-arrivals-table th,
.station-arrivals-table td {padding: 13px 8px; vertical-align: middle;}
.station-arrivals-table th {border-bottom: 1px solid var(--arrival-rule);}
.station-arrivals-table th:nth-child(1) {width: 27%;}
.station-arrivals-table th:nth-child(2) {width: 28%;}
.station-arrivals-table th:nth-child(3) {width: 13%; text-align: center;}
.station-arrivals-table th:last-child {width: 32%; text-align: right;}
.station-arrivals-destination {font-weight: 650; overflow-wrap: anywhere;}
.station-arrivals-platform {text-align: center; font-size: 14px; font-weight: 650;}
.station-arrivals-time {color: var(--arrival-time); text-align: right; font-size: 15px; font-weight: 700; white-space: nowrap;}
.station-arrivals-table tr[data-arrival-status="imminent"],
.station-arrivals-table tr[data-arrival-status="已到站"] {background: var(--arrival-highlight);}
.station-arrivals-service {display: inline-block; border-radius: 4px; padding: 4px 6px; font-size: 10px; font-weight: 650; color: #fff; background: #62626a;}
.station-arrivals-service[data-service="local"] {background: #2666bb;}
.station-arrivals-service[data-service="express"] {background: #bc3442;}
.station-arrivals-service[data-service="short"] {background: #11786e;}
.station-arrivals-service[data-service="through"] {background: #7951ad;}
.station-arrivals-service[data-service="through-express"] {background: #96520e;}
.station-arrivals-empty {margin: 0; padding: 28px 16px; color: var(--arrival-muted); font-size: 12px; text-align: center;}
#station-arrivals-board :focus-visible,
.station-arrivals-toggle:focus-visible {outline: 2px solid var(--ui-text, #888); outline-offset: -2px;}
@media (max-width: 560px) {
  #station-arrivals-board {width: calc(100vw - 16px); padding: 8px; border-radius: 16px;}
  #station-arrivals-close {flex-basis: 44px; height: 44px;}
  #station-arrivals-columns {grid-template-columns: repeat(var(--arrival-columns, 1), calc(100vw - 34px)); scroll-snap-type: x proximity; gap: 8px;}
  .station-arrivals-column {scroll-snap-align: start;}
  .station-arrivals-table th,
  .station-arrivals-table td {padding: 12px 6px;}
}

.station-arrivals-service[data-service="limited"] { background: #7c319f; }
.station-arrivals-service[data-service="direct"] { background: #007b91; }