/* Ride sheet — "Locating a Caddie" / active-ride header.
   Redesigned for a balanced, centered, organized layout. Loaded last in
   index.html so it owns the final look over styles.css. */

body.ride-active .ride-sheet .sheet-header {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  position: relative;
  padding: 8px 22px 16px;
  margin: 0;
}

/* Cancel — a quiet link pinned to the top-right corner, out of the
   heading's way so the status reads as the clear focal point. */
body.ride-active .ride-sheet .sheet-cancel {
  position: absolute;
  top: 6px;
  right: 22px;
  z-index: 2;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
}
body.ride-active .ride-sheet .sheet-cancel:hover { color: var(--ink); }

/* Status — centered, balanced, one tight line (no all-caps sprawl). */
body.ride-active .ride-sheet .sheet-status-block {
  text-align: center;
  padding: 2px 56px 0;
}
body.ride-active .ride-sheet .sheet-status-block h3 {
  margin: 0;
  font-family: 'The Seasons', Cochin, 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
body.ride-active .ride-sheet .sheet-updates-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted, #7a6a58);
}
body.ride-active .ride-sheet.updates-delayed .sheet-status-block h3 {
  color: var(--ink);
}
/* Last-known pin: still visible, not sold as a live moving cart. */
body.ride-active .ride-map.updates-delayed .cart-img {
  opacity: 0.45;
  filter: grayscale(0.2);
}

/* Caddie-finding row — avatar + status pills, centered as a group. */
body.ride-active .ride-sheet .sheet-driver-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
body.ride-active .ride-sheet .sheet-driver-row .sheet-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--copper-soft);
}
body.ride-active .ride-sheet .sheet-summary-pills {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 !important;
}
body.ride-active .ride-sheet .sheet-pill {
  display: inline-flex !important;
  align-items: center;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(184, 115, 51, 0.10) !important;
  border: 1px solid rgba(184, 115, 51, 0.20) !important;
  color: var(--accent-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Route + ride reference — centered and quiet. */
body.ride-active .ride-sheet .sheet-summary-route {
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.8;
}
body.ride-active .ride-sheet .sheet-ride-ref {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* Collapsed — keep only the status line visible. */
body.ride-active .ride-sheet.collapsed .sheet-driver-row,
body.ride-active .ride-sheet.collapsed .sheet-summary-route,
body.ride-active .ride-sheet.collapsed .sheet-ride-ref {
  display: none !important;
}
body.ride-active .ride-sheet.collapsed .sheet-status-block {
  padding-bottom: 4px;
}

/* Expanded body — hide the detail rows that just repeat the centered header
   summary (caddie status + from/to route). Leaves the divider + fare
   breakdown (and the rating block when complete). Keeps the sheet from
   reading as the same address three times. */
body.ride-active .ride-sheet .sheet-body > .person-row,
body.ride-active .ride-sheet .sheet-body > #ride-cart,
body.ride-active .ride-sheet .sheet-body > #ride-pickup,
body.ride-active .ride-sheet .sheet-body > #ride-dropoff,
body.ride-active .ride-sheet .sheet-body > #ride-dropoff-label,
body.ride-active .ride-sheet .sheet-body > .label:nth-child(2),
body.ride-active .ride-sheet .sheet-body > .label:nth-child(4),
body.ride-active .ride-sheet .sheet-body > .label:nth-child(6) {
  display: none !important;
}

/* ---- "Locating a Caddie" — clean centered treatment + snappy entrance ---- */
/* A small copper spinner rides just ahead of the status text while no Caddie
   is attached yet, so the centered "Locating a Caddie" line reads as live,
   not stuck. The status block is already text-align:center, so the spinner +
   label center together as one unit. */
@keyframes mcc-spin { to { transform: rotate(360deg); } }
body.ride-active .ride-sheet.locating .sheet-status-block h3::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(184, 115, 51, 0.28);
  border-top-color: var(--copper, #B87333);
  border-radius: 50%;
  animation: mcc-spin 0.8s linear infinite;
}
/* No assigned Caddie yet -> the avatar is an empty monogram placeholder;
   hide it so the locating state is just the centered spinner + status + the
   reassurance pills, not a lonely blank circle. */
body.ride-active .ride-sheet.locating .sheet-avatar { display: none !important; }

/* Snappier entrance: the sheet springs up from the bottom instead of hard-
   cutting into place when the ride starts. */
@keyframes mcc-sheet-rise {
  from { transform: translateY(100%); opacity: 0.4; }
  to   { transform: translateY(0);    opacity: 1; }
}
body.ride-active #ride-panel.ride-sheet {
  animation: mcc-sheet-rise 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* ---- Awaiting-Caddie: progress, not absence ---- */
/* A cart can be dispatched (so the sheet is NOT in .locating) while no Caddie
   has accepted yet. That state used to render the monogram avatar with no name
   to build initials from -- i.e. a literal "?" in a circle -- at the single
   most anxious moment in the ride. Hide it here too, and give the same live
   spinner the locating state gets, so the header reads as working. */
body.ride-active .ride-sheet.awaiting-caddie .sheet-avatar { display: none !important; }
body.ride-active .ride-sheet.awaiting-caddie .sheet-status-block h3::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(184, 115, 51, 0.28);
  border-top-color: var(--copper, #B87333);
  border-radius: 50%;
  animation: mcc-spin 0.8s linear infinite;
}

/* The three-step rail. Only rendered while unclaimed (JS sets [hidden]);
   collapsed sheets stay compact, so it's suppressed there. */
body.ride-active .ride-sheet .sheet-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 2px;
}
body.ride-active .ride-sheet.collapsed .sheet-progress { display: none; }
body.ride-active .ride-sheet .sheet-progress[hidden] { display: none; }
body.ride-active .ride-sheet .sp-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted, #93795A);
  white-space: nowrap;
}
body.ride-active .ride-sheet .sp-step i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(184, 115, 51, 0.25);
  flex-shrink: 0;
}
/* Done: filled copper dot + full-strength ink. Deliberately NOT bold -- weight
   is reserved for the active step, and bolding completed steps widened the row
   enough to wrap "On the way" onto a second line once two were complete. */
body.ride-active .ride-sheet .sp-step.is-done { color: var(--ink, #2E2114); }
body.ride-active .ride-sheet .sp-step.is-done i { background: var(--copper, #B87333); }
/* Active: the step being worked on right now — pulses so it reads as live. */
@keyframes mcc-step-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}
body.ride-active .ride-sheet .sp-step.is-active { color: var(--ink, #2E2114); font-weight: 600; }
body.ride-active .ride-sheet .sp-step.is-active i {
  background: var(--copper, #B87333);
  animation: mcc-step-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.ride-active .ride-sheet.locating .sheet-status-block h3::before { animation: none; }
  body.ride-active .ride-sheet.awaiting-caddie .sheet-status-block h3::before { animation: none; }
  body.ride-active .ride-sheet .sp-step.is-active i { animation: none; }
  body.ride-active #ride-panel.ride-sheet { animation: none; }
}