/* Perevizka – public driver profile /@username. Load after tokens.css and app.css. */

.profile-page .app-header .btn { min-width: 0; }
@media (max-width: 379px) {
  .profile-page .app-logo img { width: 120px; }
  .profile-page .app-header .btn { padding-inline: var(--sp-4); }
}

.profile { padding-block: var(--sp-5) var(--sp-8); display: grid; gap: var(--sp-5); }

/* Hero */
.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-6);
  background: var(--c-navy-surface);
  color: var(--c-surface);
  border-radius: var(--r-lg);
}
.profile-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-navy);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.profile-avatar-photo { object-fit: cover; border-radius: var(--r-full); background: var(--c-navy); }
.profile-identity { min-width: 0; }
.profile-identity h1 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  overflow-wrap: break-word;
  hyphens: auto;
}
.profile-handle, .profile-vehicle { margin: 0; color: var(--c-mist); overflow-wrap: anywhere; }
.profile-actions { grid-column: 1 / -1; display: grid; gap: var(--sp-2); }
.btn-on-navy { background: transparent; color: var(--c-surface); border-color: var(--c-mist); }
.btn-on-navy:hover { background: var(--c-navy); border-color: var(--c-surface); }
.profile-cta { display: none; }
.profile-badge {
  display: inline-block;
  margin: 0 0 var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-navy);
  color: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.demo-note { margin: 0; }
.contact-demo { cursor: default; }
.contact-demo:hover { border-color: var(--c-border-strong); }
.btn-accent { background: var(--c-surface); color: var(--c-navy); }
.btn-accent:hover { background: var(--c-mist); }

/* Layout */
.profile-grid, .profile-main, .profile-side { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
.profile .panel h2 { margin-bottom: var(--sp-4); }
.profile .empty { margin: 0; }
.profile-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.profile-bio { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.profile-link { margin: 0 0 var(--sp-4); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* Trips: next trip card + further upcoming trips */
.trip-next { display: grid; gap: var(--sp-3); }
.trip-when { margin: 0; color: var(--c-muted); }
.trip-relative {
  display: inline-block;
  margin-right: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-info-soft);
  color: var(--c-navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
}
.trip-route {
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  overflow-wrap: break-word;
  hyphens: auto;
}
.trip-arrow { color: var(--c-slate); }
.trip-border { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy); overflow-wrap: anywhere; }
.trip-stops, .trip-description { margin: 0; color: var(--c-muted); overflow-wrap: anywhere; }
.trip-description { white-space: pre-line; color: var(--c-text); }
.trip-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 4 tiles: 2 × 2 on phones, 4 in a row when there is room */
  gap: var(--sp-2);
  margin: 0;
}
/* columns follow the width of the card, not of the screen (the profile column is narrower than the trip page) */
.trip-next, .trip-page-card { container-type: inline-size; }
.trip-facts--3 > div:last-child { grid-column: 1 / -1; }
@container (min-width: 400px) {
  .trip-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trip-facts--3 > div:last-child { grid-column: auto; }
}
@container (min-width: 520px) { .trip-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trip-facts div { padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-bg); min-width: 0; }
.trip-facts dt { font-size: var(--fs-sm); color: var(--c-muted); }
.trip-facts dd { margin: 0; font-weight: var(--fw-semibold); color: var(--c-text); overflow-wrap: break-word; hyphens: auto; }
/* Trips as separate cards (PO 2026-09-29): "Наступна поїздка" emphasised with a navy frame, "Інші поїздки · N" below,
   every further trip in its own card with the page background between them. */
.trips { display: grid; gap: var(--sp-3); min-width: 0; }
.trips-title { margin: 0; color: var(--c-navy); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.trips-more-title { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.trips-count {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding-inline: var(--sp-2); border-radius: var(--r-full);
  background: var(--c-info-soft); color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0;
}
.trip-card--next { border-color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy); } /* 2 px navy frame, no drop shadow */
.trip-day { color: var(--c-navy); font-weight: var(--fw-semibold); }
.trip-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (max-width: 480px) {
  .trips-more-title { margin-top: var(--sp-4); }
  .trip-cards { gap: var(--sp-3); }
}

/* Photos: main photo + thumbnails, tap opens the viewer */
.gallery { display: grid; gap: var(--sp-2); }
.profile-facts + .gallery { margin-top: var(--sp-5); }
.gallery a { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }

/* Contacts */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
/* One calm row per channel: icon · number/name (large) with the action below · arrow */
.contact-link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  min-height: 60px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); text-decoration: none;
}
.contact-link:hover { border-color: var(--c-input-border); }
.contact-link:hover .contact-arrow { transform: translateX(2px); }
.contact-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--c-bg); color: var(--c-navy); }
.contact-text { display: grid; gap: 2px; min-width: 0; }
.contact-value { color: var(--c-navy); font-size: var(--fs-base); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.contact-label { color: var(--c-muted); font-size: var(--fs-sm); }
.contact-arrow { color: var(--c-navy); font-size: var(--fs-lg); line-height: 1; }

/* Sticky contact bar (phones) */
.contact-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.contact-bar .btn { padding-inline: var(--sp-3); white-space: nowrap; }
/* call + messenger: "Подзвонити" takes what it needs, "Написати в WhatsApp ↗" the rest (one line) */
.contact-bar:has(.btn + .btn) { grid-auto-columns: auto; grid-template-columns: auto minmax(0, 1fr); }
.contact-bar-call { gap: var(--sp-2); }
.contact-bar-call svg { display: none; }
@media (max-width: 359px) {
  .contact-bar-call { min-width: var(--control-h); padding-inline: var(--sp-3); }
  .contact-bar-call svg { display: block; }
  .contact-bar-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.has-contact-bar { padding-bottom: calc(var(--control-h) + 2 * var(--sp-3) + env(safe-area-inset-bottom, 0px)); }

/* Photo viewer */
.lightbox {
  width: min(100% - 2 * var(--gutter), 1100px);
  max-width: none;
  max-height: calc(100% - 2 * var(--gutter));
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-navy);
  color: var(--c-surface);
}
.lightbox::backdrop { background: rgba(15, 36, 56, .85); }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-mist); }
.lightbox img { width: 100%; max-height: calc(100dvh - 200px); object-fit: contain; }
.lightbox-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-2); }
.lightbox-button {
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-navy-2);
  border-radius: var(--r-md);
  background: var(--c-navy-2);
  color: var(--c-surface);
  font: var(--fw-semibold) var(--fs-base)/1 var(--font);
  cursor: pointer;
}
.lightbox-button:hover { border-color: var(--c-mist); }

