/* Shared structure: departure rows, badges, pills, messages.
   Colours and sizes come from tokens set in style.css. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.25;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* Route section */
.route { position: relative; }
.route__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .4em;
  font-weight: 500;
  color: var(--fg-muted);
}
.route__to { color: var(--fg); font-weight: 700; }
.route__arrow { color: var(--fg-muted); }

/* Swap-direction button: a 44px touch target in the card's top right. */
.route__swap {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.route__swap:hover, .route__swap:focus-visible { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.route__swap:focus-visible { outline: 2px solid var(--train); outline-offset: 2px; }
.route--swapped .route__swap { color: var(--train); background: color-mix(in srgb, var(--train) 14%, transparent); }
.route__swap svg { display: block; }

.route__msg { color: var(--fg-muted); }
.route__msg--error { color: var(--cancelled); }
.route__stale {
  color: var(--delayed);
  font-weight: 500;
}

/* Departure row: time | main | status */
.deps { display: flex; flex-direction: column; }
.dep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  border-top: 1px solid var(--rule);
}
.dep__time { display: flex; flex-direction: column; }
.dep__sched { font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.dep__exp { color: var(--delayed); font-weight: 600; line-height: 1.2; }
.dep--cancelled .dep__sched { text-decoration: line-through; text-decoration-thickness: .08em; color: var(--fg-muted); }
.dep--cancelled .dep__main, .dep--cancelled .dep__exp { color: var(--fg-muted); }
.dep--cancelled .dep__exp { display: none; }

.dep__main { display: flex; flex-direction: column; min-width: 0; }
/* Header line: pill … badge, then line name · platform on its own line. */
.dep__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .55em; min-width: 0; }
.dep__head .dep__meta { order: 3; flex: 1 0 100%; min-width: 0; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep__platform::before { content: "· "; }
.dep__head .badge { margin-left: auto; flex: none; }
.dep__dest { font-weight: 500; overflow-wrap: anywhere; }
.dep__dir { color: var(--fg-muted); font-weight: 400; }
.dep__note { color: var(--fg-muted); overflow-wrap: anywhere; }

.dep__in { color: var(--fg-muted); white-space: nowrap; }

/* Status badge */
.badge {
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  border-radius: .3em;
  padding: .35em .55em;
  white-space: nowrap;
}
.badge--ontime { color: var(--ontime); background: color-mix(in srgb, var(--ontime) 14%, transparent); }
.badge--delayed { color: var(--bg); background: var(--delayed); }
.badge--cancelled { color: var(--bg); background: var(--cancelled); }

/* Vehicle pill */
.pill {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  border-radius: .25em;
  padding: .3em .5em;
  color: var(--bg);
  white-space: nowrap;
}
.pill--train { background: var(--train); }
.pill--bus { background: var(--bus); }
.pill--other { background: var(--fg-muted); }

/* Connection to the local server lost */
.offline-banner { display: none; }
body.offline .offline-banner {
  display: block;
  background: var(--delayed);
  color: var(--bg);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .badge, .pill { transition: background-color .2s ease; }
}