/* Account pages — auth cards, onboarding, profile, trip detail. */

@layer page {

/* ---------- auth ---------- */
.auth-section {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-4);
  min-height: calc(100vh - 68px - 90px);
  min-height: calc(100svh - 68px - 90px);
  overflow: hidden;
}
.auth-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-2);
  padding: var(--sp-7) var(--sp-6);
}
.auth-card--wide { width: min(560px, 100%); }
.auth-head { text-align: center; margin-bottom: var(--sp-5); }
.auth-head h1 { font-size: var(--fs-3); margin-bottom: var(--sp-2); }
.auth-head p { color: var(--text-muted); margin: 0; }

.auth-card form .field { margin-bottom: var(--sp-4); }
/* style Django-rendered widgets without touching Python */
.auth-card .field input:not([type="checkbox"]):not([type="radio"]),
.auth-card .field select,
.auth-card .field textarea {
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--input-radius);
  padding: 12px 14px;
  width: 100%;
}
.auth-card .field input:focus, .auth-card .field select:focus, .auth-card .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}
.auth-card ul.errorlist { color: var(--danger); font-size: var(--fs--1); list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.auth-legal-notice {
  font-size: var(--fs--1);
  color: var(--text-muted);
  text-align: center;
  margin: var(--sp-3) 0 var(--sp-4);
  line-height: 1.5;
}
.auth-legal-notice a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}

.auth-divider {
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs--1);
  margin: var(--sp-5) 0 var(--sp-3);
}
.social-login { display: flex; justify-content: center; gap: var(--sp-4); }
.social-btn {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--bg-inset);
  color: var(--text);
  font-size: 1.1rem;
  border: 1.5px solid var(--border);
  transition: all var(--dur-1) var(--ease-out);
  text-decoration: none;
}
.social-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  transform: scale(1.08);
}

.auth-footer {
  margin-top: var(--sp-5);
  text-align: center;
  border-top: 1.5px solid var(--border);
  padding-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs--1);
}
.auth-footer a { color: var(--accent); text-decoration: none; font-weight: 700; }

/* backdrop art for auth pages */
.auth-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.auth-art .hero-art { position: absolute; right: -60px; bottom: -40px; width: min(560px, 60vw); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .auth-section { padding: var(--sp-6) var(--sp-4); }
  .auth-card, .onboarding-card { padding: var(--sp-5) var(--sp-4); }
  .profile-card { padding: var(--sp-4); }
  #td-map { height: 380px; }
}

/* ---------- profile ---------- */
.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-7) 0 var(--sp-5);
  position: relative;
  z-index: 1;
}
.profile-name { font-size: var(--fs-4); margin-bottom: 2px; }
.profile-email { color: var(--text-muted); margin: 0; }
.profile-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-5);
  padding-bottom: var(--sp-8);
}
@media (max-width: 991px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-5);
}
.profile-card h2 {
  font-size: var(--fs-1);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.profile-card h3.sub {
  font-size: var(--fs--2);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-subtle);
  margin: var(--sp-4) 0 var(--sp-2);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.stat-box {
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}
.stat-box .stat-value { font-size: var(--fs-3); font-weight: 800; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-box .stat-label { color: var(--text-subtle); font-size: var(--fs--2); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

.badge-ladder { margin-bottom: var(--sp-3); }
.badge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: var(--fs--1);
}
.badge-head i { color: var(--accent); margin-right: 6px; }
.badge-earned { color: var(--accent); font-weight: 700; }
.badge-next { color: var(--text-subtle); font-size: var(--fs--2); }
.badge-bar { height: 8px; background: var(--bg-inset); border-radius: var(--r-full); overflow: hidden; }
.badge-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }

.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs--1); }
.pref-row .k { color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.pref-row .k i { color: var(--accent); }
.pref-row strong { color: var(--text); }

.trip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.trip-route { font-weight: 700; }
.trip-route--return { font-weight: 500; font-size: var(--fs--1); color: var(--text-subtle); margin-top: 2px; }
.trip-route--return .fa-right-left { margin-right: 4px; }
.trip-meta { color: var(--text-subtle); font-size: var(--fs--2); margin-top: 2px; }
.trip-meta .taken-flag { color: var(--success); }

/* Booking status, in the "Your bookings" card. Colour reinforces the word beside it rather than
   replacing it — the status text is always rendered, so this stays readable to anyone who cannot
   separate the hues. The tokens are redefined for dark mode in tokens.css, so there is no second
   theme rule to keep in step here. */
.booking-status { font-weight: 600; }
.booking-status--paid { color: var(--success); }
.booking-status--failed { color: var(--danger); }
/* Cancelled and awaiting_payment both stay neutral: neither is an error, and a purchase still in
   flight at the traveller's bank must not be coloured as though it had gone wrong. */
.booking-status--cancelled,
.booking-status--awaiting_payment { color: var(--text-subtle); }
.trip-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.trip-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-size: var(--fs--2);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-1) var(--ease-out);
}
.trip-btn:hover { color: var(--text); border-color: var(--accent); }
.trip-btn.active { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, transparent); }
.trip-btn.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.trip-btn i { margin-right: 3px; }

.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-2); }
.fav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}
.fav-card .fav-name { font-weight: 700; font-size: var(--fs--1); }
.fav-card .fav-sub { color: var(--text-subtle); font-size: var(--fs--2); }
.fav-card .fav-actions { display: flex; gap: 4px; }

.empty-drop {
  text-align: center;
  padding: var(--sp-6);
  border: 2px dashed var(--border);
  border-radius: var(--r-2);
  color: var(--text-muted);
  font-size: var(--fs--1);
}

/* ---------- reachable from home widget ---------- */
.profile-card--reach {
  /* standard profile card layout */
}
.reach-intro {
  margin: 0 0 var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs--1);
}
.reach-intro .home-label {
  color: var(--accent);
  font-weight: 700;
}
.reach-intro .via {
  color: var(--text-subtle);
}
.reach-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: var(--sp-4) 0 var(--sp-4);
}
.reach-slider-wrap {
  flex: 1 1 320px;
}
.reach-slider-wrap label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs--1);
}
.reach-slider-wrap input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.reach-readout {
  font-weight: 700;
  font-size: var(--fs-1);
  white-space: nowrap;
}
.reach-readout #reach-count {
  color: var(--accent);
}
#reachable-map {
  height: 480px;
  min-height: 400px;
  width: 100%;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1.5px solid var(--border);
  z-index: 1;
}
.reach-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs--2);
  color: var(--text-muted);
}
.reach-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reach-legend .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  display: inline-block;
}

@media (max-width: 640px) {
  #reachable-map {
    height: 360px;
    min-height: 320px;
  }
}

} /* @layer page */