/* Visual polish for the DIY Divvy kiosk display only -- loaded after
main.css and not linked from /op, /57w, or /moomers, so none of this
touches the personal kiosk pages that share those base classes. */

body {
  background: radial-gradient(circle at top, #132a3e 0%, #050a10 65%);
}

/* main.css hides the cursor everywhere ("* {cursor: none;}") for the
physical, touchless personal kiosks -- appropriate once this page is
actually launched, but this page also has an interactive settings
panel while previewing, where an invisible cursor makes it impossible
to see what you're clicking. body.previewing is toggled by divvy.js
based on the persisted "launched" flag; a class selector outranks
main.css's bare "*" regardless of load order, so this reliably wins. */
body.previewing,
body.previewing * {
  cursor: default;
}

/* Shown briefly whenever the settings bar is hidden (Launch, or already
launched on page load) -- there's otherwise no visible hint that Esc is
what brings it back. JS toggles the "visible" class; the actual fade is
this transition, timed to hold fully visible then fade over the last
stretch of the dwell window JS keeps it up for (see showEscHint). Dead
center of the screen, large, and red -- deliberately hard to miss,
since this is the only way back into the settings once launched. */
#esc-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 28px 48px;
  background: rgba(20, 4, 4, 0.95);
  color: #ff5252;
  border: 3px solid #ff2d2d;
  border-radius: 14px;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 45, 45, 0.5), 0 4px 24px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 1000;
}

#esc-hint.visible {
  opacity: 1;
}

#main > .third,
#main > .stations-col {
  padding: 0 12px;
  box-sizing: border-box;
}

/* the merged stations column at twice a .third's width, so each
station's 4 stat boxes get twice the horizontal room -- less wrapping
(e.g. "Scooters") and shorter panels overall */
#main > .stations-col {
  float: left;
  width: 66%;
  display: inline;
}

.stop-name {
  background: transparent;
  letter-spacing: 1px;
  font-size: 130%;
  /* main.css's base .stop-name sets padding-top: 20px -- halved here
  to close up the gap above the first station row. */
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid #1c4c66;
  color: #6fd7ff;
}

#main > .third:nth-child(2) .stop-name {
  color: #ffb347;
  border-bottom-color: #6b431c;
}

/* 3-column grid (indicator | name | empty spacer column, the last one
never populated) rather than one centered inline run -- pins
.station-walk to the same spot on every row regardless of station name
length, and (unlike an absolutely-positioned indicator over padding)
can't be overlapped by a long name: .station-info has its own column
and wraps within it instead of growing into the indicator's space. The
unused third column mirrors the first so .station-info still centers
in the middle of the row rather than the middle of the leftover space. */
.direction-name.arrival {
  background: #16324a;
  border-radius: 6px;
  margin: 10px 10px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  font-size: 145%; /* overrides main.css's div.direction-name 120% -- walk indicator + station name both read off this */
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  align-items: center;
}

.station-walk {
  color: #6fd7ff;
  white-space: nowrap;
  text-align: left;
  padding-left: 16px;
}

.station-info {
  min-width: 0;
}

.station-note {
  font-size: 65%;
  font-style: italic;
  color: #9fb3c0;
  margin-top: 2px;
}

/* Same left/right margin as .direction-name.arrival above it, so the 4
stat boxes together span exactly the same width as the station name
bar instead of reading narrower/inset under it.

NOTE: earlier revisions of these rules used plain class selectors
(".divvy-station" etc), which main.css's own higher-specificity
"div.divvy-station" rules silently beat regardless of load order --
none of several rounds of "shrink it more" were actually taking
effect. Fixed by matching main.css's specificity (div.divvy-*) so
cascade order (this file loads after main.css) decides it instead. The
sizes below are chosen fresh against that fix, not layered on top of
the broken measurements from before it. */
div.divvy-station {
  margin-bottom: 33px;
  margin-left: 10px;
  margin-right: 10px;
  gap: 16px; /* main.css's default 10px read as too tight once the boxes themselves shrank */
}

