/* ============================================================================
   V8 SHELL — the wireframe architecture.
   Landing (intro+home merged) · 3-tab top menu · Inventory route ·
   merged Gallery · warm map. Consumes the Eden tokens from eden-theme.css;
   loads last so it wins over the v7 orbit chrome it replaces.
   ============================================================================ */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══ TOP MENU — a breadcrumb chip that opens rightward ═══════════════════
   Client 2026-08-28: "keep it on top left … breadcrumb to be separate and
   when i click that it should open towards right … all the buttons to be
   separate."

   So the row itself carries NO pill: the head is its own chip, each
   destination is its own chip, and they sit left-anchored under the brand
   lockup so opening always grows to the right. */
.top-menu{
  position:fixed;z-index:41;
  top:88px;left:var(--nav-left);
  transform:none;
  display:flex;align-items:center;gap:8px;
  padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  pointer-events:auto;
}

/* every chip — head and destinations — shares one look */
.tm-toggle,
.tm-items button{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 clamp(16px,1.5vw,26px);
  border-radius:12px;
  border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);
  -webkit-backdrop-filter:blur(var(--e-blur));backdrop-filter:blur(var(--e-blur));
  box-shadow:var(--e-shadow-m);
  color:var(--e-ink-soft);
  font-family:inherit;font-size:clamp(11px,.74vw,13px);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tm-toggle{color:var(--e-ink-strong)}
.tm-toggle:hover,
.tm-items button:hover{color:var(--e-ink-strong);box-shadow:var(--e-shadow-l);transform:translateY(-1px)}
.tm-toggle:focus-visible,
.tm-items button:focus-visible{outline:2px solid var(--e-ink);outline-offset:2px}
.tm-items button.is-current{
  background:var(--e-ground);
  border-color:var(--e-line-strong);
  color:var(--e-ink-strong);
}

.tm-caret{
  width:7px;height:7px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
/* closed points right (it will open rightward); open points down */
.top-menu:not(.is-open) .tm-caret{transform:rotate(-45deg) translate(-1px,1px)}
.top-menu.is-open .tm-caret{transform:rotate(45deg) translate(-1px,-1px)}

/* the destinations — separate chips, revealed one after another rightward */
.tm-items{display:none;align-items:center;gap:8px}
.top-menu.is-open .tm-items{display:flex}
.top-menu.is-open .tm-items button{animation:tmIn .3s cubic-bezier(.22,.61,.36,1) both}
.top-menu.is-open .tm-items button:nth-child(2){animation-delay:.06s}
.top-menu.is-open .tm-items button:nth-child(3){animation-delay:.12s}
@keyframes tmIn{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}

/* ══ LANDING — intro and home are one screen ══════════════════════════════ */
.landing-view{overflow:hidden;padding:0!important}
/* Persistent backdrop: sits under the whole stage, never toggled. */
#shell > .intro-montage{position:absolute;inset:0;z-index:0}
/* The stage is opaque everywhere EXCEPT the landing, so every other view
   simply covers the montage instead of the montage being hidden. */
.view-stage{background:var(--e-ground)}
.app[data-current-view="home"] .view-stage{background:transparent!important}
/* Client 2026-09-07: "there is a tint which is on the image — remove that
   tint". This layer used to carry a full-frame dark-green wash (a bottom band
   to 72% and a left band to 40%) which greened the lower third and the whole
   left edge of every montage render. It is gone: the shade element stays in
   the DOM (app.js and the view machinery reference it) but paints nothing, so
   the renders now run edge to edge, ungraded.

   The one line of caption copy that used to lean on that wash carries its own
   legibility now — see .landing-lower::before, a feather that dies inside its
   own box and never reaches an edge. */
.landing-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:none;
}
.landing-lower{
  position:absolute;z-index:2;left:var(--edge-x);right:var(--edge-x);
  bottom:var(--edge-y);
  max-width:min(56ch,62%);
  /* The measure is written in `ch`, and `ch` resolves against THIS element's
     font-size — not the child's. Left at the inherited 16px the box stayed a
     fixed 519px at every viewport, so on a 4K television it was a 519px column
     of 53px type: about nine characters a line. Carrying the caption size here
     makes `ch` mean what it says at every step of the ladder. */
  font-size:var(--landing-fs);
  color:var(--eden-beige-3);
  animation:v8Rise .8s cubic-bezier(.22,.61,.36,1) both;
}
/* The local feather that replaces the old full-frame shade. `closest-side`
   pins the ellipse to the nearest box edge so alpha reaches 0 on every side —
   no rectangle, no band, no visible edge anywhere on the render. It is
   generously inset past the type so the dense middle covers the words and the
   whole fade happens in empty space. */
.landing-lower::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:calc(-1 * var(--cap-feather-y)) calc(-1 * var(--cap-feather-x));
  background:radial-gradient(closest-side at 50% 50%,
    rgba(26,40,24,.38) 0%,
    rgba(26,40,24,.29) 46%,
    rgba(26,40,24,.13) 74%,
    rgba(26,40,24,0)  100%);
}
@keyframes v8Rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}









