/* ============================================================
   NEXT ROUTE — Parked Mode
   Seam 2: the moment the driver becomes a runner. The screen
   stops being about the vehicle and starts being about the day.
   ============================================================ */

.main {
  padding: var(--gap-l) var(--gap-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  min-width: 0;
}

.main h1 { margin-top: var(--gap-xs); }
.main .sub { margin-top: 8px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-s); }

/* ---- Signature element: daylight remaining ------------------
   The one thing no other product in the category shows you at
   the trailhead. Everything else here is table stakes. */

.daylight {
  --turnaround: 43%;              /* 58 min out of 134 remaining */
  background: var(--surface-1);
  border: 1px solid var(--warn-edge);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dl-top { display: flex; align-items: baseline; justify-content: space-between; }
.dl-time {
  font-size: var(--size-hero);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--gap-xs);
}
.dl-time small { font-size: 18px; color: var(--muted); font-weight: var(--weight-med); margin-left: 4px; }
.dl-end { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.7; }

/* Before turnaround the time is yours (Warn — the day is burning
   but nothing is wrong). After it, the remaining daylight is
   spoken for by the walk back, and it ramps to Signal. This is
   the v0 warn-to-signal gradient, given a turnaround gate. */
.dl-track {
  height: 10px;
  background: var(--surface-2);
  border-radius: 5px;
  margin-top: var(--gap-m);
  position: relative;
  overflow: hidden;
}
.dl-elapsed { position: absolute; inset: 0 auto 0 0; width: var(--turnaround); background: var(--warn); }
.dl-urgent  {
  position: absolute; inset: 0 0 0 var(--turnaround);
  background: linear-gradient(90deg, var(--warn), var(--signal));
}
.dl-turnaround {
  position: absolute; top: -3px; bottom: -3px;
  left: var(--turnaround);
  width: 2px;
  background: var(--ink);
}

.ticks { position: relative; height: 14px; margin-top: 9px; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); font-weight: var(--weight-bold); }
.ticks span { position: absolute; top: 0; white-space: nowrap; }
.ticks span:nth-child(1) { left: 0; }
.ticks span:nth-child(2) { left: var(--turnaround); transform: translateX(-50%); color: var(--signal); }
.ticks span:nth-child(3) { left: auto; right: 0; }

/* ---- Elevation profile --------------------------------------
   Open question from the plan: does this earn its space?
   Answer: only once it has a job. Its job is the climb you must
   clear before the turnaround clock runs out. The Muted line is
   the trail; the Signal segment is the part that costs you. */

.elev { background: var(--surface-1); border-radius: var(--radius-card); padding: 14px 18px 12px; }
.elev-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.elev-note { font-size: 12px; color: var(--muted); }
.elev-note b { color: var(--signal); font-weight: var(--weight-bold); }
.elev-axis { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); font-weight: var(--weight-bold); margin-top: 2px; }
.elev-axis span:nth-child(2) { color: var(--signal); }

/* ---- Parked side rail --------------------------------------- */

.pin { font-size: 19px; font-weight: var(--weight-bold); margin-top: 8px; letter-spacing: -0.01em; }
.coord { font-size: 12px; color: var(--muted); margin-top: 4px; }

.notes p { font-size: var(--size-sub); line-height: 1.5; color: var(--muted); margin-top: 8px; }