/* Built for 1920x1080 TVs viewed from a few metres away; everything scales with viewport width. */
:root { --bg:#070b16; --bg2:#0f1a33; --fg:#f4f6fb; --muted:#8792aa; --line:rgba(255,255,255,.07); --card:rgba(255,255,255,.045);
  --accent:#ffc93c; --late:#ff6b5b; --ok:#3ddc97; --tram:#e63946; --bus:#2f80ed; --train:#1fa463; --plane:#8b5cf6; }
body.theme-light { --bg:#eef2f8; --bg2:#ffffff; --fg:#0e1726; --muted:#5b6678; --line:rgba(0,0,0,.08); --card:rgba(255,255,255,.8);
  --accent:#0a5bd8; --late:#c62828; --ok:#1b8a4c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; color:var(--fg); overflow:hidden; cursor:none;
  font-family:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:1.5vw; font-variant-numeric:tabular-nums; }
body { display:flex; flex-direction:column; background:radial-gradient(120% 90% at 0% 0%, var(--bg2) 0%, var(--bg) 60%); }

header { display:flex; align-items:center; gap:1.5vw; padding:1.4vw 2.5vw 1.1vw; }
#logo { height:3.4vw; max-width:14vw; object-fit:contain; }
h1 { flex:1; margin:0; font-size:2.5vw; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.when { text-align:right; line-height:1; }
#clock { font-size:3.6vw; font-weight:800; letter-spacing:-.03em; }
#date { color:var(--muted); font-size:1vw; margin-top:.35vw; text-transform:capitalize; }

.layout { flex:1; display:flex; gap:1.6vw; padding:0 2.5vw; min-height:0; }
main { flex:1; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:1vw; padding:0 1vw; }
aside { width:24vw; overflow:hidden; display:flex; flex-direction:column; gap:1.2vw; }
.card.off { display:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:1vw; padding:1.2vw 1.4vw; }
.card h2 { margin:0 0 .7vw; font-size:.85vw; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }

table { width:100%; border-collapse:collapse; table-layout:fixed; }
th { text-align:left; color:var(--muted); font-weight:600; font-size:.8vw; text-transform:uppercase; letter-spacing:.12em; padding:1.1vw .8vw .5vw; }
td { padding:.75vw .8vw; border-top:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-time { width:18%; } .c-line { width:13%; } .c-dest { width:41%; } .c-plat { width:9%; text-align:center; } .c-status { width:19%; text-align:right; }
td.c-time { font-weight:800; font-size:1.8vw; letter-spacing:-.02em; }
td.c-time .sched { text-decoration:line-through; color:var(--muted); font-size:.9vw; font-weight:500; margin-left:.4vw; }
td.c-line span { display:inline-block; min-width:4.2vw; text-align:center; padding:.2vw .6vw; border-radius:.5vw; font-weight:800; font-size:1.25vw; color:#fff; background:var(--muted); }
td.c-line span.m-tram { background:var(--tram); } td.c-line span.m-bus, td.c-line span.m-trolleybus { background:var(--bus); }
td.c-line span.m-train { background:var(--train); } td.c-line span.m-plane { background:var(--plane); }
td.c-dest { font-size:1.65vw; font-weight:600; }
td.c-dest small { display:block; color:var(--muted); font-size:.85vw; font-weight:400; margin-top:.15vw; }
td.c-plat { font-weight:700; font-size:1.4vw; }
td.c-status span { display:inline-block; padding:.2vw .7vw; border-radius:99px; font-weight:700; font-size:1vw; }
td.c-status.late span { color:var(--late); background:color-mix(in srgb, var(--late) 15%, transparent); }
td.c-status.ontime span { color:var(--ok); background:color-mix(in srgb, var(--ok) 13%, transparent); }
tr.sect th { color:var(--accent); font-size:1.05vw; letter-spacing:.06em; padding:1.3vw .8vw .5vw; }
tr.departing td { animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { background:color-mix(in srgb, var(--accent) 12%, transparent); } }
#empty { text-align:center; color:var(--muted); font-size:1.8vw; margin-top:8vw; }

.wx-now { display:flex; align-items:center; gap:1vw; }
.wx-icon { font-size:4vw; line-height:1; }
.wx-temp { font-size:4vw; font-weight:800; letter-spacing:-.04em; line-height:1; }
.wx-desc { color:var(--muted); font-size:.95vw; margin-top:.3vw; }
.wx-days { display:grid; grid-template-columns:repeat(3,1fr); gap:.6vw; margin-top:1.1vw; padding-top:1vw; border-top:1px solid var(--line); text-align:center; }
.wx-days div { font-size:.9vw; color:var(--muted); } .wx-days b { display:block; font-size:1.8vw; margin:.2vw 0; } .wx-days strong { color:var(--fg); }
#notices ul { list-style:none; margin:0; padding:0; }
#notices li { font-size:1.05vw; font-weight:500; padding:.6vw 0; border-top:1px solid var(--line); line-height:1.3; }
#notices li:first-child { border-top:0; padding-top:0; }

#ticker { display:flex; align-items:center; margin:1.2vw 2.5vw 0; background:var(--card); border:1px solid var(--line); border-radius:.8vw; overflow:hidden; height:3vw; }
#ticker .label { background:var(--accent); color:#111; font-weight:800; font-size:.9vw; text-transform:uppercase; letter-spacing:.08em; padding:0 1.2vw; height:100%; display:flex; align-items:center; }
#ticker .track { flex:1; overflow:hidden; white-space:nowrap; }
#news { display:inline-block; padding-left:100%; font-size:1.15vw; font-weight:500; animation:ticker linear infinite; }
#news span::after { content:"•"; color:var(--accent); margin:0 1.6vw; }
@keyframes ticker { to { transform:translateX(-100%); } }

footer { display:flex; justify-content:space-between; padding:.7vw 2.5vw; color:var(--muted); font-size:.8vw; }
#notice.warn { color:var(--late); }

.big { font-size:2.6vw; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.sub { color:var(--muted); font-size:.95vw; margin-top:.3vw; }
#mevo ul { list-style:none; margin:0; padding:0; }
#mevo li { display:flex; justify-content:space-between; font-size:1vw; padding:.45vw 0; border-top:1px solid var(--line); }
#mevo li:first-child { border-top:0; padding-top:0; } #mevo li b { color:var(--ok); }
.qr-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8vw; }
.qr-grid figure { margin:0; text-align:center; font-size:.85vw; font-weight:600; }
.qr-grid svg, .ad-row svg { width:100%; height:auto; border-radius:.4vw; display:block; margin-bottom:.35vw; }
.ad-row { display:flex; gap:1vw; align-items:center; } .ad-row > div { flex:1; min-width:0; }
.ad-row .qrbox { width:6vw; flex:none; }
.ad img { width:100%; max-height:8vw; object-fit:cover; border-radius:.5vw; margin-bottom:.6vw; }
.ad-title { font-size:1.3vw; font-weight:800; } .ad-text { font-size:.95vw; color:var(--muted); margin-top:.25vw; }

/* ---- Event mode ---- */
#event .ev-title { font-size:1.5vw; font-weight:800; } #event .sub { margin-bottom:.6vw; }
.agenda { list-style:none; margin:0; padding:0; }
.agenda li { display:flex; gap:1vw; padding:.5vw 0; border-top:1px solid var(--line); font-size:1vw; }
.agenda li:first-child { border-top:0; }
.agenda .at { font-weight:800; min-width:4vw; } .agenda .room { color:var(--muted); margin-left:auto; white-space:nowrap; }
.agenda li.now { color:var(--accent); } .agenda li.now .at::after { content:" ●"; }
#welcome { flex:2; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 6vw 1.5vw; min-height:0; }
#welcome h2 { margin:0; font-size:5vw; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
#welcome .sub { font-size:1.8vw; margin-top:1vw; }
#welcome .agenda { width:min(70vw,100%); margin-top:2vw; text-align:left; } #welcome .agenda li { font-size:1.5vw; padding:.7vw 0; } #welcome .agenda .at { min-width:7vw; }
body.event-full .layout { flex:1; } body.event-full aside { display:none; }

/* ---- Emergency override: covers everything, readable from across a lobby ---- */
#override { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:4vw; background:#0b3d91; color:#fff; }
#override[hidden] { display:none; }
#override.k-evacuation { background:#c40000; animation:ovflash 2s step-end infinite; }
#override.k-closed { background:#1d2433; }
@keyframes ovflash { 50% { background:#8a0000; } }
#override .ov-icon { font-size:10vw; line-height:1; }
#override h1 { flex:none; white-space:normal; font-size:6vw; margin:2vw 0 1vw; }
#override p { font-size:2.6vw; max-width:80vw; margin:0; line-height:1.3; white-space:pre-line; }
#ov-clock { position:absolute; top:2vw; right:3vw; font-size:3vw; font-weight:800; }

/* ---- Portrait (elevators, totems): stack the side cards under the departures ---- */
body.portrait { font-size:2.6vw; }
body.portrait header { padding:2.5vw 3vw 2vw; } body.portrait #logo { height:6vw; max-width:24vw; }
body.portrait h1 { font-size:4.4vw; } body.portrait #clock { font-size:6.5vw; } body.portrait #date { font-size:1.8vw; }
body.portrait .layout { flex-direction:column; padding:0 3vw; gap:2.5vw; }
body.portrait main { padding:0 1.5vw; } body.portrait aside { width:auto; max-height:38%; display:grid; grid-template-columns:1fr 1fr; gap:2vw; align-content:start; }
body.portrait .card { padding:2vw 2.4vw; border-radius:1.8vw; } body.portrait .card h2 { font-size:1.5vw; }
body.portrait th { font-size:1.4vw; } body.portrait td.c-time { font-size:3.2vw; } body.portrait td.c-dest { font-size:2.8vw; } body.portrait td.c-dest small { font-size:1.5vw; }
body.portrait td.c-line span { font-size:2.2vw; min-width:7vw; } body.portrait td.c-status span { font-size:1.7vw; } body.portrait td.c-time .sched { font-size:1.5vw; }
body.portrait .c-time { width:22%; } body.portrait .c-line { width:16%; } body.portrait .c-dest { width:42%; } body.portrait .c-plat { display:none; } body.portrait .c-status { width:20%; }
body.portrait .wx-icon, body.portrait .wx-temp { font-size:6vw; } body.portrait .wx-desc, body.portrait .wx-days div { font-size:1.6vw; }
body.portrait #notices li, body.portrait #mevo li, body.portrait .agenda li { font-size:1.8vw; } body.portrait .big { font-size:4.4vw; } body.portrait .sub { font-size:1.6vw; }
body.portrait .qr-grid figure { font-size:1.4vw; } body.portrait #ticker { height:5vw; margin:2vw 3vw 0; } body.portrait #news { font-size:2vw; } body.portrait #ticker .label { font-size:1.5vw; }
body.portrait footer { font-size:1.4vw; padding:1.2vw 3vw; }
body.portrait #welcome h2 { font-size:8vw; } body.portrait #welcome .sub { font-size:3vw; } body.portrait #welcome .agenda li { font-size:2.6vw; }
body.portrait #override h1 { font-size:9vw; } body.portrait #override p { font-size:4vw; }

/* ---- Compact (small reception-desk monitors): departures only, bigger rows ---- */
body.compact aside, body.compact #ticker { display:none; }
body.compact .c-plat { display:none; } body.compact .c-dest { width:50%; }
body.compact:not(.portrait) { font-size:2vw; }
body.compact:not(.portrait) td.c-time { font-size:2.6vw; } body.compact:not(.portrait) td.c-dest { font-size:2.4vw; } body.compact:not(.portrait) td.c-line span { font-size:1.8vw; min-width:6vw; }
body.compact:not(.portrait) th { font-size:1.1vw; } body.compact:not(.portrait) footer { font-size:1.1vw; }