/* finish-kit.css — Phase 1 foundation finish system (tokens, hairlines, radii, type, buttons, selects). Owner: main. */

/* ════════════════════════════════════════════════════════════════════
   FINISH KIT — one materials system for the whole app.
   One hairline · two radii · one shadow recipe · one type rhythm.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --fk-line:var(--e-line);                   /* THE hairline (green on beige) */
  --fk-line-strong:var(--e-line-strong);
  --fk-r-chip:10px;                          /* chips, buttons, tabs        */
  --fk-r-panel:18px;                         /* cards, panels, surfaces     */
  --fk-shadow:0 18px 40px rgba(63,89,58,.11), 0 4px 12px rgba(63,89,58,.07);
  --fk-glass:linear-gradient(160deg, rgba(255,242,235,.72), rgba(254,230,211,.84));
  --fk-ink:var(--e-ink);                     /* garden ink                  */
}
*{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(171,190,162,.5)}
::-webkit-scrollbar{width:0;height:0}

/* ---- type rhythm: lift the smallest copy to a readable, luxurious size ---- */
.masterplan-copy>p{font-size:12px!important;line-height:1.75!important;letter-spacing:.02em}
.kicker{letter-spacing:.42em!important}

/* ---- one press physics for every button in the app ---- */
button{transition:transform .18s var(--ease), filter .25s var(--ease)}
button:active{transform:scale(.977)}
:focus-visible{outline:1px solid var(--e-ink);outline-offset:3px}

/* ---- gentle view entrance (home keeps its own choreography) ---- */
@keyframes fkViewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view.is-active:not(.home-view){animation:fkViewIn .55s var(--ease) both}

/* ════════ MASTERPLAN chrome refined (chips + medallions + plot ink) ════════ */
/* Reset / Plan view chips: quiet cream glass, hairline, no heavy skeuomorph */
.model-tools button{
  background:var(--e-glass-strong)!important;border:1px solid var(--e-line-strong)!important;
  border-radius:var(--fk-r-chip)!important;box-shadow:0 6px 18px rgba(63,89,58,.10)!important;
  color:var(--e-ink)!important;letter-spacing:.18em!important;backdrop-filter:blur(var(--e-blur));-webkit-backdrop-filter:blur(var(--e-blur))}
.model-tools button:hover{border-color:var(--e-ink-faint)!important;filter:none}
/* filter medallions: flatten the bevel — hairline ring + one soft shadow */
.masterplan-filter button{
  box-shadow:0 10px 24px rgba(63,89,58,.11), inset 0 1px 0 rgba(255,242,235,.7)!important;
  border:1px solid var(--e-line-strong)!important}
.masterplan-filter button.is-active{
  box-shadow:0 12px 26px rgba(63,89,58,.16), 0 0 0 1px rgba(109,96,61,.7)!important}
/* plot numbers: fine architect's ink, not grey spreadsheet chips */
.model-plot-label{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--e-ink)!important;font-weight:650!important;font-size:10.5px!important;
  letter-spacing:.07em!important;padding:6px 8px!important;
  text-shadow:0 0 5px rgba(255,242,235,.95),0 0 12px rgba(255,242,235,.75)!important}
.model-plot-label.is-selected{
  background:var(--eden-plum)!important;color:var(--eden-mauve-3)!important;border-radius:7px!important;
  text-shadow:none!important;box-shadow:0 4px 14px rgba(107,67,98,.24)!important}

/* ════════ HOME — breathing space: smaller wireframe model, quieter glow ════════ */
.home-masterplan-float{left:6.5%!important;bottom:5%!important;width:min(34vw,470px)!important}
.hmf-glow{display:none!important}
.hmf-model canvas{filter:drop-shadow(0 10px 22px rgba(63,89,58,.11))}
.hmf-tag .hmf-text b{font-size:clamp(14px,1.35vw,19px)}

/* soft shadow-bed beneath the wireframe model — grounds the pen-work on the busy day
   lawn without reintroducing any slab (pure radial falloff, no edges) */
.hmf-stage::before{
  content:"";position:absolute;left:-6%;right:-6%;top:2%;bottom:-6%;pointer-events:none;
  background:radial-gradient(closest-side at 50% 58%, rgba(63,89,58,.14), rgba(63,89,58,.06) 55%, transparent 78%);
  filter:blur(6px)}
.hmf-model{position:relative}

/* kickers must never wrap from the tracking bump */
.masterplan-copy .kicker{white-space:nowrap}

/* perf: home's living animations (orbs, model float, pulse dot) pause while another
   view is on stage — no hidden compositor work on the tablet */
.app:not([data-current-view="home"]) #homeView *{animation-play-state:paused!important}

/* rotation-safe framing shrinks the model inside its canvas — compensate the stage */
.home-masterplan-float{width:min(38vw,530px)!important;left:5.5%!important;bottom:3.5%!important}

/* ═══════════ Home orbs — deep matte material, not flat discs ═══════════
   4-stop lit sphere (top-light → core → falloff → occluded rim), crisp top
   highlight, deep bottom AO, layered contact shadows. Colours still ride --dn
   continuously (0 = day greens, 1 = night beiges). */
