/* ==========================================================================
   HTH REAL ESTATE — full-screen 3D map
   The overlay chrome only. MapLibre's own stylesheet is fetched on demand
   the first time the map opens.
   ========================================================================== */

/* ── the trigger in the hero search bar ───────────────────────────────── */
.hsearch__acts{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-inline-start:8px;padding-inline-end:4px}
.hsearch__map{
  position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(11,29,51,.96),rgba(6,18,34,.9));
  border:1px solid rgba(200,164,93,.5);color:var(--gold);cursor:pointer;
  transition:transform .35s var(--ease-out),border-color .3s,color .3s,box-shadow .35s
}
.hsearch__map:hover{transform:translateY(-2px) scale(1.04);border-color:var(--gold);color:#fff;
  box-shadow:0 14px 32px rgba(11,29,51,.5)}
.hsearch__map .ico{width:23px;height:23px;position:relative;z-index:2}
.hsearch__map-pulse{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(200,164,93,.55);
  animation:m3dPulse 2.8s var(--ease) infinite;pointer-events:none}
@keyframes m3dPulse{0%{transform:scale(.86);opacity:.9}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
@media (max-width:900px){
  .hsearch__acts{width:100%;margin:0;padding:0;gap:8px}
  .hsearch__go{flex:1 1 auto;width:auto;border-radius:var(--r-m);height:52px}
  .hsearch__map{flex:0 0 52px;width:52px;height:52px;border-radius:var(--r-m)}
}
@media (prefers-reduced-motion:reduce){.hsearch__map-pulse{animation:none;opacity:.35}}

/* ── the overlay ──────────────────────────────────────────────────────── */
/* Every colour in the chrome comes from these tokens, so the light theme is
   one block of overrides rather than a second stylesheet. The tile palette
   itself is repainted in JS — see THEMES in assets/js/map3d.js. */
.m3d{
  --m3d-bg:#050c17;
  --m3d-scrim:5,12,23;            /* vignette + veil                        */
  --m3d-glass:12,24,42;           /* buttons and chips                      */
  --m3d-glass-a:.52;
  --m3d-panel:9,19,34;            /* filter panel and detail card           */
  --m3d-panel-a:.72;
  --m3d-field:4,12,22;            /* inputs                                 */
  --m3d-field-a:.6;
  --m3d-line:235,221,194;         /* borders and muted type                 */
  --m3d-fg:#fff;
  --m3d-solid:#0b1d33;            /* opaque surfaces: options, suggestions  */
  --m3d-shadow:0 30px 70px rgba(0,0,0,.55);
  --m3d-pin-ink:#06121f;

  position:fixed;inset:0;z-index:1200;display:none;
  background:var(--m3d-bg);color:var(--m3d-fg);overscroll-behavior:contain;
  font-feature-settings:"tnum" 1;
  transition:background .5s var(--ease)
}
.m3d.is-light{
  --m3d-bg:#eef2f7;
  --m3d-scrim:233,238,245;
  --m3d-glass:255,255,255;
  --m3d-glass-a:.76;
  --m3d-panel:255,255,255;
  --m3d-panel-a:.86;
  --m3d-field:255,255,255;
  --m3d-field-a:.92;
  --m3d-line:11,29,51;
  --m3d-fg:#0b1d33;
  --m3d-solid:#fff;
  --m3d-shadow:0 26px 60px rgba(11,29,51,.18);
}
.m3d.is-open{display:block;animation:m3dIn .5s var(--ease-out) both}
@keyframes m3dIn{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
body.m3d-locked{overflow:hidden}

/* MapLibre's own stylesheet arrives after this one and sets
   .maplibregl-map{position:relative}, which would collapse the container to
   zero height — the extra .m3d wins the cascade back. */
.m3d .m3d__canvas{position:absolute;inset:0;width:100%;height:100%}
.m3d__canvas canvas{outline:none}
.m3d__vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 82% at 50% 42%,rgba(var(--m3d-scrim),0) 42%,rgba(var(--m3d-scrim),.62) 100%),
    linear-gradient(180deg,rgba(var(--m3d-scrim),.86) 0%,rgba(var(--m3d-scrim),0) 18%,rgba(var(--m3d-scrim),0) 66%,rgba(var(--m3d-scrim),.7) 100%);
  transition:background .5s var(--ease)
}

