:root {
  --bg: #0a0e14;
  --panel: #131a23;
  --panel-edge: #1e2833;
  --text: #f3f5f8;
  --muted: #8b95a5;
  --dim: #56606e;
  --amber: #f5b342;
  --red: #ef5a4c;
  --accent: #6fb7ff;
  --train: #e4007c;
  --metro-green: #179d4d;
  --metro-red: #d71d24;
  --metro-blue: #0089ca;
  --bus: #4e5d70;
  --tram: #d98b1d;
  --pad: 2.2vmin;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Helvetica Neue", "Inter", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  cursor: none;
}
body {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  padding: var(--pad);
}
.num { font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }

#header {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: baseline; align-items: baseline;
  padding: 0 1vmin 1.6vmin;
}
.place { font-size: 3.6vmin; font-weight: 600; letter-spacing: 0.01em; }
.status { display: inline-block; width: 1.4vmin; height: 1.4vmin; border-radius: 50%; margin-left: 1.6vmin; background: #2fbf71; vertical-align: middle; -webkit-transition: background .5s; transition: background .5s; }
.status.stale { background: var(--amber); }
.status.dead { background: var(--red); }
.clock { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
#clock { font-size: 7.5vmin; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#date { font-size: 2.6vmin; color: var(--muted); margin-left: 2.4vmin; }

#main {
  display: -webkit-flex; display: flex;
  -webkit-flex: 1 1 0; flex: 1 1 0;
  min-height: 0;
}
#transit {
  -webkit-flex: 1.25 1 0; flex: 1.25 1 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  margin-right: var(--pad);
  min-width: 0;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 2vmin;
  padding: 1.8vmin 2.4vmin;
  min-height: 0;
}
.board { -webkit-flex: 1 1 0; flex: 1 1 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.board + .board { margin-top: var(--pad); }
.panelTitle { font-size: 2.4vmin; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.panelTitle .sub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); margin-left: 1vmin; }
.rows { -webkit-flex: 1 1 0; flex: 1 1 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; justify-content: space-around; }
.row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  font-size: 3.7vmin;
  line-height: 1.1;
}
.row.empty { color: var(--dim); font-size: 3vmin; }
.row.gone { color: var(--dim); }
.badge {
  -webkit-flex: 0 0 auto; flex: 0 0 auto;
  min-width: 8.5vmin; height: 6vmin;
  line-height: 6vmin;
  padding: 0 1.4vmin;
  border-radius: 1.2vmin;
  text-align: center;
  font-weight: 700;
  font-size: 3.4vmin;
  color: #fff;
  background: var(--bus);
  margin-right: 2vmin;
}
.badge.TRAIN { background: var(--train); }
.badge.METRO { background: var(--metro-green); }
.badge.METRO.red { background: var(--metro-red); }
.badge.METRO.blue { background: var(--metro-blue); }
.badge.TRAM { background: var(--tram); }
.dest { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.row.cancelled .dest { text-decoration: line-through; color: var(--muted); }
.time { -webkit-flex: 0 0 auto; flex: 0 0 auto; color: var(--muted); font-size: 3vmin; margin: 0 1.8vmin; text-align: right; }
.time .was { text-decoration: line-through; color: var(--dim); margin-right: 1vmin; }
.time .late { color: var(--amber); }
.eta { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 11vmin; text-align: right; font-weight: 700; font-size: 4.4vmin; }
.eta.now { color: var(--accent); }
.eta.late { color: var(--amber); }
.eta.cancelled { color: var(--red); font-size: 3.2vmin; }

#weatherNow {
  -webkit-flex: 1 1 0; flex: 1 1 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  min-width: 0;
}
.nowTop { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex: 1 1 0; flex: 1 1 0; min-height: 0; }
.nowIcon { width: 17vmin; height: 17vmin; max-height: 100%; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-right: 2vmin; }
.nowTemp { font-size: 12vmin; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.nowTemp sup { font-size: 6vmin; vertical-align: top; font-weight: 400; color: var(--muted); margin-left: 0.5vmin; }
.nowDesc { font-size: 3vmin; color: var(--muted); margin-top: 0.6vmin; }
.nowGrid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid var(--panel-edge); padding-top: 1vmin; }
.stat { width: 50%; padding: 0.3vmin 0; }
.stat .k { font-size: 1.9vmin; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.stat .v { font-size: 3.2vmin; font-weight: 600; white-space: nowrap; }
.stat .v small { font-size: 2.4vmin; color: var(--muted); font-weight: 400; margin-left: 0.4vmin; }
.windArrow { display: inline-block; width: 2.6vmin; height: 2.6vmin; vertical-align: -0.3vmin; margin-right: 0.6vmin; }

#forecast {
  -webkit-flex: 0 0 34%; flex: 0 0 34%;
  margin-top: var(--pad);
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
#chart { -webkit-flex: 1 1 0; flex: 1 1 0; min-height: 0; position: relative; }
#chart svg { position: absolute; left: 0; top: 0; }
.chartLabel { font-size: 2.2vmin; fill: var(--muted); }
.chartTemp { font-size: 2.6vmin; font-weight: 600; fill: var(--text); }
.chartPrecip { font-size: 2vmin; fill: var(--accent); }

#deviations { padding: 1.2vmin 1vmin 0; font-size: 2.3vmin; color: var(--amber); min-height: 0; line-height: 1.3; }
#deviations:empty { display: none; }
#deviations p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (orientation: portrait) {
  #main { -webkit-flex-direction: column; flex-direction: column; }
  #transit { margin-right: 0; margin-bottom: var(--pad); -webkit-flex: 1.6 1 0; flex: 1.6 1 0; }
  #forecast { -webkit-flex-basis: 26%; flex-basis: 26%; }
  .nowIcon { width: 16vmin; height: 16vmin; }
  .nowTemp { font-size: 11vmin; }
}