/* Parcel IQ — Map Engine Gallery & Modal */

/* ═══════════════════════════════════════════════════════════════════════════
   Map Set Preview
   The twelve generated plates are the product, so this is the one surface that
   gets a bespoke treatment: a centred plate portfolio on desktop, a full-screen
   sheet on phones with the header and the download bar both pinned so the
   export controls are reachable without scrolling 12 maps back to the bottom.
   Colour/space/radius values come from the app's token block in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
#map-gallery-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(12,18,32,0.62);
  padding: clamp(12px, 3vh, 32px) clamp(12px, 3vw, 32px);
}
#map-gallery-modal.open { display: flex; align-items: center; justify-content: center; }

#map-gallery-modal .modal-content {
  width: 100%;
  max-width: 1460px;
  max-height: 100%;
  margin: 0 auto;
  background: var(--pp-surface, #fff);
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 28px 70px rgba(6,10,22,0.45);
  /* Header / scrolling plates / download bar. The middle track is the only
     thing that scrolls, so the title and the exports never leave the screen. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#map-gallery-modal .modal-header {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(14px, 2.2vw, 24px);
  border-bottom: 1px solid var(--pp-line-soft, #ece7dd);
  background: var(--pp-surface, #fff);
}
#map-gallery-modal .modal-hint {
  flex: none;
  font-size: 11.5px;
  color: var(--pp-text-faint, #767f8d);
  white-space: nowrap;
}
@media (max-width: 700px) { #map-gallery-modal .modal-hint { display: none; } }
#map-gallery-modal .modal-header h2 {
  margin: 0;
  font-family: var(--ff-display, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.2vw + 11px, 19px);
  font-weight: 800;
  color: var(--pp-navy, #182338);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#map-gallery-modal .modal-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--pp-line, #e3ddd0);
  border-radius: var(--r-sm, 6px);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--pp-text-muted, #5f6878);
  -webkit-tap-highlight-color: transparent;
}
#map-gallery-modal .modal-close:hover { background: #f4f1ea; color: #000; }

#map-gallery-modal .modal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 2.2vw, 24px);
}

#map-gallery {
  display: grid;
  /* One plate per row on phones; two side by side once a column can hold a
     legible 1200x900 plate (~440px). */
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 20px);
}
/* Two plates side by side only once each column can still hold a readable
   1200x900 plate (~620px). Below that a single wide plate beats two cramped
   ones — legend text and scale bars are the whole point of the preview. */