/* ── loading veil ─────────────────────────────────────────────────────── */
.m3d__veil{
  position:absolute;inset:0;z-index:9;display:grid;place-content:center;justify-items:center;gap:22px;
  pointer-events:none;   /* purely a curtain — the close button stays live behind it */
  background:radial-gradient(70% 60% at 50% 45%,rgba(var(--m3d-scrim),.86),var(--m3d-bg) 78%);
  transition:opacity .6s var(--ease),visibility .6s
}
.m3d__veil.is-gone{opacity:0;visibility:hidden}
.m3d__veil b{font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(var(--m3d-line),.72);text-align:center;max-width:32ch;line-height:1.8}
.m3d__orbit{position:relative;width:74px;height:74px;display:block}
.m3d__orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(200,164,93,.28);border-top-color:var(--gold);
  animation:m3dSpin 1.5s linear infinite}
.m3d__orbit i:nth-child(2){inset:12px;animation-duration:2.1s;animation-direction:reverse;border-top-color:rgba(var(--m3d-line),.7)}
.m3d__orbit i:nth-child(3){inset:24px;animation-duration:2.8s;border-top-color:rgba(200,164,93,.5)}
@keyframes m3dSpin{to{transform:rotate(360deg)}}

/* ── chrome shared ────────────────────────────────────────────────────── */
.m3d__btn{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(var(--m3d-glass),var(--m3d-glass-a));
  border:1px solid rgba(var(--m3d-line),.16);color:rgba(var(--m3d-line),.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  cursor:pointer;position:relative;transition:.28s var(--ease)
}
.m3d.is-light .m3d__btn{color:rgba(11,29,51,.78);box-shadow:0 4px 14px rgba(11,29,51,.1)}
.m3d__btn:hover{background:rgba(200,164,93,.92);border-color:transparent;color:var(--navy);transform:translateY(-1px)}
.m3d__btn .ico{width:19px;height:19px}
.m3d__btn--sm{width:34px;height:34px;border-radius:11px}
.m3d__btn--sm .ico{width:16px;height:16px}
.m3d__btn--close:hover{background:#e0574f;color:#fff}
.m3d__dot{position:absolute;top:7px;inset-inline-end:7px;width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 2px rgba(var(--m3d-glass),.8)}

/* ── the light / dark switch ──────────────────────────────────────────── */
.m3d__theme{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:rgba(var(--m3d-glass),var(--m3d-glass-a));border:1px solid rgba(var(--m3d-line),.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)
}
.m3d__theme button{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:0;
  background:none;color:rgba(var(--m3d-line),.62);cursor:pointer;font:inherit;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;transition:.26s var(--ease)
}
.m3d__theme button .ico{width:15px;height:15px}
.m3d__theme button:hover{color:var(--m3d-fg)}
.m3d__theme button.is-on{background:var(--gold);color:var(--navy)}
.m3d.is-light .m3d__theme button{color:rgba(11,29,51,.55)}
.m3d.is-light .m3d__theme button.is-on{color:var(--navy)}
@media (max-width:1120px){.m3d__theme button span{display:none}.m3d__theme button{padding:8px 10px}}

/* ── top bar ──────────────────────────────────────────────────────────── */
.m3d__top{
  position:absolute;top:0;inset-inline:0;z-index:6;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:clamp(12px,1.6vw,20px) clamp(14px,2vw,26px)
}
.m3d__title{display:flex;align-items:center;gap:12px;min-width:0}
.m3d__logo{font-size:15px}
.m3d__logo .hth-logo__svg{height:1.05em}
.m3d__title span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.m3d__title b{font-family:var(--f-display);font-size:1.02rem;color:var(--m3d-fg);white-space:nowrap}
.m3d__title small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--m3d-line),.55);white-space:nowrap}

.m3d__layers{display:flex;gap:7px;flex-wrap:wrap;margin-inline:auto}
.m3d__chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 9px;border-radius:999px;cursor:pointer;
  background:rgba(var(--m3d-glass),var(--m3d-glass-a));
  border:1px solid rgba(var(--m3d-line),.14);color:rgba(var(--m3d-line),.62);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  font-size:.74rem;letter-spacing:.04em;transition:.28s var(--ease)
}
.m3d__chip:hover{color:var(--m3d-fg);border-color:rgba(var(--m3d-line),.3)}
.m3d__chip.is-on{background:rgba(200,164,93,.16);border-color:rgba(200,164,93,.62);color:var(--m3d-fg)}
.m3d.is-light .m3d__chip{color:rgba(11,29,51,.6);box-shadow:0 4px 14px rgba(11,29,51,.08)}
.m3d.is-light .m3d__chip.is-on{background:rgba(200,164,93,.28)}
.m3d__chip-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 24px;
  background:rgba(var(--m3d-line),.12);transition:.28s}
