/* Departto — Rail Six-clean layout, Union Station billboard board, GO green. */
:root{
  --bg:#0b100d; --panel:#11171400; --card:#131a16; --card2:#0e130f;
  --ink:#e9f2ec; --dim:#9db3a5; --faint:#6d8272;
  --go:#007a33; --go-bright:#2fbf71; --line:#223028;
  --amber:#ffb000; --red:#ff5347; --led:#eafff1;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.5}
a{color:var(--go-bright);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 16px 48px}
header.site{display:flex;align-items:center;gap:12px;padding:16px 0 8px;flex-wrap:wrap}
.logo{font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.logo .dot{color:var(--go-bright)}
.logo:hover{text-decoration:none}
nav.main{margin-left:auto;display:flex;gap:16px;font-size:15px;flex-wrap:wrap}
@media(max-width:640px){
  header.site{gap:6px 10px;padding:12px 0 4px}
  .logo{font-size:22px}
  nav.main{margin-left:0;width:100%;gap:6px 14px;font-size:14px;padding:2px 0 6px}
  nav.main a{white-space:nowrap}
}
nav.main a{color:var(--dim)}
nav.main a:hover{color:var(--ink);text-decoration:none}
.tagline{color:var(--faint);font-size:13px;margin:0 0 14px}

/* ---- the billboard board ---- */
.board{background:#04070a;border:1px solid #1d2a21;border-radius:18px;
  padding:18px 18px 10px;box-shadow:0 10px 34px rgba(0,0,0,.5);margin:10px 0 18px}
.board .sign{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid #1d2a21;padding-bottom:10px}
.led{font-family:"DotGothic16","Courier New",monospace;letter-spacing:.04em;color:var(--led)}
.sign .station{font-size:30px;line-height:1.1}
.sign .clock{margin-left:auto;font-size:20px;color:var(--dim)}
.sign .sub{width:100%;color:var(--dim);font-size:13px}
.fresh{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);padding:9px 0 2px}
.fresh .pulse{width:9px;height:9px;border-radius:50%;background:var(--go-bright);box-shadow:0 0 8px var(--go-bright)}
.fresh.stale .pulse{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.fresh .livebadge{font-weight:700;color:var(--go-bright);letter-spacing:.06em;font-size:12px}
.fresh.stale .livebadge{color:var(--amber)}
.hero{padding:14px 0 6px;text-align:left}
.hero .when{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.hero .time{font-size:56px;line-height:1}
.hero .count{font-size:30px;color:var(--amber)}
.hero .dest{font-size:21px;font-weight:600;margin-top:4px}
.hero .meta{color:var(--dim);font-size:14px;margin-top:2px}
.statusword{font-size:22px}
.statusword.delayed{color:var(--red)} .statusword.ontime{color:var(--go-bright)} .statusword.boarding{color:var(--amber)}
.dep{border-top:1px solid #1a251d;padding:11px 0}
.dep .row{display:flex;align-items:baseline;gap:12px}
.dep .t{font-size:20px;font-weight:700;min-width:74px}
.dep .t .pred{color:var(--amber)}
.dep .t .was{color:var(--faint);text-decoration:line-through;font-weight:400;font-size:15px;margin-left:6px}
.dep .d{flex:1}
.dep .d .dest{font-weight:600}
.dep .d .meta{color:var(--dim);font-size:13px}
.dep .mins{color:var(--dim);font-size:14px;white-space:nowrap}
.chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:2px}
.chip.delayed{background:#3a1512;color:#ff8d84}.chip.ontime{background:#0d2f1b;color:#5fd598}
.chip.boarding{background:#3a2c05;color:#ffca4d}.chip.sched{background:#1c2620;color:var(--dim)}
.chip.sg{background:#33270a;color:var(--amber);border:1px solid #6b5516}
.chip.line{color:#fff}
.dirbar{display:flex;gap:8px;margin:4px 0 10px;flex-wrap:wrap}
.dirbar button,.seg button{background:#182219;color:var(--dim);border:1px solid #26382c;
  border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.dirbar button.on,.seg button.on{background:var(--go);color:#fff;border-color:var(--go)}
.seg{display:inline-flex;gap:8px}
.daynote{color:var(--amber);font-size:13px;padding:6px 0}
details.full{margin-top:6px} details.full summary{cursor:pointer;color:var(--dim);font-size:14px;padding:8px 0}

/* ---- generic cards/sections ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:14px 0}
.card h2{margin:0 0 8px;font-size:20px}
.card h3{margin:14px 0 6px;font-size:16px}
.muted{color:var(--dim)} .small{font-size:13px}
.alert{border-radius:var(--radius);padding:14px 16px;margin:12px 0;border:1px solid}
.alert.warn{background:#241a05;border-color:#6b5516}
.alert.bad{background:#2a100d;border-color:#7c2d24}
.alert h3{margin:0 0 4px;font-size:16px}
.alert p{margin:4px 0}
.stationlist{list-style:none;margin:0;padding:0}
.stationlist li{border-top:1px solid var(--line)}
.stationlist li:first-child{border-top:none}
.stationlist a{display:flex;gap:10px;align-items:baseline;padding:11px 2px;color:var(--ink)}
.stationlist a:hover{text-decoration:none;background:#16211a}
.stationlist .nm{flex:1;font-weight:600}
.stationlist .nx{color:var(--dim);font-size:13px}
.linedot{width:11px;height:11px;border-radius:50%;flex:none;position:relative;top:1px}
select,input[type=text]{background:#0d130e;color:var(--ink);border:1px solid #2b3d31;border-radius:10px;
  padding:10px;font:inherit;width:100%}
label.fl{display:block;font-size:13px;color:var(--dim);margin:10px 0 4px}
.btn{background:var(--go);color:#fff;border:none;border-radius:999px;padding:11px 22px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:#009544}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}.hero .time{font-size:44px}.sign .station{font-size:24px}}
.mapbox{height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0a0f0c;position:relative}
.mapfallback{padding:16px;color:var(--dim)}
.maplibregl-popup-content{background:#131a16;color:var(--ink);border:1px solid var(--line);border-radius:10px}
.maplibregl-popup-content a{color:var(--go-bright);font-weight:600}
.maplibregl-ctrl-attrib{background:rgba(10,15,12,.75)!important;color:#8aa392!important;font-size:10px}
.maplibregl-ctrl-attrib a{color:#8aa392!important}
/* Ad placeholder stays hidden until a real AdSense unit is installed —
   an empty labelled box must never render for visitors. To go live:
   replace the .ad-slot contents with the ad unit and remove display:none. */
.ad-slot{display:none;border:1px dashed #2b3d31;border-radius:var(--radius);color:var(--faint);
  text-align:center;padding:14px;margin:16px 0;font-size:12px;letter-spacing:.08em}
footer.site{border-top:1px solid var(--line);margin-top:28px;padding:16px 0;color:var(--faint);font-size:13px}
.searchrow{margin:10px 0}
.kbd{background:#1c2620;border-radius:6px;padding:0 6px;font-size:13px}

/* ---- snake stop line (v14) ---- */
.snake{padding:6px 0 2px}
.srow{position:relative;display:flex;margin:0}
.srow.rev{flex-direction:row-reverse}
.srow::before{content:"";position:absolute;top:7px;left:var(--tl,12.5%);width:var(--tw,75%);height:3px;background:var(--go);border-radius:2px;opacity:.85}
.scell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 2px;color:var(--ink)}
.scell:hover{text-decoration:none}
.sdot{width:15px;height:15px;border-radius:50%;background:var(--card);border:3px solid var(--go-bright);z-index:1;transition:transform .15s ease,background .15s ease}
.scell:hover .sdot{transform:scale(1.3);background:var(--go-bright)}
.scell.first .sdot,.scell.last .sdot{background:var(--go-bright);width:17px;height:17px;box-shadow:0 0 0 4px rgba(47,191,113,.18)}
.sname{margin-top:7px;font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)}
.scell.first .sname,.scell.last .sname{color:#fff}
.sname{overflow-wrap:break-word}
.stime{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.sturn{width:0;height:16px;border-left:3px solid var(--go);opacity:.85}