:root{
  --bg:#0b0d10; --bg-2:#121519; --bg-3:#181c22; --line:#232830;
  --fg:#e9edf2; --fg-2:#9aa4b2; --fg-3:#646e7d;
  --accent:#4da3ff; --good:#38d39f; --warn:#ffb347; --bad:#ff6b6b;
  --ttc:#ED1C24;   /* TTC red, taken from route_color in their own GTFS feed */
  --r:14px; --pad:16px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7f9; --bg-2:#fff; --bg-3:#eef1f5; --line:#e0e4ea;
         --fg:#11151a; --fg-2:#5b6673; --fg-3:#8b95a3; --accent:#0b69d4; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:760px;margin:0 auto;padding:0 var(--pad)}

/* ── header ─────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.hrow{display:flex;align-items:center;gap:12px;height:56px}
.brand{font-weight:700;letter-spacing:-.03em;font-size:19px}
.brand b{color:var(--ttc)}
.spacer{flex:1}
.iconbtn{
  appearance:none;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer;
}
.iconbtn:hover{background:var(--bg-3)}
.iconbtn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

.tick{display:flex;align-items:center;gap:7px;font:600 11px/1 var(--mono);color:var(--fg-3);
  text-transform:uppercase;letter-spacing:.08em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 var(--good)}
.dot.pulse{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dot.stale{background:var(--warn)} .dot.err{background:var(--bad)}

/* ── search ─────────────────────────────────────────── */
.searchbar{padding:0 0 12px}
.searchbar input{
  width:100%;height:40px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--fg);padding:0 12px;font-size:15px;font-family:var(--sans);
}
.searchbar input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}

