@charset "UTF-8";

.map-page main.map-layout { padding: 0; }

.map-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr;
  height: calc(100vh - 64px);
  min-height: 480px;
  position: relative;
  max-width: none;
}

/* ─── Sidebar ──────────────────────────────────────────────────────── */
.map-sidebar {
  background: var(--bg-page);
  border-right: 1px solid color-mix(in srgb, var(--pohaku-black) 12%, transparent);
  overflow-y: auto;
}
.map-sidebar__inner { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
.map-sidebar__section + .map-sidebar__section { margin-top: var(--sp-6); }
.map-sidebar__heading {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--fg-default) 65%, transparent);
  margin-bottom: var(--sp-2);
}

.chapter-list, .layer-list { list-style: none; padding: 0; margin: 0; }
.chapter-list li, .layer-list li { margin-block: 2px; }

.chapter-list__btn {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--fs-sm);
  cursor: pointer;
}
.chapter-list__btn:hover { background: color-mix(in srgb, var(--sun-gold) 18%, transparent); }
.chapter-list__btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sun-gold) 28%, transparent);
  font-weight: 700;
}
.chapter-list__num {
  display: inline-block;
  width: 1.4em;
  color: color-mix(in srgb, var(--fg-default) 60%, transparent);
}

.layer-list__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.layer-list__row input[type="checkbox"] { accent-color: var(--ocean-deep); }
.layer-list__row:hover { background: color-mix(in srgb, var(--pohaku-black) 4%, transparent); }
.layer-list__swatch {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--pohaku-black) 25%, transparent);
  flex: 0 0 auto;
}
.layer-list__group-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--fg-default) 55%, transparent);
  margin-top: var(--sp-3);
  padding-inline: var(--sp-3);
}

/* ─── Canvas + Mapbox tweaks ───────────────────────────────────────── */
.map-canvas-wrap { position: relative; }
.map-canvas { width: 100%; height: 100%; }

.mapboxgl-ctrl-attrib-inner { font-size: 11px; }
.mapboxgl-popup-content {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
}

/* ─── Pele's Trail scrubber ─────────────────────────────────────────── */
.pele-scrubber {
  position: absolute;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  background: color-mix(in srgb, var(--pohaku-black) 88%, transparent);
  color: var(--pulu-white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  z-index: 2;
}
.pele-scrubber__label { font-weight: 700; }
.pele-scrubber__years { display: flex; gap: var(--sp-2); }
.pele-scrubber__btn {
  background: transparent;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.pele-scrubber__btn[aria-pressed="true"] {
  background: var(--sun-gold);
  color: var(--pohaku-black);
  border-color: var(--sun-gold);
}

/* ─── Info panel ───────────────────────────────────────────────────── */
.info-panel {
  position: absolute;
  right: var(--sp-4); top: var(--sp-4);
  width: min(340px, calc(100vw - 360px));
  max-height: calc(100% - 120px);
  overflow-y: auto;
  background: var(--bg-page);
  border: 1px solid color-mix(in srgb, var(--pohaku-black) 12%, transparent);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  z-index: 3;
}
.info-panel[hidden] { display: none; }
.info-panel__title { font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.info-panel__close {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  background: transparent; border: none; font-size: 1.25rem; cursor: pointer;
}
.info-panel__row { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); margin-block: var(--sp-1); }
.info-panel__row dt { font-weight: 700; min-width: 84px; color: color-mix(in srgb, var(--fg-default) 60%, transparent); }
.info-panel__source { font-size: var(--fs-xs); color: color-mix(in srgb, var(--fg-default) 55%, transparent); margin-top: var(--sp-3); }

/* ─── Drawer toggle (mobile only) ──────────────────────────────────── */
.drawer-toggle {
  display: none;
  position: absolute; bottom: var(--sp-4); right: var(--sp-4);
  background: var(--pohaku-black);
  color: var(--pulu-white);
  border: none;
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  z-index: 4;
  cursor: pointer;
}

/* ─── Mobile breakpoint ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .map-layout { grid-template-columns: 1fr; grid-template-rows: 1fr; height: calc(100vh - 64px); }
  .map-sidebar {
    position: absolute;
    inset: auto 0 0 0;
    transform: translateY(calc(100% - 48px));
    transition: transform 0.25s ease;
    background: var(--bg-page);
    border-right: none;
    border-top: 1px solid color-mix(in srgb, var(--pohaku-black) 12%, transparent);
    max-height: 70vh;
    z-index: 5;
  }
  .map-sidebar.is-open { transform: translateY(0); }
  .drawer-toggle { display: inline-flex; }
  .info-panel { right: var(--sp-2); top: var(--sp-2); width: calc(100vw - 32px); }
}