/* Home Rush v2 — tokens → skins → layout → components.
   Sizing: --px is one design pixel. Tablet landscape is designed at 1280×800, portrait at 800×1280,
   phone at 402 wide; --k adds the per-device text-size choice on top. */

@font-face { font-family: "Zpix"; src: url("/vendor/zpix/zpix.woff2") format("woff2"); font-display: swap; }

:root {
  --px: calc(100vw / 402);
  --scale: 1;
  --k: calc(var(--px) * var(--scale));
  --gap: calc(var(--px) * 12);
  --overlay-h: 0px;
  /* pixel skin is the default token set */
  --bg: #11121c; --bg-img: none; --bg-size: auto;
  --surface: #1b1d2e; --surface-2: #0b0c14; --line: #34385a;
  --text: #f3f0e6; --muted: #a4a9c9;
  --ok: #57c7e3; --warn: #ffb547; --go: #ff5a6e; --go-dim: #6b2a36;
  --on-ok: #06202a; --on-warn: #1a1204; --on-go: #1a0a0d;
  --shadow: calc(var(--px) * 6) calc(var(--px) * 6) 0 #05060b;
  --shadow-sm: calc(var(--px) * 4) calc(var(--px) * 4) 0 #05060b;
  --radius: 0px; --radius-sm: 0px;
  --bw: max(2px, calc(var(--px) * 3)); --bw-hero: max(3px, calc(var(--px) * 4));
  --f-num: "Jersey 15", "Zpix", monospace;
  --f-text: "Zpix", monospace;
  --num-w: 400;
  color-scheme: dark;
}
@media (min-width: 600px) and (orientation: portrait) { :root { --px: min(calc(100vw / 800), calc(100dvh / 1280)); } }
@media (orientation: landscape) { :root { --px: min(calc(100vw / 900), calc(100dvh / 560)); } }
@media (min-width: 900px) and (orientation: landscape) { :root { --px: min(calc(100vw / 1280), calc(100dvh / 800)); } }
html[data-size="l"] { --scale: 1.12; }
html[data-size="xl"] { --scale: 1.25; }

