:root {
  color-scheme: light;
  --bg: #eef1f5;
  --card: #ffffff;
  --text: #14202b;
  --muted: #5d6b7a;
  --ok: #1a8f4a;
  --warn: #c27400;
  --bad: #d12c2c;
  --rail: #e60000;
  --bus: #f7c600;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 1.2vmin;
  padding: max(2.4vmin, env(safe-area-inset-top)) max(3vmin, env(safe-area-inset-right)) max(1.6vmin, env(safe-area-inset-bottom)) max(3vmin, env(safe-area-inset-left));
  font-size: clamp(14px, 2.2vmin, 28px);
  -webkit-user-select: none;
  user-select: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

h1 { margin: 0; font-size: 2.4em; line-height: 1.1; }
.arrow { color: var(--muted); }
.sub { margin: 0.2em 0 0; color: var(--muted); }

.clock { text-align: right; }
#clock-time { font-size: 2.6em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#clock-date { color: var(--muted); margin-top: 0.2em; }

.banner {
  background: #fff3d6;
  border: 1px solid var(--warn);
  color: #6b4200;
  padding: 0.6em 0.9em;
  border-radius: 0.5em;
}

main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4vmin;
}

.card {
  flex: 1 1 0;
  min-height: min-content;
  display: grid;
  grid-template-columns: minmax(10em, 14em) 1fr minmax(11em, 17em);
  align-items: center;
  gap: 1.5em;
  background: var(--card);
  border-left: 0.5em solid var(--ok);
  border-radius: 0.7em;
  padding: 0.6em 1.2em;
  box-shadow: 0 1px 3px rgba(20, 32, 43, 0.12);
}
.card.warn { border-left-color: var(--warn); }
.card.bad { border-left-color: var(--bad); }
.card.bad .when, .card.bad .info { opacity: 0.55; }

.rel { line-height: 1; white-space: nowrap; }
.rel-big { font-size: 4.2em; font-weight: 800; font-variant-numeric: tabular-nums; }
.rel-small { font-size: 1.3em; color: var(--muted); margin-left: 0.25em; }
.rel-pre { font-size: 1.3em; color: var(--muted); margin-right: 0.25em; }
.rel.long .rel-big { font-size: 2.6em; }
.abs { margin-top: 0.3em; font-size: 1.5em; color: var(--muted); }

.time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.time.delayed s { color: var(--muted); text-decoration-thickness: 2px; }
.time.delayed b { color: var(--bad); }
.delay { color: var(--bad); font-weight: 700; font-size: 0.8em; margin-left: 0.3em; }

.info { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.dest { font-size: 1.3em; font-weight: 600; }
.times { display: flex; flex-wrap: wrap; gap: 0.2em 1.4em; font-size: 1.1em; }
.muted, .quay { color: var(--muted); }
.quay.changed { color: var(--warn); font-weight: 700; }

.badge {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 0.35em;
  font-weight: 800;
  font-size: 1.4em;
  background: var(--rail);
  color: #fff;
}
.badge.bus { background: var(--bus); color: #1b1b1b; }
.badge.cancelled { text-decoration: line-through; opacity: 0.6; }

.status { text-align: center; }
.status-title {
  font-size: 1.9em;
  font-weight: 800;
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: var(--ok);
}
.card.warn .status-title { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.card.bad .status-title { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }
.status-detail { margin-top: 0.4em; color: var(--muted); font-size: 0.95em; }

.empty { margin: auto; color: var(--muted); font-size: 1.6em; }

footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); font-size: 0.75em; }
.logo { height: 3.4em; width: 3.4em; margin: -0.6em 0; opacity: 0.7; pointer-events: none; }
footer > span { flex: 1; }
footer > span:last-child { text-align: right; }

@media (max-width: 760px) {
  .card { grid-template-columns: 1fr; gap: 0.5em; }
  .rel-big { font-size: 3em; }
  .status { text-align: left; }
  h1 { font-size: 1.7em; }
  main { overflow-y: auto; }
  .card { flex: none; }
}