/* ── App shell ─────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 150;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--color-background) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: padding 0.25s ease;
}

.app-header img {
  height: 56px;
  display: block;
  transition: height 0.25s ease;
}

.app-header--compact {
  padding: var(--sp-2) var(--sp-4);
}
.app-header--compact img {
  height: 32px;
}

/* ── Window Controls Overlay ───────────────────────────────────────────────── */
/* When installed as a WCO-enabled desktop PWA, the browser draws native
   window-control buttons (Windows: right edge) and sometimes an app icon
   (macOS: left edge, ahead of the traffic-light buttons) directly on top of
   the page — env(titlebar-area-*) describes the safe rect between them.
   Reserve that space on both sides of the header so the right-aligned logo
   and the header's tab-bar pill are never drawn underneath native chrome. */
@media (display-mode: window-controls-overlay) {
  .app-header {
    padding-left:  max(var(--sp-4), env(titlebar-area-x, 0px));
    padding-right: max(
      var(--sp-4),
      calc(100% - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100%))
    );
    /* Neither the logo nor the temp badge are interactive, so the whole bar
       can double as a drag handle for moving the window — standard WCO UX. */
    -webkit-app-region: drag;
            app-region: drag;
  }

  /* tab-bar is a separate fixed element that visually overlaps the header
     at desktop widths; keep it explicitly click/tap-able rather than
     relying on it simply not inheriting the header's drag region. */
  tab-bar {
    -webkit-app-region: no-drag;
            app-region: no-drag;
  }

  /* Compact's shrunken header sits visually tighter to begin with, so flush
     against the titlebar-area boundary reads as crowding the OS window
     chrome — pad past it a bit further than the expanded state needs. */
  .app-header--compact {
    padding-left:  calc(max(var(--sp-4), env(titlebar-area-x, 0px)) + var(--sp-3));
    padding-right: calc(
      max(var(--sp-4), calc(100% - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100%)))
      + var(--sp-3)
    );
  }
}

.header-temp {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.app-header--show-temp .header-temp { opacity: 1; }

.header-temp-icon { display: inline-flex; }
.header-temp-icon svg { width: 1.125rem; height: 1.125rem; display: block; }

.app-main {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* ── Tabbed views ──────────────────────────────────────────────────────────── */
/* Room for the floating tab-bar pill so content/footer is never hidden behind it. */
body { padding-bottom: 112px; }

/* ── Alerts view ───────────────────────────────────────────────────────────── */
.alerts-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.alerts-content[hidden] { display: none; }

.alerts-empty {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--sp-8) var(--sp-4);
}

.section-hint {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: calc(var(--sp-2) * -1);
  margin-bottom: var(--sp-2);
}

.cautions-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cautions-content[hidden] { display: none; }

.cautions-empty {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--sp-8) var(--sp-4);
}

/* ── Dashboard section label ──────────────────────────────────────────────── */
.section-label {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-2);
}

/* ── Search form ───────────────────────────────────────────────────────────── */
.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.search-form[hidden] { display: none; }

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-row > label,
.form-row > .form-row-label {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.form-error {
  font-size: 0.875rem;
  color: var(--color-slope-red);
  display: none;
  padding: 0 var(--sp-1);
}
.form-error.visible { display: block; }
/* A neutral notice ("you're already there") rather than a problem. */
.form-error--info { color: var(--color-text-secondary); }

/* ── Find route button ─────────────────────────────────────────────────────── */
.btn-find {
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn-find:hover  { opacity: 0.85; }
.btn-find:active { opacity: 0.70; }
.btn-find:focus-visible {
  outline: 2px solid var(--color-slope-blue);
  outline-offset: 3px;
}

/* ── Secondary text button ────────────────────────────────────────────────── */
.btn-text {
  width: 100%;
  padding: var(--sp-3) var(--sp-6);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color 0.15s ease;
}
.btn-text:hover { color: var(--color-text); }
.btn-text:focus-visible {
  outline: 2px solid var(--color-slope-blue);
  outline-offset: 2px;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: var(--sp-4);
  color: var(--color-text-secondary);
}

.app-footer small {
  font-size: 0.75rem;
}

.app-footer a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Desktop ───────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .app-main { padding: var(--sp-8) var(--sp-6); }

  /* Alerts widens from tablet width up, so avalanche alerts and weather
     cautions can sit in two, then three, columns (see .alert-list /
     .caution-list in components.css). */
  #view-alerts .app-main { max-width: 1080px; }
}

@media (min-width: 900px) {
  /* The tab-bar moves into the header here (see components.css), so the
     bottom dock's reserved clearance is no longer needed. */
  body { padding-bottom: 0; }

  /* Logo moves to the right edge; the temp badge joins the flex flow
     (instead of overlaying absolutely) so the two can never collide —
     it just reserves its slot, invisible via opacity, until shown. */
  .app-header {
    justify-content: flex-end;
    gap: var(--sp-4);
  }
  .app-header > picture { order: 2; }
  .header-temp {
    position: static;
    order: 1;
    transform: none;
  }

  #view-resorts .app-main { max-width: 1080px; }

  /* Home widens too, so multiple route results can sit side by side (see
     .result-cards in components.css) — but the search form itself stays a
     narrow, centred column rather than stretching edge to edge. */
  #view-home .app-main { max-width: 1080px; }
  #view-home location-gate,
  #view-home weather-hero,
  #view-home .search-panel {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  /* .app-main itself is capped at 480px by default (see the base rule
     above) — needs its own override here, same as resorts/home above, or
     route-detail's own wider max-width below has no room to take effect. */
  #view-route-detail .app-main { max-width: 1040px; }

  /* A single route's own page reads as one narrow column, like the search
     form, rather than stretching edge to edge like the multi-card grid —
     except when there's a map to show (see below), which gets a wider,
     two-column treatment instead. */
  #view-route-detail route-detail {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Wide enough to show the map, it sits side by side with the route
     details instead of stacked above them — see .detail-map-section in
     components.css. Scoped to :has(.detail-map-card) so the offline state
     (no map, see route-detail.js) keeps the plain single narrow column above
     instead. */
  #view-route-detail route-detail:has(.detail-map-card) {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-6);
    max-width: 1040px;
  }
}