.m3d__chip-ico .ico{width:14px;height:14px}
.m3d__chip.is-on .m3d__chip-ico--communities{background:linear-gradient(145deg,#C8A45D,#8C6B2E);color:#0B1D33}
.m3d__chip.is-on .m3d__chip-ico--developers{background:linear-gradient(145deg,#7FB3D5,#2E6B93);color:#04101c}
.m3d__chip.is-on .m3d__chip-ico--projects{background:linear-gradient(145deg,#9BE2C4,#2E8B67);color:#04101c}
.m3d__chip.is-on .m3d__chip-ico--properties{background:linear-gradient(145deg,#EBDDC2,#B6A484);color:#0B1D33}
.m3d__tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}

/* ── camera rail ──────────────────────────────────────────────────────── */
.m3d__nav{
  position:absolute;z-index:6;inset-inline-end:clamp(14px,2vw,26px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px
}
.m3d__needle{display:grid;place-items:center;transition:transform .4s var(--ease)}
.m3d__btn--compass .ico{width:21px;height:21px}

/* ── filter panel ─────────────────────────────────────────────────────── */
.m3d__panel{
  position:absolute;z-index:7;top:clamp(74px,8vw,96px);inset-inline-start:clamp(14px,2vw,26px);
  width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 190px);
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:rgba(var(--m3d-panel),var(--m3d-panel-a));border:1px solid rgba(var(--m3d-line),.16);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:var(--m3d-shadow);
  animation:m3dPanel .42s var(--ease-out) both
}
@keyframes m3dPanel{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.m3d__panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 12px;border-bottom:1px solid rgba(var(--m3d-line),.12)}
.m3d__panel-head b{font-family:var(--f-display);font-size:1.02rem}
.m3d__panel-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;overflow:auto}
.m3d__panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-top:1px solid rgba(var(--m3d-line),.12)}
.m3d__found{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--m3d-line),.6)}
.m3d__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.m3d__f--wide{grid-column:1/-1}
.m3d__f label{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--m3d-line),.55)}
.m3d__inp{
  width:100%;height:40px;padding:0 12px;border-radius:12px;color:var(--m3d-fg);font:inherit;font-size:.88rem;
  background:rgba(var(--m3d-field),var(--m3d-field-a));border:1px solid rgba(var(--m3d-line),.16);transition:.25s
}
.m3d__inp:focus{outline:none;border-color:var(--gold);background:rgba(var(--m3d-field),1)}
.m3d__inp::placeholder{color:rgba(var(--m3d-line),.4)}
select.m3d__inp{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:30px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(var(--m3d-line),.6) 50%),linear-gradient(135deg,rgba(var(--m3d-line),.6) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px;background-repeat:no-repeat}
html[dir="rtl"] select.m3d__inp{background-position:16px 18px,11px 18px}
select.m3d__inp option{background:var(--m3d-solid);color:var(--m3d-fg)}
.m3d__pair{display:flex;align-items:center;gap:8px}
.m3d__pair i{opacity:.4;font-style:normal}
.m3d__sugwrap{position:relative}
.m3d__sug{
  position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:9;max-height:260px;overflow:auto;
  border-radius:14px;padding:6px;background:var(--m3d-solid);border:1px solid rgba(var(--m3d-line),.18);
  box-shadow:var(--m3d-shadow)
}
.m3d__sug button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;
  background:none;border:0;color:var(--m3d-fg);text-align:start;cursor:pointer;font:inherit;font-size:.86rem
}
.m3d__sug button:hover,.m3d__sug button.is-on{background:rgba(200,164,93,.18)}
.m3d__sug .ico{width:17px;height:17px;color:var(--gold);flex:0 0 17px}
.m3d__sug small{margin-inline-start:auto;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--m3d-line),.45)}

/* ── pins ─────────────────────────────────────────────────────────────── */
/* the marker root is MapLibre's: it sets position and transform on it, so we
   add nothing here but a stacking hint */
