/* =============================================================================
   TRAINS APP — STYLES
   trains/trains.css

   App-specific styles for the live train departures board.
   Loaded after ../styles/main.css — all colour, spacing, typography,
   and component tokens come from there via CSS custom properties.

   DO NOT hardcode colour values here. Use design tokens, e.g.:
     var(--color-coral)       #FF6B35  home / trains accent
     var(--color-lime)        #AAED3B  on-time / early / positive states
     var(--color-gold)        #FFD020  delayed / warning states
     var(--color-pink)        #FF3D8A  cancelled / error states
     var(--color-text)        #EEF5EE  primary text
     var(--color-text-muted)  #7AAB7D  secondary text
     var(--color-border)      #2A4530  card borders
     var(--color-bg-card)     #1E3828  card backgrounds
     var(--color-bg)          #152A18  page background
   ============================================================================= */


/* =============================================================================
   1. ACCENT COLOUR OVERRIDES
   All elements that take this app's accent (coral) are listed here so that
   future maintainers only need to update one section to re-theme the app.
   ============================================================================= */

/* Title accent word — overrides the default lime set in main.css */
.page-title .accent        { color: var(--color-coral); }

/* Active tab in the bottom nav */
.app-nav__item--active     { color: var(--color-coral); }


/* =============================================================================
   2. APP HEADER
   ============================================================================= */

.app-header {
  margin-bottom: var(--space-lg);
}


/* =============================================================================
   3. DEPARTURES SECTION
   Container for a group of departure rows — "Upcoming" or "Currently running".
   ============================================================================= */

.departures-section {
  margin-bottom: var(--space-lg);
}

/* Tighten the section label top margin when it follows another section */
.departures-section + .departures-section .departures-section__label {
  margin-top: var(--space-lg);
}

.departures-section__label {
  margin-top: 0;
}

.departure-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}


/* =============================================================================
   4. DEPARTURE ROW
   Each service is a tappable button that opens the calling-points sheet.
   ============================================================================= */

.departure-row {
  display:          flex;
  align-items:      center;
  gap:              var(--space-md);
  width:            100%;
  padding:          12px var(--space-md);
  background:       rgba(var(--color-bg-card-rgb), 0.85);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  text-align:       left;
  cursor:           pointer;
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:       border-color var(--transition), transform var(--transition);
  -webkit-tap-highlight-color: transparent;
  /* Reset button defaults */
  font-family:      var(--font-body);
  color:            var(--color-text);
}

.departure-row:hover   { transform: translateY(-1px); border-color: rgba(var(--color-coral-rgb), 0.4); }
.departure-row:active  { transform: scale(0.99); }

/* Cancelled rows are not tappable and are visually dimmed */
.departure-row--cancelled {
  cursor: default;
  opacity: 0.55;
}
.departure-row--cancelled:hover  { transform: none; border-color: var(--color-border); }
.departure-row--cancelled:active { transform: none; }


/* --- Times column --- */

.row__times {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            2px;
  min-width:      44px;
  flex-shrink:    0;
}

.row__sched {
  font-size:   20px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.row__exp {
  font-size:  13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Status label — shown below the scheduled time */
.row__status {
  font-size:   12px;
  font-weight: 400;
  line-height: 1;
  margin-top:  3px;
}

.row__status--ontime { color: var(--color-text-muted); }
.row__status--late   { color: var(--color-pink); }
.row__status--early  { color: var(--color-lime); }


/* --- Body column (destination + info) --- */

.row__body {
  flex: 1;
  min-width: 0;
}

.row__dest {
  font-size:     16px;
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.row__info {
  font-size: 13px;
  color:     var(--color-text-muted);
}

/* Cancelled badge shown inside cancelled rows */
.row__cancelled-badge {
  display:       inline-block;
  font-size:     12px;
  font-weight:   500;
  color:         var(--color-pink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top:    2px;
}


/* --- Chevron --- */

.row__chevron {
  color:       var(--color-text-muted);
  font-size:   20px;
  line-height: 1;
  flex-shrink: 0;
  transition:  transform var(--transition), color var(--transition);
}

.departure-row:hover .row__chevron {
  transform: translateX(2px);
  color:     var(--color-coral);
}


/* =============================================================================
   5. PULL-TO-REFRESH HINT
   Small indicator that appears when the user pulls down past the threshold.
   ============================================================================= */

.ptr-hint {
  text-align:  center;
  font-size:   13px;
  color:       var(--color-text-muted);
  height:      0;
  overflow:    hidden;
  transition:  height var(--transition);
  margin-bottom: 0;
}

.ptr-hint--visible {
  height:        32px;
  margin-bottom: var(--space-sm);
  line-height:   32px;
}


/* =============================================================================
   6. SERVICE DETAIL — BOTTOM SHEET
   Slides up from the bottom of the viewport when a departure row is tapped.
   ============================================================================= */

/* Dimmed overlay behind the sheet */
.sheet-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0);
  z-index:    200;
  pointer-events: none;
  transition: background var(--transition);
}

.sheet-overlay--visible {
  background:     rgba(0, 0, 0, 0.55);
  pointer-events: all;
}


/* The sheet itself */
.detail-sheet {
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  max-height:       88vh;
  background:       var(--color-bg-card);
  border-top:       0.5px solid var(--color-border);
  border-radius:    var(--radius-lg) var(--radius-lg) 0 0;
  z-index:          300;
  transform:        translateY(100%);
  transition:       transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  display:          flex;
  flex-direction:   column;
  /* Respect iOS safe area at the bottom */
  padding-bottom:   env(safe-area-inset-bottom, 0px);
}

.detail-sheet--open {
  transform: translateY(0);
}


/* Drag handle at the top of the sheet */
.sheet-handle {
  width:         40px;
  height:        4px;
  background:    var(--color-border);
  border-radius: 2px;
  margin:        12px auto 0;
  flex-shrink:   0;
}


/* Close button in the sheet header */
.sheet-close {
  position:   absolute;
  top:        var(--space-md);
  right:      var(--space-md);
  width:      32px;
  height:     32px;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-border-rgb), 0.5);
  border:     none;
  border-radius: 50%;
  color:      var(--color-text-muted);
  font-size:  18px;
  cursor:     pointer;
  z-index:    10;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), color var(--transition);
}

