/* Dock Board. An operations board, not a brochure: dark chrome, tabular numerals, and the
   map doing the talking. Everything sized so the numbers read across a room. */
:root{
  --ink:#0B0E14;
  --slab:#141926;
  --line:#232B3D;
  --paper:#E9EDF6;
  --dim:#8B95AC;
  --live:#3DDC97;      /* bikes available */
  --dock:#4FA3FF;      /* docks free */
  --dry:#FF5C5C;       /* nothing there */
  --amber:#FFB020;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
  display:flex;flex-direction:column;overflow:hidden}

/* ---------------------------------------------------------------- top bar */
.bar{display:flex;align-items:center;gap:24px;padding:12px 20px;background:var(--slab);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.plate{display:grid;place-items:center;width:38px;height:38px;border-radius:3px;
  background:var(--live);color:var(--ink);font:800 15px/1 var(--mono);letter-spacing:.06em}
.brand h1{margin:0;font-size:1.05rem;letter-spacing:.01em}
.brand p{margin:2px 0 0;font:600 .64rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

.stats{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:3px;min-width:74px}
.stat b{font:700 1.5rem/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font:600 .58rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stat.warn b{color:var(--amber)}

.clock{display:flex;align-items:center;gap:8px;font:600 .62rem/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.dot.on{background:var(--live);box-shadow:0 0 0 0 rgba(61,220,151,.55);animation:ping 2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}

/* ---------------------------------------------------------------- layout */
main{flex:1;display:flex;min-height:0}
#map{flex:1;min-width:0}
.rail{width:330px;flex:0 0 330px;background:var(--slab);border-left:1px solid var(--line);
  padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}

.mode{display:flex;gap:8px}
.mode button{flex:1;padding:11px 8px;background:transparent;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;cursor:pointer;
  font:700 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.mode button:hover{color:var(--paper);border-color:var(--dim)}
.mode button.on{background:var(--live);border-color:var(--live);color:var(--ink)}
#mode-dock.on{background:var(--dock);border-color:var(--dock)}

.legend{margin:0;font:600 .6rem/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

.near{padding:12px;background:transparent;color:var(--paper);border:1px dashed var(--line);
  border-radius:3px;cursor:pointer;font:700 .68rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;transition:border-color .15s ease,color .15s ease}
.near:hover{border-color:var(--live);color:var(--live)}

.panel{border-top:1px solid var(--line);padding-top:14px;flex:1}
.hint{margin:0;color:var(--dim);font-size:.88rem;line-height:1.55}
.stationName{margin:0 0 2px;font-size:1.12rem;line-height:1.2}
.stationSub{margin:0 0 14px;font:600 .6rem/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.counts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.count{background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:11px 12px}
.count b{display:block;font:700 1.5rem/1 var(--mono);font-variant-numeric:tabular-nums}
.count span{font:600 .55rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.count.live b{color:var(--live)}
.count.dock b{color:var(--dock)}
.count.dry b{color:var(--dry)}
.bar-meter{height:6px;border-radius:3px;background:var(--ink);border:1px solid var(--line);overflow:hidden;margin-bottom:8px}
.bar-meter i{display:block;height:100%;background:var(--live)}
.note{margin:0;color:var(--dim);font-size:.82rem;line-height:1.5}

.nearList{list-style:none;margin:0;padding:0}
.nearList li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.nearList li:hover .n{color:var(--live)}
.nearList .n{flex:1;font-size:.9rem}
.nearList .d{font:600 .6rem/1 var(--mono);color:var(--dim);white-space:nowrap}
.nearList .c{font:700 .95rem/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--live);min-width:26px;text-align:right}

.trend{border-top:1px solid var(--line);padding-top:14px}
.trend-label,.trend-note{margin:0;font:600 .58rem/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
#spark{width:100%;height:44px;margin:8px 0 6px;display:block}

footer{background:var(--slab);border-top:1px solid var(--line);padding:10px 20px;
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
footer p{margin:0;font-size:.72rem;color:var(--dim);max-width:78ch}
footer a{color:var(--live)}

.maplibregl-popup-content{background:var(--slab);color:var(--paper);border:1px solid var(--line);
  border-radius:3px;font-family:var(--sans);padding:10px 12px}
.maplibregl-popup-tip{border-top-color:var(--slab)!important;border-bottom-color:var(--slab)!important}

@media (max-width:900px){
  body{overflow:auto}
  main{flex-direction:column}
  #map{height:52vh;flex:none}
  .rail{width:auto;flex:none;border-left:0;border-top:1px solid var(--line)}
  .stats{gap:18px;order:3;width:100%;margin-left:0}
  .stat b{font-size:1.2rem}
  .clock{margin-left:auto}
}