/* =====================================================================
   css/trip-import.css
   "Share a trip or observation" — bottom sheets and the selection tray.

   Mobile-first throughout. This flow is opened on a phone right after a
   ride, a paddle, or a walk, so the phone layout is the base and the
   desktop treatment is the media query, not the other way round.

   Touch targets are 44px minimum. Sheets rise from the bottom edge
   where the thumb already is, rather than centering over the map the
   participant is being asked to read.
   ===================================================================== */

:root {
  --trip-accent: #7c5cff;        /* imported, provisional data */
  --trip-selected: #ff8a00;      /* the one thing you have chosen */
  --trip-ink: #1e2933;
  --trip-muted: #5b6b7a;
  --trip-line: #e3e8ee;
  --trip-surface: #fff;
  --trip-radius: 16px;
}

/* ── Bottom sheet ──────────────────────────────────────────────── */

.trip-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(16, 22, 30, 0);
  transition: background .2s ease;
}
.trip-sheet-backdrop.is-open { background: rgba(16, 22, 30, .45); }

.trip-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--trip-surface);
  color: var(--trip-ink);
  border-radius: var(--trip-radius) var(--trip-radius) 0 0;
  box-shadow: 0 -8px 40px rgba(16, 22, 30, .28);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  /* Clear the home indicator on iOS. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.trip-sheet-backdrop.is-open .trip-sheet { transform: translateY(0); }

.trip-sheet-grab,
.trip-tray-grab {
  width: 40px;
  height: 4px;
  margin: 10px auto 2px;
  border-radius: 2px;
  background: #cfd6de;
  flex: none;
}

.trip-sheet-head { padding: 6px 20px 12px; flex: none; }
.trip-sheet-title { margin: 0; font-size: 1.15rem; font-weight: 650; line-height: 1.25; }
.trip-sheet-sub { margin: 6px 0 0; font-size: .875rem; color: var(--trip-muted); line-height: 1.45; }
.trip-sheet-body { padding: 4px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.trip-sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.trip-sheet-actions .trip-btn { flex: 1; }

/* ── Buttons ───────────────────────────────────────────────────── */

