/* ═══════════════════════════════════════════════════════════════════════
   The Explore map — an island mounted into the marketing page.

   Scoped under .lmap so it cannot leak into marketing.html's own styles,
   and it borrows that page's custom properties (--navy, --cream, --gold)
   rather than redefining the palette. If the brand colours change there,
   this changes with them.
   ═══════════════════════════════════════════════════════════════════════ */

.lmap{
  --lm-r:12px; --lm-r-lg:16px;
  --lm-line:var(--border,#e5e0d8);
  --lm-ink:var(--text,#1a2535);
  --lm-ink2:var(--text2,#526070);
  --lm-mute:var(--muted,#8a96a8);
  --lm-navy:var(--navy,#0d2137);
  --lm-navy2:var(--navy2,#163352);
  --lm-navy3:var(--navy3,#1e4570);
  --lm-gold:var(--gold,#c9a84c);
  --lm-gold2:var(--gold-soft,#b89940);
  --lm-paper:var(--bg2,#fff);
  --lm-cream:var(--cream,#f6f2ed);
  --lm-cream2:var(--cream2,#faf8f5);
  --lm-sh:0 1px 2px rgba(13,33,55,.05);
  --lm-sh-lg:0 30px 70px rgba(13,33,55,.14),0 10px 26px rgba(13,33,55,.07);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--lm-ink);
  max-width:1200px;margin:0 auto;padding:0 24px;
}
.lmap *,.lmap *::before,.lmap *::after{box-sizing:border-box}

.lmap-shell{background:var(--lm-paper);border:1px solid var(--lm-line);
  border-radius:var(--lm-r-lg);box-shadow:var(--lm-sh-lg);overflow:hidden}

/* ── header ───────────────────────────────────────────────────────────── */
.lmap-top{display:flex;align-items:center;gap:11px;padding:13px 17px;flex-wrap:wrap;
  border-bottom:1px solid var(--lm-line);
  background:linear-gradient(180deg,var(--lm-cream2),var(--lm-paper))}
.lmap-back{border:1px solid var(--lm-line);background:var(--lm-paper);border-radius:100px;
  padding:5px 13px;font:600 11.5px/1.4 inherit;color:var(--lm-ink2);cursor:pointer;
  display:none;box-shadow:var(--lm-sh)}
.lmap-back.on{display:inline-block}
.lmap-back:hover{border-color:var(--lm-navy);color:var(--lm-navy)}
.lmap-title{font:700 13.5px/1.4 inherit;color:var(--lm-navy);letter-spacing:-.014em;min-width:0}
.lmap-title i{font-style:normal;color:var(--lm-mute);font-weight:500;letter-spacing:0}
.lmap-lens{display:flex;gap:2px;background:#f7f4ee;border:1px solid var(--lm-line);
  border-radius:100px;padding:3px}
.lmap-lens button{border:0;background:none;font:600 11.5px/1.4 inherit;color:var(--lm-ink2);
  padding:5px 13px;border-radius:100px;cursor:pointer;white-space:nowrap;transition:all .18s}
.lmap-lens button:hover{color:var(--lm-navy)}
.lmap-lens button[aria-pressed="true"]{background:var(--lm-navy);color:#fff;
  box-shadow:0 1px 4px rgba(13,33,55,.22)}
.lmap-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#f7f4ee;
  border:1px solid var(--lm-line);border-radius:100px;padding:7px 15px;min-width:200px;
  transition:border-color .18s,box-shadow .18s}
.lmap-search:focus-within{border-color:var(--lm-gold);box-shadow:0 0 0 3px rgba(201,168,76,.14)}
.lmap-search::before{content:'';width:11px;height:11px;border:1.6px solid var(--lm-mute);
  border-radius:50%;flex:0 0 auto;box-shadow:3.5px 3.5px 0 -1px var(--lm-mute)}
.lmap-search input{border:0;background:none;outline:none;font:400 12.5px/1.4 inherit;
  color:var(--lm-ink);width:100%;min-width:0}
.lmap-search input::placeholder{color:var(--lm-mute)}
.lmap-search input::-webkit-search-cancel-button{display:none}

/* the typeahead: anchored to the field, above the map's stacking context */
.lmap-search{position:relative}
.lmap-sug{position:absolute;top:calc(100% + 7px);right:-1px;left:auto;z-index:40;margin:0;
  min-width:300px;max-width:calc(100vw - 40px);
  padding:5px;list-style:none;background:var(--lm-paper,#fff);border:1px solid var(--lm-line);
  border-radius:13px;box-shadow:0 14px 34px -12px rgba(20,32,48,.26),0 2px 6px rgba(20,32,48,.06);
  max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.lmap-sug[hidden]{display:none}
.lmap-sug li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;line-height:1.3}
/* ⚠ NOT var(--lm-cream). Since the ground went warm white that token is
   #fefdfb, and the highlighted suggestion became invisible on a white menu —
   arrowing the list would have moved a marker nobody could see. */
.lmap-sug li.on{background:#f2eee6}
.lmap-sug li .n{color:var(--lm-ink);font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lmap-sug li.none{cursor:default;color:var(--lm-mute);font-size:12px;padding:9px 10px}
@media(prefers-reduced-motion:no-preference){
  .lmap-sug{animation:lmap-sug-in .16s ease-out}
}
@keyframes lmap-sug-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .lmap-lens button{padding:5px 10px;font-size:11px}
  .lmap-search{margin-left:0;order:9;width:100%;min-width:0}
  .lmap-sug{left:-1px;right:-1px;min-width:0}
}

/* ── the stage ────────────────────────────────────────────────────────── */
.lmap-body{position:relative;height:452px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,var(--lm-cream2),#f2eee6)}
@media(max-width:760px){.lmap-body{height:420px}}
.lmap-stage{position:absolute;inset:0;cursor:grab;touch-action:none}
.lmap-stage.dragging{cursor:grabbing}
.lmap-stage svg{width:100%;height:100%;display:block}
/* stroke-width lives on the GROUP and inherits down. The script used to write
   it onto all 132 paths on every zoom step; one write here does the same job,
   and the children still animate it because they name it in their transition. */
#lmap-world{transform-box:view-box;transform-origin:0 0;stroke-width:.55;
  transition:transform .9s cubic-bezier(.62,0,.16,1)}
#lmap-world.nofx{transition:none}
.lmap-lga{stroke:#fff;stroke-linejoin:round;cursor:pointer;
  transition:fill .25s,stroke-width .9s cubic-bezier(.62,0,.16,1)}
#lmap-world.nofx .lmap-lga{transition:fill .25s}
/* ⚠ MUST dim with `fill`, never `opacity`. These paths carry 413,438 points
   between them; transitioning opacity on 127 of them at once forces the
   compositor to re-rasterise every one and FROZE the renderer hard enough to
   time out the debugger. `fill` animates on the same paths for free.
   The tone sits just outside the ramp's lightest band so a filtered map still
   reads as a map — and the ring, not the wash, is what marks the match. */
.lmap-lga.fade{fill:#e4dfd3 !important}
.lmap-lga.void{fill:#efeae0 !important;cursor:default;pointer-events:none}
.lmap-lga:hover{fill:var(--lm-gold) !important}
.lmap-lga.sel{fill:var(--lm-gold) !important}
.lmap-lga:focus-visible{outline:2px solid var(--lm-navy);outline-offset:2px}
/* the search ring — marks the highlighted suggestion on the map itself */
.lmap-ping{fill:none;stroke:var(--lm-gold);pointer-events:none;opacity:.95;
  transition:cx .28s cubic-bezier(.22,.61,.36,1),cy .28s cubic-bezier(.22,.61,.36,1),r .28s}
#lmap-world.nofx .lmap-ping{transition:none}

.lmap-tip{position:absolute;pointer-events:none;background:var(--lm-navy);color:#fff;
  font:600 11.5px/1.45 inherit;padding:6px 12px;border-radius:7px;white-space:nowrap;
  opacity:0;transition:opacity .16s;transform:translate(-50%,-160%);z-index:6;
  box-shadow:0 8px 22px rgba(13,33,55,.3)}
.lmap-tip.on{opacity:1}
.lmap-tip i{display:block;font-style:normal;font-weight:400;font-size:10px;
  color:rgba(255,255,255,.64);margin-top:1px}

/* the statewide figure, in the space beside the map */
/* On the RIGHT. NSW's mass sits centre-left in this frame — the coast is the
   busy edge and the west is empty — so the right-hand side is where the type
   has room. On the left it sat on top of the western councils. */
.lmap-stat{position:absolute;right:26px;top:0;bottom:0;width:31%;max-width:300px;z-index:3;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  text-align:right;transition:opacity .4s}
.lmap-stat.gone{opacity:0;pointer-events:none}
@media(max-width:900px){.lmap-stat{display:none}}
.lmap-stat .k{font:500 9px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.17em;
  text-transform:uppercase;color:var(--lm-gold2);margin-bottom:11px}
.lmap-stat .n{font:500 44px/1 'DM Mono',ui-monospace,monospace;color:var(--lm-navy);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.lmap-stat .l{font-size:13px;color:var(--lm-ink2);line-height:1.55;margin-top:12px;max-width:250px}

.lmap-legend{position:absolute;left:22px;bottom:16px;z-index:3;transition:opacity .35s}
.lmap-legend.gone{opacity:0;pointer-events:none}
.lmap-legend .lb{font:500 8.5px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lm-mute);margin-bottom:7px}
.lmap-ramp{display:flex;height:8px;width:132px;border-radius:100px;overflow:hidden;
  box-shadow:0 1px 2px rgba(13,33,55,.1)}
.lmap-ramp i{flex:1}
.lmap-legend .ends{display:flex;justify-content:space-between;margin-top:5px;
  font:400 9.5px/1.4 'DM Mono',ui-monospace,monospace;color:var(--lm-mute)}
.lmap-hint{margin:0;font-size:11.5px;color:var(--lm-mute);
  transition:opacity .3s;pointer-events:none}
.lmap-hint.gone{opacity:0}


/* controls */
.lmap-zoom{position:absolute;left:22px;top:18px;z-index:4;display:flex;flex-direction:column;gap:5px}
.lmap-zoom button{width:30px;height:30px;border:1px solid var(--lm-line);background:var(--lm-paper);
  color:var(--lm-navy);border-radius:8px;cursor:pointer;font:600 15px/1 inherit;padding:0;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--lm-sh);transition:all .16s}
.lmap-zoom button:hover:not(:disabled){border-color:var(--lm-navy);transform:translateY(-1px)}
.lmap-zoom button:disabled{opacity:.4;cursor:default}
.lmap-zoom button.fit{font:500 9px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.06em}
/* Clear of the zoom buttons on the left and the figure on the right.
   Ten regions, one row. They live in a rail that scrolls sideways rather than
   wrapping into a second and third row over the map. The ends were masked so a
   half-cut chip read as "there is more" rather than as a clipping fault, but
   Charlie found the fade worse than the thing it was hiding, so the chips are
   plain. The cost is that nothing now signals the three regions off to the
   right — the rail still scrolls, and a mouse wheel over it is turned into
   horizontal travel further down this file. */
.lmap-jump{position:absolute;left:66px;top:18px;right:34%;z-index:4;display:flex;gap:6px;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:auto}
.lmap-jump::-webkit-scrollbar{display:none}
/* Below 900 the rail drops to the bottom of the map, where the legend and the
   hint already were — all three were landing on bottom:16 and stacking on top
   of one another. The hint goes entirely: "drag to pan, scroll to zoom" is
   desktop instruction, and on a touch screen it is simply wrong. */
@media(max-width:900px){
  .lmap-jump{left:16px;right:16px;top:auto;bottom:14px}
  .lmap-legend{bottom:62px}
  .lmap-hint{display:none}
}
.lmap-jump button{border:1px solid var(--lm-line);background:var(--lm-paper);color:var(--lm-ink2);
  border-radius:100px;padding:5px 12px;font:600 11px/1.4 inherit;cursor:pointer;
  box-shadow:var(--lm-sh);transition:all .16s;white-space:nowrap}
.lmap-jump button:hover{border-color:var(--lm-gold);color:var(--lm-navy)}
.lmap-jump button[aria-pressed="true"]{background:var(--lm-navy);border-color:var(--lm-navy);
  color:#fff}
.lmap-jump button[aria-pressed="true"]:hover{color:#fff;border-color:var(--lm-navy)}
.lmap-jump.gone,.lmap-zoom.gone{opacity:0;pointer-events:none;transition:opacity .3s}

/* ── the council card ─────────────────────────────────────────────────── */
.lmap-card{position:absolute;right:0;top:0;bottom:0;width:44%;min-width:340px;z-index:5;
  transform:translateX(102%);transition:transform .64s cubic-bezier(.22,1,.28,1);
  background:var(--lm-paper);border-left:1px solid var(--lm-line);
  box-shadow:-20px 0 48px rgba(13,33,55,.13);display:flex;flex-direction:column}
.lmap-card.up{transform:none}
@media(max-width:760px){.lmap-card{width:100%;min-width:0;top:auto;height:64%;
  transform:translateY(102%);border-left:0;border-top:1px solid var(--lm-line)}}
.lmap-ch{padding:16px 24px 15px;border-bottom:1px solid var(--lm-line)}
.lmap-ch .n{font:700 19px/1.15 inherit;letter-spacing:-.03em;color:var(--lm-navy)}
.lmap-ch .s{font-size:11px;color:var(--lm-mute);margin-top:5px;line-height:1.5}
.lmap-figrow{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px;gap:12px}
.lmap-fig{font:500 29px/1 'DM Mono',ui-monospace,monospace;color:var(--lm-navy);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lmap-figl{font:500 8.5px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lm-mute);margin-top:6px}
.lmap-rank{text-align:right;font-size:11px;color:var(--lm-mute);line-height:1.5}
.lmap-rank b{display:block;font:500 15px/1 'DM Mono',ui-monospace,monospace;color:var(--lm-navy)}
.lmap-cb{flex:1;overflow-y:auto;padding:20px 24px 24px;scrollbar-width:thin;position:relative}
.lmap-cb::-webkit-scrollbar{width:9px}
.lmap-cb::-webkit-scrollbar-thumb{background:var(--lm-line);border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
.lmap-cb::-webkit-scrollbar-thumb:hover{background:var(--lm-mute);background-clip:content-box}

/* ⚠ Two thirds of this card used to sit below the fold with NOTHING to say so
   — the latest applications, the rezonings, the caveat and the link to the
   full page were all built, and all invisible. The fade and the cue are the
   only thing that makes them findable; they hide once you reach the end. */
.lmap-fademore{position:absolute;left:0;right:0;bottom:0;height:74px;pointer-events:none;
  z-index:2;opacity:0;transition:opacity .3s;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--lm-paper) 76%)}
.lmap-card.more .lmap-fademore{opacity:1}
.lmap-morecue{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:6px;padding:5px 12px 5px 11px;border-radius:100px;
  background:var(--lm-paper);border:1px solid var(--lm-line);
  box-shadow:0 3px 12px -4px rgba(13,33,55,.24);cursor:pointer;
  font:500 10.5px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lm-mute);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s}
.lmap-card.more .lmap-morecue{opacity:1;pointer-events:auto}
.lmap-morecue:hover{color:var(--lm-navy);border-color:var(--lm-mute)}
.lmap-morecue i{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lmap-sl{font:500 9px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lm-mute);margin:26px 0 12px}
.lmap-sl:first-child{margin-top:0}
/* The first section label is the first child of .lmap-detail, so the rule above
   zeroed its top margin and left it sitting tight under the stat box on every
   lens. The gap belongs to the detail block, which always follows the stats. */
.lmap-detail{margin-top:28px}
.lmap-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lm-line);
  border:1px solid var(--lm-line);border-radius:var(--lm-r);overflow:hidden}
.lmap-stats>div{background:var(--lm-paper);padding:15px 16px}
.lmap-stats .n{font:500 21px/1 'DM Mono',ui-monospace,monospace;color:var(--lm-navy);
  font-variant-numeric:tabular-nums}
.lmap-stats .l{font-size:10.5px;color:var(--lm-mute);margin-top:7px;line-height:1.45}
.lmap-fn{display:flex;height:10px;border-radius:100px;overflow:hidden;background:var(--lm-line);
  margin-bottom:13px;box-shadow:inset 0 1px 2px rgba(13,33,55,.06)}
.lmap-fn i{display:block;height:100%}
.lmap-fnk{display:flex;gap:9px 18px;flex-wrap:wrap;font-size:11.5px;line-height:1.6;color:var(--lm-ink2)}
.lmap-fnk span{display:flex;align-items:center;gap:6px}
.lmap-fnk em{width:8px;height:8px;font-style:normal;border-radius:50%;display:inline-block}
.lmap-bars>div{margin-bottom:15px}
.lmap-bars .bl{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  color:var(--lm-ink2);margin-bottom:7px}
.lmap-bars .bl b{font:500 11.5px/1.4 'DM Mono',ui-monospace,monospace;color:var(--lm-navy)}
.lmap-bars .bt{height:7px;background:var(--lm-line);border-radius:100px;overflow:hidden}
.lmap-bars .bt i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--lm-navy3),var(--lm-navy))}
.lmap-rec div{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:11px 0;
  border-bottom:1px solid rgba(229,224,216,.55);color:var(--lm-ink)}
.lmap-rec div span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmap-rec div span:last-child{color:var(--lm-mute);white-space:nowrap;
  font:400 10.5px/1.5 'DM Mono',ui-monospace,monospace}
.lmap-rec .pill{font:700 9.5px/1.5 inherit;padding:2px 8px;border-radius:100px;
  background:rgba(201,168,76,.14);color:var(--lm-gold2)}
.lmap-rec .pill.done{background:rgba(13,33,55,.07);color:var(--lm-ink2)}
.lmap-note{font-size:11px;color:var(--lm-mute);line-height:1.6;margin-top:20px}
/* A real way out of the card. It used to be a link inside a footnote, which is
   where you put something you do not want found. */
.lmap-full{display:block;margin-top:16px;text-align:center;padding:12px 14px;
  border:1px solid var(--lm-line);border-radius:var(--lm-r);text-decoration:none;
  font:700 12.5px/1.4 inherit;color:var(--lm-navy);background:var(--lm-cream2);
  transition:all .18s}
.lmap-full:hover{border-color:var(--lm-navy);background:var(--lm-paper)}
/* The map itself is focusable so the arrow keys have somewhere to land. */
.lmap-stage:focus-visible{outline:2px solid var(--lm-navy);outline-offset:-3px}
.lmap-cta{border-top:1px solid var(--lm-line);background:var(--lm-cream2);padding:12px 17px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lmap-cta .msg{font-size:12px;color:var(--lm-ink2)}
.lmap-cta .msg b{color:var(--lm-navy);font-weight:700}
.lmap-cta a{background:var(--lm-gold);color:var(--lm-navy);font:700 12.5px/1.4 inherit;
  padding:9px 18px;border-radius:8px;text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 10px rgba(201,168,76,.3);transition:all .18s}
.lmap-cta a:hover{background:#d8ba63;box-shadow:0 8px 22px rgba(201,168,76,.4)}

/* ── loading and failure ──────────────────────────────────────────────── */
.lmap-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:24px;color:var(--lm-mute);
  font-size:13px}
.lmap-msg b{color:var(--lm-ink);font-size:15px;font-weight:700}
.lmap-spin{width:22px;height:22px;border:2px solid var(--lm-line);
  border-top-color:var(--lm-gold);border-radius:50%;animation:lmapspin .8s linear infinite}
@keyframes lmapspin{to{transform:rotate(360deg)}}
.lmap-skel{opacity:.5}

@media (prefers-reduced-motion:reduce){
  #lmap-world,.lmap-lga,.lmap-card,.lmap-tip{transition:none !important}
  .lmap-spin{animation:none}
}