/* ── stop card ──────────────────────────────────────── */
.stop{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);margin:12px 0;overflow:hidden}
.stop-h{display:flex;align-items:baseline;gap:10px;padding:13px 15px 11px;border-bottom:1px solid var(--line)}
.capital{text-transform:capitalize}
.stop-name{font-weight:650;letter-spacing:-.015em;flex:1;min-width:0;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stop-meta{font:500 12px/1 var(--mono);color:var(--fg-3);white-space:nowrap}
.star{background:none;border:0;color:var(--fg-3);cursor:pointer;font-size:16px;line-height:1;padding:2px}
.star.on{color:var(--warn)}

.lane{display:flex;gap:12px;padding:11px 15px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.lane:first-child{border-top:0}
.badge{
  flex:none;min-width:44px;height:26px;border-radius:7px;display:grid;place-items:center;
  font:700 13px/1 var(--mono);letter-spacing:-.02em;padding:0 7px;
}
.lane-body{flex:1;min-width:0}
.dest{font-size:13.5px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dest .dir{color:var(--fg-3);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.06em;margin-right:6px}
.deps{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.dep{
  display:flex;align-items:center;gap:7px;background:var(--bg-3);border:1px solid transparent;
  border-radius:9px;padding:5px 9px;cursor:pointer;
}
.dep:hover{border-color:var(--line)}
.eta{font:700 15px/1 var(--mono);letter-spacing:-.03em;white-space:nowrap}
.eta small{font-size:10px;font-weight:600;color:var(--fg-3);margin-left:2px}
.vnum{font:600 11px/1 var(--mono);color:var(--fg-3);white-space:nowrap}
.vnum em{font-style:normal;color:var(--fg-2)}
.sched{color:var(--fg-3)}
.tagdot{width:6px;height:6px;border-radius:50%;flex:none}
.tagdot.electric{background:var(--good)} .tagdot.hybrid{background:var(--accent)}
.tagdot.artic{background:var(--warn)} .tagdot.streetcar{background:#c86bff}

/* ── sheet ──────────────────────────────────────────── */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;display:none}
.sheet-bg.open{display:block}
.sheet{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(560px,100%);
  background:var(--bg-2);border:1px solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;z-index:41;padding:8px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:82vh;overflow:auto;display:none
}
.sheet.open{display:block;animation:up .22s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translate(-50%,26px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.grip{width:36px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 14px}
.sheet h2{margin:0 0 2px;font-size:22px;letter-spacing:-.03em}
.sheet .sub{color:var(--fg-2);font-size:13.5px;margin-bottom:16px}
.kv{display:grid;grid-template-columns:112px 1fr;gap:7px 14px;font-size:14px}
.kv dt{color:var(--fg-3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.kv dd{margin:0}
.note{margin-top:15px;padding:11px 13px;background:var(--bg-3);border-radius:10px;
  font-size:13px;color:var(--fg-2);border-left:2px solid var(--ttc)}
.note a{color:var(--accent);text-decoration:none;white-space:nowrap;font-weight:600}
.note a:hover{text-decoration:underline}
.tagdot.retired{background:var(--fg-3)}
.tag[title]{cursor:help}
.tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.tag{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;
  padding:5px 8px;border-radius:6px;background:var(--bg-3);color:var(--fg-2)}

/* ── misc ───────────────────────────────────────────── */
.msg{text-align:center;color:var(--fg-3);padding:48px 20px;font-size:14px}
.msg button{margin-top:14px}
.btn{appearance:none;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);
  border-radius:10px;padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.skeleton{height:86px;background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));
  background-size:200% 100%;animation:sh 1.3s linear infinite;border-radius:var(--r);margin:12px 0}
@keyframes sh{to{background-position:-200% 0}}
.sec{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg-3);margin:22px 0 4px}
footer{color:var(--fg-3);font-size:11.5px;text-align:center;padding:28px 0 36px;line-height:1.7}

/* Roomier tap targets and a tighter grid once there is width to spare */
@media (min-width:620px){ .deps{gap:8px} .lane{padding:12px 16px} }
@media (max-width:420px){ .dep{padding:5px 8px} .eta{font-size:14px} }

/* ── service alerts ─────────────────────────────────── */
.alerts{margin:9px 0 2px;display:flex;flex-direction:column;gap:7px}
.lane .alerts{margin:9px 0 0}
.alertlane{padding:0 15px 12px}
.alert{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--fg-3);
  border-radius:11px;padding:10px 13px;font-size:13.5px}
.alert.sev-critical{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--bg-2))}
.alert.sev-major{border-left-color:var(--warn)}
.alert summary{cursor:pointer;list-style:none;display:flex;gap:9px;align-items:flex-start}
.alert summary::-webkit-details-marker{display:none}
.alert-route{flex:none;font:700 11px/1.5 var(--mono);color:var(--fg-2);background:var(--bg-3);
  border-radius:5px;padding:2px 6px;min-width:30px;text-align:center}
.alert-route.line{border-radius:50%;width:22px;height:22px;min-width:22px;padding:0;
  display:grid;place-items:center;color:#000;font-weight:800;font-size:12px}
.alert.sev-critical .alert-route{background:var(--bad);color:#fff}
.alert-title{color:var(--fg);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.alert[open] .alert-title{-webkit-line-clamp:unset}
.alert.planned{border-left-color:var(--fg-3);background:var(--bg-2)}
.alert.planned .alert-route{background:var(--bg-3);color:var(--fg-2)}
.alert summary:hover .alert-title{color:var(--accent)}
.alert p{margin:9px 0 0;color:var(--fg-2);line-height:1.5}
.alert-meta{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3)}

/* ── subway connection card ─────────────────────────── */
.subway{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  margin:12px 0;overflow:hidden;border-left:3px solid var(--line)}
.subway-h{display:flex;align-items:center;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--line)}
.badge.line{min-width:26px;height:26px;border-radius:50%;color:#000;font-weight:800}
.trains{display:flex;align-items:center;gap:12px;padding:9px 15px;
  border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.trains:first-of-type{border-top:0}
.trains .dest{flex:1;min-width:0}
.trains .eta{font:700 15px/1 var(--mono);letter-spacing:-.02em;color:var(--fg)}
.trains .eta small{font-size:9.5px;color:var(--fg-3);margin-left:5px;letter-spacing:.08em}

.stockrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:9px 15px;background:none;border:0;border-top:1px solid var(--line);color:var(--fg-2);
  font-family:var(--sans);font-size:13.5px}
.stockrow:hover{background:var(--bg-3)}
.stockrow .vnum{font:600 11px/1 var(--mono);color:var(--fg-3)}

/* ── sheet links + power tag ────────────────────────── */
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.links a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;
  border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.links a:hover{background:var(--bg-3)}
.tag.power{color:var(--fg);background:var(--bg-3)}
.tag.power.battery{background:color-mix(in srgb,var(--good) 22%,var(--bg-3));color:var(--good)}
.tag.power.diesel-electric{background:color-mix(in srgb,var(--accent) 20%,var(--bg-3));color:var(--accent)}
.tag.power.electric{background:color-mix(in srgb,#c86bff 22%,var(--bg-3));color:#c86bff}
.sheet .tags{margin:0 0 16px}