/* PMTransit: transit-map styles. Colors mean lines; everything else is text. */
.tm{position:relative;width:100%;min-height:320px;overflow:hidden;border-radius:18px;
  --k1:1;--k2:1;--k3:1;--kr:1;--sw:5px;
  --tm-bg:#0f1115;--tm-bg2:#161920;--tm-text:#e8eaf0;--tm-mute:#9aa3b2;--tm-fill:#14171d;--tm-stroke:#e8eaf0;--tm-rail-dim:.55;
  --tm-gold:#ffd54a;--tm-good:#5fcf83;--tm-hud:rgba(16,18,24,.78);--tm-hud-border:rgba(255,255,255,.1);--tm-tip:#1c1f26;--tm-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:radial-gradient(1200px 600px at 20% 0%,rgba(255,213,74,.06),transparent 60%),var(--tm-bg);font-family:var(--tm-font)}
.tm.tm-light{--tm-bg:#f7f7f9;--tm-bg2:#ffffff;--tm-text:#111318;--tm-mute:#5f6673;--tm-fill:#ffffff;--tm-stroke:#111318;--tm-rail-dim:.6;
  --tm-gold:#e0a400;--tm-good:#16a34a;--tm-hud:rgba(255,255,255,.86);--tm-hud-border:rgba(0,0,0,.08);--tm-tip:#111318;
  background:radial-gradient(1200px 600px at 20% 0%,rgba(22,163,74,.06),transparent 60%),var(--tm-bg)}
.tm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tm.is-panning .tm-svg{cursor:grabbing}
.tm text{font-family:var(--tm-font);fill:var(--tm-text);pointer-events:none}

/* lanes */
.tm-lane .rail{fill:none;stroke:var(--c);stroke-width:var(--sw);stroke-linecap:round;vector-effect:non-scaling-stroke;transition:opacity .45s,stroke-width .3s}
.tm-lane .rail-glow{fill:none;stroke:var(--c);stroke-width:calc(var(--sw) * 5);stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s}
.tm-lane.is-active .rail-glow{opacity:.14}
.tm-lane .rail-hit{fill:none;stroke:transparent;stroke-width:28px;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:stroke;outline:none}
.tm-lane .rail-hit:focus-visible ~ .lane-label{text-decoration:underline}
.tm-lane .lane-label{font-size:calc(22px * var(--k2));font-weight:800;letter-spacing:-.01em;transition:opacity .4s}
.tm-lane .lane-label .num{fill:var(--c);font-weight:900;font-size:.78em;letter-spacing:.04em}
.tm-lane .lane-label .free{fill:var(--tm-good);font-size:.72em;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.tm-pro .tm-lane:not(.is-started) .rail{opacity:var(--tm-rail-dim)}
.tm-lane.is-lit .rail{filter:drop-shadow(0 0 6px var(--c))}

/* express + routes */
.express-seg{fill:none;stroke:var(--tm-gold);stroke-width:calc(var(--sw) * .9);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.9;transition:opacity .45s,stroke-width .3s}
.express-seg:not(.done){stroke-dasharray:2 10;opacity:.6}
.tm[data-route="express"] .express-seg{stroke-width:calc(var(--sw) * 1.5);opacity:1;filter:drop-shadow(0 0 8px rgba(255,213,74,.55))}
.tm[data-route="express"]:not([data-level="2"]) .tm-lane:not(.is-active) .rail{opacity:.22}
.tm[data-route="express"]:not([data-level="2"]) .tm-lane:not(.is-active) .lane-label{opacity:.55}
.tm[data-route="express"]:not([data-level="2"]) .tm-station:not(.is-core):not(.is-active){opacity:.28}
.company-path{fill:none;stroke:var(--co);stroke-width:calc(var(--sw) * 1.1);stroke-dasharray:14 10;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px var(--co))}
.tm[data-route^="company"]:not([data-level="2"]) .tm-lane:not(.is-active) .rail{opacity:.25}
.tm[data-route^="company"]:not([data-level="2"]) .express-seg{opacity:.18}
.tm[data-route^="company"]:not([data-level="2"]) .tm-station:not(.on-route):not(.is-active){opacity:.25}
.tm-train .train{opacity:.97}
.tm[data-level]:not([data-level="0"]) .tm-train,.tm[data-route^="company"] .tm-train{display:none}

/* shared glyphs (rider car, station, stop, line) used by the map, the legend and host pages */
.sym-car .car-body{fill:var(--tm-gold);stroke:rgba(0,0,0,.35);stroke-width:1}
.sym-car .car-win{fill:var(--tm-bg)}
.sym-car .car-light{fill:#fff}
.sym-car .car-stripe{fill:rgba(0,0,0,.22)}
.sym-station .sym-main{fill:var(--tm-fill);stroke:var(--c);stroke-width:3.2px}
.sym-core .sym-main{stroke:var(--tm-stroke);stroke-width:3.4px}
.sym-core .sym-outer{fill:none;stroke:var(--c);stroke-width:3px}
.sym-stop .sym-dot{fill:var(--tm-fill);stroke:var(--c);stroke-width:3px}
.sym-rail{fill:none;stroke:var(--c);stroke-width:4px;stroke-linecap:round}
.sym-express{fill:none;stroke:var(--tm-gold);stroke-width:3.5px;stroke-linecap:round}

/* legend */
.tm-legend{position:absolute;z-index:3;left:12px;bottom:10px;display:flex;gap:4px 14px;align-items:center;flex-wrap:wrap;background:var(--tm-hud);border:1px solid var(--tm-hud-border);backdrop-filter:blur(10px);border-radius:980px;padding:5px 14px 5px 10px;font-size:12px;color:var(--tm-mute);max-width:calc(100% - 24px);pointer-events:none}
.tm-legend .lg-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tm-legend .lg-item b{color:var(--tm-text);font-weight:700}
.tm-legend .lg-ic{display:inline-grid;place-items:center;width:30px;height:20px}
.tm-legend .lg-ic svg{width:30px;height:20px;overflow:visible;display:block}
.tm.tm-enter .tm-legend{opacity:0}
.tm.tm-ready .tm-legend{animation:tmFade .6s ease both}

/* stations */
.tm-station{cursor:pointer;outline:none;transition:opacity .45s}
.tm-station circle{transition:r .35s,fill .3s,stroke .3s,opacity .3s}
.tm-station .main{fill:var(--tm-fill);stroke:var(--c);stroke-width:3.2px;vector-effect:non-scaling-stroke;r:calc(10px * var(--kr))}
.tm-station.is-core .main{r:calc(10px * var(--kr));stroke:var(--tm-stroke);stroke-width:3.4px}
.tm-station.is-core .outer{fill:none;stroke:var(--c);stroke-width:3px;vector-effect:non-scaling-stroke;r:calc(16px * var(--kr))}
.tm-station .ring-bg,.tm-station .ring{fill:none;stroke-width:3px;vector-effect:non-scaling-stroke;r:calc(16px * var(--kr));opacity:0}
.tm-station.is-core .ring-bg,.tm-station.is-core .ring{r:calc(22px * var(--kr))}
.tm-station .ring-bg{stroke:var(--tm-text);opacity:.12}
.tm-station .ring{stroke:var(--tm-good);stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1),opacity .3s}
.tm-pro .tm-station.is-started .ring-bg,.tm-pro .tm-station.is-started .ring{opacity:1}
.tm-pro .tm-station.is-started .ring-bg{opacity:.12}
.tm-station.is-recalled .main{fill:var(--c)}
.tm-station.is-complete .main{fill:var(--tm-good);stroke:var(--tm-good)}
.tm-station.is-complete.is-core .main{stroke:var(--tm-good)}
.tm-station .check{display:none;font-size:calc(11px * var(--kr));font-weight:900;fill:#fff}
.tm-station.is-complete .check{display:block}
.tm-station .halo{fill:var(--tm-gold);opacity:0;r:calc(14px * var(--kr))}
.tm-station.is-next .halo{animation:tmPulse 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.tm-station .in,.tm-stop .in{transform-box:fill-box;transform-origin:center}
.tm-station.is-active .main{stroke-width:4.5px}
.tm-station.is-active .halo{opacity:.18;r:calc(26px * var(--kr));fill:var(--c)}
.tm-station:focus-visible .main{stroke:var(--tm-gold);stroke-width:5px}
.tm-station:hover .main{stroke-width:4.5px}
.tm-station .label{font-size:calc(13px * var(--k1));font-weight:600;opacity:0;transition:opacity .35s;paint-order:stroke;stroke:var(--tm-bg);stroke-width:4px;stroke-linejoin:round}
.tm-station.is-core .label{font-weight:800}
.tm[data-detail="1"] .tm-station.is-core .label,.tm[data-detail="2"] .tm-station .label,.tm[data-level="1"] .tm-station.in-lane .label,.tm[data-level="2"] .tm-station.in-lane .label,.tm-station:hover .label,.tm-station:focus-visible .label,.tm-station.is-active .label{opacity:1}
.tm[data-level="0"][data-detail="0"] .tm-station:not(:hover):not(:focus-visible) .label{opacity:0}
.tm-station.is-locked .main{stroke-opacity:.4;fill:var(--tm-bg2)}
.tm-station.is-locked .outer{stroke-opacity:.4}
.tm-station.is-locked .label{opacity:0}
.tm[data-detail="2"] .tm-station.is-locked .label,.tm[data-level="1"] .tm-station.is-locked.in-lane .label{opacity:.55}
.tm-station .badge{display:none}
.tm-station .badge circle{fill:var(--tm-bg);stroke:var(--co,var(--tm-text));stroke-width:2px}
.tm-station .badge text{fill:var(--tm-text);font-size:10px;font-weight:900}
.tm-station.is-must .badge circle{fill:var(--co,var(--tm-text));stroke:var(--co,var(--tm-text))}
.tm-station.is-must .badge text{fill:#fff}
.tm-station.on-route.is-must .main{stroke:var(--co)}
.tm[data-route^="company"] .tm-station.on-route .badge{display:block}
/* level focus */
.tm[data-level="1"] .tm-lane:not(.is-active) .rail{opacity:.16}
.tm[data-level="1"] .tm-lane:not(.is-active) .lane-label{opacity:.35}
.tm[data-level="1"] .tm-station:not(.in-lane){opacity:.22}
.tm[data-level="1"] .express-seg{opacity:.35}
.tm[data-level="2"] .tm-lane:not(.is-active) .rail{opacity:.05}
.tm[data-level="2"] .tm-lane:not(.is-active) .lane-label{opacity:.07}
.tm[data-level="2"] .tm-lane.is-active .rail{opacity:.45}
.tm[data-level="2"] .tm-lane.is-active .rail-glow{opacity:0}
.tm[data-level="2"] .tm-station:not(.in-lane){opacity:.05}
.tm[data-level="2"] .tm-station:not(.in-lane) .label{opacity:0 !important}
.tm[data-level="2"] .tm-station.in-lane:not(.is-active){opacity:.4}
.tm[data-level="2"] .tm-station.in-lane:not(.is-active) .label{opacity:.5}
.tm[data-level="2"] .express-seg,.tm[data-level="2"] .company-path{opacity:.08}
.tm[data-level="2"] .tm-station.is-active .halo{opacity:.22}

/* platform (level 2) */
.tm-plat .branch{fill:none;stroke:var(--c);stroke-width:calc(var(--sw) * .8);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tm-stop{cursor:pointer;outline:none}
.tm-stop .hit{fill:transparent;stroke:none;pointer-events:fill}
.tm-stop .in{animation:tmPop .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 40ms + 380ms)}
.tm-stop .slabel,.tm-stop .role{animation:tmFade .4s ease both;animation-delay:calc(var(--i) * 40ms + 520ms)}
.tm-stop .dot{fill:var(--tm-fill);stroke:var(--c);stroke-width:3px;vector-effect:non-scaling-stroke;r:calc(7px * var(--kr));transition:fill .3s}
.tm-stop.role-anchor .dot{r:calc(8.5px * var(--kr));stroke-width:3.5px}
.tm-stop.is-done .dot{fill:var(--c)}
.tm-stop .check{display:none;font-size:calc(9px * var(--kr));font-weight:900;fill:#fff}
.tm-stop.is-done .check{display:block}
.tm-stop .halo{fill:var(--tm-gold);opacity:0;r:calc(14px * var(--kr))}
.tm-stop.is-current .halo{opacity:.25}
.tm-stop.is-current .dot{stroke:var(--tm-gold);stroke-width:4px}
.tm-stop:hover .dot,.tm-stop:focus-visible .dot{stroke-width:4.5px}
.tm-stop .slabel{font-size:calc(11.5px * var(--k3));font-weight:600;fill:var(--tm-text);paint-order:stroke;stroke:var(--tm-bg);stroke-width:4px;stroke-linejoin:round}
.tm-stop .role{font-size:calc(9.5px * var(--k3));font-weight:800;letter-spacing:.12em;text-transform:uppercase;fill:var(--c)}

/* hud */
.tm-hud{position:absolute;z-index:3;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;flex-wrap:wrap}
.tm-hud>*{pointer-events:auto}
.tm-crumbs{display:flex;align-items:center;gap:6px;background:var(--tm-hud);border:1px solid var(--tm-hud-border);backdrop-filter:blur(10px);border-radius:980px;padding:6px 12px 6px 8px;font-size:12.5px;color:var(--tm-mute);max-width:100%}
.tm-crumbs .c{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.tm-crumbs .c.on{color:var(--tm-text);font-weight:700;cursor:default}
.tm-crumbs .c i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:0}
.tm-crumbs .sep{opacity:.5}
.tm-back{border:none;background:var(--tm-text);color:var(--tm-bg);width:24px;height:24px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;font-weight:800;display:grid;place-items:center;padding:0 0 2px}
.tm-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tm-seg{display:flex;gap:2px;background:var(--tm-hud);border:1px solid var(--tm-hud-border);backdrop-filter:blur(10px);border-radius:980px;padding:3px}
.tm-seg button,.tm-seg select{border:none;background:transparent;color:var(--tm-mute);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:980px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tm-seg button.on{background:var(--tm-text);color:var(--tm-bg)}
.tm-seg button i.gold{width:9px;height:9px;border-radius:50%;background:var(--tm-gold);display:inline-block}
.tm-seg select{appearance:none;-webkit-appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 8px) 55%;background-size:4px 4px;background-repeat:no-repeat;max-width:170px}
.tm-next{display:flex;flex-direction:column;align-items:flex-start;gap:0;border:1px solid rgba(255,213,74,.5);background:var(--tm-hud);backdrop-filter:blur(10px);color:var(--tm-text);border-radius:14px;padding:7px 12px;font:inherit;cursor:pointer;text-align:left;line-height:1.2;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.tm-next .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tm-gold);font-weight:800}
.tm-next b{font-size:13px}
.tm-next .sub{font-size:11px;color:var(--tm-mute)}
.tm-next.done{border-color:var(--tm-good)}
.tm-next.done .lbl{color:var(--tm-good)}
.tm-next:hover{border-color:var(--tm-gold)}

/* tooltip */
.tm-tip{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 10px));background:var(--tm-tip);color:#fff;border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.35;width:max-content;max-width:240px;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tm-tip.on{opacity:1}
.tm-tip .kind{display:block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tm-gold);margin-bottom:2px}
.tm-tip b{display:block;font-size:12.5px}
.tm-tip span{display:block;color:rgba(255,255,255,.8);margin-top:2px}
.tm-tip small{display:block;color:rgba(255,255,255,.6);margin-top:4px;font-size:11px}
.tm-tip .tag{display:inline-block;background:var(--tm-gold);color:#111;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:980px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.tm-light .tm-tip{color:#fff}

/* enter animation */
.tm-enter .tm-lane .lane-label{animation:tmFade .5s ease both;animation-delay:calc(var(--i) * 70ms)}
.tm-enter .tm-lane .rail,.tm-enter .tm-lane .rail-glow{stroke-dasharray:1;stroke-dashoffset:1;animation:tmDraw 1s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i) * 70ms + 80ms)}
.tm-enter .tm-station .in{animation:tmPop .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 26ms + 380ms)}
.tm-enter .express-seg{animation:tmFade .6s ease both;animation-delay:calc(var(--i) * 70ms + 1300ms)}
.tm-enter .tm-train{opacity:0}
.tm-ready .tm-train{animation:tmFade 1s ease both}
@keyframes tmFade{from{opacity:0}to{opacity:1}}
@keyframes tmDraw{to{stroke-dashoffset:0}}
@keyframes tmPop{0%{opacity:0;transform:scale(.2)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes tmPulse{0%{opacity:.55;transform:scale(.6)}70%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion: reduce){.tm *{animation:none !important;transition:none !important}}

@media (max-width:760px){
  .tm-hud{left:8px;right:8px;top:8px}
  .tm-crumbs{font-size:12px;padding:5px 10px 5px 6px}
  .tm-crumbs .c{max-width:130px}
  .tm-seg button{padding:5px 9px;font-size:11.5px}
  .tm-seg select{max-width:120px}
  .tm-next{padding:6px 10px}
  .tm-next b{font-size:12px}
  .tm-legend{left:8px;bottom:8px;gap:2px 10px;padding:4px 10px 4px 8px;font-size:11px}
  .tm-legend .lg-item span.lg-tx{display:none}
}