div.divvy-status {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

div.divvy-header {
  background: #123047;
  color: #9fdfff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 88%;
  line-height: 1.25;
  /* main.css's 8px top/bottom padding is fixed regardless of font-size,
  so at this smaller font it was dominating the box's height and
  fighting the "shrink it more" goal -- trimmed down here to shrink
  proportionally with the text */
  padding: 6px;
  /* tall enough for 2 lines at this line-height, plus the 6px top/bottom
  padding above -- verified against the actual rendered 2-line height
  ("Classic Bikes"/"Empty Docks" wrap, "Scooters" doesn't) rather than
  guessed, since an em value that's a hair short silently loses to
  whichever header wraps and floors out at the min instead */
  min-height: calc(2 * 1.25em + 12px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* "Scooters" is a single word with no space to wrap on -- at narrower
  widths (e.g. the 3-column DIY kiosk layout) it was overflowing past
  the box and getting silently clipped on both sides by .divvy-status's
  overflow:hidden, rendering as "COOTER". This lets a lone long word
  break mid-word instead of overflowing uncontained. */
  overflow-wrap: break-word;
  word-break: break-word;
}

div.divvy-data {
  background: #0a1620;
  font-size: 180%; /* needs to read at a glance from kiosk viewing distance, not just be legible up close */
  /* same fixed-padding-fights-font-shrink issue as .divvy-header above
  -- main.css's 15px top/bottom padding */
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}

/* Inline next to the big number in .divvy-data (not the label in
.divvy-header) -- a plain 100% keeps it sized off .divvy-data's own
155% font-size, so it reads as large as the number it's next to,
rather than the smaller header text. */
.divvy-icon {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  font-size: 100%;
  color: #6fd7ff;
}

.bike-box {
  display: flex;
  align-items: center;
  gap: 12px;
  /* a shade up from .divvy-data/.bike-info's near-black #0a1620 -- this
  box needs to read as distinct from the page background (which ranges
  down to just as dark), not blend into it */
  background: #142a3e;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  margin: 0 10px 22px;
  padding: 10px 16px;
}

/* Vehicle-type icon (bike/scooter) alone, at full height -- the bearing
arrow now sits inline with the walking icon in .bike-walk instead (same
font-size there, so it matches that icon's size without extra rules). */
.bike-direction {
  flex: 0 0 auto;
  font-size: 170%;
  color: #ffb347;
}

.bike-info {
  flex: 1;
  min-width: 0;
}

.bike-address {
  font-size: 95%;
  color: #eee;
  margin-bottom: 4px;
}

.bike-type-icon {
  color: #ffb347;
}

.bike-walk {
  font-size: 120%;
  color: #ffb347;
}

.bike-walk .bike-blocks {
  color: #9fb3c0;
  font-size: 75%;
  margin-left: 4px;
}

/* #main's content can otherwise be covered by the fixed bar below it --
reserved space sized to comfortably fit the single-row controls layout
at typical kiosk/desktop widths (verified via headless Chrome). Scoped
to body.previewing only -- once actually launched, the bar is gone and
this would just be permanent dead space on the real kiosk display. */
body.previewing #main {
  padding-bottom: 165px;
  box-sizing: border-box;
}

#kiosk-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 24px;
  /* distinctly lighter/more saturated than the near-black tones used
  everywhere else on this page (body/.divvy-data/.bike-box all sit
  around #050a10-#123047), so this reads as a separate control bar
  rather than blending in as another data panel */
  background: #14496b;
  /* a plain border-top reads too subtle at a glance -- an animated glow
  behind a gradient top edge (matching the title's cyan/teal gradient)
  is much harder to miss than a static line */
  border-top: 3px solid transparent;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6);
  animation: controls-glow 3s ease-in-out infinite;
  font-size: 60%; /* body is 140% -- this brings a settings form back to a normal reading size */
  font-weight: normal;
  box-sizing: border-box;
  z-index: 1000;
}

