/*
 * map.css — Track L · Map Atlas (V2) page-specific styles.
 *
 * Builds on top of Track A's tokens (styles.css). Introduces NO new colour
 * tokens — all colour references use var(--paper), var(--ink), etc.
 *
 * Three-column layout: 260px (layers rail) · 1fr (map canvas) · 300px
 * (parcel inspector) matching the V2-map.jsx reference prototype.
 */

/* ── Full-page shell ─────────────────────────────────────────────────────── */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.map-shell {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  grid-template-areas: "layers canvas inspector";
  height: 100vh;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Layers rail (left) ─────────────────────────────────────────────────── */
.map-layers {
  grid-area: layers;
  border-right: 1px solid var(--rule);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--paper);
}
.map-layers::-webkit-scrollbar { display: none; }

/* Bottom-sheet handle — only visible at ≤640px (see map.css §640px block).
 * On desktop the handle is hidden and the body has no flex chrome so the
 * pre-HP66 desktop layout is byte-for-byte unchanged. */
.map-layers__handle { display: none; }

.map-layers__wordmark {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline;
}

.map-layers__wordmark-beta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

.map-layers__location {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 18px;
}

.map-layers__address {
  position: relative;
  margin-bottom: 20px;
}

.map-layers__address input {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 12px;
  border-radius: 2px;
  color: var(--ink);
  box-sizing: border-box;
}

.map-layers__address input:focus {
  outline: none;
  border-color: var(--ink-3);
}

.map-layers__address-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  pointer-events: none;
}

.map-layers__section-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.map-layers__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.map-layers__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  text-align: left;
  border-radius: 2px;
  width: 100%;
  transition: background 0.1s ease;
}

.map-layers__item:hover {
  background: var(--paper-2);
}

.map-layers__item.active {
  background: var(--ink);
  color: var(--paper);
}

.map-layers__item-count {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Radius slider ──────────────────────────────────────────────────────── */
.map-layers__radius {
  margin-top: 24px;
}

.map-layers__radius-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.map-layers__slider-track {
  height: 28px;
  display: flex;
  align-items: center;
}

.map-layers__slider-inner {
  flex: 1;
  height: 2px;
  background: var(--paper-3);
  position: relative;
}

.map-layers__slider-fill {
  height: 100%;
  background: var(--ink);
  transition: width 0.15s ease;
}

.map-layers__slider-thumb {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

input.map-layers__range {
  position: absolute;
  width: 100%;
  top: -4px;
  left: 0;
  opacity: 0;
  cursor: pointer;
  height: 18px;
  margin: 0;
}

.map-layers__slider-bounds {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-top: 4px;
}

/* ── Legend ─────────────────────────────────────────────────────────────── */
.map-layers__legend {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}

.map-layers__legend-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.map-layers__legend-items {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  flex-wrap: wrap;
}

.map-layers__legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.map-layers__legend-dot.risk    { background: var(--risk); }
.map-layers__legend-dot.civic   { background: var(--civic); }
.map-layers__legend-dot.support { background: var(--support); }

/* ── Map canvas (center) ────────────────────────────────────────────────── */
.map-canvas {
  grid-area: canvas;
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}

#map-leaflet {
  width: 100%;
  height: 100%;
  background: var(--paper-2);
}

/* Override Leaflet defaults to match the paper colour scheme */
.map-canvas .leaflet-container {
  background: var(--paper-2);
  font-family: var(--mono);
}

/* ── Chrome bar overlay ─────────────────────────────────────────────────── */
.map-chrome {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 800;
  pointer-events: none;
}

.map-chrome__status {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  pointer-events: auto;
}

.map-chrome__status b {
  color: var(--ink);
}

.map-chrome__spacer {
  flex: 1;
}

.map-chrome__view {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.map-chrome__view-sep {
  color: var(--ink-4);
}

.map-chrome__view span.active {
  color: var(--ink);
}

/* ── Scale + Compass overlays ───────────────────────────────────────────── */
.map-scale {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  z-index: 800;
  pointer-events: none;
}

.map-scale__bar {
  width: 80px;
  height: 2px;
  background: var(--ink-2);
  margin-bottom: 4px;
}

.map-compass {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  z-index: 800;
  pointer-events: none;
}

.map-compass__ring {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

/* ── Empty-portfolio overlay ────────────────────────────────────────────── */
.map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  background: rgba(244, 241, 234, 0.88);
  pointer-events: none;
}

.map-empty__inner {
  text-align: center;
  pointer-events: auto;
}

.map-empty__heading {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
}

.map-empty__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.map-empty__cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
}

.map-empty__cta:hover {
  background: var(--ink-2);
}

/* ── Parcel inspector (right) ───────────────────────────────────────────── */
.map-inspector {
  grid-area: inspector;
  border-left: 1px solid var(--rule);
  padding: 22px;
  background: var(--paper);
  overflow-y: auto;
  scrollbar-width: none;
}
.map-inspector::-webkit-scrollbar { display: none; }

.map-inspector__case-id {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--civic);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.map-inspector__title {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 12px;
  line-height: 1.2;
}

/* ── Inspector empty state ─────────────────────────────────────────────── */
.map-inspector__empty {
  text-align: center;
  padding: 40px 0;
}

.map-inspector__empty-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  margin: 0 auto 12px;
}

.map-inspector__empty-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* ── Inspector metadata grid ────────────────────────────────────────────── */
.map-inspector__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 18px;
}

.map-inspector__meta-cell {
  background: var(--paper);
  padding: 10px 12px;
}

