/* ============================================================
   Shared timeline styles — used by commute and explorer.
   Grid-based row layout; delivery dots + timing chips.
   View-specific column templates live in each view's own CSS.
   ============================================================ */

/* === Departures list (list of timeline entries) === */
.departures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 6px;
  align-items: baseline;
}
.departure {
  display: contents;
}
.departure + .departure > * {
  border-top: 1px solid #f0f0f0;
}
.departure > * {
  padding-top: 5px;
  padding-bottom: 5px;
}
.departure.clickable-row > * {
  cursor: pointer;
}

/* === Row primitives === */
.dep-dot {
  font-size: 12px;
  line-height: 1;
  min-width: 10px;
  text-align: center;
}
.dep-route {
  min-width: 28px;
  text-align: center;
  padding: 1px 5px;
  background: #e8eef5;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  color: #2c3e6b;
}
.dep-destination {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #374151;
}
.dep-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #111;
}
.dep-actual {
  font-variant-numeric: tabular-nums;
  color: #374151;
}
.dep-stop {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #374151;
}
.dep-status {
  font-size: 11px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* === Delivery dots === */
.dot {
  font-weight: 700;
  line-height: 1;
}
.dot-confirmed { color: #1a9850; }   /* detection at this stop */
.dot-inferred  { color: #65a30d; }   /* trip detected elsewhere — estimated */
.dot-tracked   { color: #2563eb; }   /* live bus heading here */
.dot-scheduled { color: #d1d5db; }   /* future, no live data */
.dot-unserved  { color: #9ca3af; }   /* past, no detection */

/* === Timing chips === */
.chip {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.chip-late     { background: #fef3c7; color: #b45309; }
.chip-early    { background: #dbeafe; color: #1d4ed8; }
.chip-ontime   { background: #d1fae5; color: #047857; }
.chip-unserved { background: #f3f4f6; color: #9ca3af; }
.chip-inferred { font-style: italic; opacity: 0.85; }

/* === Status label (tracked proximity) === */
.status-proximity {
  color: #059669;
  font-weight: 500;
}

/* === Full-width rows spanning the grid (now divider, bus-position) === */
.row-full {
  grid-column: 1 / -1;
}
.now-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #4a6fa5;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.now-line::before,
.now-line::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #4a6fa5;
  border-radius: 1px;
}
.bus-position-row {
  font-size: 11px;
  color: #60a5fa;
  padding: 2px 0;
}
.bus-position-row.other-bus {
  color: #9ca3af;
  cursor: pointer;
}
.bus-position-row.other-bus:hover {
  color: #60a5fa;
}

/* Small bus marker for "other bus on same route" rows — same colour
   vocabulary as the map's blue bus icon, but no number. */
.other-bus-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #60a5fa;
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}