/* ============================================================================
   estate-plan.css — THE ESTATE · plot drawer drawings
   ----------------------------------------------------------------------------
   Client direction, in two rounds:
     1. "We dont need booking option, also add the unit plans and floorplan
         dockets."
     2. "keep that 3D part, bring that back … that's the uniqueness of our app."

   So the estate view is the interactive Three.js architect's model again
   (masterplan.js + the .masterplan-* / .model-* rules in styles.css own the
   look of the stage, the plot labels and the floating selection card), and
   THIS sheet is now scoped to exactly one thing: the extra content the client
   asked for inside that floating plot drawer —

     · the facts row read straight out of data.js,
     · the two tab-chips (UNIT PLAN · DOCKET),
     · the horizontal swipeable page strip that feeds #planLightbox,
     · and the two remaining actions (Book is gone from this view).

   Everything that belonged to the retired Leaflet presentation — the light
   paper field, the plan plates and their clip, the .ep-map gutters, the
   .plot-hit polygons, the .ep-chip number pills, the .ep-zoom cluster, the
   .ep-kicker and .ep-caption, and the fixed-panel override that pinned the
   drawer to the right edge — has been removed with it.

   A few masterplan rules in styles.css were written for a drawer that carried
   ONE plan image and carry !important (plan-image height / margin / radius,
   action-button height). Those are neutralised here with a higher specificity
   (#plotDrawer.ep-drawer …) rather than by editing another owner's sheet.

   All colour goes through the shared tokens (--night / --glass / --sand /
   --ink / --muted), so the brand-green retheme in theme-green.css lands on
   this sheet for free.

   Owner: estate/masterplan agent.
   ========================================================================== */

/* ══════════════════════════ THE PLOT DRAWER ══════════════════════════
   Position, size, radius and the anchored-callout stalk all stay with
   styles.css — the card floats above the selected mansion and masterplan.js
   drives its left/top. Only its INNER composition is settled here. */
#plotDrawer.ep-drawer {
  display: flex;
  flex-direction: column;
  color: var(--e-ink);
}

/* styles.css gives #closePlotDrawer the app's dark-green matte BUTTON finish
   (background + border + inner shadow, all !important). On a bare ✕ glyph that
   reads as a stray boxed control, so it is stripped back here. */
#plotDrawer .ep-close {
  position: absolute; right: 8px; top: 5px;
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 19px; line-height: 1;
  background: none !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: 50% !important;
  color: var(--e-ink-soft) !important;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
#plotDrawer .ep-close:hover {
  color: var(--e-ink-strong) !important;
  background: var(--e-surface-2) !important;
}
#plotDrawer.ep-drawer .kicker { font-size: 8px; letter-spacing: .28em; }
#plotDrawer.ep-drawer h3 {
  font: 400 34px/1 var(--serif) !important;
  margin: 4px 0 6px !important;
  color: var(--e-ink-strong);
  font-variant-numeric: tabular-nums;
}
#plotDrawer.ep-drawer .ep-type {
  margin: 0 0 13px;
  font: 500 9px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--e-ink);
}

/* facts row — straight from data.js, never invented */
#plotDrawer.ep-drawer .ep-facts {
  margin: 0 0 14px; padding: 11px 0 10px;
  border-top: 1px solid var(--e-line);
  border-bottom: 1px solid var(--e-line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
#plotDrawer.ep-drawer .ep-facts > div { min-width: 0; }
#plotDrawer.ep-drawer .ep-facts dt {
  font: 500 6.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--eden-olive);
}
#plotDrawer.ep-drawer .ep-facts dd {
  margin: 5px 0 0; font: 400 14px/1 var(--serif); color: var(--e-ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#plotDrawer.ep-drawer .ep-facts small {
  display: block; margin-top: 3px;
  font-size: 6.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--eden-olive);
}