.m3d-marker{z-index:3}
.m3d-marker:hover,.m3d-marker:has(.is-active){z-index:6}
.m3d-pin{
  position:relative;width:38px;height:38px;cursor:pointer;
  transform-origin:50% 100%;transition:transform .3s var(--ease-out);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))
}
.is-light .m3d-pin{filter:drop-shadow(0 8px 14px rgba(11,29,51,.28))}
.m3d-pin__ring{
  position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:1px solid currentColor;opacity:.55;animation:m3dPin 3s var(--ease) infinite
}
@keyframes m3dPin{0%{transform:rotate(-45deg) scale(.82);opacity:.7}70%{transform:rotate(-45deg) scale(1.5);opacity:0}100%{opacity:0}}
.m3d-pin__body{
  position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:grid;place-items:center;background:currentColor;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)
}
.m3d-pin__body .ico{width:16px;height:16px;transform:rotate(45deg);color:var(--m3d-pin-ink);stroke-width:2}
.m3d-pin__glow{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,currentColor 0%,transparent 66%);opacity:.24}
.is-light .m3d-pin__glow{opacity:.14}
.m3d-pin:hover,.m3d-pin.is-active{transform:scale(1.22) translateY(-3px);z-index:5}
.m3d-pin.is-active .m3d-pin__body{box-shadow:0 0 0 3px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.is-light .m3d-pin.is-active .m3d-pin__body{box-shadow:0 0 0 3px rgba(11,29,51,.28),inset 0 1px 0 rgba(255,255,255,.5)}
/* darker pin faces in the light theme, or they wash out against pale tiles */
.m3d-pin--community{color:#E2C077}
.m3d-pin--developer{color:#8FC2E3}
.m3d-pin--project{color:#9BE2C4}
.m3d-pin--property{color:#F0E4CC}
.is-light .m3d-pin--community{color:#C8A45D}
.is-light .m3d-pin--developer{color:#4E90BF}
.is-light .m3d-pin--project{color:#3FA37B}
.is-light .m3d-pin--property{color:#0B1D33}
.is-light .m3d-pin--property .ico,.is-light .m3d-pin--developer .ico,.is-light .m3d-pin--project .ico{color:#fff}
/* ── community badges ─────────────────────────────────────────────────── */
/* a district is an area, not an address: it reads as its own name */
.m3d-badge{
  width:auto;height:auto;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px 6px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(var(--m3d-glass),.82);border:1px solid rgba(200,164,93,.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  color:var(--m3d-fg);font-size:.76rem;font-weight:700;letter-spacing:.02em;
  transform-origin:50% 50%;
  box-shadow:0 6px 18px rgba(0,0,0,.4)
}
.is-light .m3d-badge{box-shadow:0 6px 18px rgba(11,29,51,.18)}
.m3d-badge__dot{
  position:relative;width:9px;height:9px;flex:0 0 9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(200,164,93,.22)
}
.m3d-badge__dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(200,164,93,.6);animation:m3dPin 3s var(--ease) infinite
}
.m3d-badge:hover,.m3d-badge.is-active{
  transform:scale(1.07);background:var(--gold);border-color:transparent;color:var(--navy);z-index:7
}
.m3d-badge:hover .m3d-badge__dot,.m3d-badge.is-active .m3d-badge__dot{background:var(--navy);box-shadow:none}
.m3d-badge.is-active .m3d-badge__dot::after{animation:none;opacity:0}
.m3d-badge .m3d-pin__label{display:none}
@media (max-width:620px){.m3d-badge{font-size:.7rem;padding:5px 10px 5px 7px}}
@media (prefers-reduced-motion:reduce){.m3d-badge__dot::after{animation:none}}

.m3d-pin__label{
  position:absolute;top:50%;inset-inline-start:calc(100% + 8px);transform:translateY(-50%);
  white-space:nowrap;font-size:.72rem;letter-spacing:.04em;color:var(--m3d-fg);
  background:rgba(var(--m3d-glass),.88);border:1px solid rgba(var(--m3d-line),.2);border-radius:999px;padding:4px 11px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .25s
}
.m3d-pin:hover .m3d-pin__label,.m3d-pin.is-active .m3d-pin__label{opacity:1}
@media (prefers-reduced-motion:reduce){.m3d-pin__ring{animation:none}}

/* ── detail card ──────────────────────────────────────────────────────── */
.m3d__card{
  position:absolute;z-index:8;bottom:clamp(16px,2.4vw,30px);inset-inline-start:clamp(14px,2vw,26px);
  width:min(390px,calc(100vw - 32px));border-radius:24px;overflow:hidden;
  background:rgba(var(--m3d-panel),calc(var(--m3d-panel-a) - .06));border:1px solid rgba(var(--m3d-line),.2);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:var(--m3d-shadow);
  animation:m3dCard .5s var(--ease-out) both
}
@keyframes m3dCard{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
/* with the filter panel open the card steps out from under it */
@media (min-width:1100px){
  .m3d.has-panel .m3d__card{inset-inline-start:auto;inset-inline-end:clamp(70px,6vw,86px)}
}
.m3d__card-x{position:absolute;top:10px;inset-inline-end:10px;z-index:3;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(var(--m3d-glass),.72);border:1px solid rgba(var(--m3d-line),.2);
  color:var(--m3d-fg);cursor:pointer;transition:.25s}
.m3d__card-x:hover{background:var(--gold);color:var(--navy);border-color:transparent}
.m3d__card-x .ico{width:15px;height:15px}
.m3d__card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--m3d-solid)}
.m3d__card-img img{width:100%;height:100%;object-fit:cover;display:block}
.m3d__card-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(var(--m3d-panel),.85))}
.m3d__card.no-img .m3d__card-img{display:none}
.m3d__card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.m3d__card-kind{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.m3d.is-light .m3d__card-kind{color:#8C6B2E}
.m3d__card h3{font-family:var(--f-display);font-size:1.22rem;line-height:1.24;color:var(--m3d-fg)}
.m3d__card-sub{font-size:.8rem;color:rgba(var(--m3d-line),.62)}
.m3d__card-price{font-family:var(--f-display);font-size:1.34rem;color:var(--gold);line-height:1}
.m3d.is-light .m3d__card-price{color:#8C6B2E}
.m3d__card-price:empty{display:none}
.m3d__card-facts{display:flex;flex-wrap:wrap;gap:8px}
.m3d__card-facts span{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:12px;
  background:rgba(var(--m3d-line),.08);border:1px solid rgba(var(--m3d-line),.12)}
.m3d__card-facts b{font-size:.86rem;color:var(--m3d-fg)}
.m3d__card-facts small{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--m3d-line),.55)}
.m3d__card-text{font-size:.82rem;line-height:1.6;color:rgba(var(--m3d-line),.72)}
.m3d__card-text:empty{display:none}
.m3d__card .btn{align-self:flex-start;margin-top:4px}

.m3d__hint{
  position:absolute;z-index:5;bottom:clamp(16px,2.4vw,30px);left:50%;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--m3d-line),.45);
  white-space:nowrap;pointer-events:none;transition:opacity .4s
}
.m3d.has-card .m3d__hint{opacity:0}

/* MapLibre's own attribution, restyled to match */
.m3d .maplibregl-ctrl-bottom-right,.m3d .maplibregl-ctrl-bottom-left{z-index:4}
.m3d .maplibregl-ctrl-attrib{background:rgba(var(--m3d-glass),.7);border-radius:8px 0 0 0;font-size:10px}
.m3d .maplibregl-ctrl-attrib a{color:rgba(var(--m3d-line),.7)}
.m3d .maplibregl-ctrl-logo{opacity:.4}

/* ── small screens ────────────────────────────────────────────────────── */
@media (max-width:860px){
  .m3d__layers{order:3;width:100%;margin:0;justify-content:flex-start;overflow:auto;flex-wrap:nowrap;
    padding-bottom:2px;scrollbar-width:none}
  .m3d__layers::-webkit-scrollbar{display:none}
  .m3d__chip{flex:0 0 auto}
  /* the rail hangs under the chip row, clear of the card that slides up
     from the bottom; hover labels are pointless on a touch screen */
  .m3d__nav{top:126px;bottom:auto;transform:none;inset-inline-end:10px}
  .m3d-pin__label{display:none}
  .m3d__panel{top:auto;bottom:0;inset-inline:0;width:auto;max-height:76vh;border-radius:22px 22px 0 0}
  .m3d__panel-body{grid-template-columns:1fr 1fr}
  .m3d__card{inset-inline:10px;bottom:10px;width:auto;max-height:70vh;overflow:auto}
  .m3d__card-img{aspect-ratio:21/9}
  .m3d__hint{display:none}
}
@media (max-width:480px){
  .m3d__title small{display:none}
  .m3d__btn{width:38px;height:38px;border-radius:12px}
}