#kiosk-controls::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4fc3f7, #29e0b8);
}

@keyframes controls-glow {
  0%, 100% { box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6), 0 -6px 18px rgba(41, 224, 184, 0.25); }
  50%      { box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6), 0 -10px 32px rgba(79, 195, 247, 0.55); }
}

.controls-heading {
  font-size: 105%;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #4fc3f7;
  margin-bottom: 6px;
}

.controls-intro {
  font-size: 100%;
  color: #cfe9f7;
  margin: 0 0 10px;
  line-height: 1.3;
}

.controls-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 16px;
  overflow-x: auto; /* scrolls instead of wrapping/clipping on a narrower window */
}

.control-row {
  flex: 1 0 140px;
  min-width: 0;
}

.control-row-address {
  flex: 3 0 280px;
}

.control-row label {
  display: block;
  margin-bottom: 6px;
  color: #6fd7ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-row input[type="text"],
.control-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 110%;
  font-weight: normal;
  color: #eee;
  background: #123047;
  border: 1px solid #1c4c66;
  border-radius: 6px;
}

/* Address is free text with no natural "done" affordance the way the
steppers/dropdowns have (their state IS the control) -- this button
gives typing an explicit endpoint. Nothing re-fetches until it's
clicked (see #address-done-btn's click handler in divvy.js). */
.address-row {
  display: flex;
  gap: 6px;
}

.address-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

#address-done-btn {
  flex: 0 0 auto;
  width: 40px;
  font-size: 150%;
  font-weight: bold;
  color: #05131c;
  background: linear-gradient(90deg, #4fc3f7, #29e0b8);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#address-done-btn:hover {
  filter: brightness(1.1);
}

.stepper {
  display: flex;
  align-items: stretch;
  background: #123047;
  border: 1px solid #1c4c66;
  border-radius: 6px;
  overflow: hidden;
}

/* Matches the height/padding of the stepper/select controls next to it
in .controls-row, so this row doesn't look shorter than its neighbors. */
.checkbox-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  font-size: 110%;
  color: #eee;
  background: #123047;
  border: 1px solid #1c4c66;
  border-radius: 6px;
  cursor: pointer;
}

.checkbox-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #29e0b8;
  cursor: pointer;
}

.stepper-btn {
  flex: 0 0 auto;
  width: 36px;
  font-size: 130%;
  font-weight: bold;
  color: #6fd7ff;
  background: #16324a;
  border: none;
  cursor: pointer;
}

.stepper-btn:hover:not(:disabled) {
  background: #1c4c66;
}

.stepper-btn:disabled {
  color: #3d5666;
  cursor: default;
}

.stepper-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120%;
  color: #eee;
}

/* Stacks Launch above the secondary Copy URL button rather than placing
them side by side -- Launch stays the primary, full-size action; Copy
URL rides just below it at a smaller footprint. Not align-self:stretch
-- that would cap the whole stack (Launch + Copy URL + gap) at the
height of the row's other controls, squashing Launch down from its
original full size. Left to size by its own content instead, which
grows the bar to fit it -- .controls-row has no fixed height. */
.launch-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#launch-btn {
  flex: 0 0 auto;
  padding: 16px 24px;
  font-size: 130%;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #05131c;
  background: linear-gradient(90deg, #4fc3f7, #29e0b8);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#launch-btn:hover {
  filter: brightness(1.1);
}

/* Deliberately lighter/smaller than #launch-btn -- Launch is still the
primary action of this bar, this is a secondary one below it. */
#copy-url-btn {
  flex: 0 0 auto;
  padding: 4px 16px;
  font-size: 80%;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6fd7ff;
  background: transparent;
  border: 1px solid #1c4c66;
  border-radius: 6px;
  cursor: pointer;
}

#copy-url-btn:hover {
  background: #123047;
}