/* Cemetery interactive map — PROTOTYPE styles. Heritage Warm palette. */

.cem {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-4);
  max-width: 1400px;
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-5);
  position: relative;
}

/* ----- Sidebar (search + legend) ----- */
.cem-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
.cem-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; color: var(--color-text-muted); display: block;
  margin-bottom: var(--space-2);
}
.cem-search input {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface);
}
.cem-search input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cem-count { font-size: 0.85rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; min-height: 1.2em; }

.cem-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.cem-results button {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--color-surface-warm); color: var(--color-text);
  display: flex; justify-content: space-between; gap: 8px;
}
.cem-results button:hover, .cem-results button:focus-visible {
  border-color: var(--color-primary); outline: none;
}
.cem-results .r-loc { color: var(--color-text-muted); font-size: 0.82rem; white-space: nowrap; }

.cem-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.cem-legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 16px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid var(--color-border); }
.swatch.occupied { background: #bcd3b4; border-color: #9c9384; }
.swatch.reserved { background: #ead9b0; border-color: #9c9384; }
.swatch.empty { background: #ffe48a; border-color: #9c9384; }

/* ----- Map stage ----- */
.cem-stage { position: relative; }
.cem-map {
  /* Fill the column width and let it run tall (it's a portrait cemetery) —
     people pan/zoom to explore, so overflowing the viewport is fine. */
  width: 100%; aspect-ratio: 478 / 773; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  cursor: grab; touch-action: none;
}
.cem-map.dragging { cursor: grabbing; }
.cem-map:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cem-map svg { display: block; width: 100%; height: 100%; }

.cem-controls { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 5; display: flex; gap: 4px; }
.cem-controls button {
  font: inherit; font-weight: 600; cursor: pointer; min-width: 34px; height: 34px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text); line-height: 1;
}
.cem-controls button:hover { border-color: var(--color-primary); }
.cem-hint { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; text-align: center; }

/* ----- Plot polygons ----- */
.road { fill: none; stroke: #d8ccb0; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform thin borders; status shown by FILL only. */
.plot { cursor: pointer; stroke: #9c9384; stroke-width: 0.35; }
.plot.occupied { fill: #bcd3b4; }   /* green  = occupied */
.plot.reserved { fill: #ead9b0; }   /* tan    = reserved/sold */
.plot.empty    { fill: #ffe48a; }   /* yellow = available (matches the plat) */
.plot:hover { fill: var(--color-secondary); }
.plot.selected { fill: var(--color-primary); }
.plot.match { fill: var(--color-accent); }
.plot:focus-visible { outline: 2px solid var(--color-primary); }

/* Labels are hidden until zoomed in (toggled by JS via .show-labels on svg) */
.plot-label { font-family: var(--font-serif); fill: var(--color-text); pointer-events: none; opacity: 0; transition: opacity 0.15s; text-anchor: middle; }
svg.show-labels .plot-label { opacity: 1; }
.plot-label.on-dark { fill: #fff; }

/* ----- Detail panel ----- */
.cem-detail {
  position: absolute; top: 0; right: var(--space-5); width: 300px; z-index: 10;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5);
}
.cem-detail-close { position: absolute; top: 8px; right: 10px; border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.cem-detail h2 { font-family: var(--font-serif); margin: 0 0 var(--space-2); font-size: 1.3rem; }
.cem-detail .d-status { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 3px 8px; border-radius: 99px; margin-bottom: var(--space-4); }
.d-status.occupied { background: #cdddc7; color: var(--color-primary-hover); }
.d-status.reserved { background: #f1e2c4; color: #8a6a1e; }
.d-status.empty { background: var(--color-surface-warm); color: var(--color-text-muted); }
.cem-detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.92rem; }
.cem-detail dt { color: var(--color-text-muted); }
.cem-detail dd { margin: 0; }
.cem-detail .d-note { margin-top: var(--space-4); font-size: 0.82rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }

/* ----- Responsive ----- */
@media (max-width: 760px) {
  .cem { grid-template-columns: 1fr; }
  .cem-detail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* Map labels: section titles, Krouse Rd, compass, entrances */
.map-label { font-family: var(--font-sans); fill: var(--color-text-muted); text-anchor: middle; pointer-events: none; font-weight: 600; }
.map-label.section-label { fill: var(--color-heading); font-weight: 700; letter-spacing: 0.4px; }
.map-label.road-label { fill: #9a7b43; letter-spacing: 1.5px; }
.map-label.compass { fill: var(--color-accent); font-weight: 700; }
.map-label.entrance-label { fill: #9a7b43; }
.map-label.muted-label { fill: var(--color-text-muted); opacity: 0.75; }

@media (prefers-color-scheme: dark) {
  /* Map labels are brown for the cream plat; lighten them for the dark stage.
     Plot status fills (green/tan/yellow) and legend swatches are kept — semantic. */
  .map-label.road-label,
  .map-label.entrance-label { fill: #c2a878; }
  .d-status.reserved { color: #e0c07a; }
}