html[data-skin="led"] {
  --bg: #050505; --surface: #0e0c09; --surface-2: #000; --line: #2e2618; --text: #ffb000; --muted: #b88a3a;
  --ok: #6ee26a; --warn: #ffb000; --go: #ff4d3d; --go-dim: #4a1a14; --on-ok: #061a05; --on-warn: #120c00; --on-go: #160403;
  --shadow: none; --shadow-sm: none; --f-num: "Doto", "Zpix", monospace; --f-text: "Zpix", monospace; --num-w: 800;
}
html[data-skin="daylight"] {
  --bg: #efebe0; --surface: #fff; --surface-2: #e4dfd1; --line: #15161f; --text: #15161f; --muted: #4f5572;
  --ok: #0a6aa1; --warn: #a65400; --go: #c8203a; --go-dim: #e9b9c0; --on-ok: #fff; --on-warn: #fff; --on-go: #fff;
  --shadow: calc(var(--px) * 6) calc(var(--px) * 6) 0 #15161f; --shadow-sm: calc(var(--px) * 4) calc(var(--px) * 4) 0 #15161f;
  color-scheme: light;
}
html[data-skin="comic"] {
  --bg: #fff3c4; --bg-img: radial-gradient(#f0c24a 1.4px, transparent 1.6px); --bg-size: 10px 10px;
  --surface: #fff; --surface-2: #ffe58a; --line: #111; --text: #111; --muted: #4a4a4a;
  --ok: #1559b8; --warn: #c75000; --go: #d0021b; --go-dim: #f6b7bf; --on-ok: #fff; --on-warn: #fff; --on-go: #fff;
  --bw: max(3px, calc(var(--px) * 4)); --bw-hero: max(4px, calc(var(--px) * 5));
  --shadow: calc(var(--px) * 8) calc(var(--px) * 8) 0 #111; --shadow-sm: calc(var(--px) * 5) calc(var(--px) * 5) 0 #111;
  --f-num: "Bangers", "Zpix", sans-serif; --f-text: "Zpix", sans-serif; --num-w: 400; color-scheme: light;
}
html[data-skin="princess"] {
  --bg: #fff0f6; --bg-img: radial-gradient(#f6c3da 1.6px, transparent 1.8px); --bg-size: 22px 22px;
  --surface: #fff; --surface-2: #ffe3ef; --line: #e3a3c6; --text: #4a1c40; --muted: #835277;
  --ok: #6a4fc9; --warn: #b45f00; --go: #c2185b; --go-dim: #f3c1d6; --on-ok: #fff; --on-warn: #fff; --on-go: #fff;
  --radius: calc(var(--px) * 20); --radius-sm: calc(var(--px) * 12);
  --shadow: 0 calc(var(--px) * 8) 0 #f2b8d3; --shadow-sm: 0 calc(var(--px) * 5) 0 #f2b8d3;
  --f-num: "Fredoka", "Zpix", sans-serif; --f-text: "Zpix", "Fredoka", sans-serif; --num-w: 600; color-scheme: light;
}
html[data-skin="hero"] {
  --bg: #070b1a; --bg-img: linear-gradient(rgba(0, 229, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .08) 1px, transparent 1px); --bg-size: 32px 32px;
  --surface: #0d1530; --surface-2: #060a17; --line: #1f6f86; --text: #e8f6ff; --muted: #8fb3cc;
  --ok: #00e5ff; --warn: #ffd400; --go: #ff2d55; --go-dim: #5a1426; --on-ok: #00191d; --on-warn: #141000; --on-go: #1a0208;
  --bw: max(2px, calc(var(--px) * 2)); --bw-hero: max(2px, calc(var(--px) * 3));
  --shadow: 0 0 calc(var(--px) * 24) rgba(0, 229, 255, .35); --shadow-sm: 0 0 calc(var(--px) * 12) rgba(0, 229, 255, .3);
  --f-num: "Orbitron", "Zpix", sans-serif; --f-text: "Zpix", sans-serif; --num-w: 800;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg); background-image: var(--bg-img); background-size: var(--bg-size);
  color: var(--text); font-family: var(--f-text); overflow: hidden;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-family: var(--f-num); font-weight: var(--num-w); font-variant-numeric: tabular-nums; font-size-adjust: cap-height 0.72; }
.muted { color: var(--muted); }
.cap { font-size: calc(var(--k) * 12); color: var(--muted); letter-spacing: .06em; }
.grow { flex: 1 1 auto; }
.c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-go { color: var(--go); }
.px { width: 1em; height: 1em; flex-shrink: 0; }
[hidden] { display: none !important; }

/* ---------- app shell ---------- */
#app {
  height: 100dvh; display: flex; flex-direction: column; gap: var(--gap);
  padding: max(calc(var(--px) * 16), env(safe-area-inset-top)) max(calc(var(--px) * 16), env(safe-area-inset-right)) 0 max(calc(var(--px) * 16), env(safe-area-inset-left));
}
@media (min-width: 600px) { #app { padding-left: calc(var(--px) * 24); padding-right: calc(var(--px) * 24); } }

.chip, .icon-btn {
  display: inline-flex; align-items: center; gap: calc(var(--px) * 10);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius-sm);
}
.icon-btn { width: max(44px, calc(var(--px) * 56)); height: max(44px, calc(var(--px) * 56)); justify-content: center; padding: 0; font-size: calc(var(--px) * 30); color: var(--text); }
.tag { white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; padding: .25em .45em; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .9em; }
.tag-warn { background: var(--warn); color: var(--on-warn); }
.tag-ctb { background: var(--warn); color: var(--on-warn); }
.tag-kmb { background: var(--go); color: var(--on-go); }

