/* ==========================================================================
   SKTED — Saved maps dashboard
   Depends on theme.css for tokens, buttons, badges, map cards & empty states.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.dash-header {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1rem var(--gutter);
  background: rgba(6, 8, 11, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline-soft);
}

.dash-user-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.dash-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) 6rem;
}

.dash-title-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hairline-soft);
}

.dash-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--paper);
  -webkit-text-fill-color: currentColor;
}

.dash-subtitle {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--paper-dim);
  max-width: 46ch;
}

/* Create-map CTA — dashboard.js flips display to inline-block in creator mode,
   so the layout rules here must not depend on a flex/grid display value. */
#create-map-dash-btn {
  position: relative;
  padding: 0.9rem 1.4rem;
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: var(--r-pill);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

#create-map-dash-btn:hover {
  background: var(--paper);
  border-color: var(--paper);
}

.saved-maps-container {
  display: grid;
}

/* A second band under the maps, for the trips planned on them. The rule above
   it is what separates the two without a heading having to shout. */
.dash-section {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-soft);
}

.dash-section[hidden] {
  display: none;
}

.dash-section .dash-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.map-card-cta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Install / PWA button
   -------------------------------------------------------------------------- */

/* dashboard.js toggles this between `none` and `inline-block`. */
#install-pwa-btn {
  padding: 0.66rem 1.05rem;
  background: transparent;
  border: 1px solid rgba(127, 160, 95, 0.45);
  border-radius: var(--r-pill);
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

#install-pwa-btn:hover {
  background: var(--moss);
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   iOS install modal (dashboard only — the modal shell lives in theme.css,
   since map.html renders the same component)
   -------------------------------------------------------------------------- */

.ios-steps {
  text-align: left;
  font-size: 0.94rem;
  color: var(--paper-dim);
  margin-bottom: 1.5rem;
  padding-left: 1.2rem;
  line-height: 1.9;
}

.ios-steps::marker {
  color: var(--ember);
}

.ios-steps strong {
  color: var(--paper);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .dash-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .dash-user-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 620px) {
  .dash-user-actions {
    gap: 8px;
  }

  #storage-badge,
  .btn-explore-nav {
    display: none;
  }

  .mode-btn span:first-child {
    display: none;
  }

  .dash-title-section {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #create-map-dash-btn {
    width: 100%;
  }
}