:root{
    --bg:#070d14;
    --panel:#0a141b;
    --line:#1d303b;
    --text:#dce8e3;
    --muted:#7f95a0;
    --accent:#f5c26b; /* fallback; each city sets its own */
    --accent-text:var(--accent);
    --font:"Avenir Next","Helvetica Neue",Arial,sans-serif;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;overflow:hidden}
  button,select{font:inherit;color:inherit}
  button{cursor:pointer}
  button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  #app{position:relative;height:100%;overflow:hidden;background:var(--bg)}
  #map{position:absolute;inset:0;background:#071014}
  .basemap-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(7,13,20,.46),rgba(7,13,20,.62))}
  #map .maplibregl-canvas{opacity:.82}
  #overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
  #rail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;transform-origin:0 0}
  .maplibregl-ctrl{bottom:240px!important;right:10px!important}
  .vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,13,20,.82),transparent 22%,transparent 62%,rgba(7,13,20,.8))}

  header{position:absolute;left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none;z-index:5}
  .brand{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:#c8d8d4}
  .mark{width:24px;height:24px;color:var(--accent);display:block;flex:0 0 auto}
  .brand .b1{color:var(--accent)}
  .brand{pointer-events:auto}
  .city-wrap{position:relative;display:inline-flex}
  .city-btn{appearance:none;border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    background:color-mix(in srgb, var(--accent) 7%, transparent);color:var(--accent);
    font:inherit;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
    padding:5px 9px 4px;border-radius:7px;display:inline-flex;align-items:center;gap:7px;
    cursor:pointer;line-height:1.05;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .city-btn:hover{background:color-mix(in srgb, var(--accent) 15%, transparent);border-color:color-mix(in srgb, var(--accent) 65%, transparent)}
  .city-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .city-btn[aria-expanded="true"]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 17%, transparent)}
  .city-caret{width:8px;height:5px;transition:transform .15s ease}
  .city-btn[aria-expanded="true"] .city-caret{transform:rotate(180deg)}
  .city-menu{position:absolute;top:calc(100% + 9px);left:-9px;min-width:146px;padding:5px;
    display:grid;gap:2px;background:#0b161e;border:1px solid #263c49;border-radius:9px;
    box-shadow:0 16px 34px rgba(0,0,0,.55);z-index:40}
  .city-menu[hidden]{display:none}
  .city-menu button{background:none;border:0;text-align:left;color:var(--text);font:inherit;
    font-size:11.5px;letter-spacing:.4px;text-transform:none;padding:7px 10px 7px 27px;
    border-radius:5px;cursor:pointer;position:relative;white-space:nowrap}
  .city-menu button:hover,.city-menu button:focus-visible{background:color-mix(in srgb, var(--accent) 13%, transparent);color:#fff;outline:none}
  .city-menu button::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;
    transform:translateY(-57%) rotate(45deg);border-right:1.6px solid transparent;
    border-bottom:1.6px solid transparent}
  .city-menu button[aria-checked="true"]::before{border-color:var(--accent)}
  .hright{display:flex;align-items:center;gap:16px;pointer-events:auto}
  .clock{font-size:34px;font-weight:300;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:#d7e7e1;line-height:1}
  .clock small{font-size:11px;letter-spacing:.6px;color:var(--muted);margin-left:5px}
  .about-btn{background:none;border:0;color:#9db3b8;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:6px 0}
  .about-btn:hover{color:var(--accent)}
  .linkish{background:none;border:0;padding:0;color:var(--accent-text);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  #sources{max-width:560px}
  .srclist{columns:2;column-gap:24px;margin:14px 0 0;padding-left:18px;font-size:12px;line-height:1.45;color:#c2d3cf}
  .srclist li{break-inside:avoid;margin:0 0 6px}
  .srclist-note{margin-top:16px;font-size:11px;color:#8fa6ab;line-height:1.5}

  .meta{position:absolute;left:max(22px,env(safe-area-inset-left));top:64px;pointer-events:none;z-index:4;text-shadow:0 1px 10px rgba(7,13,20,.95),0 0 3px rgba(7,13,20,.9)}
  header{text-shadow:0 1px 10px rgba(7,13,20,.9)}
  .meta .day{font-size:11px;letter-spacing:1px;color:#93aab0;text-transform:uppercase}
  .meta .sub{margin-top:5px;font-size:12px;color:#7d949b;max-width:34ch;line-height:1.5}
  .day-error{margin-top:8px;display:flex;align-items:center;gap:8px;pointer-events:auto;color:#ffb4b4;font-size:11px}
  .day-error button{background:none;border:1px solid #6a3b3b;border-radius:4px;color:var(--accent-text);font:inherit;font-size:10px;padding:3px 7px;cursor:pointer}

  .panel{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));background:var(--panel);border:1px solid #203440;border-radius:10px;padding:10px 14px 8px;z-index:4}
  .row{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .legend{display:flex;gap:16px;flex-wrap:wrap}
  .legend button{background:none;border:0;padding:2px 0;display:flex;align-items:center;gap:6px;color:#b9cccf;font-size:11.5px;white-space:nowrap}
  .legend button[aria-pressed="false"]{opacity:.35}
  .legend button{position:relative}
  .mode-tip{position:absolute;left:0;bottom:calc(100% + 10px);z-index:12;min-width:192px;
    padding:9px 12px;border:1px solid #263c49;border-radius:8px;background:rgba(7,16,22,.97);
    box-shadow:0 12px 28px rgba(0,0,0,.5);color:var(--text);font-size:11px;line-height:1.55;
    display:grid;gap:3px;opacity:0;transform:translateY(4px);pointer-events:none;
    transition:opacity .12s ease,transform .12s ease;text-align:left;white-space:nowrap}
  .legend button:hover .mode-tip,
  .legend button:focus-visible .mode-tip{opacity:1;transform:none}
  .mode-tip span{display:flex;align-items:center;gap:7px}
  .mode-tip i{flex:0 0 auto;width:8px;height:8px;border-radius:2px}
  .mode-tip em{font-style:normal;color:var(--muted)}
  .mode-tip.two-col{grid-template-columns:1fr 1fr;column-gap:16px;min-width:336px}
  @media (max-width:520px){.mode-tip.two-col{grid-template-columns:1fr;min-width:0}}
  .legend .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  .legend .swatches{display:inline-flex;gap:2px}
  .legend .swatches i{width:5px;height:8px;border-radius:1.5px;display:block}
  .legend .n{font-variant-numeric:tabular-nums;color:#8fa6ab;font-size:10.5px;min-width:26px;text-align:right}
  .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px}
  .controls .clock{font-size:21px;font-weight:400;letter-spacing:-.3px;color:var(--accent);order:1}
  .controls .days{order:2}
  .controls .live{order:3}
  .controls .speeds{order:4}
  .controls .clock small{font-size:9px;letter-spacing:.7px;color:#93aab0;margin-left:5px}
  .days{display:flex;gap:1px;background:#0c1a22;border:1px solid #27404a;border-radius:5px;padding:2px}
  .days button{background:none;border:0;color:#8fa6ab;font-size:10.5px;letter-spacing:.3px;padding:4px 7px;border-radius:3px;font-variant-numeric:tabular-nums}
  .days button[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}
  .days button:hover{color:#d6ece4}
  .days button:disabled,.speeds button:disabled,.scrub:disabled{opacity:.35;cursor:not-allowed}
  .speeds{display:flex;gap:1px;background:#0c1a22;border:1px solid #27404a;border-radius:5px;padding:2px}
  .speeds button{background:none;border:0;color:#8fa6ab;padding:5px 7px;border-radius:3px;display:flex;align-items:center}
  .speeds button svg{height:10px;width:auto;fill:currentColor;display:block}
  .speeds .pp{color:#c9d9d4;width:27px;height:24px;padding:0;justify-content:center;
    border:1px solid #33505a;border-radius:50%;margin:0 1px}
  .speeds .pp[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}
  .speeds .pp:hover{border-color:#4b6b74}
  .speeds .pp svg{height:9px}
  .speeds .pp .ic-play{display:none}
  .speeds .pp[aria-pressed="true"] .ic-pause{display:none}
  .speeds .pp[aria-pressed="true"] .ic-play{display:block}
  .speed-sep{width:1px;background:#27404a;align-self:stretch;margin:2px 1px}
  .speeds button[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}
  .speeds button:hover{color:#d6ece4}
  .live{display:flex;align-items:center;gap:5px;background:rgba(255,92,92,.08);border:1px solid #6a3b3b;color:#ffb4b4;font-size:10.5px;letter-spacing:.4px;padding:6px 9px;border-radius:5px}
  .live[aria-pressed="true"]{background:rgba(255,72,72,.22);border-color:#c35252;color:#ffd9d9}
  .live:disabled{opacity:.4}
  .live-dot{width:6px;height:6px;border-radius:50%;background:#ff5c5c;box-shadow:0 0 0 3px rgba(255,92,92,.18)}
  .live[aria-pressed="true"] .live-dot{background:#ff3b3b;animation:livepulse 1.6s infinite}
  @keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.45)}70%{box-shadow:0 0 0 7px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
  #liveNote{color:#ff9f9f}
  select{background:#0c1a22;border:1px solid #27404a;border-radius:5px;color:#a9bfc4;font-size:10.5px;padding:6px 7px}
  .chartwrap{position:relative;height:64px;margin-top:8px}
  .chartwrap canvas{position:absolute;inset:0;width:100%;height:100%}
  .scrub{width:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;height:16px;margin-top:2px}
  .scrub::-webkit-slider-runnable-track{background:#22363f;height:1px}
  .scrub::-moz-range-track{background:#22363f;height:1px}
  .scrub::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:-4px;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
  .scrub::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--accent)}
  .ticks{display:flex;justify-content:space-between;font-size:10px;color:#8aa0a6;font-variant-numeric:tabular-nums;margin-top:-2px}
  .foot{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid #1a2b34;margin-top:6px;padding-top:6px;flex-wrap:wrap}
  .stats{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:#8ea5aa}
  .stats b{color:#c3d5d1;font-weight:500;font-variant-numeric:tabular-nums}
  .src{font-size:10px;color:#7f979d;text-decoration:none;border-bottom:1px solid #2a4048}
  .src-note{font-size:10px;color:#7f979d}
  .src:hover{color:var(--accent);border-color:var(--accent)}
  .src-wrap{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
  .src-sep{color:#41545a;font-size:10px}
  .rhead{display:flex;align-items:center;gap:10px}
  .rdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
  .rtitle{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .rtitle b{font-size:13.5px;color:#e2efea;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rtitle span{font-size:10px;color:#8fa6ab;letter-spacing:.5px;text-transform:uppercase}
  .rclose{margin-left:auto;background:none;border:1px solid #33505a;color:#9db3b8;width:26px;height:26px;border-radius:5px;font-size:15px;line-height:1;flex:0 0 auto}
  .rclose:hover{color:var(--accent);border-color:var(--accent)}
  .rstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 12px;margin:8px 0 10px;padding:10px 11px;background:rgba(10,24,31,.5);border:1px solid #1d333c;border-radius:8px;color:#8ea5aa;font-size:11px}
  .rstat{display:flex;flex-direction:column;gap:2px;min-width:0}
  .rstat b{color:#d7e6e2;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
  .rstat span{color:#7f9ba1;font-size:8.5px;letter-spacing:.45px;line-height:1.25;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rstat.wide{grid-column:span 2}
  .rstat.wide b,.rstat.wide span{white-space:normal}

  .schedule-panel{position:fixed;z-index:5;right:max(16px,env(safe-area-inset-right));top:88px;bottom:calc(var(--panel-h,240px) + 24px + env(safe-area-inset-bottom));width:min(390px,calc(100vw - 32px));display:flex;flex-direction:column;background:var(--panel);border:1px solid #203440;border-radius:10px;box-shadow:0 14px 38px rgba(0,0,0,.32);overflow:hidden;color:var(--text)}
  .schedule-panel[hidden]{display:none}
  .schedule-toggle{display:inline-flex;align-items:center;background:none;border:0;color:#9db3b8;font:inherit;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:6px 0;cursor:pointer}
  .schedule-toggle[hidden]{display:none!important}
  .schedule-toggle:hover{color:var(--accent)}
  html[data-theme="light"] .schedule-toggle{color:var(--accent-text)}

  .sch-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid #1c3039}
  .sch-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px 14px 12px;scrollbar-width:thin}
  .sch-foot{display:flex;align-items:center;gap:8px;border-top:1px solid #1c3039;padding:9px 14px}
  .sch-search{display:block;flex:1 1 auto;width:100%;background:none;border:1px solid #33505a;border-radius:6px;color:var(--accent-text);font:inherit;font-size:11.5px;padding:8px 10px;text-align:left}
  .sch-search:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .sched-loading,.sched-empty{margin:12px 0;color:#8ea5aa;font-size:11.5px;line-height:1.5}
  .sched-retry{color:var(--accent-text);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
  .sched-group{margin-top:14px}
  .sched-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 4px;color:#7f9ba1;font-size:10px}
  .sched-tools button{background:none;border:1px solid #33505a;border-radius:4px;color:var(--accent-text);font:inherit;font-size:10px;padding:4px 7px;cursor:pointer}
  .sched-group{margin-top:8px}
  .sched-group summary{color:#9db3b8;font-size:10px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;padding:4px 0}
  .sched-group h4{margin:0 0 5px;color:#9db3b8;font-size:10px;font-weight:500;letter-spacing:.7px;text-transform:uppercase}
  .sched-daybreak{margin:8px 0 2px;color:var(--accent-text);font-size:9px;letter-spacing:.7px;text-transform:uppercase}
  .sched-run{display:grid;grid-template-columns:42px 12px 42px 1fr;align-items:center;gap:5px;width:100%;background:none;border:0;border-top:1px solid #182a32;padding:7px 0;color:#b9cccf;font:inherit;font-size:11.5px;text-align:left;cursor:pointer}
  .sched-run:hover,.sched-run:focus-visible{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .sched-run .sr-time,.sched-run .sr-end{font-variant-numeric:tabular-nums}
  .sched-run .sr-arrow{color:#607b82}
  .sched-run .sr-dest{color:#7f9ba1;font-size:10.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sched-run[data-active="true"]{color:var(--accent)}
  .sched-run-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:8px 0 4px}
  .sched-run-head b{display:block;color:#e2efea;font-size:12px;font-weight:500}
  .sched-run-head span{display:block;color:#7f9ba1;font-size:10px;margin-top:2px}
  .sched-state{color:var(--accent-text)!important;font-size:10px!important;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
  .sched-state.is-following{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:9px!important;letter-spacing:.55px}
  .sched-state.is-following::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
  .sched-recenter{background:none;border:1px solid #33505a;border-radius:4px;color:var(--accent-text);font:inherit;font-size:10px;padding:3px 6px;white-space:nowrap;cursor:pointer}
  .sch-head .rtitle{flex:1 1 auto;min-width:0}
  .sch-head .sched-recenter{margin-left:0;margin-right:6px}
  .sch-head .rclose{margin-left:0;width:32px;height:32px;font-size:17px}
  .sch-close-bottom{display:none;background:none;border:1px solid #33505a;border-radius:6px;color:#9db3b8;font:inherit;font-size:11px;padding:8px 10px}
  @media (max-width:680px){.sch-close-bottom{display:block}}
  .sched-stops{margin-top:4px}
  .sched-stop{display:grid;grid-template-columns:48px 1fr;gap:8px;padding:4px 0;border-top:1px solid #172a32;color:#b9cccf;font-size:11.5px;line-height:1.35}
  .sched-stop .st-time{font-variant-numeric:tabular-nums;color:#8fa6ab}
  .sched-stop.sched-done{opacity:.42}
  .sched-stop.sched-next{color:#e2efea}
  .sched-stop.sched-next .st-time{color:var(--accent-text)}
  .sched-note,.sched-live-note{margin:8px 0 0;color:#7f9ba1;font-size:10px;line-height:1.4}
  .sched-live-note{color:var(--accent-text)}
  .sch-searchbar{padding:10px 0 8px}
  #schQuery{width:100%;box-sizing:border-box;background:#0c1a22;border:1px solid #33505a;border-radius:6px;color:#e2efea;font:inherit;font-size:12px;padding:8px 10px;outline:none}
  #schQuery:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent)}
  .sch-results{display:flex;flex-direction:column;gap:1px}
  .sched-search-row{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-top:1px solid #172a32;padding:8px 0;color:#b9cccf;font:inherit;text-align:left;cursor:pointer}
  .sched-search-row:hover,.sched-search-row.active,.sched-search-row:focus-visible{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .ssr-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
  .ssr-text b{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ssr-text span{font-size:10px;color:#7f9ba1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sched-search-row .rdot{width:8px;height:8px;box-shadow:none}
  .sch-count{margin:2px 0 6px;color:#7f9ba1;font-size:10px}
  .sch-results [role="option"][aria-selected="true"]{color:var(--accent-text)}

  .panel-toggle{display:none}
  @media (max-width:680px){
    .panel-toggle{display:grid;place-items:center;position:absolute;top:-12px;left:50%;transform:translateX(-50%);
      width:48px;height:15px;padding:0;border-radius:9px;background:#12232c;border:1px solid #27404a;color:#9db3b8;z-index:1}
    .panel-toggle svg{width:13px;height:9px}
    .panel-toggle:hover{color:var(--accent);border-color:#3f5b66}
    .panel.collapsed{padding:6px 10px 4px}
    .panel.collapsed .panel-toggle svg{transform:rotate(180deg)}
    .panel.collapsed .legend,
    .panel.collapsed .chartwrap,
    .panel.collapsed .scrub,
    .panel.collapsed .ticks,
    .panel.collapsed .foot,
    .panel.collapsed .days{display:none}
    .panel.collapsed .row{justify-content:flex-end;gap:8px}
  }
  @media (min-width:681px){
    .panel{left:50%;right:auto;transform:translateX(-50%);width:min(1180px,calc(100% - 40px))}
    .legend{gap:10px}
    .legend button{font-size:11px;gap:5px}
    .legend .n{min-width:20px;font-size:10px}
    .legend .swatches i{width:4px;height:7px}
  }
  #tip{position:absolute;z-index:6;pointer-events:none;background:rgba(9,20,27,.95);border:1px solid #33505a;border-radius:6px;padding:9px 12px;font-size:11px;z-index:5;max-width:250px;box-shadow:0 8px 26px rgba(0,0,0,.4);display:none}
  #tip .m{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#7f9ba1;display:flex;align-items:center;gap:6px}
  #tip .cd{width:6px;height:6px;border-radius:50%;display:inline-block}
  #tip strong{display:block;margin-top:4px;font-weight:500;color:#e2efea}
  #tip small{display:block;margin-top:3px;color:#7f9ba1;font-size:10px}

  #loading{position:absolute;inset:0;z-index:10;background:rgba(7,13,20,.95);display:flex;align-items:center;justify-content:center;gap:14px;color:#9db3b8;font-size:13px;letter-spacing:.4px;transition:opacity .5s}
  #loading.done{opacity:0;pointer-events:none}

  dialog{border:1px solid #26414c;background:#0a161d;color:var(--text);border-radius:12px;max-width:560px;padding:24px 26px;font-size:13px;line-height:1.6}
  dialog::backdrop{background:rgba(4,9,13,.66)}
  dialog h2{margin:0 0 10px;font-size:16px;font-weight:600}
  dialog p{margin:0 0 10px;color:#aec2c6}
  dialog p:last-child{margin-bottom:0}
  dialog a{color:var(--accent)}
  dialog code{font-size:12px;color:#cfe3dc}
  .close{position:absolute;right:14px;top:10px;background:none;border:0;color:#8aa2a8;font-size:18px}

  @media (max-width:680px){
    .clock{font-size:26px}
    .meta .sub{display:none}
    .row{flex-wrap:wrap;gap:8px}
    .legend{gap:10px;width:100%}
    .controls{width:100%;justify-content:space-between}
    .controls .days{order:1}
    .controls .live{order:2}
    .controls .clock{order:3}
    .controls .speeds{order:4}
    .legend .n{min-width:20px}
    .panel{padding:9px 10px 6px}
    .chartwrap{height:54px}
    .stats{gap:12px;font-size:10.5px}
  }
  @media (max-width:680px){
    .schedule-panel{left:8px;right:8px;top:auto;bottom:calc(var(--panel-h,240px) + 18px + env(safe-area-inset-bottom));width:auto;max-height:min(70vh,calc(100vh - var(--panel-h,240px) - 26px - env(safe-area-inset-bottom)));border-radius:10px}
    .schedule-panel .rclose{width:40px;height:40px;font-size:18px}
  }
  @media (max-height:620px){
    .schedule-panel{top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));max-height:none;height:auto}
  }
  @media (prefers-reduced-motion:reduce){ .panel,.vignette{transition:none} }

  /* Theme switch */
  .theme-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#9db3b8;
    font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:6px 0}
  .theme-btn:hover{color:var(--accent)}
  .theme-btn svg{width:14px;height:14px;display:block}

  html[data-theme="light"]{
    color-scheme:light;
    --accent-text:color-mix(in srgb,var(--accent) 55%,#000);
    --bg:#eef3f5;
    --panel:#ffffff;
    --line:#c6d3d9;
    --text:#17262d;
    --muted:#5f727b;
  }
  html[data-theme="light"] body{background:var(--bg);color:var(--text)}
  html[data-theme="light"] #app{background:var(--bg)}
  html[data-theme="light"] #map{background:#e4ecef}
  html[data-theme="light"] #map .maplibregl-canvas{opacity:.95}
  html[data-theme="light"] .basemap-scrim{background:radial-gradient(120% 90% at 50% 40%,rgba(238,243,245,.18),rgba(238,243,245,.36))}
  html[data-theme="light"] .vignette{background:linear-gradient(180deg,rgba(238,243,245,.78),transparent 22%,transparent 62%,rgba(238,243,245,.7))}
  html[data-theme="light"] header{text-shadow:none}
  html[data-theme="light"] .meta{text-shadow:0 1px 8px rgba(255,255,255,.9)}
  html[data-theme="light"] .brand{color:#283c44}
  html[data-theme="light"] .clock{color:#1b3038}
  html[data-theme="light"] .about-btn,html[data-theme="light"] .theme-btn,html[data-theme="light"] .schedule-toggle{color:#4f666e}
  html[data-theme="light"] .city-menu{background:#fff;border-color:#c4d2d8;box-shadow:0 16px 34px rgba(30,50,60,.16)}
  html[data-theme="light"] .city-menu button{color:#17262d}
  html[data-theme="light"] .city-menu button:hover,html[data-theme="light"] .city-menu button:focus-visible{color:#0d1a20}
  html[data-theme="light"] .meta .day{color:#4d646d}
  html[data-theme="light"] .meta .sub{color:#5f727b}
  html[data-theme="light"] .panel{background:var(--panel);border-color:#c8d4da;box-shadow:0 10px 28px rgba(30,50,60,.09)}
  html[data-theme="light"] .legend button{color:#3f565f}
  html[data-theme="light"] .legend .n{color:#6e8189}
  html[data-theme="light"] .days,html[data-theme="light"] .speeds{background:#f2f6f7;border-color:#c6d3d9}
  html[data-theme="light"] .days button,html[data-theme="light"] .speeds button{color:#526a73}
  html[data-theme="light"] .days button:hover,html[data-theme="light"] .speeds button:hover{color:#1c323a}
  html[data-theme="light"] .days button[aria-pressed="true"],html[data-theme="light"] .speeds button[aria-pressed="true"],html[data-theme="light"] .speeds .pp[aria-pressed="true"]{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 16%,transparent)}
  html[data-theme="light"] .speeds .pp{color:#38505a;border-color:#b8c8cf}
  html[data-theme="light"] .speeds .pp:hover{border-color:#879da6}
  html[data-theme="light"] .speed-sep{background:#c5d2d8}
  html[data-theme="light"] .live{background:rgba(200,40,40,.07);border-color:#d8a6a6;color:#9b3434}
  html[data-theme="light"] .live[aria-pressed="true"]{background:rgba(220,55,55,.14);border-color:#c25b5b;color:#7e2020}
  html[data-theme="light"] #liveNote{color:#a33a3a}
  html[data-theme="light"] select{background:#f4f7f8;border-color:#c6d3d9;color:#3f565f}
  html[data-theme="light"] .scrub::-webkit-slider-runnable-track{background:#b8c8cf}
  html[data-theme="light"] .scrub::-moz-range-track{background:#b8c8cf}
  html[data-theme="light"] .ticks{color:#667b83}
  html[data-theme="light"] .foot{border-color:#d5dfe3}
  html[data-theme="light"] .stats{color:#5c7179}
  html[data-theme="light"] .stats b{color:#253b43}
  html[data-theme="light"] .src,html[data-theme="light"] .src-note{color:#6f828a;border-color:#c8d4d9}
  html[data-theme="light"] .src-sep{color:#9babb2}
  html[data-theme="light"] .rdot{box-shadow:0 0 0 3px rgba(25,45,55,.10)}
  html[data-theme="light"] .rtitle b{color:#1e333b}
  html[data-theme="light"] .rtitle span,html[data-theme="light"] .rstats{color:#5f727b}
  html[data-theme="light"] .rstats{background:#f4f8f9;border-color:#dce6e9}
  html[data-theme="light"] .rstats b{color:#253b43}
  html[data-theme="light"] .rstat span{color:#6b8088}
  html[data-theme="light"] .rclose{background:#f4f7f8;border-color:#c4d2d8;color:#4f666e}
  html[data-theme="light"] .schedule-panel{background:var(--panel);border-color:#c8d4da;box-shadow:0 14px 32px rgba(30,50,60,.16)}
  html[data-theme="light"] .sch-head,html[data-theme="light"] .sch-foot{border-color:#d5dfe3}
  html[data-theme="light"] .sch-search{border-color:#c4d2d8}
  html[data-theme="light"] .sched-group h4{color:#5f727b}
  html[data-theme="light"] .sched-run{border-color:#e1e9ec;color:#3f565f}
  html[data-theme="light"] .sched-run-head b,html[data-theme="light"] .sched-stop.sched-next{color:#1e333b}
  html[data-theme="light"] #schQuery{background:#f4f7f8;border-color:#c6d3d9;color:#1e333b}
  html[data-theme="light"] .sched-search-row{border-color:#e1e9ec;color:#3f565f}
  html[data-theme="light"] .ssr-text span,html[data-theme="light"] .sch-results .sched-empty{color:#6f828a}
  html[data-theme="light"] .sched-stop{border-color:#e1e9ec;color:#3f565f}
  html[data-theme="light"] .sched-stop .st-time,html[data-theme="light"] .sched-run-head span,html[data-theme="light"] .sched-note{color:#60747c}
  html[data-theme="light"] .sched-run .sr-dest,html[data-theme="light"] .sched-loading,html[data-theme="light"] .sched-empty{color:#6f828a}
  html[data-theme="light"] .panel-toggle{background:#fff;border-color:#c6d3d9;color:#4f666e}
  html[data-theme="light"] .mode-tip{background:#fff;border-color:#c8d4da;box-shadow:0 12px 28px rgba(30,50,60,.16)}
  html[data-theme="light"] #tip{background:#fff;border-color:#c8d4da;color:#22353d;box-shadow:0 8px 26px rgba(30,50,60,.18)}
  html[data-theme="light"] #tip .m,html[data-theme="light"] #tip small{color:#60747c}
  html[data-theme="light"] #tip strong{color:#1e333b}
  html[data-theme="light"] #loading{background:rgba(238,243,245,.96);color:#4f666e}
  html[data-theme="light"] dialog{background:#fff;border-color:#c8d4da;color:#17262d}
  html[data-theme="light"] dialog p{color:#4f666e}
  html[data-theme="light"] dialog code{color:#2c4a54}
  html[data-theme="light"] .close{color:#6b7f87}
  html[data-theme="light"] .srclist{color:#4f666e}
  html[data-theme="light"] .srclist-note{color:#6f828a}
  #tip .sched{color:var(--accent-text);text-transform:uppercase;letter-spacing:.35px}

  @media (min-width:1300px){
    .panel{width:min(1320px,calc(100% - 24px))}
    .row{gap:18px}
    .legend,.controls{flex-wrap:nowrap}
  }
  @media (min-width:1300px){
    .legend{flex:1 1 0;min-width:0}
    .controls{flex:0 0 auto}
  }

  /* Tablet / narrow desktop: stack controls below a two-column legend. */
  @media (max-width:1100px){
    .row{flex-wrap:wrap;align-items:flex-start;gap:10px}
    .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:6px 18px}
    .legend button{min-width:0}
    .controls{width:100%;justify-content:flex-end}
  }
  @media (max-width:680px){
    .legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
    .controls{justify-content:space-between}
  }

  .legend-fold{display:block;flex:1 1 0;min-width:0}
  .legend{width:100%}
  .legend-summary{display:none}
  @media (max-width:1100px){
    .legend-fold{display:block;width:100%}
    .legend-summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;
      color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
      padding:2px 0 4px;user-select:none}
    .legend-summary::-webkit-details-marker{display:none}
    .legend-summary::before{content:"▸";color:var(--accent);font-size:11px;transition:transform .15s ease}
    .legend-fold[open] .legend-summary::before{transform:rotate(90deg)}
    .legend-fold:not([open]) .legend{display:none}
  }
  .live[hidden]{display:none}

/* Header controls stay on one line on phones. */
@media (max-width:680px){
  header{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));gap:8px}
  .brand{gap:6px;font-size:10px;letter-spacing:.8px;white-space:nowrap}
  .mark{width:22px;height:22px}
  .city-btn{font-size:10px;letter-spacing:.8px;padding:4px 6px;gap:5px}
  .city-caret{width:6px;height:4px}
  .hright{gap:8px}
  .theme-btn,.about-btn,.schedule-toggle{font-size:9.5px;letter-spacing:.35px}
  .theme-btn{gap:4px}
  .theme-btn svg{width:12px;height:12px}
}