/* header */
#hdr { display: flex; align-items: center; gap: calc(var(--px) * 16); flex-wrap: nowrap; }
.hdr-trip { display: flex; align-items: center; gap: calc(var(--px) * 14); flex: 1 1 auto; min-width: 0; }
.trip-chip { padding: calc(var(--px) * 10) calc(var(--px) * 14); box-shadow: var(--shadow-sm); font-size: calc(var(--k) * 24); white-space: nowrap; }
.trip-chip .num { font-size: 1.2em; }
.next-trip { font-size: calc(var(--k) * 24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-clock { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: calc(var(--px) * 6); }
#clockHM { font-size: calc(var(--k) * 64); line-height: 1; letter-spacing: .03em; }
#clockSS { font-size: calc(var(--k) * 28); }
#updated { grid-column: 1 / -1; font-size: calc(var(--k) * 12); text-align: right; }
.wx-chip { white-space: nowrap; padding: calc(var(--px) * 8) calc(var(--px) * 12); font-size: calc(var(--k) * 24); color: var(--text); }
.wx-chip .px { font-size: 1.3em; color: var(--ok); }
.wx-chip b { font-size: 1.4em; }
.wx-panel { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 12) calc(var(--px) * 28); padding: calc(var(--px) * 12) calc(var(--px) * 16); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); font-size: calc(var(--k) * 24); }
.wx-row { display: flex; gap: calc(var(--px) * 10); align-items: baseline; }

/* timeline strip */
.strip { display: flex; align-items: center; gap: calc(var(--px) * 24); min-height: calc(var(--px) * 72); padding: calc(var(--px) * 8) calc(var(--px) * 20); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.strip-label { display: flex; flex-direction: column; gap: calc(var(--px) * 6); font-size: calc(var(--k) * 24); flex: 0 0 auto; max-width: 40%; }
.strip-track { position: relative; flex: 1 1 auto; height: calc(var(--px) * 56); }
.strip-track .trk { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--px) * 4); margin-top: calc(var(--px) * -2); background: var(--line); }
.strip-track .band { position: absolute; top: 50%; height: calc(var(--px) * 12); margin-top: calc(var(--px) * -6); }
.band-prep { background: var(--warn); } .band-go { background: var(--go); } .band-grace { background: var(--go-dim); height: calc(var(--px) * 4) !important; margin-top: calc(var(--px) * -2) !important; }
.strip-track .mark { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: space-between; align-items: center; white-space: nowrap; }
.strip-track .mark-end { transform: translateX(-100%); align-items: flex-end; }
.strip-track .mark b { font-size: calc(var(--k) * 18); }
.strip-track .mark small { font-size: calc(var(--k) * 12); }
.strip-track .now { position: absolute; top: 20%; bottom: 20%; width: calc(var(--px) * 4); margin-left: calc(var(--px) * -2); background: var(--text); }

/* ---------- board ---------- */
#board { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--overlay-h) + var(--px) * 16); scroll-padding-bottom: var(--overlay-h); }
#list { display: flex; flex-direction: column; gap: calc(var(--px) * 8); }
html[data-layout="hero"] #board { display: grid; grid-template-columns: calc(var(--px) * 440) minmax(0, 1fr); gap: calc(var(--px) * 16); align-items: start; }

html[data-layout="list"] #hero { display: none; }

.hero {
  display: flex; flex-direction: column; gap: calc(var(--px) * 12); padding: calc(var(--px) * 24);
  background: var(--surface); border: var(--bw-hero) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-empty { padding: calc(var(--px) * 24); font-size: calc(var(--k) * 24); }
.h-top { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--k) * 24); }
.h-top .cap { font-size: calc(var(--k) * 24); }
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .3em .5em; border-radius: var(--radius-sm); font-size: calc(var(--k) * 24); }
.h-route { font-size: calc(var(--k) * 120); line-height: .9; }
.h-dest { font-size: calc(var(--k) * 36); line-height: 1.1; }
.h-stop { font-size: calc(var(--k) * 24); }
.h-grow { flex: 1 1 auto; min-height: calc(var(--px) * 8); }
.h-leave { display: flex; align-items: baseline; gap: calc(var(--px) * 12); font-size: calc(var(--k) * 36); }
.h-leave b { font-size: calc(var(--k) * 168); line-height: .8; }
.h-leave .px { font-size: calc(var(--k) * 28); align-self: center; }
.h-by { font-size: calc(var(--k) * 24); }
.h-times { display: flex; align-items: center; gap: calc(var(--px) * 8); flex-wrap: wrap; font-size: calc(var(--k) * 24); }
.h-times .cap { font-size: calc(var(--k) * 12); }
.box { padding: calc(var(--px) * 6) calc(var(--px) * 10); border: max(1px, calc(var(--px) * 2)) solid var(--line); border-radius: var(--radius-sm); }