@media (min-width: 1320px) {
  #map-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.map-card {
  border: 1px solid var(--pp-line, #e3ddd0);
  border-radius: var(--r-md, 9px);
  overflow: hidden;
  background: #fff;
  min-width: 0;
}
.map-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--pp-surface-raised, #faf9f5);
  border-bottom: 1px solid var(--pp-line-soft, #ece7dd);
}
.map-card-header strong {
  color: var(--pp-navy, #182338);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}
.map-status {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* #888 on #f5f6f8 was 3.4:1. This passes AA for small text. */
  color: #5f6878;
}
.map-status[data-state="complete"] { color: #15784e; }
.map-status[data-state="error"] { color: #a8291f; }

.map-card-canvas {
  position: relative;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  min-width: 0;
}
/* The plate keeps its generated 1200x900 geometry and is only scaled for
   display — never stretched, never re-extented for the viewport. */
.map-card-canvas canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  border: 1px solid var(--pp-line-soft, #ece7dd);
  border-radius: var(--r-sm, 6px);
  object-fit: contain;
}
.map-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--pp-line, #e3ddd0);
  border-radius: var(--r-sm, 6px);
  font-size: 12px;
  font-weight: 600;
  /* #2e7cbf on white was 3.9:1 — below AA for this size. */
  color: #1f6f9c;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.map-download:hover { background: #f4f1ea; text-decoration: none; }
@media (max-width: 900px) { .map-download { min-height: 44px; width: 100%; } }

/* Export / download bar — pinned to the bottom of the modal. */
#piq-export-section {
  flex: none;
  border-top: 1px solid var(--pp-line-soft, #ece7dd);
  background: var(--pp-surface-raised, #faf9f5);
  padding: 12px clamp(14px, 2.2vw, 24px) calc(12px + env(safe-area-inset-bottom));
}
.piq-export-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.piq-export-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #5f6878);
  flex: none;
}
.piq-export-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
/* Below 560px four side-by-side exports become unreadable micro-buttons, so
   they become a two-up grid with full-height targets. */
@media (max-width: 700px) {
  /* Two rows, not four: the primary spans the width and the three single
     exports share one row. The label is dropped — the buttons name themselves,
     and on a 844px-tall phone the bar has to leave the plates room to breathe. */
  .piq-export-row { align-items: stretch; gap: 6px; }
  .piq-export-label { width: 100%; font-size: 10.5px; letter-spacing: .08em; }
  .piq-export-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .piq-export-btn { width: 100%; padding: 0 6px; font-size: 12px; }
  .piq-export-btn--primary { grid-column: 1 / -1; }
}
/* Three exports across a 390px phone leaves ~118px each — legible but a tight
   tap target. Every phone-width viewport gets the two-column arrangement; only
   large phones / small tablets keep three across. */
@media (max-width: 460px) {
  .piq-export-btns { grid-template-columns: 1fr 1fr; }
  .piq-export-btn--contact { grid-column: 1 / -1; }
  .piq-export-btn { font-size: 12.5px; padding: 0 10px; }
}

/* Full-screen sheet on phones. */
@media (max-width: 640px) {
  #map-gallery-modal { padding: 0; }
  #map-gallery-modal .modal-content {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  #map-gallery-modal .modal-scroll { padding: 12px; }
}

/* ── Single-plate viewer ───────────────────────────────────────────────────
   A 1200x900 plate scaled into a 2-up grid (or a 360px phone) renders its
   legend, scale bar and source line too small to verify. Tapping a plate opens
   it at the largest size the viewport allows. Display only — the exported
   artefact and its extent are untouched. */
.map-card-canvas { cursor: zoom-in; }
.map-card-canvas[role="button"]:focus-visible { outline: 2px solid var(--pp-focus, #1f6f9c); outline-offset: -2px; border-radius: 6px; }

#plate-viewer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3200;
  background: rgba(10,15,26,.93);
  padding: 0;
}
#plate-viewer.open { display: flex; flex-direction: column; }
#plate-viewer .plate-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(12px, 2vw, 20px) calc(10px + env(safe-area-inset-top));
  color: #eef2f8;
  /* Opaque: the gallery header behind the scrim used to ghost through it. */
  background: #131a29;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
#plate-viewer .plate-title {
  flex: 1;
  min-width: 0;
  font-family: var(--ff-display, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: clamp(13px, 1vw + 10px, 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#plate-viewer .plate-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: #eef2f8;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#plate-viewer .plate-btn:hover { background: rgba(255,255,255,.12); }
#plate-viewer .plate-close { width: 44px; padding: 0; font-size: 22px; line-height: 1; }
#plate-viewer .plate-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 18px);
  -webkit-overflow-scrolling: touch;
}
/* Fit by default; the 1:1 toggle lets the stage scroll at native resolution
   so fine cartographic labels can be read on a phone. */
#plate-viewer .plate-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
#plate-viewer.actual .plate-stage { align-items: flex-start; justify-content: flex-start; }
#plate-viewer.actual .plate-stage img { max-width: none; max-height: none; width: auto; height: auto; }

/* MUST come after the base .plate-title rule above — same specificity, so
   source order decides. Placed before it, the base `flex:1` + ellipsis won and
   the title still truncated to "Aerial 200…" on a phone.
   On a phone the title, two actions and the close control cannot share one row.
   The title takes its own row; the actions span the width beneath it. */
@media (max-width: 620px) {
  #plate-viewer .plate-bar { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; }
  #plate-viewer .plate-title {
    order: 1;
    /* Basis wider than the remaining row forces the actions onto line two;
       flex-grow/shrink of 0 stops it collapsing back onto line one. */
    flex: 0 0 calc(100% - 52px);
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
  #plate-viewer .plate-close { order: 2; }
  #plate-viewer #plate-zoom-toggle { order: 3; flex: 1 1 0; min-width: 0; }
  #plate-viewer #plate-download { order: 4; flex: 1 1 0; min-width: 0; }
}

/* Generate button injected into the main app */
.pq-generate-maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #182338;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.pq-generate-maps-btn:hover { background: #2a3a54; }
.pq-generate-maps-btn svg { width: 14px; height: 14px; fill: currentColor; }