/* ══ INVENTORY · masterplan + select villa ════════════════════════════════ */
.villa-select{
  /* No panel. Client 2026-08-28: "make the mansions button to be all separate
     separate, do not keep it inside the box like that" — same language as the
     top menu, every control is its own chip on the plan. */
  position:absolute;z-index:22;
  top:clamp(92px,11vh,116px);right:clamp(14px,1.6vw,30px);
  width:auto;max-width:min(42vw,420px);
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.vs-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.vs-title{
  margin:0;padding:0 4px;
  font-size:clamp(10px,.66vw,12px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--e-ink-soft);text-shadow:0 1px 0 rgba(255,242,235,.75);
}

/* east / west — two separate chips, no track behind them */
.vs-sides{display:flex;align-items:center;gap:8px;padding:0;border-radius:0;background:none}
.vs-sides button{
  min-height:42px;padding:0 clamp(16px,1.4vw,24px);
  border-radius:12px;border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);
  -webkit-backdrop-filter:blur(var(--e-blur));backdrop-filter:blur(var(--e-blur));
  box-shadow:var(--e-shadow-m);
  color:var(--e-ink-soft);font-family:inherit;
  font-size:clamp(11px,.74vw,13px);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.vs-sides button:hover{color:var(--e-ink-strong);box-shadow:var(--e-shadow-l);transform:translateY(-1px)}
.vs-sides button.is-active{
  background:var(--e-ground);border-color:var(--e-line-strong);color:var(--e-ink-strong);
}

/* each mansion is its own chip too */
.vs-grid{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.vs-card{
  display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;
  padding:9px 16px 9px 9px;
  border-radius:14px;border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);
  -webkit-backdrop-filter:blur(var(--e-blur));backdrop-filter:blur(var(--e-blur));
  box-shadow:var(--e-shadow-m);
  cursor:pointer;text-align:left;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.vs-card:hover{border-color:var(--e-line-strong);box-shadow:var(--e-shadow-l);transform:translateY(-1px)}
.vs-card:focus-visible{outline:2px solid var(--e-ink);outline-offset:2px}
.vs-card img{width:62px;height:50px;object-fit:cover;border-radius:10px;display:block}
.vs-card b{display:block;font-size:clamp(12px,.86vw,15px);color:var(--e-ink-strong);font-weight:500}
.vs-card small{display:block;font-size:clamp(9px,.62vw,11px);color:var(--e-ink-soft);margin-top:2px}

.vs-note{
  margin:0;max-width:30ch;text-align:right;
  font-size:clamp(9px,.6vw,11px);line-height:1.5;color:var(--e-ink-soft);
  text-shadow:0 1px 0 rgba(255,242,235,.75);
}

/* ══ VILLA · Mansion Docket rail ══════════════════════════════════════════ */
.mansion-docket{
  display:flex;flex-direction:column;gap:7px;
  padding:clamp(11px,1.1vw,15px);
  border-radius:14px;
  border:1px solid var(--e-line);
  background:var(--e-surface);
}
.md-title{
  margin:0 0 3px;font-size:clamp(9px,.62vw,11px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--e-ink-soft)
}
.md-row{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:44px;padding:8px 12px;
  border-radius:10px;border:1px solid transparent;
  background:var(--e-ground);cursor:pointer;text-align:left;
  transition:border-color .2s ease,box-shadow .2s ease
}
.md-row:hover{border-color:var(--e-line-strong);box-shadow:var(--e-shadow-s)}
.md-row:focus-visible{outline:2px solid var(--e-ink);outline-offset:2px}
.md-dot{
  flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--e-ink-soft);background:transparent
}
.md-row:hover .md-dot{background:var(--e-ink);border-color:var(--e-ink)}
.md-copy b{display:block;font-size:clamp(11px,.8vw,14px);color:var(--e-ink-strong);font-weight:500}
.md-copy small{display:block;font-size:clamp(9px,.6vw,11px);color:var(--e-ink-soft);margin-top:1px}

.drawing-actions button{min-height:44px;border-radius:11px}

/* ══ GALLERY — one surface, two panes ═════════════════════════════════════ */
.gallery-merged{padding:0!important;overflow:hidden}
.gal-switch{
  /* sits BELOW the fixed top-menu chip (top:28, h:52) */
  position:absolute;z-index:26;top:clamp(88px,10.5vh,112px);left:50%;transform:translateX(-50%);
  display:flex;gap:5px;padding:5px;border-radius:13px;
  background:var(--e-glass-strong);
  -webkit-backdrop-filter:blur(var(--e-blur));backdrop-filter:blur(var(--e-blur));
  border:1px solid var(--e-glass-line);box-shadow:var(--e-shadow-m)
}
.gal-switch button{
  min-height:40px;padding:0 clamp(16px,1.5vw,26px);
  border:1px solid transparent;border-radius:9px;background:transparent;
  color:var(--e-ink-soft);font-family:inherit;font-size:clamp(11px,.78vw,14px);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease
}
.gal-switch button.is-active{
  background:var(--e-ground);color:var(--e-ink-strong);
  border-color:var(--e-glass-line);box-shadow:var(--e-shadow-s)
}
.gal-panes{position:absolute;inset:0}
/* display, not opacity/visibility: a pane that is merely transparent does not
   repaint its images when it is shown again — the stage and the whole thumb
   strip came back blank. Toggling display forces a real layout + paint pass. */
.gal-pane{position:absolute;inset:0;display:none}
.gal-pane.is-active{display:block}
/* pointer-events only while the GALLERY VIEW itself is active — otherwise the
   pane keeps swallowing taps aimed at whatever view is really on screen. */
.view.is-active .gal-pane.is-active{pointer-events:auto}
/* the shared .gal engine positions its own chrome; keep its category chips
   clear of the pane switcher above it */
.gal-pane[data-pane="amenities"] .gal-cats{top:clamp(150px,17vh,178px)}

/* ══ LOCATION — warm map ══════════════════════════════════════════════════
   Client 2026-08-28: "Warm Vector". Interim warm grade over the vendored
   tiles; scoped to the tile pane so pins, routes and chrome stay true. */
#edenMap .leaflet-tile-pane{
  /* The vendored CARTO tiles are a light style to begin with; too gentle a
     grade and the whole map reads bleached. More saturation and contrast,
     a touch less brightness — colour and road hierarchy without yellowing. */
  filter:sepia(.07) saturate(1.48) hue-rotate(-4deg) brightness(.94) contrast(1.32)
}