.rows-head, .row { display: grid; grid-template-columns: calc(var(--k) * 96) minmax(0, 1fr) calc(var(--k) * 128) calc(var(--k) * 236); gap: calc(var(--px) * 16); align-items: center; padding: 0 calc(var(--px) * 20); }
.rows-head { font-size: calc(var(--k) * 12); }
.row { min-height: calc(var(--k) * 84); padding-block: calc(var(--px) * 8); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.r-route { font-size: calc(var(--k) * 48); line-height: 1; }
.r-mid { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--px) * 8); }
.r-dest { font-size: calc(var(--k) * 24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-stop { font-size: calc(var(--k) * 12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-leave { display: flex; align-items: center; gap: calc(var(--px) * 8); font-size: calc(var(--k) * 24); }
.r-leave b { font-size: calc(var(--k) * 48); line-height: 1; }
.r-leave .px { font-size: calc(var(--k) * 20); }
.r-times { display: flex; gap: calc(var(--px) * 14); font-size: calc(var(--k) * 24); overflow: hidden; white-space: nowrap; }
.h-leave span { white-space: nowrap; }
html[data-skin="hero"] .r-times, html[data-skin="hero"] .h-times, html[data-skin="led"] .r-times, html[data-skin="led"] .h-times { font-size: calc(var(--k) * 19); }
html[data-skin="hero"] .h-leave { font-size: calc(var(--k) * 30); }
html[data-layout="list"] .rows-head, html[data-layout="list"] .row { grid-template-columns: calc(var(--k) * 136) minmax(0, 1fr) calc(var(--k) * 190) calc(var(--k) * 300); }
html[data-layout="list"] .row { min-height: calc(var(--k) * 92); }
html[data-layout="list"] .r-route, html[data-layout="list"] .r-leave b { font-size: calc(var(--k) * 60); }
html[data-layout="list"] .r-dest { font-size: calc(var(--k) * 36); }
html[data-layout="list"] .r-times { font-size: calc(var(--k) * 30); }

/* status colour: border + number + pill */
.lvl-ok .r-leave, .lvl-ok .h-leave { color: var(--ok); }
.lvl-warn .r-leave, .lvl-warn .h-leave { color: var(--warn); }
.lvl-go .r-leave, .lvl-go .h-leave { color: var(--go); }
.row.lvl-warn, .hero.lvl-warn { border-color: var(--warn); }
.row.lvl-go, .hero.lvl-go { border-color: var(--go); }
.hero.lvl-ok { border-color: var(--ok); }
.lvl-ok .pill { background: var(--ok); color: var(--on-ok); }
.lvl-warn .pill { background: var(--warn); color: var(--on-warn); }
.lvl-go .pill { background: var(--go); color: var(--on-go); }
.row.lvl-none { opacity: .75; }

/* tablet portrait: stacked hero with the big number on the right */
@media (min-width: 600px) and (orientation: portrait) {
  #hdr { flex-wrap: wrap; }
  .hdr-trip { flex-basis: 100%; order: -1; }
  .hdr-clock { margin-left: auto; }
  html[data-layout="hero"] #board { display: block; }
  html[data-layout="hero"] #hero { position: static; margin-bottom: calc(var(--px) * 16); }
  .hero { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "route leave" "dest leave" "stop by" "times times"; column-gap: calc(var(--px) * 24); }
  .h-top { grid-area: top; } .h-route { grid-area: route; font-size: calc(var(--k) * 132); } .h-dest { grid-area: dest; } .h-stop { grid-area: stop; }
  .h-grow { display: none; }
  .h-leave { grid-area: leave; flex-direction: column; align-items: flex-end; } .h-leave b { font-size: calc(var(--k) * 192); } .h-leave .px { display: none; }
  .h-by { grid-area: by; text-align: right; } .h-times { grid-area: times; }
  .row { min-height: calc(var(--k) * 100); }
  .r-route, .r-leave b { font-size: calc(var(--k) * 52); }
}

/* phone */
@media (max-width: 599px) {
  #hdr { gap: calc(var(--px) * 8); flex-wrap: nowrap; }
  .hdr-trip { flex: 0 1 auto; }
  .next-trip, #soundBtn { display: none; }
  .trip-chip { font-size: calc(var(--k) * 12); padding: calc(var(--px) * 8); }
  .trip-chip .muted { display: none; }
  .hdr-clock { margin-left: auto; }
  #clockHM { font-size: calc(var(--k) * 36); }
  #clockSS { display: none; }
  .wx-chip { font-size: calc(var(--k) * 12); padding: calc(var(--px) * 6); }
  .wx-chip .muted { display: none; }
  .icon-btn { width: 44px; height: 44px; font-size: 22px; }
  .strip { min-height: 0; padding: calc(var(--px) * 10) calc(var(--px) * 12); }
  .strip-label { flex-direction: row; max-width: none; font-size: calc(var(--k) * 12); align-items: baseline; }
  .strip-label .cap { font-size: calc(var(--k) * 12); }
  .strip-track { display: none; }
  html[data-layout] #board { display: block; }
  html[data-layout="hero"] #hero { position: static; margin-bottom: calc(var(--px) * 10); }
  .hero { min-height: 0; padding: calc(var(--px) * 16); gap: calc(var(--px) * 8); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "route top" "route dest" "leave leave" "by by" "times times"; column-gap: calc(var(--px) * 12); }
  .h-top { grid-area: top; } .h-route { grid-area: route; font-size: calc(var(--k) * 60); align-self: center; } .h-dest { grid-area: dest; font-size: calc(var(--k) * 24); }
  .h-stop, .h-grow { display: none; }
  .h-top .cap { display: none; } .h-top { justify-content: flex-end; } .pill { font-size: calc(var(--k) * 12); }
  .h-leave { grid-area: leave; font-size: calc(var(--k) * 24); } .h-leave b { font-size: calc(var(--k) * 96); }
  .h-by { grid-area: by; font-size: calc(var(--k) * 12); } .h-times { grid-area: times; font-size: calc(var(--k) * 16); }
  .rows-head { display: none; }
  .row, html[data-layout="list"] .row { grid-template-columns: calc(var(--k) * 56) minmax(0, 1fr) auto; grid-template-areas: "route mid leave" "route times leave"; gap: calc(var(--px) * 4) calc(var(--px) * 10); min-height: calc(var(--k) * 64); padding: calc(var(--px) * 8) calc(var(--px) * 12); }
  .r-route, html[data-layout="list"] .r-route { grid-area: route; font-size: calc(var(--k) * 30); }
  .r-mid { grid-area: mid; } .r-dest, html[data-layout="list"] .r-dest { font-size: calc(var(--k) * 12); } .r-stop { display: none; }
  .r-leave { grid-area: leave; font-size: calc(var(--k) * 12); } .r-leave b, html[data-layout="list"] .r-leave b { font-size: calc(var(--k) * 32); } .r-leave .px { display: none; }
  .r-times, html[data-layout="list"] .r-times { grid-area: times; font-size: calc(var(--k) * 14); gap: calc(var(--px) * 10); }
}

/* ---------- warning overlay (fixed palette: it must read the same on every skin) ---------- */
#overlay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; color: #f3f0e6; font-family: var(--f-text); }
.ov { --accent: #ff5a6e; --count: #ffb547; --ovbg: #1d0910; --on-accent: #1a0a0d; background: var(--ovbg); border-top: max(4px, calc(var(--px) * 6)) solid var(--accent); cursor: pointer; }
.ov-prep { --accent: #ffb547; --ovbg: #1d1608; --on-accent: #1a1204; }
.ov-bar { height: calc(var(--px) * 8); background: #34385a; }
.ov-bar-thin { height: calc(var(--px) * 4); }
.ov-bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.ov-max { height: calc(50dvh - var(--lantern-h)); display: flex; flex-direction: column; }
.ov-go.ov-max { animation: ov-pulse 1s steps(2, end) infinite; }
@keyframes ov-pulse { 50% { box-shadow: inset 0 0 0 calc(var(--px) * 6) rgba(255, 90, 110, .9); } }
.ov-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: calc(var(--px) * 32); padding: calc(var(--px) * 16) calc(var(--px) * 28); }
.ov-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--px) * 14); }
.ov-title { font-size: calc(var(--k) * 108); line-height: 1; color: #fff; text-shadow: calc(var(--px) * 6) calc(var(--px) * 6) 0 var(--accent), calc(var(--px) * 12) calc(var(--px) * 12) 0 #05060b; }
.ov-bus { display: flex; align-items: center; gap: calc(var(--px) * 12); flex-wrap: wrap; font-size: calc(var(--k) * 36); }
.badge { padding: calc(var(--px) * 4) calc(var(--px) * 12); background: #f3f0e6; color: #1d0910; font-size: calc(var(--k) * 48); line-height: 1; }
.ov-meta { font-size: calc(var(--k) * 24); color: #e9c9cf; }
.ov-count { flex: 0 0 auto; width: calc(var(--px) * 360); display: flex; flex-direction: column; gap: calc(var(--px) * 8); padding: calc(var(--px) * 18) calc(var(--px) * 24); background: #05060b; border: calc(var(--px) * 4) solid var(--count); box-shadow: calc(var(--px) * 6) calc(var(--px) * 6) 0 #000; color: var(--count); }
.ov-count-lbl { font-size: calc(var(--k) * 24); }
.ov-count-num { font-size: calc(var(--k) * 144); line-height: .9; }
.ov-foot { display: flex; align-items: baseline; gap: calc(var(--px) * 20); padding: calc(var(--px) * 10) calc(var(--px) * 28); background: #11121c; border-top: 2px solid #34385a; font-size: calc(var(--k) * 24); }
.ov-foot b { font-size: 1.3em; }
.ov .btn { min-height: 44px; background: transparent; color: #f3f0e6; border: 2px solid #6b2a36; font-size: calc(var(--k) * 12); }
.ov .icon-btn { background: transparent; border-color: #6b2a36; color: #f3f0e6; font-size: calc(var(--px) * 22); }
.ov-row { display: flex; align-items: center; gap: calc(var(--px) * 20); min-height: calc(var(--px) * 96); padding: calc(var(--px) * 8) calc(var(--px) * 28); }
.ov-chip { flex: 0 0 auto; padding: calc(var(--px) * 8) calc(var(--px) * 12); background: var(--accent); color: var(--on-accent); font-size: calc(var(--k) * 24); }
.ov-mini-num { flex: 0 0 auto; font-size: calc(var(--k) * 60); line-height: 1; color: var(--count); }
.ov-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--px) * 6); }
.ov-info-1 { font-size: calc(var(--k) * 24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-info-2 { font-size: calc(var(--k) * 12); color: #e9c9cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-backup { flex: 0 0 auto; font-size: calc(var(--k) * 12); color: #a4a9c9; }
.ov-backup b { color: #f3f0e6; font-size: 1.5em; }

:root { --lantern-h: calc(var(--px) * 48); }
.lantern { height: calc(var(--lantern-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); overflow: hidden; background: #0b0c14; border-top: 2px solid #34385a; display: flex; align-items: center; }
.lantern-track { display: flex; gap: calc(var(--px) * 12); padding-left: calc(var(--px) * 12); white-space: nowrap; animation: lantern 22s linear infinite; }
@keyframes lantern { to { transform: translateX(-50%); } }
.lan { padding: calc(var(--px) * 6) calc(var(--px) * 12); background: #1b1d2e; border: 2px solid #34385a; font-size: calc(var(--k) * 24); }
.lan-hot { background: #ffb547; border-color: #ffb547; color: #1a1204; }

@media (min-width: 600px) and (orientation: portrait) {
  .ov-body { flex-direction: column; align-items: stretch; }
  .ov-title { font-size: calc(var(--k) * 120); }
  .ov-count { width: auto; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .ov-count-num { font-size: calc(var(--k) * 156); }
  .ov-backup { display: none; }
  :root { --lantern-h: calc(var(--px) * 56); }
}
@media (max-width: 599px) {
  .ov-body { flex-direction: column; align-items: stretch; gap: calc(var(--px) * 12); padding: calc(var(--px) * 12) calc(var(--px) * 16); }
  .ov-title { font-size: calc(var(--k) * 60); }
  .ov-bus { font-size: calc(var(--k) * 24); } .badge { font-size: calc(var(--k) * 30); }
  .ov-meta { font-size: calc(var(--k) * 12); }
  .ov-count { width: auto; padding: calc(var(--px) * 10) calc(var(--px) * 16); }
  .ov-count-lbl { font-size: calc(var(--k) * 12); }
  .ov-count-num { font-size: calc(var(--k) * 84); }
  .ov-foot { font-size: calc(var(--k) * 12); padding: calc(var(--px) * 8) calc(var(--px) * 16); }
  .ov-row { gap: calc(var(--px) * 10); min-height: calc(var(--px) * 84); padding: calc(var(--px) * 6) calc(var(--px) * 16); }
  .ov-chip { font-size: calc(var(--k) * 12); }
  .ov-mini-num { font-size: calc(var(--k) * 36); }
  .ov-info-1 { font-size: calc(var(--k) * 12); }
  .ov-backup { display: none; }
  .lan { font-size: calc(var(--k) * 12); }
  :root { --lantern-h: calc(var(--px) * 40); }
}
@media (prefers-reduced-motion: reduce) { .lantern-track, .ov-go.ov-max { animation: none; } .ov-bar i { transition: none; } }

/* ---------- settings ---------- */
#settings { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); font-size: 18px; }
body.settings-open { overflow: hidden; }
.set-panel { position: absolute; inset: 0; display: flex; background: var(--bg); color: var(--text); }
.set-nav { width: 240px; flex: 0 0 auto; padding: max(20px, env(safe-area-inset-top)) 14px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border-right: 3px solid var(--line); overflow-y: auto; }
.set-nav h2 { margin: 0 8px 12px; font-size: 24px; font-weight: 400; }
.set-tab { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; background: transparent; border: 3px solid transparent; border-radius: var(--radius-sm); }
.set-tab b { font-weight: 400; font-size: 20px; } .set-tab small { color: var(--muted); font-size: 13px; }
.set-tab.on { background: var(--surface); border-color: var(--ok); }
.set-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.set-scroll { flex: 1 1 auto; overflow-y: auto; padding: max(20px, env(safe-area-inset-top)) 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.set-scroll h1 { margin: 0; font-size: 30px; font-weight: 400; }
.set-scroll h3 { margin: 10px 0 0; font-size: 20px; font-weight: 400; }
.hint { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.set-foot { display: flex; align-items: center; gap: 12px; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 3px solid var(--line); }
.set-msg { font-size: 15px; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--surface); border: 3px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.field input, .field select, .big-text, .route-input, .stop-name { min-height: 44px; padding: 0 10px; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: var(--radius-sm); font-size: 20px; }
.big-text { padding: 10px; width: 100%; resize: vertical; }
.route-input { width: 120px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--ok); }
.btn { min-height: 44px; padding: 0 16px; background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: var(--radius-sm); font-size: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ok); color: var(--on-ok); border-color: var(--ok); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; }
.btn-dashed { align-self: flex-start; background: transparent; color: var(--ok); border-style: dashed; border-color: var(--ok); }
.seg { display: inline-flex; flex-wrap: wrap; }
.seg-btn { min-height: 44px; min-width: 44px; padding: 0 12px; background: var(--bg); color: var(--muted); border: 2px solid var(--line); margin-right: -2px; font-size: 18px; }
.seg-btn.on { background: var(--ok); color: var(--on-ok); border-color: var(--ok); position: relative; }
.seg-big .seg-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 150px; padding: 10px 14px; }
.seg-big .seg-btn b { font-weight: 400; font-size: 20px; } .seg-big .seg-btn small { font-size: 13px; }
.chips { gap: 8px; }
.chip-btn { min-height: 40px; padding: 0 12px; background: var(--bg); color: var(--muted); border: 2px solid var(--line); border-radius: var(--radius-sm); font-size: 18px; }
.chip-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.week { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.week-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 2px solid var(--line); }
.week-day > b { width: 28px; font-weight: 400; }
.stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.stop { flex-direction: row; flex-wrap: wrap; align-items: center; }
.stop .stepper { margin-right: auto; }
.stop-main { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stop-name { width: 100%; font-size: 18px; }
.stop-main small { font-size: 13px; word-break: break-all; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper .btn { width: 44px; padding: 0; font-family: var(--f-num); font-size: 22px; }
.stepper b { min-width: 2ch; text-align: center; font-size: 26px; }
.stepper-card { flex-direction: row; align-items: center; }
.steppers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.routes { display: flex; flex-direction: column; gap: 6px; }
.route-line { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 12px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm); }
.route-no { font-size: 26px; min-width: 2.6em; }
.err { margin: 0; color: var(--go); }
.timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.timeline li { display: grid; grid-template-columns: minmax(130px, auto) 90px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 14px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm); }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.skin-btn { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 3px solid var(--line); border-radius: var(--radius-sm); text-align: left; }
.skin-btn.on { border-color: var(--ok); }
.swatch { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px; background-color: var(--bg); background-image: var(--bg-img); background-size: var(--bg-size); border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--text); }
.swatch i { width: 14px; height: 14px; } .swatch i:nth-child(1) { background: var(--ok); } .swatch i:nth-child(2) { background: var(--warn); } .swatch i:nth-child(3) { background: var(--go); }
.swatch b { margin-left: auto; font-family: var(--f-num); font-size: 26px; font-weight: var(--num-w); }
.swatch[data-skin="led"] { --bg: #050505; --bg-img: none; --line: #2e2618; --text: #ffb000; --ok: #6ee26a; --warn: #ffb000; --go: #ff4d3d; --f-num: "Doto", monospace; --num-w: 800; }
.swatch[data-skin="daylight"] { --bg: #efebe0; --bg-img: none; --line: #15161f; --text: #15161f; --ok: #0a6aa1; --warn: #a65400; --go: #c8203a; }
.swatch[data-skin="comic"] { --bg: #fff3c4; --bg-img: radial-gradient(#f0c24a 1.4px, transparent 1.6px); --bg-size: 10px 10px; --line: #111; --text: #111; --ok: #1559b8; --warn: #c75000; --go: #d0021b; --f-num: "Bangers", sans-serif; --num-w: 400; }
.swatch[data-skin="princess"] { --bg: #fff0f6; --bg-img: none; --line: #e3a3c6; --text: #4a1c40; --ok: #6a4fc9; --warn: #b45f00; --go: #c2185b; --f-num: "Fredoka", sans-serif; --num-w: 600; --radius-sm: 12px; }
.swatch[data-skin="hero"] { --bg: #070b1a; --bg-img: none; --line: #1f6f86; --text: #e8f6ff; --ok: #00e5ff; --warn: #ffd400; --go: #ff2d55; --f-num: "Orbitron", sans-serif; --num-w: 800; }
.swatch[data-skin="pixel"] { --bg: #11121c; --bg-img: none; --line: #34385a; --text: #f3f0e6; --ok: #57c7e3; --warn: #ffb547; --go: #ff5a6e; --f-num: "Jersey 15", monospace; --num-w: 400; }
.adder h3 { margin: 0; }

@media (max-width: 760px) {
  #settings { font-size: 16px; }
  .set-panel { flex-direction: column; }
  .set-nav { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 3px solid var(--line); padding: max(10px, env(safe-area-inset-top)) 10px 10px; gap: 6px; }
  .set-nav h2 { display: none; }
  .set-tab { flex: 0 0 auto; padding: 8px 10px; } .set-tab small { display: none; } .set-tab b { font-size: 16px; }
  .set-scroll { padding: 16px; }
  .set-scroll h1 { font-size: 24px; }
  .timeline li { grid-template-columns: 1fr auto; }
  .seg-big .seg-btn { min-width: 0; flex: 1 1 0; }
  .stop { flex-wrap: wrap; }
}