.map-inspector__meta-key {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-inspector__meta-val {
  font-size: 13px;
  color: var(--ink);
  margin-top: 2px;
}

/* ── Impact rows ────────────────────────────────────────────────────────── */
.map-inspector__section-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.map-inspector__impact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.map-inspector__impact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  border-bottom: 1px dashed var(--rule-soft);
  padding-bottom: 6px;
}

.map-inspector__impact-label {
  color: var(--ink-2);
}

.map-inspector__impact-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.map-inspector__impact-val.risk    { color: var(--risk); }
.map-inspector__impact-val.support { color: var(--support); }
.map-inspector__impact-val.civic   { color: var(--ink); }

/* ── Neighbours ─────────────────────────────────────────────────────────── */
.map-inspector__neighbours {
  margin-bottom: 18px;
}

.map-inspector__neighbours-count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.map-inspector__neighbours-n {
  font-family: var(--serif);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.map-inspector__neighbours-sub {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}

.map-inspector__neighbours-detail {
  font-size: 11px;
  color: var(--ink-3);
}

/* ── Inspector CTAs ─────────────────────────────────────────────────────── */
.map-inspector__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-inspector__source {
  margin-top: 22px;
  padding: 12px;
  background: var(--paper-2);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
}

.map-inspector__source-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 6px;
}

/* ── Loading state ──────────────────────────────────────────────────────── */
.map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  z-index: 900;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-loading.hidden { display: none; }

/* ── Responsive collapse ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .map-shell {
    grid-template-columns: 260px 1fr;
    grid-template-areas: "layers canvas";
  }
  .map-inspector { display: none; }
}

/* Tablet portrait (641–820px) — keep 2-of-3 rails: layers rail + canvas.
 * Inspector remains hidden (parcel detail is reachable via map pin tap).
 * The layers rail is narrowed to 220px so the canvas keeps vertical real
 * estate for the map; rail padding tightens to match. The mobile bottom-
 * sheet pattern (≤640px) is unchanged below this block. */
@media (min-width: 641px) and (max-width: 820px) {
  .map-shell {
    grid-template-columns: 220px 1fr;
    grid-template-areas: "layers canvas";
  }
  .map-layers {
    padding: 16px 14px;
  }
  .map-inspector { display: none; }
}

@media (max-width: 640px) {
  /* HP66 §3.B.2 — Map mobile bottom-sheet pattern.
   *
   * Replaces the HP65 stacked-layout (layers rail above, map below) with a
   * full-bleed map + a swipe-up bottom sheet that holds the layers rail.
   * Sheet has three states driven by a `data-state` attribute on
   * `.map-layers` set by `map.js`:
   *
   *   collapsed (default) — handle + "Layers" label visible (~64px tall),
   *                          tap or drag-up expands to half-viewport.
   *   half                — sheet expanded to 50vh, layers rail scrollable,
   *                          tap handle or drag-down dismisses to collapsed.
   *   full                — full-screen take-over; not used by default but
   *                          available for future "edit layers" surface.
   *
   * The map canvas fills the full viewport behind the sheet so the sheet
   * floats above without losing pin context. Pure CSS; map.js only manages
   * the data-state attribute via tap + simple touch events.
   *
   * Token reference (no inline colours):
   *   --paper           — sheet surface
   *   --rule            — handle + sheet edge
   *   --ink-3           — handle dot, idle label
   *
   * The mobile-nav drawer (styles.css §"Mobile nav") still gives access
   * to other sections; the bottom-tab bar (HP66 §3.B.1) gives access to
   * primary destinations. */
  .map-shell {
    display: block;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  .map-canvas {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    z-index: 1;
  }

  /* Bottom sheet */
  .map-layers {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 64px;
    max-height: 50vh;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-right: none;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 12px 16px 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.22s ease;
    box-shadow: 0 -4px 16px rgba(20, 17, 13, 0.08);
    box-sizing: border-box;
  }
  .map-layers[data-state="half"] {
    height: 50vh;
    overflow: hidden;
  }
  .map-layers[data-state="full"] {
    height: 100vh;
    border-radius: 0;
  }

  /* Drag handle — tap target spans the full sheet header so the sheet is
   * easy to grab on touch. Override the desktop default (display: none). */
  .map-layers .map-layers__handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    margin: -12px -16px 4px;
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .map-layers__handle::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ink-4);
    border-radius: 2px;
    opacity: 0.5;
  }
  .map-layers__handle-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: uppercase;
  }

  /* Body of the sheet — only visible when sheet is half/full. Wraps every
   * non-handle child of .map-layers so map.js can simply toggle the
   * data-state without hiding individual sections. */
  .map-layers__body {
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }
  .map-layers[data-state="collapsed"] .map-layers__body {
    display: none;
  }

  .map-inspector {
    /* Inspector becomes accessible inside the sheet's body via tab swap
     * in a future iteration; for HP66 we hide the inspector at mobile and
     * surface its content from the layer-pin tooltip on tap. */
    display: none;
  }
}

/* ── 375px-class refinements (≤480px) ────────────────────────────────────── */
/* Mobile responsiveness pass (HP52 §8.B.2). The chrome overlay (status
 * pill + view selector) is a flex row with a spacer between them — at
 * 375px the spacer collapses and the two pills crowd together. Stack
 * them vertically and tighten the type so they don't dominate the
 * canvas. The empty-portfolio overlay also gets a softer headline. */
@media (max-width: 480px) {
  .map-chrome {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .map-chrome__spacer { display: none; }
  .map-chrome__status,
  .map-chrome__view {
    font-size: 10px;
    padding: 4px 8px;
  }
  .map-chrome__view { gap: 6px; }
  .map-empty__heading { font-size: 18px; }
  .map-empty__sub { font-size: 10px; }
}