/* ══ ANNOTATE — fixed, single purpose (the dial is retired) ═══════════════ */
.efab-root .efab-dial{display:none}

/* ── landing is exempt from the generic view-entry animation ──────────────
   finish-kit.css runs `fkViewIn` on `.view.is-active:not(.home-view)`; the
   v7 orbit home carried .home-view so it was excluded. The v8 landing owns
   its own motion (the montage + .landing-lower rise), so opt it out too. */
.view.is-active.landing-view{animation:none!important;opacity:1!important;transform:none!important}
/* the motion visual is full-bleed — no stage inset on the landing */
/* every screen is edge-to-edge — no stage inset on any view */
.view-stage{inset:0!important}
.app[data-current-view="home"] .tm-toggle,
.app[data-current-view="home"] .tm-items button{
  background:rgba(44,63,40,.34);border-color:rgba(255,242,235,.28);color:rgba(255,242,235,.88)}
.app[data-current-view="home"] .tm-items button.is-current{
  background:rgba(255,242,235,.20);border-color:rgba(255,242,235,.40);color:#fff2eb}
.app[data-current-view="home"] .tm-toggle:hover,
.app[data-current-view="home"] .tm-items button:hover{background:rgba(44,63,40,.52);color:#fff2eb}
.app[data-current-view="home"] .tm-items button.is-current{
  background:rgba(255,242,235,.18);border-color:rgba(255,242,235,.34);color:#fff2eb;box-shadow:none}

/* styles.css:112 hides the whole <header> on home (the retired orbit home drew
   its own corner brand). v8 needs its floating chips there, so keep the header
   in the box tree but paint nothing — the chips inside are position:fixed. */
.app[data-current-view="home"] .topbar{
  display:block!important;height:0!important;border:0!important;
  background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  opacity:1!important;pointer-events:none!important;transform:none!important}
.app[data-current-view="home"] .topbar .brand-home,
.app[data-current-view="home"] .top-menu,
.app[data-current-view="home"] .top-actions{pointer-events:auto!important}

/* over the landing montage the chips go light-on-dark */
.app[data-current-view="home"] .topbar .brand-home{
  background:rgba(44,63,40,.30);border-color:rgba(255,242,235,.26);color:#fff2eb}
.app[data-current-view="home"] .save-top{
  background:rgba(44,63,40,.30);border-color:rgba(255,242,235,.26);color:#fff2eb}

/* ══ FULL-SCREEN SCREENS ══════════════════════════════════════════════════
   The v7 stage sat inset 12px with a rounded frame, which read as "outer
   space" around each screen. Every view now runs edge-to-edge. */
.view-stage,
.app[data-current-view="home"] .view-stage{inset:0!important;border-radius:0!important}
.view{border-radius:0!important}

/* ══ INVENTORY — the left legend index is retired ═════════════════════════ */
#estIndex{display:none!important}
.masterplan-view .est-frame,
.masterplan-view .model-frame{left:0!important;right:0!important;inset:0!important}

/* ══ LOCATION — full-screen map, category chips only ══════════════════════
   The editorial column and the 24-row POI list are gone; the map is the
   screen. #poiCats is built into .location-copy by about-location.js, so the
   column stays in the DOM as a bare floating chip bar. */
.location-view{padding:0!important}
.location-view .location-map{
  position:absolute!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:auto!important;height:auto!important;
  border:0!important;border-radius:0!important}
.location-view .map-field,
.location-view #edenMap{
  position:absolute!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:auto!important;height:auto!important;border-radius:0!important}
.location-copy{
  position:absolute!important;z-index:24;
  left:clamp(14px,1.6vw,28px);top:clamp(148px,17vh,176px);
  width:auto!important;height:auto!important;max-width:none!important;
  padding:0!important;background:none!important;border:0!important;box-shadow:none!important;
  overflow:visible!important;
}
.location-copy > *{display:none!important}
.location-copy > .poi-cats{
  display:flex!important;flex-wrap:wrap;gap:6px;
  padding:6px;border-radius:14px;
  background:var(--e-glass-strong);
  -webkit-backdrop-filter:blur(var(--e-blur));backdrop-filter:blur(var(--e-blur));
  border:1px solid var(--e-glass-line);box-shadow:var(--e-shadow-m);
}
.poi-cats button{
  min-height:40px;padding:0 clamp(14px,1.3vw,22px);
  border:1px solid transparent;border-radius:10px;background:transparent;
  color:var(--e-ink-soft);font-family:inherit;font-size:clamp(10px,.7vw,12px);
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.poi-cats button:hover{background:rgba(63,89,58,.07);color:var(--e-ink)}
.poi-cats button.is-active{
  background:var(--e-ground);border-color:var(--e-glass-line);
  color:var(--e-ink-strong);box-shadow:var(--e-shadow-s);
}

/* ══ THE BLANK-SCREEN BUG ═════════════════════════════════════════════════
   finish-kit.css runs `fkViewIn` (.55s, fill:both) on every active view.
   In this build that animation never advances — it reports playState
   "running" with currentTime pinned at 0 — so `fill:both` holds each view on
   its FIRST keyframe: opacity 0, translateY(12px).

   That single fact explains every "blank" symptom chased in this build:
     · the Gallery stage looked empty on entry
     · the landing montage looked empty on return
     · the Location map sat 12px low with a dead band above it
   The descendants were always fine — `getComputedStyle` on them reported
   opacity 1 — because it was the VIEW above them being held invisible.

   The entrance flourish is not worth a blank screen on a sales kiosk, so
   every view opts out and is simply visible when active. */
.view.is-active{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
/* Belt and braces for "full screen when i enter": the base .view carries
   translateY(14px) and only loses it once the .is-active transition settles.
   Any hesitation there shows as a dead band above the map. No view ever
   slides now — they cross-fade in place. */
.view{transform:none!important}

/* ══ ROUTE LINE — a real road route, drawn like one ═══════════════════════
   about-location.css pins these to 2.4/1.2px with !important (they were an
   incidental arc, not the subject). Now that the line follows actual roads it
   is the subject, so it gets route weight, round caps and round joins. */
.location-view .location-map path.route-casing{
  stroke:rgba(255,242,235,.96)!important;stroke-width:7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;fill:none!important}
.location-view .location-map path.route-line{
  stroke:var(--eden-green)!important;stroke-width:3.4!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;fill:none!important}

/* ══ LOCATION · vertical category rail, left ══════════════════════════════
   Client 2026-08-28: "the categories also has to be separate separate …
   keep it vertically … individual buttons on the left hand side."
   So the bar becomes a column of standalone chips with no tray behind it. */
.location-view .location-copy{
  left:clamp(20px,2vw,34px)!important;
  top:clamp(148px,17vh,176px)!important;
  right:auto!important;
}
.location-view .location-copy > .poi-cats{
  display:flex!important;flex-direction:column;align-items:stretch;
  gap:9px;
  padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.poi-cats button{
  justify-content:flex-start;
  min-width:168px;min-height:46px;
  padding:0 20px;
  border-radius:12px;
  border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);
  -webkit-backdrop-filter:blur(var(--e-blur));backdrop-filter:blur(var(--e-blur));
  box-shadow:var(--e-shadow-m);
  color:var(--e-ink-soft);
  font-size:clamp(10px,.7vw,12px);letter-spacing:.18em;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.poi-cats button:hover{color:var(--e-ink-strong);box-shadow:var(--e-shadow-l);transform:translateX(2px)}
.poi-cats button.is-active{
  background:var(--e-ground);border-color:var(--e-line-strong);color:var(--e-ink-strong);
}

/* ══ LOCATION · pins you can actually hit ═════════════════════════════════
   Client: "the pointers … doesn't have the proper amount of highlight …
   make a little bigger, not overlap on any other content." */
.location-view .map-pin{width:54px;height:54px}
.location-view .location-map .map-pin .pin-dot{
  width:17px;height:17px;
  border:2px solid rgba(255,242,235,.98)!important;
  box-shadow:
    0 0 0 5px color-mix(in srgb,var(--acc,#6d603d) 26%,transparent),
    0 3px 10px rgba(63,89,58,.30)!important;
}
.location-view .location-map .map-pin:hover .pin-dot{
  transform:scale(1.18);
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--acc,#6d603d) 32%,transparent),
    0 4px 14px rgba(63,89,58,.36)!important;
}
/* the selected pin reads loudest of all */
.location-view .location-map .map-pin.is-hot .pin-dot{
  transform:scale(1.3);
  box-shadow:
    0 0 0 10px color-mix(in srgb,var(--acc,#6d603d) 38%,transparent),
    0 5px 16px rgba(63,89,58,.4)!important;
}
/* labels clear the bigger dot and sit on their own plate so they never sit
   on top of another pin's label */
.location-view .location-map .map-pin b{
  font-size:11px;letter-spacing:.14em;
  padding:4px 9px;border-radius:8px;
  background:rgba(255,242,235,.86);
  border:1px solid var(--e-glass-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-shadow:none!important;
  box-shadow:0 2px 8px rgba(63,89,58,.10);
}
.location-view .location-map .map-pin.lbl-right b{left:calc(100% - 12px)}
.location-view .location-map .map-pin.lbl-left b{right:calc(100% - 12px)}
/* Eden's own marker stays the loudest thing on the map */
.location-view .map-eden b{
  padding:5px 12px;border-radius:9px;
  background:var(--e-ink);color:var(--eden-beige-3);
  border:1px solid rgba(255,242,235,.35);
  text-shadow:none!important;
  box-shadow:0 4px 14px rgba(63,89,58,.28);
}
/* any sliver beyond the tile pyramid reads as paper, not a dead band */
#edenMap,.leaflet-container{background:var(--eden-beige-3)!important}

/* rail chips sit on the map — make them read as solid so pin labels behind
   them are hidden outright rather than bleeding through */
.location-view .poi-cats button{
  background:rgba(255,242,235,.97)!important;
  border-color:var(--e-line)!important;
}
.location-view .poi-cats button.is-active{
  background:var(--e-ink)!important;border-color:var(--e-ink)!important;
  color:var(--eden-beige-3)!important;
}
/* a soft column of paper behind the rail so the map never runs into it */
.location-view .location-copy::before{
  /* Glass shows what is behind it — which is the point, but a hard pin dot
     under a chip reads as a smudge. This quiets the map behind the rail so
     the chips stay glassy without anything distracting bleeding through. */
  content:"";position:absolute;z-index:-1;
  left:calc(-1 * clamp(20px,2vw,34px));top:-56px;
  width:calc(100% + clamp(90px,9vw,150px));height:calc(100% + 112px);
  background:linear-gradient(90deg,
    var(--eden-beige-3) 0%,
    rgba(255,242,235,.94) 52%,
    rgba(255,242,235,.55) 78%,
    rgba(255,242,235,0) 100%);
  pointer-events:none;
}
/* "All" is the cluster view — dots only, no label pile-up */
.location-view .location-map.cat-all .map-pin b{opacity:0;pointer-events:none}
.location-view .location-map.cat-all .map-pin.is-hot b{opacity:1}

/* ══ LIGHT THEME, HELD ════════════════════════════════════════════════════
   Client 2026-08-28: "make sure to keep the theme light" + the beige ladder
   (#e4c9b0 / #fee6d3 / #fff2eb). Those are already --eden-beige-1/2/3, so
   nothing needs re-tokenising — but two controls had crept in as dark fills.
   Selected states now read as the LIGHTEST beige lifted off the surface,
   never as a dark slab. */
.location-view .poi-cats button.is-active{
  background:var(--eden-beige-3)!important;
  border-color:var(--eden-beige-1)!important;
  color:var(--e-ink-strong)!important;
  box-shadow:var(--e-shadow-l)!important;
}
.location-view .map-eden b{
  background:var(--eden-beige-3)!important;
  color:var(--e-ink-strong)!important;
  border:1px solid var(--eden-beige-1)!important;
  box-shadow:0 4px 14px rgba(63,89,58,.20)!important;
}
/* chips over the landing montage: light glass with ink type, not dark slabs */
.app[data-current-view="home"] .tm-toggle,
.app[data-current-view="home"] .tm-items button{
  background:rgba(255,242,235,.86)!important;
  border-color:var(--eden-beige-1)!important;
  color:var(--e-ink-strong)!important;
}
.app[data-current-view="home"] .tm-toggle:hover,
.app[data-current-view="home"] .tm-items button:hover{
  background:var(--eden-beige-3)!important;color:var(--e-ink-strong)!important}
.app[data-current-view="home"] .tm-items button.is-current{
  background:var(--eden-beige-3)!important;
  border-color:var(--eden-beige-1)!important;
  color:var(--e-ink-strong)!important;
}

/* ══ GLASSMORPHISM — one recipe for every control ═════════════════════════
   Client 2026-08-28: "the buttons has to be glass morphism", and the Eden
   brief asks for a "play of glass morphism" throughout.

   Some chips had been pushed to near-opaque earlier to stop map labels
   bleeding through the Location rail. That fix is now carried by the paper
   scrim behind the rail instead, so every control can go back to real glass:
   a two-stop beige wash, a heavy blur with saturation lift, a hairline in the
   deepest beige, a warm drop shadow, and the white inner edge that reads as
   the lit top of a pane of glass.

   Selected states stay GLASS — brighter and lifted, never a flat slab. */
.tm-toggle,
.tm-items button,
.vs-sides button,
.vs-card,
.poi-cats button,
.md-row,
.gal-switch button,
.drawing-actions button,
.location-view .poi-cats button{
  background:linear-gradient(145deg,rgba(255,242,235,.60),rgba(254,230,211,.76))!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  border:1px solid var(--e-glass-line)!important;
  box-shadow:
    0 10px 30px rgba(63,89,58,.10),
    inset 0 1px 0 rgba(255,255,255,.60)!important;
}

.tm-toggle:hover,
.tm-items button:hover,
.vs-sides button:hover,
.vs-card:hover,
.poi-cats button:hover,
.md-row:hover,
.gal-switch button:hover,
.drawing-actions button:hover,
.location-view .poi-cats button:hover{
  background:linear-gradient(145deg,rgba(255,242,235,.74),rgba(254,230,211,.86))!important;
  box-shadow:
    0 16px 40px rgba(63,89,58,.15),
    inset 0 1px 0 rgba(255,255,255,.72)!important;
}

.tm-items button.is-current,
.vs-sides button.is-active,
.gal-switch button.is-active,
.poi-cats button.is-active,
.location-view .poi-cats button.is-active{
  background:linear-gradient(145deg,rgba(255,242,235,.90),rgba(254,230,211,.95))!important;
  border-color:var(--eden-beige-1)!important;
  color:var(--e-ink-strong)!important;
  box-shadow:
    0 18px 44px rgba(63,89,58,.18),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
}

/* over the landing montage the same glass, just a touch more body so the
   type stays legible against moving photography */
.app[data-current-view="home"] .tm-toggle,
.app[data-current-view="home"] .tm-items button{
  background:linear-gradient(145deg,rgba(255,242,235,.72),rgba(254,230,211,.84))!important;
  color:var(--e-ink-strong)!important;
}
.app[data-current-view="home"] .tm-items button.is-current{
  background:linear-gradient(145deg,rgba(255,242,235,.92),rgba(254,230,211,.96))!important;
}

/* the Annotate pebble and the map's zoom chips join the same family */
.efab-main,
.map-zoom button,
.model-tools button{
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:
    0 10px 30px rgba(63,89,58,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* ══ LANDING · one line, and the menu takes the top-left corner ═══════════
   Client 2026-08-28: "keep one sentence of the same meaning and remove all
   the other text … remove the embassy logo button … for back just keep one
   back button", for every screen. */
.landing-line{
  /* Body copy, so it takes the brand SANS (Acumin Pro via --sans), not the
     IvyOra display serif. Eden style guide: IvyOra Display for display type,
     Acumin Pro Regular/Medium for secondary and control text. */
  margin:0;max-width:min(62ch,64%);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--landing-fs);
  line-height:1.62;
  letter-spacing:.012em;
  color:var(--eden-beige-3);
  /* With the full-frame wash gone, THIS is what holds the line — and it is
     deliberately built as a true outline plus a glow rather than one soft drop
     shadow. Measured across all six montage renders, the brightest ground the
     caption ever lands on is the main-pool shot (relative luminance 0.68 at the
     90th percentile of the caption patch); beige type on that is 1.2:1 bare.
     An eight-direction 1px ring at .95 alpha gives every glyph a hard edge
     against it, the two wide glows carry it at three-metre TV distance, and
     together they cost the image nothing — unlike an area tint, which is what
     the client asked to have removed. */
  text-shadow:
     1px  0   0   rgba(26,40,24,.95),
    -1px  0   0   rgba(26,40,24,.95),
     0    1px 0   rgba(26,40,24,.95),
     0   -1px 0   rgba(26,40,24,.95),
     1px  1px 0   rgba(26,40,24,.95),
    -1px  1px 0   rgba(26,40,24,.95),
     1px -1px 0   rgba(26,40,24,.95),
    -1px -1px 0   rgba(26,40,24,.95),
     0    0   11px rgba(26,40,24,.78),
     0    0   32px rgba(26,40,24,.50);
}

/* the lockup is gone, so the menu moves up into the corner it vacated */
.top-menu{top:var(--nav-top)}
/* and everything that used to sit under the menu moves up with it */
.location-view .location-copy{top:clamp(92px,11vh,116px)!important}
.villa-select{top:clamp(92px,11vh,116px)}

/* one back button, and it should look like the other glass controls */
#backButton{
  display:none;
  width:auto!important;min-width:46px;height:46px;
  padding:0 18px!important;border-radius:12px!important;
  align-items:center;justify-content:center;gap:8px;
  font-size:26px;line-height:1;color:var(--e-ink-strong);
  background:linear-gradient(145deg,rgba(255,242,235,.60),rgba(254,230,211,.76));
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  border:1px solid var(--e-glass-line);
  box-shadow:0 10px 30px rgba(63,89,58,.10),inset 0 1px 0 rgba(255,255,255,.60);
}
.app:not([data-current-view="home"]) #backButton{display:grid}
#backButton:hover{
  background:linear-gradient(145deg,rgba(255,242,235,.74),rgba(254,230,211,.86));
  box-shadow:0 16px 40px rgba(63,89,58,.15),inset 0 1px 0 rgba(255,255,255,.72);
}

/* the single line should read as one flowing sentence, not a narrow column */
.landing-lower{
  left:var(--edge-x)!important;right:auto!important;
  width:var(--landing-measure)!important;max-width:none!important;
}
.landing-line{max-width:none!important}

/* ══ LOCATION · the category rail sits centred on the left edge ═══════════
   Client 2026-08-28: "do not change the shape, but position the entire
   buttons in the middle — centre align on the left side itself." */
.location-view .location-copy{
  top:50%!important;
  transform:translateY(-50%);
  bottom:auto!important;
}
.location-view .location-copy::before{
  top:-40px;height:calc(100% + 80px);
}

/* the copy column still carried its old flex gap, which pushed the rail ~24px
   below true centre — shrink-wrap it to the chips so the centring is exact */
.location-view .location-copy{
  display:flex!important;align-items:center!important;
  gap:0!important;padding:0!important;margin:0!important;
}

/* ── exact vertical centring, immune to the old column's box ──────────────
   Centring the wrapper kept landing ~24px low (its box is taller than the
   chips). Span the wrapper full height and absolutely centre the chips in it
   instead — that cannot drift. */
.location-view .location-copy{
  top:0!important;bottom:0!important;height:auto!important;
  transform:none!important;display:block!important;
}
.location-view .location-copy > .poi-cats{
  position:absolute!important;
  left:0!important;top:50%!important;
  transform:translateY(-50%)!important;
}
.location-view .location-copy::before{
  top:50%!important;height:min(78vh,720px)!important;
  transform:translateY(-50%);
}

/* ── centre against the VIEWPORT, not the old copy column ─────────────────
   Chasing the wrapper's box kept leaving the rail a dozen-odd pixels low.
   position:fixed centres it on the screen itself, which is what "centre
   align on the left side" actually means and cannot drift. */
.location-view .location-copy > .poi-cats{
  position:fixed!important;
  left:clamp(20px,2vw,34px)!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:25!important;
}
.location-view .location-copy::before{
  position:fixed!important;
  left:0!important;top:50%!important;transform:translateY(-50%)!important;
  width:min(30vw,340px)!important;height:min(80vh,760px)!important;
}

/* ══ FIXES · 2026-08-31 ═══════════════════════════════════════════════════ */

/* 1 · The left side looked BLEACHED because the scrim behind the rail was
   30vw — about 600px on a 2000px screen, washing out a third of the map.
   It only ever needed to sit behind the chips. */
.location-view .location-copy::before{
  width:min(268px,22vw)!important;
  background:linear-gradient(90deg,
    rgba(255,242,235,.90) 0%,
    rgba(255,242,235,.72) 58%,
    rgba(255,242,235,0) 100%)!important;
}

/* 2 · Masterplan: the plan's zoom/reset row sat at y83 and the East/West
   chips at y112 — a 13px overlap. The tools move to the bottom-left, clear
   of the villa picker and of the Annotate pebble bottom-right. */
.masterplan-view .model-tools{
  top:auto!important;right:auto!important;
  bottom:clamp(14px,2vh,28px)!important;
  left:clamp(20px,2vw,34px)!important;
}

/* 3 · Nothing but the back button lives in the top-right corner. */
.top-actions{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.masterplan-view #expandPlan,
.villa-view #expandPlan{position:relative;z-index:1}

/* ── rail centring, final form ────────────────────────────────────────────
   top:50% + translateY(-50%) kept landing ~18px low: an entry animation on
   the column owns `transform`, and animations outrank even !important. So no
   transform at all — a full-height fixed column that flex-centres its chips.
   That is exact and nothing can override it. */
.location-view .location-copy{
  position:fixed!important;
  left:clamp(20px,2vw,34px)!important;right:auto!important;
  top:0!important;bottom:0!important;height:auto!important;width:auto!important;
  display:flex!important;align-items:center!important;
  transform:none!important;animation:none!important;
  pointer-events:none;
}
.location-view .location-copy > .poi-cats{
  position:static!important;
  transform:none!important;animation:none!important;
  pointer-events:auto;
}
.location-view .location-copy::before{
  top:0!important;height:100%!important;transform:none!important;
}
/* the plan tools are a small row, not a full-width bar */
.masterplan-view .model-tools{width:auto!important;display:inline-flex!important}

/* the column is flex-direction:column, so vertical centring is
   justify-content, not align-items — that was the last 18px (then 357px). */
.location-view .location-copy{
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}

/* ══ THE REAL EDEN LOCKUP ═════════════════════════════════════════════════
   Extracted from the client's own EdenMasterplanFeb25.psd (layer
   "Embassy Eden_Logo", 656x271, transparent) — the outstanding "high-res Eden
   logo" gap is closed. It carries the Embassy mark AND the EDEN wordmark, so
   the app no longer composes those from a corporate mark plus live text. */
.eg-screen .eg-lockup{
  display:block;width:min(268px,44vw);height:auto;margin:0 auto;
  filter:none!important;mix-blend-mode:normal;
}

/* ══ INVENTORY · both panels centred on their edges ═══════════════════════
   Client 2026-08-31 (marked in red): the estate copy belongs mid-left and the
   villa picker mid-right, not stacked against the top of the screen. Same
   treatment as the Location rail — a full-height fixed column that
   justify-content-centres its contents, so nothing can drift. */
.masterplan-view .masterplan-copy{
  position:fixed!important;
  left:clamp(28px,4.5vw,96px)!important;right:auto!important;
  top:0!important;bottom:0!important;height:auto!important;width:min(30ch,26vw)!important;
  display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:flex-start!important;
  transform:none!important;animation:none!important;
  padding:0!important;background:none!important;border:0!important;box-shadow:none!important;
  z-index:23;
}
.masterplan-view .masterplan-copy > *{margin-left:0;margin-right:0}

.villa-select{
  position:fixed!important;
  right:clamp(28px,3vw,64px)!important;left:auto!important;
  top:0!important;bottom:0!important;height:auto!important;
  display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:flex-end!important;
  transform:none!important;animation:none!important;
  z-index:23;
}

/* ══ GALLERY · switch sits on the strip, thumbs centred ═══════════════════
   Client 2026-08-31: "interior and life at eden to come on top of the
   thumbnail, and make the thumbnail centre positioned." */
.gallery-view .gal-switch{
  top:auto!important;
  bottom:calc(96px + 14px)!important;      /* the strip is 96px tall at bottom:0 */
  left:50%!important;transform:translateX(-50%)!important;
  z-index:27!important;
}
/* the six Life-at-Eden chips take the top now the switch has moved down */
.gal-pane[data-pane="amenities"] .gal-cats{
  top:clamp(88px,10.5vh,112px)!important;
}
/* thumbnails centred, with symmetric clearance so the Annotate pebble on the
   right never sits on the last thumb */
.gallery-view .gal-strip{
  justify-content:center!important;
  padding-left:108px!important;padding-right:108px!important;
}

/* ── Life at Eden filters sit directly above the switch ───────────────────
   Client 2026-08-31: the category filters belong at the bottom too, right
   above the "Life at Eden" button. Stack from the floor up:
     strip 96  ->  switch (14 gap + 51 tall)  ->  filters (12 gap). */
.gal-pane[data-pane="amenities"] .gal-cats{
  top:auto!important;
  bottom:calc(96px + 14px + 51px + 12px)!important;
}

/* ══ INVENTORY · panels 50% larger ════════════════════════════════════════
   Client 2026-08-31. Measured values scaled x1.5: copy 268->402 wide,
   h2 37->56, body 12->18; picker chips 42->63 tall, card art 62x50->93x75. */
.masterplan-view .masterplan-copy{width:min(42ch,34vw)!important}
.masterplan-view .masterplan-copy .kicker{font-size:18px!important;letter-spacing:.26em}
.masterplan-view .masterplan-copy h2{
  font-size:clamp(40px,3.1vw,56px)!important;line-height:.98!important;margin:14px 0 20px!important}
.masterplan-view .masterplan-copy p{
  font-size:clamp(14px,1.0vw,18px)!important;line-height:1.6!important;max-width:34ch}

.villa-select{gap:13px!important}
.vs-head{gap:13px!important}
.vs-title{font-size:clamp(14px,1vw,18px)!important;letter-spacing:.26em}
.vs-sides{gap:12px!important}
.vs-sides button{
  min-height:63px!important;
  padding:0 clamp(24px,2.1vw,36px)!important;
  border-radius:16px!important;
  font-size:clamp(15px,1.1vw,19px)!important;
}
.vs-grid{gap:13px!important}
.vs-card{
  grid-template-columns:93px 1fr!important;
  gap:18px!important;
  padding:14px 24px 14px 14px!important;
  border-radius:20px!important;
}
.vs-card img{width:93px!important;height:75px!important;border-radius:15px!important}
.vs-card b{font-size:clamp(17px,1.29vw,22px)!important}
.vs-card small{font-size:clamp(13px,.93vw,16px)!important;margin-top:3px!important}
.vs-note{font-size:clamp(13px,.9vw,16px)!important;max-width:34ch!important;line-height:1.5!important}

/* ══ MENU · the screen you are on reads as PRESSED ════════════════════════
   Client 2026-08-31: the top-left menu should show a "down" / default-selected
   state for the screen you are currently inside. The active chip keeps the
   glass but inverts its lighting — inner shadow instead of drop shadow, a
   deeper beige, and a 1px settle — so it reads as pushed in rather than
   raised. It also stops responding to hover, because it is already chosen. */
.tm-items button.is-current{
  background:linear-gradient(145deg,rgba(228,201,176,.92),rgba(254,230,211,.96))!important;
  border-color:var(--eden-beige-1)!important;
  color:var(--e-ink-strong)!important;
  font-weight:600!important;
  transform:translateY(1px)!important;
  box-shadow:
    inset 0 2px 7px rgba(63,89,58,.22),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 1px 0 rgba(255,255,255,.50)!important;
}
.tm-items button.is-current:hover{
  transform:translateY(1px)!important;   /* already selected — no lift */
  background:linear-gradient(145deg,rgba(228,201,176,.92),rgba(254,230,211,.96))!important;
  box-shadow:
    inset 0 2px 7px rgba(63,89,58,.22),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 1px 0 rgba(255,255,255,.50)!important;
}
/* same pressed language over the landing montage */
.app[data-current-view="home"] .tm-items button.is-current{
  background:linear-gradient(145deg,rgba(228,201,176,.88),rgba(254,230,211,.94))!important;
  color:var(--e-ink-strong)!important;
}

/* the other selected chips follow the same rule, so "selected" means one
   thing everywhere in the app */
.vs-sides button.is-active,
.gal-switch button.is-active,
.location-view .poi-cats button.is-active{
  transform:translateY(1px)!important;
  box-shadow:
    inset 0 2px 7px rgba(63,89,58,.20),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 1px 0 rgba(255,255,255,.50)!important;
}

/* ══ MENU HEAD · icon only, real glass ════════════════════════════════════
   Client 2026-09-02: "the hamburger menu in top left has a text which says
   menu please remove that text and keep the icon of hamburger menu … also
   the button has to be transparent glassmorphism".

   The head loses its word and its caret and becomes a square hamburger
   pebble. The label survives as .sr-only so screen readers and app.js's
   breadcrumb write still have somewhere to land. Glass here is pushed
   properly transparent — the montage and the map read straight through it —
   with the blur, the hairline and the lit top edge doing the work that the
   fill used to do. */
.tm-toggle{
  width:44px;min-width:44px;height:44px;min-height:44px;
  padding:0!important;gap:0!important;
  justify-content:center;
  border-radius:12px;
}
.tm-caret{display:none!important}

.tm-burger{
  position:relative;
  display:block;width:17px;height:12px;
  pointer-events:none;
}
.tm-burger span{
  position:absolute;left:0;
  width:100%;height:1.6px;border-radius:2px;
  background:currentColor;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
}
.tm-burger span:nth-child(1){top:0}
.tm-burger span:nth-child(2){top:50%;margin-top:-.8px}
.tm-burger span:nth-child(3){bottom:0}

/* open folds the three bars into a close mark */
.top-menu.is-open .tm-burger span:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.top-menu.is-open .tm-burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
.top-menu.is-open .tm-burger span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}

/* the head reads as clear glass on every screen, landing included */
.tm-toggle,
.app[data-current-view="home"] .tm-toggle{
  background:linear-gradient(145deg,rgba(255,242,235,.22),rgba(254,230,211,.34))!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.42)!important;
  color:var(--e-ink-strong)!important;
  box-shadow:
    0 8px 24px rgba(63,89,58,.10),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.tm-toggle:hover,
.app[data-current-view="home"] .tm-toggle:hover{
  background:linear-gradient(145deg,rgba(255,242,235,.34),rgba(254,230,211,.46))!important;
  box-shadow:
    0 14px 34px rgba(63,89,58,.14),
    inset 0 1px 0 rgba(255,255,255,.68)!important;
}
/* while open it settles in, the way a held switch does */
.top-menu.is-open .tm-toggle{
  background:linear-gradient(145deg,rgba(255,242,235,.30),rgba(254,230,211,.42))!important;
  box-shadow:
    inset 0 2px 6px rgba(63,89,58,.16),
    inset 0 -1px 0 rgba(255,255,255,.40),
    0 1px 0 rgba(255,255,255,.45)!important;
}

/* ── gallery · the render names itself ──────────────────────────────────
   Client 2026-09-04, marking the plate in the bottom-left of Life at Eden:
   "remove the marked in red box".

   The same plate sits on the Interiors pane, so both go — one component, and
   leaving half of it would read as a bug rather than a decision. The category
   chips above the switch already name what you are looking at, so the plate
   was repeating them over the top of the photography it was covering.

   Hidden, not deleted: the gallery engine still writes the title and meta
   into these nodes, and removing them from the DOM would leave it writing
   into nothing. */
.gal-info,
.gal-pill.gal-caption{display:none!important}