.trip-btn {
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.trip-btn-sm { min-height: 36px; padding: 7px 12px; font-size: .85rem; }

.trip-btn-primary { background: var(--trip-accent); color: #fff; }
.trip-btn-primary:hover:not(:disabled) { background: #6a49f0; }
.trip-btn-primary:disabled { background: #d6dae1; color: #8a949f; cursor: default; }

.trip-btn-ghost { background: transparent; border-color: var(--trip-line); color: var(--trip-ink); }
.trip-btn-ghost:hover { background: #f5f7f9; }

/* ── Upload step ───────────────────────────────────────────────── */

.trip-drop {
  width: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px;
  border: 2px dashed #c8d0da;
  border-radius: 14px;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.trip-drop:hover,
.trip-drop.is-over { border-color: var(--trip-accent); background: #f6f4ff; }

.trip-drop-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--trip-accent);
  position: relative;
}
.trip-drop-icon::before,
.trip-drop-icon::after {
  content: ''; position: absolute; background: var(--trip-accent);
}
.trip-drop-icon::before { left: 15px; top: 8px; width: 2px; height: 16px; }
.trip-drop-icon::after  { left: 9px;  top: 14px; width: 14px; height: 2px; transform: rotate(-45deg); transform-origin: 50% 50%; }

.trip-drop-main { font-weight: 640; font-size: 1rem; }
.trip-drop-sub  { font-size: .82rem; color: var(--trip-muted); }

.trip-note { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: var(--trip-muted); }

.trip-status { margin-top: 14px; padding: 11px 13px; border-radius: 9px; font-size: .875rem; line-height: 1.45; }
.trip-status.is-busy  { background: #f2f5f8; color: var(--trip-muted); }
.trip-status.is-error { background: #fdf0ef; color: #a32b1c; }

.trip-empty { font-size: .9rem; color: var(--trip-muted); line-height: 1.5; margin: 0; }

/* ── Category chooser ──────────────────────────────────────────── */

.trip-cat-list { display: flex; flex-direction: column; gap: 8px; }

.trip-cat-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--trip-line);
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.trip-cat-btn:hover { border-color: var(--trip-accent); background: #faf9ff; }

.trip-cat-dot  { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.trip-cat-name { font-weight: 570; font-size: .95rem; flex: 1; }
.trip-cat-meta { font-size: .74rem; color: var(--trip-muted); }

/* ── Privacy sheet ─────────────────────────────────────────────── */

.trip-toggle {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 2px;
  border-bottom: 1px solid var(--trip-line);
  cursor: pointer;
}
.trip-toggle input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--trip-accent); }
.trip-toggle-text  { display: flex; flex-direction: column; gap: 2px; }
.trip-toggle-label { font-size: .92rem; font-weight: 560; }
.trip-toggle-hint  { font-size: .79rem; color: var(--trip-muted); line-height: 1.4; }

.trip-trim:not(:empty) { display: flex; flex-direction: column; gap: 3px; padding: 13px 2px; }
.trip-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

.trip-chip {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--trip-line);
  border-radius: 19px;
  background: #fff;
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
}
.trip-chip.is-on { border-color: var(--trip-accent); background: var(--trip-accent); color: #fff; }

.trip-disclosure { margin-top: 18px; display: flex; flex-direction: column; gap: 13px; }

.trip-disc-block { padding: 13px 15px; border-radius: 11px; }
.trip-disc-block h3 { margin: 0 0 7px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 680; }
.trip-disc-block ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 4px; }
.trip-disc-block li { font-size: .855rem; line-height: 1.45; }

.trip-disc-shared   { background: #f1f8f3; }
.trip-disc-shared h3 { color: #1e6b3a; }
.trip-disc-withheld { background: #f5f6f8; }
.trip-disc-withheld h3 { color: var(--trip-muted); }

/* ── Selection tray ────────────────────────────────────────────── */

.trip-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  max-height: 58vh;
  background: var(--trip-surface);
  color: var(--trip-ink);
  border-radius: var(--trip-radius) var(--trip-radius) 0 0;
  box-shadow: 0 -6px 28px rgba(16, 22, 30, .22);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.trip-tray-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 16px 0;
}
.trip-tray-titles { flex: 1; min-width: 0; }
.trip-tray-title {
  margin: 0; font-size: .98rem; font-weight: 640;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-tray-sub  { margin: 2px 0 0; font-size: .78rem; color: var(--trip-muted); }
.trip-tray-hint { margin: 8px 16px 4px; font-size: .8rem; color: var(--trip-muted); line-height: 1.4; }

.trip-tray-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 8px;
}

.trip-group {
  margin: 12px 0 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 680;
  color: var(--trip-muted);
}

.trip-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--trip-line);
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.trip-item:hover { border-color: #b9c2cd; }
.trip-item.is-on { border-color: var(--trip-selected); background: #fff8f0; }

.trip-item-icon { width: 15px; height: 15px; flex: none; }
.trip-item-waypoint {
  border-radius: 50%;
  border: 2.5px solid var(--trip-accent);
  background: #fff;
}
.trip-item-track,
.trip-item-route {
  height: 0;
  border-top: 3px dashed var(--trip-accent);
  align-self: center;
}
.trip-item-point-on-track {
  border-radius: 50%;
  background: var(--trip-selected);
}

.trip-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trip-item-name {
  font-size: .91rem; font-weight: 560;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-item-meta { font-size: .77rem; color: var(--trip-muted); }

/* Point-along-track scrubber */
.trip-scrub { display: flex; flex-direction: column; gap: 5px; padding: 14px 0 4px; }
.trip-scrub label { font-size: .82rem; font-weight: 560; }
.trip-scrub input[type="range"] { width: 100%; height: 30px; accent-color: var(--trip-selected); }
.trip-scrub-read { font-size: .77rem; color: var(--trip-muted); }

.trip-tray-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 16px 14px;
  border-top: 1px solid var(--trip-line);
}
.trip-tray-foot .trip-btn-primary { flex: 1; }

/* ── Desktop ───────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .trip-sheet-backdrop { align-items: center; }
  .trip-sheet {
    border-radius: var(--trip-radius);
    transform: translateY(16px) scale(.98);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
  }
  .trip-sheet-backdrop.is-open .trip-sheet { transform: none; opacity: 1; }
  .trip-sheet-grab { display: none; }

  /* The tray docks to a corner so the map stays usable beside it. */
  .trip-tray {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: 380px;
    max-height: 72vh;
    border-radius: var(--trip-radius);
  }
  .trip-tray-grab { display: none; }
  .trip-tray-head { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .trip-sheet, .trip-sheet-backdrop { transition: none; }
}