/* tabs — UNIT PLAN · DOCKET */
#plotDrawer.ep-drawer .ep-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px;
}
#plotDrawer.ep-drawer .ep-tabs button {
  height: 30px !important; border-radius: 9px !important;
  border: 1px solid var(--e-line) !important;
  background: var(--e-surface-2);
  color: var(--e-ink);
  font: 500 7.5px/1 var(--sans) !important; letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .24s var(--ease), color .24s, border-color .24s;
}
#plotDrawer.ep-drawer .ep-tabs button:hover { color: var(--e-ink-strong); border-color: var(--e-line-strong) !important; }
#plotDrawer.ep-drawer .ep-tabs button.is-active {
  background: linear-gradient(165deg, var(--eden-green), var(--eden-green-deep));
  border-color: var(--eden-green-deep) !important; color: var(--e-ground);
  box-shadow: 0 6px 16px rgba(63,89,58,.10);
}

/* swipeable page strip — 5 unit-plan pages / 8 docket pages for this mansion */
#plotDrawer.ep-drawer .ep-strip {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: var(--e-line-strong) transparent;
}
#plotDrawer.ep-drawer .ep-strip::-webkit-scrollbar { height: 3px; }
#plotDrawer.ep-drawer .ep-strip::-webkit-scrollbar-thumb {
  background: var(--e-surface-2); border-radius: 3px;
}
#plotDrawer.ep-drawer .ep-thumb {
  position: relative; flex: 0 0 auto;
  width: 96px; height: 68px;
  border-radius: 8px !important; overflow: hidden;
  border: 1px solid var(--e-line);
  background: var(--e-ground);
  scroll-snap-align: start;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s;
}
/* styles.css sizes the drawer's single plan image with !important — the strip
   thumbs must fill their own tile instead. */
#plotDrawer.ep-drawer .ep-thumb img {
  width: 100% !important; height: 100% !important;
  margin: 0 !important; border-radius: 0 !important;
  object-fit: cover; object-position: center top;
  background: var(--e-ground);
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
#plotDrawer.ep-drawer .ep-thumb span {
  position: absolute; left: 5px; bottom: 5px;
  padding: 2px 5px 1px; border-radius: 5px;
  background: var(--e-glass-strong); color: var(--e-ink-strong);
  font: 600 6.5px/1 var(--sans); letter-spacing: .12em;
}
#plotDrawer.ep-drawer .ep-thumb:hover,
#plotDrawer.ep-drawer .ep-thumb:focus-visible {
  border-color: var(--eden-olive); transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(63,89,58,.13);
}

/* actions — Book is gone from this view (client); Mansions + Save remain */
#plotDrawer.ep-drawer .ep-actions {
  margin-top: 11px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 7px !important;
}
#plotDrawer.ep-drawer .ep-actions button {
  height: 38px !important; padding: 0 8px;
  border-radius: 11px !important;
  font: 500 7.5px/1 var(--sans) !important; letter-spacing: .16em; text-transform: uppercase;
  transition: filter .24s var(--ease), border-color .24s var(--ease);
}
/* "Open in Mansions" is the primary move out of this view, so it takes the
   app's BEIGE matte primary finish (same as .primary-action / #bookVilla).
   styles.css hard-codes #openPlotVilla into the dark-green ghost group with
   !important, so this needs the extra id to win. */
#plotDrawer #openPlotVilla {
  background-color: var(--e-surface-2) !important;
  background-image: var(--matte-grain) !important;
  background-blend-mode: soft-light !important;
  background-size: 150px 150px !important;
  border: 1px solid var(--e-line-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,252,244,.35), inset 0 -11px 22px rgba(109,96,61,.14),
              0 10px 26px rgba(63,89,58,.09) !important;
  color: var(--e-ink-strong) !important;
}
#plotDrawer.ep-drawer .ep-actions button:hover { filter: brightness(1.06); border-color: var(--e-line-strong) !important; }

/* ══════════════════════════ SHORT LANDSCAPE (Tab S7 etc.) ══════════════════════════ */
@media (max-height: 850px) and (orientation: landscape) {
  #plotDrawer.ep-drawer h3 { font-size: 29px !important; }
  #plotDrawer.ep-drawer .ep-facts { margin-bottom: 11px; padding: 9px 0 8px; }
  #plotDrawer.ep-drawer .ep-thumb { width: 82px; height: 58px; }
  #plotDrawer.ep-drawer .ep-actions button { height: 34px !important; }
}

