*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#030304; --ink:#e9edf2; --mute:#7c828c; --faint:#1a1c21; --line:#2b2e35;
  --cyan:#22e6ff; --violet:#a66bff;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:calc(env(safe-area-inset-top) + 22px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 18px);overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* header */
.top{position:relative;max-width:1400px;margin:0 auto 26px}
.brand{font-family:var(--mono);font-size:11px;letter-spacing:.38em;color:var(--mute);display:flex;align-items:center;gap:10px}
.mark{width:9px;height:9px;border:1.5px solid var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan)}
.hero{display:flex;align-items:baseline;gap:14px;margin-top:26px}
.count{font-size:72px;font-weight:200;letter-spacing:-.04em;line-height:.9;color:var(--ink)}
.countlbl{font-size:15px;color:var(--ink);display:flex;align-items:center;gap:9px;letter-spacing:.02em}
.blink-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--violet);box-shadow:0 0 10px var(--violet);animation:blink 1.6s ease-in-out infinite}
.stats{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}
.stats b{font-weight:500;color:var(--ink)}
.stats i{display:inline-block;width:18px;height:0;vertical-align:middle;margin-right:7px}
.stats .s-booked i{border-top:3px solid var(--cyan);box-shadow:0 0 6px var(--cyan)}
.stats .s-planned i{border-top:2px dashed var(--cyan)}
.stats .s-unsolved i{height:6px;border:2px solid var(--violet);border-radius:3px}
.stats .s-decision i{width:8px;height:8px;border:1.5px solid var(--violet);transform:rotate(45deg);margin-right:9px}
.now{margin-top:18px;font-size:13px;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.now .pulse{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(34,230,255,.6);animation:pulse 2s infinite}
.now .t{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.05em}
.next{margin-top:6px;font-size:12px;color:var(--mute)}
.next b{color:var(--ink);font-weight:500}
.legend-btn{position:absolute;top:-4px;right:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:20px;padding:7px 12px}

/* map */
.map{max-width:1400px;margin:0 auto}
.band-h{cursor:pointer}
.seg-no{font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.15em}
.seg-range{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.seg-name{display:block;margin-top:5px;font-size:12px;color:#c3c8cf;letter-spacing:.02em;white-space:nowrap}
.seg-rh{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:1px 4px;margin-right:7px;vertical-align:1px;color:var(--mute)}
.seg-rh.away{color:var(--violet);border-color:rgba(166,107,255,.45)}
.seg-rh.home{color:var(--cyan);border-color:rgba(34,230,255,.4)}
.seg-now{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--bg);background:var(--cyan);border-radius:3px;padding:2px 5px;margin-left:8px;vertical-align:2px}

.it{position:relative;cursor:pointer;outline:none}
.it:focus-visible .rail{filter:drop-shadow(0 0 4px var(--cyan))}
.rail{display:block;overflow:visible;flex:none}
.lab .nm{font-size:15px;font-weight:600;letter-spacing:.01em}
.lab .sb{font-size:12px;color:var(--mute);margin-left:6px;font-weight:400}
.lab .wh{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px;letter-spacing:.03em}
.lab .lg{font-size:12.5px;color:#c3c8cf}
.tag{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;border-radius:3px;padding:2px 5px;margin-left:7px;vertical-align:1px}
.tag.booked{color:var(--bg);background:var(--cyan)}
.tag.planned{color:var(--cyan);border:1px solid rgba(34,230,255,.45)}
.tag.unsolved{color:var(--violet);border:1px solid var(--violet);animation:blink 1.6s ease-in-out infinite}
.tag.decision{color:var(--violet);border:1px dashed var(--violet)}
.here{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--bg);background:var(--cyan);border-radius:3px;padding:2px 6px;margin-bottom:5px;box-shadow:0 0 12px rgba(34,230,255,.5)}
.it.past{opacity:.42}

/* svg strokes */
.ln{fill:none;stroke-linecap:round}
.ln.booked{stroke:var(--cyan);stroke-width:3;filter:url(#glow)}
.ln.planned{stroke:var(--cyan);stroke-width:2.2;stroke-dasharray:6 6;opacity:.85}
.ln.unsolved-o{stroke:var(--violet);stroke-width:7;stroke-linecap:butt}
.ln.unsolved-i{stroke:var(--bg);stroke-width:3.2;stroke-linecap:butt}
.uns{animation:blink 1.6s ease-in-out infinite}
.ln.neutral{stroke:#3c4048;stroke-width:1.6;stroke-dasharray:2 4}
.ln.signal{stroke:#5d636c;stroke-width:1.4}
.ln.signal.met{stroke:var(--cyan)}
.gate{fill:var(--bg);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.gate.v{stroke:var(--violet)}
.chip{fill:var(--bg);stroke-width:1.5}
.chip.booked{stroke:var(--cyan)}.chip.planned{stroke:rgba(34,230,255,.6)}.chip.unsolved{stroke:var(--violet)}.chip.neutral{stroke:#3c4048}
.ico{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.booked,.ico.planned{color:var(--cyan);stroke:var(--cyan)}
.ico.unsolved{color:var(--violet);stroke:var(--violet)}
.ico.neutral{color:var(--mute);stroke:var(--mute)}
.stn{fill:var(--bg);stroke:var(--ink);stroke-width:2.4}
.stn.tbd{stroke-dasharray:3 3}
.it.past .stn{fill:#3a3e45}
.dia{fill:var(--bg);stroke:var(--violet);stroke-width:1.6}
.gtxt{font-family:var(--mono);font-size:8px;letter-spacing:.18em}
.gtxt.y{fill:var(--cyan)}.gtxt.n{fill:var(--violet)}
.yah{fill:none;stroke:var(--cyan);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2s ease-out infinite}
.yah-c{fill:var(--cyan);filter:url(#glow)}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,230,255,.6)}70%{box-shadow:0 0 0 10px rgba(34,230,255,0)}100%{box-shadow:0 0 0 0 rgba(34,230,255,0)}}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.uns,.tag.unsolved,.blink-dot,.yah,.now .pulse{animation:none}}

/* vertical (phone) */
.o-v .band{position:relative;margin-bottom:6px}
.o-v .band-h{position:relative;padding:22px 0 18px 100px}
.o-v .band-h::before{content:"";position:absolute;left:27px;top:0;bottom:0;border-left:1.6px dotted #2f3239}
.o-v .band-h::after{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--faint)}
.o-v .band:first-child .band-h::before{top:50%}
.o-v .it{display:grid;grid-template-columns:100px 1fr;align-items:center;height:var(--L)}
.o-v .lab{padding-right:4px;min-width:0}
.o-v .empty{padding:6px 0 10px 100px;font-size:12px;color:#4a4f57;position:relative}
.o-v .empty::before{content:"";position:absolute;left:27px;top:0;bottom:0;border-left:1.6px dotted #2f3239}

/* horizontal (desktop) */
.o-h{display:flex;overflow-x:auto;overflow-y:hidden;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:#2b2e35 transparent;max-width:none;margin:0 -18px;padding-left:18px;padding-right:18px}
.o-h .band{display:flex;flex-direction:column;flex:none;border-left:1px solid var(--faint)}
.o-h .band:first-child{border-left:0}
.o-h .band-h{height:112px;padding:6px 22px 0 18px}
.o-h .track{display:flex;flex:1}
.o-h .it{display:flex;flex-direction:column;width:var(--L);flex:none}
.o-h .lab{height:74px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;padding:0 8px 6px}
.o-h .lab .sb{display:block;margin:2px 0 0}
.o-h .lab .nm{font-size:14px}
.o-h .lab .tag{display:block;width:max-content;margin:5px auto 0}
.o-h .lab .lg{line-height:1.25}
.o-h .empty{width:200px;display:flex;flex-direction:column}
.o-h .empty .lab{color:#4a4f57;font-size:12px}

/* legend (collapsible) */
.legend{max-width:1400px;margin:0 auto 6px;border-top:1px solid var(--faint)}
.lg-title{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);padding:14px 0;text-align:left}
.chev{width:8px;height:8px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(45deg);transition:transform .25s;margin:0 4px 4px 0}
.legend.open .chev{transform:rotate(225deg);margin-bottom:-2px}
.lg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.lg-body>.lg-grid{overflow:hidden;min-height:0}
.legend.open .lg-body{grid-template-rows:1fr}
.legend.open .lg-grid{padding:4px 0 22px}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 18px}
.legend-btn[aria-expanded="true"]{color:var(--cyan);border-color:rgba(34,230,255,.45)}
.lg-grid .lg{display:flex;align-items:center;gap:10px;font-size:12px;color:#aeb4bc}
.lg-grid .lg svg{flex:none;overflow:visible}
.lg-grid .lg b{display:block;color:var(--ink);font-weight:600;font-size:11px;letter-spacing:.12em}
.foot{max-width:1400px;margin:26px auto 0;font-family:var(--mono);font-size:10px;color:#4a4f57;letter-spacing:.05em}
.foot code{font-family:inherit;color:var(--mute)}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:80vh;overflow:auto;background:#0b0c0f;border-top:1px solid #23262d;border-radius:20px 20px 0 0;padding:14px 22px calc(env(safe-area-inset-bottom) + 28px);transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;visibility:hidden;z-index:10}
.sheet.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.grab{width:38px;height:4px;border-radius:2px;background:#2b2e35;margin:0 auto 14px}
.close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;color:var(--mute);font-size:14px}
.sh-k{font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:4px}
.sh-t{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:8px 34px 4px 0;line-height:1.25}
.sh-s{font-size:13px;color:var(--mute)}
.sh-row{display:flex;gap:14px;align-items:center;margin-top:18px;font-size:14px}
.sh-row svg{width:22px;height:22px;flex:none}
.sh-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase;margin:22px 0 8px}
.conf{font-family:var(--mono);font-size:26px;letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 14px rgba(34,230,255,.45)}
.sh-list{list-style:none;font-size:14px;line-height:1.5;color:#c8cdd4}
.sh-list li{padding:8px 0;border-top:1px solid #17191d;display:flex;gap:12px;align-items:center}
.sh-list li:first-child{border-top:0}
.sh-list svg{width:20px;height:20px;flex:none}
.sh-list .n{font-size:12px;color:var(--mute);display:block}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid #5d636c;flex:none}
.chk.on{border-color:var(--cyan);background:var(--cyan)}
.gbig{display:flex;align-items:center;gap:12px;margin-top:6px}
.gbig .gname{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--ink)}
@media (min-width:900px){
  .sheet{left:auto;right:24px;bottom:auto;top:24px;width:400px;max-height:calc(100vh - 48px);border:1px solid #23262d;border-radius:18px;transform:translateX(120%)}
  .sheet.on{transform:none}
  .grab{display:none}
  .top{display:grid;grid-template-columns:auto 1fr;column-gap:48px;align-items:end}
  .brand{grid-column:1/-1}
  .hero{grid-row:2;margin-top:22px}
  .stats,.now,.next{grid-column:2}
  .stats{grid-row:2;align-self:end;margin:0 0 6px}
}

/* public: compact band headers */
.pub .o-h .band-h{height:52px}
.pub .o-v .band-h{padding:20px 0 10px 100px}

/* embed (?embed=1): no page chrome, compact, always horizontal */
.ebar{display:none}
html.embed body{padding:10px 0 0;min-height:0}
html.embed .top,html.embed .legend,html.embed .foot{display:none}
html.embed .ebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 14px 4px;font-size:11.5px;color:var(--ink)}
html.embed .ebar .pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
html.embed .ebar .m{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
html.embed .ebar .v{color:var(--violet)}
html.embed .ebar a{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--mute);text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:3px 9px}
html.embed .o-h{margin:0;padding:0 12px 10px}
html.embed .o-h .band-h{padding-top:2px}

.o-v .seg-name{white-space:normal;line-height:1.45}
