/* Layout: quiet shapes (a big circle and the station's line ending in a ring) sit behind
   white cards. Left column: the station card and the leave-by card. Right column: Citi Bike
   and station status. Stacks to one column on phones. */
.decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.decor .blob { position: absolute; border-radius: 50%; background: var(--shape); }
.decor .b1 { width: 520px; height: 520px; left: -180px; top: 220px; }
.decor .b2 { width: 160px; height: 160px; right: 8%; top: -40px; opacity: .8; }
.decor .tube { position: absolute; left: 46%; top: -20px; width: 26px; height: 150px; border-radius: 0 0 13px 13px; background: var(--tube, #0062cf); opacity: .9; }
.decor .ring { position: absolute; left: calc(46% - 7px); top: 112px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 8px solid var(--tube, #0062cf); }
@media (max-width: 700px) { .decor .tube, .decor .ring { left: auto; right: 24px; } .decor .ring { right: 17px; } }

.wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; display: grid; gap: var(--space-4-5); }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-6); }
.desk-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-4-5); align-items: start; }
.col { display: grid; gap: var(--space-4-5); min-width: 0; }
@media (max-width: 860px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col { display: contents; }
  .leave { order: -1; }                 /* on a phone the first question is "when do I go?" */
}

/* Station card */
.band { display: flex; height: 14px; }
.band i { flex: 1; background: var(--route-color); }
.station-head { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: flex-start; gap: var(--space-1) var(--space-3); }
.station-head h1 { text-wrap: balance; }
.station-head .fresh { white-space: nowrap; }
.lines { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2-5); }
.dir + .dir { margin-top: var(--space-1); }
.dir h3 { margin: var(--space-4-5) 0 var(--space-1); }
.dep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.dir h3 + .dep { border-top: 0; }
.dep .to { min-width: 0; overflow-wrap: anywhere; }
.dep .min { text-align: right; white-space: nowrap; }
.dep .min small { margin-left: var(--space-0-5); }
.dep.gone { opacity: var(--opacity-muted); }

/* Leave by */
.leave .seg { margin: var(--space-3-5) 0 var(--space-3); }
.leave .sub { margin-top: var(--space-1); }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.leave .when { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }

/* Citi Bike */
.bike-icon { width: 26px; height: 26px; color: var(--bike); flex: none; }
.dock { display: grid; gap: var(--space-2); }
.dock-name { display: flex; justify-content: space-between; gap: var(--space-2-5); }
.dock-name span:first-child { min-width: 0; overflow-wrap: anywhere; }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1-5); }
.dock.small .counts { display: flex; flex-wrap: wrap; gap: var(--space-3-5); }

/* Station status */
.status h2 { margin-bottom: var(--space-1); }
.stepfree { display: flex; gap: var(--space-2); align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3-5); }
.tile { text-align: center; }
.notes { display: grid; gap: var(--space-2); margin-top: var(--space-3-5); }

.settings-walk { margin-top: var(--space-3-5); }

.dep .then { display: block; }
.walk { white-space: nowrap; }
.tile-label { margin-bottom: var(--space-1-5); }