/**
 * Public track navigator (/track) — picker + preview states.
 *
 * This page does not link my-tour.css. The fullscreen nav overlay is styled
 * by nav-overlay.css, which is self-sufficient (it resolves to the global
 * --color- and --font- tokens in styles.css — see its own header comment).
 * The compact preview map below reuses the shared .day-map-injected,
 * .map-endpoint and elevation-control styles that also live in
 * nav-overlay.css (moved there from my-tour.css for this reason), so it
 * renders identically to the day maps on /my-tour without this page
 * needing my-tour.css.
 *
 * Keep the two-character comment terminator out of the prose above: writing
 * a token glob like --color-<star>/--font-<star> closes this comment early
 * and silently swallows the .track-page rule that follows.
 */

.track-page {
  padding: calc(var(--space-4xl) + 80px) 0 var(--space-4xl);
  min-height: 100vh;
  background: var(--color-cream);
}

.track-page__inner {
  max-width: 640px;
}

/* ---- Shared heading block ------------------------------------------- */
.track-page__eyebrow {
  display: inline-block;
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid var(--color-charcoal);
  border-radius: 200px 10px 200px 10px / 10px 200px 10px 200px;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}

.track-page__title {
  margin-bottom: var(--space-md);
}

.track-page__subtitle {
  color: var(--color-charcoal-light);
  font-size: 1.0625rem;
  max-width: 52ch;
  margin-bottom: var(--space-2xl);
}

/* ---- Picker state ----------------------------------------------------- */
.track-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--color-white);
  border: 3px dashed var(--color-charcoal);
  border-radius: var(--border-radius-lg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.track-dropzone--active {
  border-color: var(--color-blue);
  background: var(--color-blue-light);
}

.track-dropzone__icon {
  color: var(--color-blue);
  margin-bottom: var(--space-xs);
}

.track-dropzone__prompt {
  font-weight: 700;
  font-size: 1.0625rem;
}

.track-dropzone__or {
  color: var(--color-stone);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Keeps the real <input type="file"> in the accessibility tree (so the
   "Choose file" button's click-forwarding has something to activate) while
   staying invisible — display:none inputs are unreliable to .click() in some
   browsers, so this uses the standard clip-based hide instead of hidden. */
.track-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.track-errors {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Author styles normally beat the UA [hidden] rule (origin trumps
   specificity in the cascade), so the explicit display:flex above would
   keep this section visible even with the hidden attribute set. This
   override has higher specificity (class + attribute) and restores the
   expected hidden behavior; see .track-preview[hidden] below for the same
   pattern in this file. */
.track-errors[hidden] {
  display: none;
}

.track-error {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-red-light);
  color: var(--color-red-dark);
  border: 2px solid var(--color-red);
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 0.9375rem;
}

.track-privacy {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xl);
  color: var(--color-stone);
  font-size: 0.875rem;
  font-weight: 600;
}

.track-privacy__icon {
  flex: 0 0 auto;
  color: var(--color-blue);
}

/* ---- Preview state ------------------------------------------------------ */
.track-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Author styles normally beat the UA [hidden] rule (origin trumps
   specificity in the cascade), so an explicit display:flex above would keep
   this section visible even with the hidden attribute set. This override
   has higher specificity (class + attribute) and restores the expected
   hidden behavior; see nav-overlay.css's header comment for the same quirk
   elsewhere in this codebase. */
.track-preview[hidden] {
  display: none;
}

.track-preview__map {
  width: 100%;
}

.track-preview__name {
  font-size: 1.375rem;
  word-break: break-word;
}

.track-preview__stats {
  display: flex;
  background: var(--color-white);
  border: 3px solid var(--color-charcoal);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.track-preview__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
}

/* Same [hidden]-vs-author-display quirk as .track-preview[hidden] above —
   the display:flex on .track-preview__stat would otherwise beat the UA rule.
   Used to drop the waypoints tile when the GPX has no <wpt> elements. */
.track-preview__stat[hidden] {
  display: none;
}

.track-preview__stat + .track-preview__stat {
  border-left: 2px solid var(--color-charcoal);
}

.track-preview__stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-charcoal);
}

.track-preview__stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-stone);
}

.track-preview__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .track-page {
    padding-top: calc(var(--space-3xl) + 70px);
  }

  .track-dropzone {
    padding: var(--space-xl) var(--space-md);
  }

  .track-preview__stat-value {
    font-size: 1.0625rem;
  }
}