/* ══════════════════════════ PORTRAIT ══════════════════════════
   The floating card is narrower here (styles.css), so the facts drop to two
   columns and the thumbs shrink to keep two pages in view. */
@media (orientation: portrait) {
  #plotDrawer.ep-drawer .ep-facts { grid-template-columns: repeat(2, 1fr); gap: 9px 10px; }
  #plotDrawer.ep-drawer .ep-thumb { width: 80px; height: 57px; }
}

/* ══════════════════════════ REDUCED MOTION ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #plotDrawer.ep-drawer .ep-thumb,
  #plotDrawer.ep-drawer .ep-tabs button { transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FULLSCREEN DRAWING LIGHTBOX — reframed (client 2026-08-01):
   "plans look cut → showcase in a frame, give zoom in/out, and let me
   swipe through the docket". The sheet now sits MATTED inside a gallery
   frame (cream mount, bronze hairline, breathing room on every side),
   corner +/− chips drive the existing pinch/wheel zoom, and multi-page
   sets (dockets, unit plans) page by swipe / edge arrows / ‹ › keys.
   ═══════════════════════════════════════════════════════════════════════ */
.plan-lightbox>div{
  width:min(84vw,1460px);height:84vh;
  padding:clamp(20px,3vh,36px);
  position:relative;
  background:var(--e-surface);
  border:1px solid var(--e-line-strong);
  box-shadow:0 34px 90px rgba(63,89,58,.18), inset 0 0 0 1px rgba(255,255,255,.32);
}
/* the drawing reads as a mounted sheet: its own white page, hairline, lift */
.plan-lightbox img{
  background:#fff;
  border:1px solid var(--e-line);
  box-shadow:0 12px 40px rgba(63,89,58,.10);
  transition:transform .12s, opacity .2s;
}
.plan-lightbox img.is-swapping{opacity:0}

/* corner zoom chips — the compare-window chip language, inside the mount */
.plan-lightbox .lb-zoom{position:absolute;right:16px;bottom:16px;display:flex;gap:10px;z-index:3}
.plan-lightbox .lb-zoom button{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--e-line-strong);
  background:var(--e-glass-strong);color:var(--e-ink-strong);
  font-size:22px;line-height:1;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(63,89,58,.10);
}
.plan-lightbox .lb-zoom button:active{transform:scale(.94)}

/* page arrows on the scrim — only for multi-page sets */
.plan-lightbox .lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);color:var(--e-ink);
  font-size:30px;line-height:1;display:none;place-items:center;z-index:2;
}
.plan-lightbox.has-pages .lb-arrow{display:grid}
.plan-lightbox .lb-arrow:disabled{opacity:.22;pointer-events:none}
.plan-lightbox .lb-prev{left:calc(50% - min(42vw,730px) - 76px)}
.plan-lightbox .lb-next{right:calc(50% - min(42vw,730px) - 76px)}

/* page counter over the frame */
.plan-lightbox .lb-count{
  position:absolute;top:3.2vh;left:50%;transform:translateX(-50%);
  display:none;color:var(--e-ink);
  font:500 11px var(--sans);letter-spacing:.32em;
}
.plan-lightbox.has-pages .lb-count{display:block}

/* hint: the paging clause only shows when there are pages to turn */
.plan-lightbox .lb-hint-pages{display:none}
.plan-lightbox.has-pages .lb-hint-pages{display:inline}

/* portrait: the mount breathes a touch less, arrows tuck to the edges */
@media (orientation:portrait){
  .plan-lightbox>div{width:92vw;height:74vh;padding:clamp(14px,2.4vw,24px)}
  .plan-lightbox .lb-prev{left:2%}
  .plan-lightbox .lb-next{right:2%}
}

/* swipe must never become a native image drag (it fires pointercancel and
   eats the page-turn gesture) */
.plan-lightbox img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}