.has-contact-bar .toast { bottom: calc(var(--control-h) + var(--sp-6) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 900px) {
  .profile { padding-top: var(--sp-7); gap: var(--sp-6); }
  .trip-page { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); padding-top: var(--sp-6); }
  .trip-back { grid-column: 1 / -1; }
  .trip-page-side { position: sticky; top: var(--sp-5); }
  .profile-hero { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--sp-7); gap: var(--sp-6); }
  .profile-avatar { width: 96px; height: 96px; font-size: var(--fs-3xl); }
  .profile-identity h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); margin-bottom: var(--sp-2); }
  .profile-actions { grid-column: auto; justify-items: stretch; min-width: 200px; }
  .profile-cta { display: inline-flex; }
  .profile-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); }
  .profile-side { position: sticky; top: var(--sp-5); }
  .contact-bar { display: none; }
  .has-contact-bar { padding-bottom: 0; }
  .has-contact-bar .toast { bottom: var(--sp-5); }
}

@media (max-width: 400px) {
  .gallery-thumbs img { aspect-ratio: 1; } /* keeps thumbnails ≥ 44 px tall */
}

@media (max-width: 480px) {
  .profile-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5); }
  .profile-avatar { width: 56px; height: 56px; font-size: var(--fs-xl); }
  .profile-identity h1 { font-size: var(--fs-2xl); }
  .trip-route { font-size: var(--fs-xl); }
}

/* Trip page /@username/trips/<code> */
.trip-page { padding-block: var(--sp-5) var(--sp-8); display: grid; gap: var(--sp-5); align-items: start; }
.trip-back { margin: 0; }
.trip-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-navy); font-weight: var(--fw-semibold); }
.trip-page-main { display: grid; gap: var(--sp-5); min-width: 0; }
.trip-page-card { display: grid; gap: var(--sp-3); min-width: 0; }
.trip-page-route { margin: 0; font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--c-navy); }
.trip-page-side { display: grid; gap: var(--sp-5); min-width: 0; }
.share-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
} /* equal buttons, equal gaps; without the phone's share sheet (3 buttons) "Скопіювати посилання" takes the whole row */
.share-row:has(> #share-native[hidden]) > #copy-link { grid-column: 1 / -1; }
.trip-driver { display: grid; gap: var(--sp-4); }
.trip-driver h2 { margin: 0; }
.trip-driver-who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.trip-driver-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: var(--r-full); background: var(--c-navy); color: var(--c-surface); font-weight: var(--fw-semibold); object-fit: cover;
}
.trip-driver-actions { display: grid; gap: var(--sp-2); }
.trip-driver-name { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy); overflow-wrap: anywhere; }
.trip-driver-meta { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .trip-page-route { font-size: var(--fs-2xl); }
  .share-row { grid-template-columns: minmax(0, 1fr); } /* phones: one per row */
  .share-row .btn { padding-inline: var(--sp-3); }
}

/* Contacts only for signed-in visitors (ADR 027): calm hint instead of the channels – no fake or blurred numbers. */
.locked { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-info-soft); color: var(--c-navy); }
.locked p { margin: 0; }
.locked-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.locked-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.locked-actions .btn { flex: 1 1 auto; }

/* Flight page (lib/flight-page.js): the kind line with a plane */
.flight-kind { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 4px var(--sp-3) 4px var(--sp-2); border-radius: var(--r-full);
  background: var(--c-info-soft); color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-semibold); justify-self: start; }
.flight-plane { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flight-report { justify-self: start; min-height: 44px; }

/* "Perevizka не перевіряє перевізників" above the contacts (signed in and out) */
.safety-note { margin: 0 0 var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.safety-note strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.safety-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-navy); white-space: nowrap; }

/* Shared passenger request (/requests/<code>): the side panel for drivers */
.request-answer-text { margin: 0 0 var(--sp-3); color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh-body); }
.request-page .trip-driver-actions .request-answer-text { margin: var(--sp-2) 0 0; color: var(--c-muted); }
.request-page .safety-note { margin: var(--sp-4) 0 0; }