:root {
  --amber: #ff8c00;
  --amber-dim: #ff8c0066;
  --bg: #0a0a0a;
  --card: #141414;
  --card-line: #1f1f1f;
  --chip: #1d1d1d;
  --text: #eeeeee;
  --muted: #888888;
  --late: #ff6b57;
  --early: #6bd38a;
  --dot: 'Doto', 'Courier New', monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --tabbar-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); color: var(--text); font-family: var(--sans); }
body { min-height: 100vh; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#app { max-width: 560px; margin: 0 auto; padding: 16px 12px 24px; }
.message { color: var(--muted); padding: 24px 6px; text-align: center; }
.message.error { color: var(--late); }

/* ---------- header & status ---------- */
.view-head { padding: 8px 6px 12px; }
.view-title-row { display: flex; align-items: center; gap: 10px; }
.view-title { font-size: 24px; font-weight: 700; color: #fff; flex: 1; }
.star { font-size: 22px; color: var(--muted); padding: 4px; line-height: 1; }
.star[aria-pressed='true'] { color: var(--amber); }
.status { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.status .live { color: var(--amber); }
.banner { margin: 8px 6px 4px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: #2a1c06; color: var(--amber); border: 1px solid var(--amber-dim); }
.banner.expired { background: #2a0f0a; color: var(--late); border-color: #ff6b5755; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 6px; padding: 0 6px 12px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; border-radius: 20px; background: var(--chip); color: #bbb; border: 1px solid #2a2a2a; white-space: nowrap; }
.chip[aria-pressed='true'] { background: var(--amber); color: #111; border-color: var(--amber); font-weight: 600; }
.chip-star { font-size: 14px; padding: 0 0 0 4px; color: inherit; opacity: .7; }
.chip-star[aria-pressed='true'] { opacity: 1; }
.chip[aria-pressed='true'] .chip-star[aria-pressed='true'] { color: #111; }
.chip:not([aria-pressed='true']) .chip-star[aria-pressed='true'] { color: var(--amber); }

/* ---------- departures (portrait) ---------- */
.pole-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 12px 6px 6px; }
.dep { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; }
.num { font-family: var(--dot); font-weight: 900; font-size: 26px; color: var(--amber); text-align: center; background: #1e1408; border-radius: 10px; padding: 4px 0; }
.dir { color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.dir small { display: block; color: #777; font-size: 12px; font-weight: 400; margin-top: 2px; }
.eta { text-align: right; font-family: var(--dot); font-weight: 800; color: var(--amber); font-size: 22px; white-space: nowrap; }
.eta small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); }
.eta .late { color: var(--late); }
.eta .early { color: var(--early); }
.rt::after { content: ''; display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--amber); margin-left: .25em; vertical-align: top; animation: blink 1.6s infinite; }
.empty { color: var(--muted); font-size: 14px; padding: 10px 12px; background: var(--card); border-radius: 14px; border: 1px dashed var(--card-line); }
.board[data-freshness='stale'] .eta, .board[data-freshness='expired'] .eta { opacity: .55; }
.board[data-freshness='stale'] .rt::after, .board[data-freshness='expired'] .rt::after { display: none; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- nearby & favourites ---------- */
.search { display: block; width: calc(100% - 12px); margin: 0 6px 12px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 11px 12px; color: var(--text); font: inherit; font-size: 15px; }
.search:focus { outline: 2px solid var(--amber-dim); }
.place { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.place-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.place-name { color: #fff; font-weight: 600; font-size: 16px; }
.place-zone { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 6px; }
.place-dist { color: var(--amber); font-size: 13px; font-family: var(--dot); font-weight: 800; white-space: nowrap; }
.poles { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pole { font-size: 12px; color: #ccc; background: #1f1f1f; border-radius: 8px; padding: 4px 8px; text-decoration: none; }
.pole b { color: var(--amber); font-family: var(--dot); font-weight: 900; margin-right: 4px; }
.fav-row { display: flex; align-items: center; gap: 8px; }
.fav-row .place { flex: 1; margin-bottom: 0; }
.fav-list { display: grid; gap: 8px; }
.remove { color: var(--muted); font-size: 13px; padding: 8px; }

/* ---------- tab bar & footer ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #0d0d0d; border-top: 1px solid var(--card-line); display: flex; justify-content: space-around; align-items: center; z-index: 10; }
.tab { text-decoration: none; font-size: 11px; color: #777; text-align: center; padding: 6px 14px; }
.tab-icon { display: block; font-size: 18px; }
.tab[aria-current='page'] { color: var(--amber); }
.attribution { max-width: 560px; margin: 0 auto; padding: 8px 18px 16px; font-size: 11px; color: #666; text-align: center; }

/* ---------- landscape SIP board ---------- */
body.landscape-board { padding-bottom: 0; overflow: hidden; }
body.landscape-board #app { max-width: none; height: 100vh; padding: 2vh 2vw; }
body.landscape-board #app > div { height: 100%; }
body.landscape-board .attribution { display: none; }
body.landscape-board .tabbar { transform: translateY(100%); transition: transform .25s ease; background: #0d0d0dee; }
body.landscape-board.nav-visible .tabbar { transform: none; }
body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }

.sip { height: 100%; display: flex; flex-direction: column; background: #3a3f44; border-radius: 1.4vh; padding: 1.6vh; }
.sip-head { display: grid; grid-template-columns: 1fr auto; background: #e9e3cc; border-radius: .5vh .5vh 0 0; }
.sip-name { text-align: center; color: #222; font-weight: 700; font-size: min(6vh, 3.6vw); padding: 1vh 2vw .6vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sip-clock { background: #111; color: var(--amber); font-family: var(--dot); font-weight: 800; font-size: min(6vh, 3.4vw); padding: .6vh 2vw; display: flex; align-items: center; }
.sip-labels { display: grid; grid-template-columns: 12% 1fr 18%; background: #7d8c97; color: #f2f2f2; font-size: min(3vh, 1.8vw); padding: .4vh 1.4vw; }
.sip-labels span:nth-child(2) { text-align: center; }
.sip-labels span:last-child { text-align: right; }
.sip-matrix { flex: 1; min-height: 0; overflow: hidden; background-color: #141414; background-image: radial-gradient(#2a2a2a 1px, transparent 1.4px); background-size: 5px 5px; padding: 1vh 1.4vw; display: flex; flex-direction: column; justify-content: space-evenly; }
.sip-row { display: grid; grid-template-columns: 12% 1fr auto 18%; align-items: center; column-gap: 1.6vw; font-family: var(--dot); font-weight: 800; color: var(--amber); font-size: min(5.6vh, 3.2vw); line-height: 1; text-shadow: 0 0 6px #ff8c0066; }
.sip-ln { text-align: right; }
.sip-hs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sip-ic { font-size: .6em; opacity: .85; text-shadow: none; }
.sip-t { text-align: right; white-space: nowrap; }
.sip-late { color: #ff4d3a; text-shadow: 0 0 6px #ff4d3a55; font-size: .55em; margin-left: .3em; }
.sip-empty { font-family: var(--dot); font-weight: 800; color: var(--amber); font-size: min(5.6vh, 3.2vw); text-align: center; }
.sip-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4vh 1.4vw; padding-top: 1vh; font-size: min(2vh, 1.4vw); color: #c8cdd1; }
.sip-foot .status { margin: 0; color: inherit; font-size: inherit; }
.sip-foot .banner { margin: 0; padding: .3vh .8vw; font-size: inherit; }
.sip-attr { margin-left: auto; opacity: .7; }
.sip[data-freshness='stale'] .sip-t, .sip[data-freshness='expired'] .sip-t { opacity: .55; }
.sip[data-freshness='stale'] .rt::after, .sip[data-freshness='expired'] .rt::after { display: none; }