/* =====================================================================
   lc-mall-map.css — site plan for a shopping centre.
   Inherits the shopping vertical's tokens (lc-shops.css): PT Serif over
   letterspaced Archivo, ink #1d2721, one accent #2f6f57. Deliberately
   no second accent — 72 units in four colours would read as a rainbow,
   so the filter does the work and the drawing stays quiet.
   ===================================================================== */
#lc-mall-map {
  --mm-ink: #1d2721;
  --mm-muted: #6b7772;
  --mm-line: #e3e6e3;
  --mm-bg: #fff;
  /* The ground has to sit clearly under the buildings — white-on-white made the
     footprints vanish. Warm paper ground, cool white buildings, real edge. */
  --mm-ground: #eae7e0;
  --mm-bldg: #fdfdfc;
  --mm-bldg-line: #b9c2ba;
  --mm-accent: #2f6f57;
  --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--mm-bg);
  color: var(--mm-ink);
  border-top: 1px solid var(--mm-line);
  border-bottom: 1px solid var(--mm-line);
}
#lc-mall-map * { box-sizing: border-box; }

/* ---------- control bar ---------- */
/* Sticky under the site header: the filters are the instrument for reading the
   plan, so they must stay in reach while the drawing scrolls. 78px matches the
   offset the shopping directory already uses for its sticky columns. */
#lc-mall-map .lc-mm-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 34px);
  border-bottom: 1px solid var(--mm-line);
  position: sticky; top: var(--mm-top, 78px); z-index: 40;
  background: var(--mm-bg);
}
#lc-mall-map .lc-mm-chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; min-width: 0; }
#lc-mall-map .lc-mm-chip {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 11px; line-height: 1.2;
  padding: 8px 13px; border: 1px solid var(--mm-line); border-radius: 2px;
  background: var(--mm-bg); color: var(--mm-ink); cursor: pointer;
  transition: background .18s var(--mm-ease), border-color .18s var(--mm-ease), color .18s var(--mm-ease);
}
#lc-mall-map .lc-mm-chip:hover { border-color: var(--mm-accent); color: var(--mm-accent); }
#lc-mall-map .lc-mm-chip.is-on {
  background: var(--mm-ink); border-color: var(--mm-ink); color: #fff;
}
#lc-mall-map .lc-mm-chip-n { margin-left: 7px; opacity: .55; font-size: 10px; }
#lc-mall-map .lc-mm-search {
  font-family: "PT Serif", Georgia, serif; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--mm-line); border-radius: 4px;
  min-width: 210px; color: var(--mm-ink); background: var(--mm-bg);
}
#lc-mall-map .lc-mm-search:focus { outline: none; border-color: var(--mm-accent); }

/* ---------- the plan ---------- */
#lc-mall-map .lc-mm-stage { position: relative; background: var(--mm-ground); }
#lc-mall-map .lc-mm-plan { position: relative; }
#lc-mall-map .lc-mm-svg {
  display: block; width: 100%; height: clamp(420px, 62vh, 720px);
}
#lc-mall-map .lc-mm-building,
#lc-mall-map .lc-mm-bldg {
  fill: var(--mm-bldg); stroke: var(--mm-bldg-line); stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

/* ---------- waterfront layers ----------
   Only drawn where the place has them. The water is a material, not an accent:
   a desaturated tidal tone against the warm sand ground, so the single green
   accent still belongs to selection alone. */
#lc-mall-map {
  --mm-water: #cddad9;
  --mm-water-line: #a8bcbb;
  --mm-park: #dfe4d5;
  --mm-pier: #9aa39a;
}
#lc-mall-map .lc-mm-water {
  fill: var(--mm-water); stroke: var(--mm-water-line); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* No stroke-width here on purpose: the builder emits it per feature in metres
   (the tidal channel is far wider than a ditch) and a CSS width would override
   the presentation attribute and flatten them all to the same hairline. */
#lc-mall-map .lc-mm-channel {
  fill: none; stroke: var(--mm-water);
  stroke-linecap: round; stroke-linejoin: round;
}
#lc-mall-map .lc-mm-park {
  fill: var(--mm-park); stroke: none;
}
#lc-mall-map .lc-mm-parking {
  fill: #e4e1da; stroke: none;
}
/* The docks are the character of a creek — drawn as real lines over the water
   rather than hidden as hairlines. */
#lc-mall-map .lc-mm-pier {
  fill: none; stroke: var(--mm-pier); stroke-width: 2.2;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
#lc-mall-map .lc-mm-path {
  fill: none; stroke: #c3c8be; stroke-width: 1; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

#lc-mall-map .lc-mm-unit { cursor: pointer; }
/* The real hit target — invisible, but big enough for a thumb. */
#lc-mall-map .lc-mm-hit { fill: transparent; pointer-events: all; }
#lc-mall-map .lc-mm-dot {
  fill: var(--mm-ink); stroke: #fff; stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transition: fill .18s var(--mm-ease), r .18s var(--mm-ease);
}
/* An interpolated position is drawn hollow — the map must not imply a
   precision it does not have. */
#lc-mall-map .lc-mm-unit.is-approx .lc-mm-dot {
  fill: var(--mm-ground); stroke: var(--mm-muted); stroke-dasharray: 2 2;
}
#lc-mall-map .lc-mm-unit:hover .lc-mm-dot,
#lc-mall-map .lc-mm-unit:focus-visible .lc-mm-dot { fill: var(--mm-accent); }
#lc-mall-map .lc-mm-unit.is-sel .lc-mm-dot { fill: var(--mm-accent); r: 6.4; }
#lc-mall-map .lc-mm-unit:focus { outline: none; }
#lc-mall-map .lc-mm-unit:focus-visible .lc-mm-label { opacity: 1; }