.sheet-close:hover {
  background: rgba(var(--color-border-rgb), 1);
  color:      var(--color-text);
}


/* Scrollable body of the sheet */
.detail-sheet__body {
  overflow-y:    auto;
  -webkit-overflow-scrolling: touch;
  flex:          1;
  padding:       var(--space-md) var(--space-md) var(--space-lg);
  min-height:    0;
}


/* Service header (operator + route) */
.sheet-header {
  padding:       var(--space-sm) 0 var(--space-md);
  border-bottom: 0.5px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.sheet-header__op {
  font-size: 12px;
  color:     var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.sheet-header__route {
  font-family: var(--font-display);
  font-size:   20px;
  color:       var(--color-text);
  line-height: 1.2;
}


/* =============================================================================
   7. CALLING POINTS LIST
   Vertical timeline of stops for a selected service.
   ============================================================================= */

.calling-points {
  list-style: none;
  position:   relative;
}

/* Continuous vertical line connecting all stops */
.calling-points::before {
  content:    '';
  position:   absolute;
  left:       7px;   /* centres on the dot */
  top:        10px;
  bottom:     10px;
  width:      2px;
  background: var(--color-border);
}

.calling-point {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  padding:     8px 0;
  position:    relative;
}


/* The dot on the timeline */
.cp__dot {
  width:        16px;
  height:       16px;
  border-radius: 50%;
  background:   var(--color-border);
  border:       2px solid var(--color-bg-card);
  flex-shrink:  0;
  position:     relative;
  z-index:      1;
}


/* Station name + status wrapper */
.cp__body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

/* Station name */
.cp__name {
  font-size:  16px;
  color:      var(--color-text);
}

/* Per-stop status label — lighter weight keeps it clearly secondary to the name */
.cp__status {
  font-size:   12px;
  font-weight: 400;
  line-height: 1;
  color:       var(--color-text-muted);
}

.cp__status--ontime { color: var(--color-lime); }
.cp__status--late   { color: var(--color-pink); }


/* Scheduled and realtime times */
.cp__time {
  display:     flex;
  flex-direction: column;
  align-items: flex-end;
  gap:         1px;
  flex-shrink: 0;
}

.cp__sched {
  font-size:  16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cp__rt {
  font-size:  13px;
  font-variant-numeric: tabular-nums;
}

.cp__rt--late  { color: var(--color-gold); }
.cp__rt--early { color: var(--color-lime); }


/* Passed stops — dimmed */
.calling-point--passed .cp__dot {
  background: var(--color-text-muted);
}

.calling-point--passed .cp__name,
.calling-point--passed .cp__sched {
  opacity: 0.45;
}


/* The next stop the train is heading to — highlighted */
.calling-point--next .cp__dot {
  background:   var(--color-coral);
  border-color: rgba(var(--color-coral-rgb), 0.3);
  box-shadow:   0 0 0 4px rgba(var(--color-coral-rgb), 0.18);
}

.calling-point--next .cp__name {
  color:       var(--color-coral);
  font-weight: 500;
}


/* En route indicator — inserted between last passed stop and next stop */
.cp--train-here {
  pointer-events: none;
  padding: 2px 0;
}

.cp--train-here .cp__name {
  font-size:   18px;
  font-style:  normal;
  color:       var(--color-coral);
  line-height: 1;
}

/* Pulsing dot on the timeline line */
.cp__dot--train {
  background:   var(--color-coral);
  width:        12px;
  height:       12px;
  border-color: rgba(var(--color-coral-rgb), 0.3);
  will-change:  transform, box-shadow;
  animation:    train-pulse 1.4s ease-in-out infinite;
}

@keyframes train-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--color-coral-rgb), 0.6);
    transform:  scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--color-coral-rgb), 0);
    transform:  scale(1.2);
  }
}


/* Cancelled stop */
.calling-point--cancelled .cp__dot {
  background: var(--color-pink);
}

.calling-point--cancelled .cp__name {
  color:           var(--color-pink);
  text-decoration: line-through;
}