/* styles.css — P1-01. BASE ONLY.
   Layout shell, tokens and the map container. Module styling lives in
   css/<module>.css, owned by that module's step; each step links its own
   stylesheet. Do not add feature styling here. */

:root {
  /* palette */
  --bg:        #0f1417;
  --bg-raised: #172026;
  --line:      #26333b;
  --text:      #e8eef1;
  --text-dim:  #9aabb5;
  --accent:    #2ec4b6;   /* hike */
  --accent-2:  #3a86ff;   /* dive */
  --warn:      #ffb703;
  --bad:       #e63946;

  /* geometry */
  --chrome-h: 3.25rem;
  --panel-w: 22rem;       /* desktop side panel */
  --panel-h: 45vh;        /* mobile bottom sheet */
  --radius: 0.5rem;
  --pad: 0.75rem;

  /* type */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --z-chrome: 1000;       /* above Leaflet controls (Leaflet tops out at 800) */
  --z-panel: 900;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;         /* dvh so iOS Safari's toolbar does not clip the map */
  min-height: 100vh;
}

.chrome {
  flex: 0 0 auto;
  min-height: var(--chrome-h);
  display: flex;
  align-items: center;
  gap: var(--pad);
  padding: 0 var(--pad);
  padding-top: env(safe-area-inset-top, 0);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: var(--z-chrome);
}

.main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;          /* lets the map actually shrink inside flex */
  position: relative;
}

/* The map fills whatever the chrome and panel leave behind. It is never
   unmounted — the panel and pin styling change, the map does not. */
.map {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #10171b;    /* pre-tile backdrop, not a "grey void" indicator */
}

.panel {
  flex: 0 0 var(--panel-w);
  max-width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-raised);
  border-left: 1px solid var(--line);
  padding: var(--pad);
  z-index: var(--z-panel);
}

.panel:empty { display: none; }

/* Mobile-first reality: below 48rem the panel is a bottom sheet. */
@media (max-width: 48rem) {
  .main { flex-direction: column; }
  .panel {
    flex: 0 0 auto;
    max-height: var(--panel-h);
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  }
}

.noscript {
  padding: var(--pad);
  color: var(--warn);
}

/* Leaflet overrides kept minimal and base-level. */
.leaflet-container {
  background: #10171b;
  font-family: var(--font);
}

.leaflet-control-attribution {
  background: rgba(15, 20, 23, 0.78);
  color: var(--text-dim);
  font-size: 0.6875rem;
}

.leaflet-control-attribution a { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}