#lc-mall-map .lc-mm-label {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 7.4px; letter-spacing: .04em;
  fill: var(--mm-ink); text-anchor: middle; paint-order: stroke;
  stroke: #fff; stroke-width: 2.6px; stroke-linejoin: round;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--mm-ease);
}
#lc-mall-map .lc-mm-unit.is-named .lc-mm-label,
#lc-mall-map .lc-mm-unit:hover .lc-mm-label { opacity: 1; }
#lc-mall-map .lc-mm-unit.is-sel .lc-mm-label { opacity: 1; fill: var(--mm-accent); }

#lc-mall-map .lc-mm-unit.is-off { opacity: .16; pointer-events: none; }
#lc-mall-map .lc-mm-unit.is-off .lc-mm-label { opacity: 0; }

/* ---------- compass ---------- */
#lc-mall-map .lc-mm-compass {
  position: absolute; left: clamp(14px, 3vw, 28px); bottom: 16px;
  display: flex; align-items: center; gap: 6px;
  color: var(--mm-muted); pointer-events: none;
}
#lc-mall-map .lc-mm-compass svg { width: 30px; height: 30px; }
#lc-mall-map .lc-mm-compass line { stroke: var(--mm-muted); stroke-width: 1.3; }
#lc-mall-map .lc-mm-compass path { fill: var(--mm-muted); }
#lc-mall-map .lc-mm-compass span {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px;
  letter-spacing: 1.6px; text-transform: uppercase;
}

/* ---------- detail panel ---------- */
/* The panel spans the stage so its contents can stick: pinned to the stage top,
   a card opened while scrolled into the plan lands above the fold and reads as
   nothing happening. */
#lc-mall-map .lc-mm-panel {
  position: absolute; right: clamp(14px, 3vw, 28px); top: 0; bottom: 0;
  width: min(292px, calc(100% - 28px));
  pointer-events: none;
}
#lc-mall-map .lc-mm-card,
#lc-mall-map .lc-mm-hint {
  position: sticky; top: calc(var(--mm-top, 78px) + 88px);
  pointer-events: auto;
}
#lc-mall-map .lc-mm-hint {
  margin: 0; text-align: right;
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--mm-muted);
}
#lc-mall-map .lc-mm-card {
  background: var(--mm-bg); border: 1px solid var(--mm-line);
  padding: 16px 18px; box-shadow: 0 10px 30px rgba(29, 39, 33, .10);
}
#lc-mall-map .lc-mm-card-unit,
#lc-mall-map .lc-mm-card-cat {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--mm-muted);
  margin: 0 0 6px;
}
#lc-mall-map .lc-mm-card-name {
  font-family: "PT Serif", Georgia, serif; font-size: 21px;
  line-height: 1.22; margin: 0 0 6px; color: var(--mm-ink);
}
/* The accent belongs on the datum that ties the card to the drawing — the unit
   number — rather than on a decorative bar down the edge. */
#lc-mall-map .lc-mm-card-unit { color: var(--mm-accent); }
#lc-mall-map .lc-mm-card-cat { margin: 0 0 10px; }
#lc-mall-map .lc-mm-card-blurb {
  font-family: "PT Serif", Georgia, serif; font-size: 13.5px; line-height: 1.5;
  color: var(--mm-muted); margin: 0 0 12px;
}
#lc-mall-map .lc-mm-card-soon,
#lc-mall-map .lc-mm-card-approx {
  font-family: "PT Serif", Georgia, serif; font-size: 13px;
  color: var(--mm-muted); margin: 0 0 10px; font-style: italic;
}
#lc-mall-map .lc-mm-card-link {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mm-accent); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
#lc-mall-map .lc-mm-card-close {
  display: block; margin-top: 14px; padding: 0; border: 0; background: none;
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mm-muted); cursor: pointer;
}

/* ---------- footnote ---------- */
#lc-mall-map .lc-mm-foot {
  margin: 0; padding: 12px clamp(16px, 4vw, 34px) 16px;
  font-family: "PT Serif", Georgia, serif; font-size: 13px; line-height: 1.5;
  color: var(--mm-muted); border-top: 1px solid var(--mm-line);
}
#lc-mall-map .lc-mm-attr { opacity: .8; }
#lc-mall-map .lc-mm-err {
  padding: 30px clamp(16px, 4vw, 34px);
  font-family: "PT Serif", Georgia, serif; color: var(--mm-muted);
}

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  #lc-mall-map .lc-mm-bar { gap: 10px; }
  #lc-mall-map .lc-mm-search { width: 100%; min-width: 0; }
  /* A wide plan letterboxes badly in a portrait box — matching the height to
     the drawing removes a screenful of empty ground. On a phone the plan is the
     overview and the list underneath does the finding. */
  #lc-mall-map .lc-mm-svg { height: clamp(240px, 34vh, 360px); }
  #lc-mall-map .lc-mm-panel {
    position: static; width: auto;
    padding: 0 clamp(16px, 4vw, 34px) 14px;
  }
  /* Sticky is a desktop affordance; left on, the hint floats down over the
     compass instead of sitting under the plan. */
  #lc-mall-map .lc-mm-card,
  #lc-mall-map .lc-mm-hint { position: static; }
  #lc-mall-map .lc-mm-hint { text-align: left; padding-top: 12px; }
  #lc-mall-map .lc-mm-card { box-shadow: none; }
  #lc-mall-map .lc-mm-compass { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #lc-mall-map * { transition: none !important; }
}