.reference-home .destination-core,
.reference-home.is-night .destination-core{
  background:
    radial-gradient(circle at 36% 22%,
      color-mix(in srgb, #f0f7e8, #fff2eb calc(var(--dn,0)*100%)) 0%,
      color-mix(in srgb, #d8ecd4, #fee6d3 calc(var(--dn,0)*100%)) 30%,
      color-mix(in srgb, #abbea2, #e4c9b0 calc(var(--dn,0)*100%)) 62%,
      color-mix(in srgb, #6d603d, #6d603d calc(var(--dn,0)*100%)) 100%)!important;
  border:1px solid color-mix(in srgb, rgba(171,190,162,.6), rgba(109,96,61,.5) calc(var(--dn,0)*100%))!important;
  box-shadow:
    inset 0 2px 1px color-mix(in srgb, rgba(240,247,232,.7), rgba(255,242,235,.8) calc(var(--dn,0)*100%)),
    inset 0 -24px 38px rgba(63,89,58,.14),
    inset 0 0 34px rgba(63,89,58,.07),
    0 30px 58px rgba(63,89,58,.17),
    0 8px 18px rgba(63,89,58,.11)!important;
}
/* grain stays but quieter, so the lit gradient shows through */
.reference-home .destination-core::after{opacity:.26}
/* the bronze outer ring gets a touch more jewellery: brighter arc + deeper drop */
.reference-home .destination:before{
  border-color:color-mix(in srgb, rgba(109,96,61,.7), rgba(109,96,61,.85) calc(var(--dn,0)*100%))!important;
  box-shadow:0 0 0 2px rgba(63,89,58,.16), 0 0 20px rgba(228,201,176,.5), inset 0 0 20px rgba(228,201,176,.35)!important}
.reference-home .destination{filter:drop-shadow(0 24px 46px rgba(63,89,58,.18)) drop-shadow(0 4px 12px rgba(63,89,58,.12))!important}

/* user-approved: model + label scaled 30% up */
.home-masterplan-float{width:min(49.4vw,689px)!important;left:4.5%!important;bottom:2.5%!important}
.hmf-tag .hmf-text small{font-size:12px}
.hmf-tag .hmf-text b{font-size:clamp(18px,1.76vw,25px)}
.hmf-tag .hmf-text i{font-size:10px}

/* user-approved: model alone +30% (label/pointer untouched — transform doesn't move layout) */
.hmf-model{transform:scale(1.3);transform-origin:28% 92%}

/* ═══════════ Home model — gentle elevation: warm line-glow + soft ground shadow ═══════════ */
.hmf-model canvas{filter:
  drop-shadow(0 18px 30px rgba(63,89,58,.14))
  drop-shadow(0 0 18px rgba(228,201,176,.55))
  drop-shadow(0 0 52px rgba(63,89,58,.10))}
.hmf-stage::before{
  background:radial-gradient(closest-side at 50% 60%, rgba(228,201,176,.45), rgba(63,89,58,.12) 48%, transparent 78%);
  filter:blur(10px)}
/* pointer label sits lower so it never rides over the editorial copy */
.hmf-tag{top:8%!important}

/* ═══════════ QA ship-fixes (2026-07-16 sweep) ═══════════ */
/* the sync toggle was buried under the fixed topbar — sit it clearly below */
.compare-view .sync-control{top:110px!important;right:3%!important;left:auto!important;bottom:auto!important}
/* the booking form must actually hide when the success state shows
   (display:grid was overriding the [hidden] attribute) */
#bookingForm[hidden]{display:none!important}
/* "Saved" label was dark-on-dark over the light masterplan sheet */
#app[data-current-view="masterplan"] .save-top,
#app[data-current-view="masterplan"] .save-top b{color:var(--e-ink)!important}
/* the reel image is a swipe surface — never a native draggable image */
#interiorReel{touch-action:pan-y}
#interiorReel img{-webkit-user-drag:none;user-select:none}
/* (the amenity-rail drag guards moved into galleries.css with the Life at Eden
   full-bleed gallery — that view owns its own swipe surface now) */
/* zoom chips: square, same cream-glass family as Reset/Plan view */
#modelZoomIn,#modelZoomOut{width:44px;padding:0!important;font-size:20px!important;font-weight:300;letter-spacing:0!important;line-height:1}

/* ═══════════ INTRO — logo + enter button, one centred composition ═══════════
   Client declutter: no heading, no body copy. Two marks only, so the stage
   becomes a single centred flex column — brand lockup, a generous breath, then
   the enter control — and the pair reads as one optically balanced group at any
   viewport height (both marks now flow, nothing is bottom-pinned). */
.intro-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(44px,9.5vh,112px);padding:7vh 0 5vh;
}
.intro-brand{position:static!important;translate:none!important;margin:0!important}
#intro .hold-to-enter{
  position:static!important;translate:none!important;
  left:auto!important;bottom:auto!important;margin:0!important;
}