/* villa-tune.css — mansion splitter dynamic text + floor buttons (agent-owned)
   Loaded AFTER styles.css, so these rules win by source order.
   Scope: #villaView only. Preserves all test hooks; light beige finish. */

/* ── Container contexts so text can size to the pane, not the viewport ── */
.villa-view .villa-canvas{container-type:inline-size}
.villa-view .drawing-studio{container-type:inline-size}

/* ═══════════════════════════════════════════════════════════════════
   LANDSCAPE (the resizable split) — fluid, non-overlapping text both panes
   ═══════════════════════════════════════════════════════════════════ */
@media (orientation:landscape){

  /* ---------- LEFT PANE (render + copy): flex-column stack, never overlaps ---------- */
  .villa-view .villa-canvas{
    display:flex;flex-direction:column;justify-content:space-between;
    gap:clamp(10px,2.4cqw,26px);
    padding:clamp(16px,4.2cqw,46px);
    /* Client 2026-09-07: the nav tray is position:fixed, so this column had no
       idea it was there and "Mansion A" ran straight under the chips. Start the
       stack below the tray, from the same tokens the tray is built from, so it
       clears at every viewport rather than at the one it was drawn on. */
    padding-top:var(--content-top);
  }
  /* render + shade stay as full-bleed background layers, out of the flex flow */
  .villa-view .villa-canvas>img{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;padding:0!important;z-index:0;
  }
  .villa-view .villa-shade{z-index:1}

  /* the three copy blocks flow (no absolute overlap) and cap their width */
  .villa-view .villa-title,
  .villa-view .villa-switcher,
  .villa-view .villa-metrics{
    position:static!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;
    width:auto!important;min-width:0;z-index:3;
  }

  .villa-view .villa-title{max-width:min(100%,52ch);margin:0}
  .villa-view .villa-title .kicker{font-size:clamp(8px,1.5cqw,10px)}
  .villa-view .villa-title h2{
    margin:clamp(6px,1.4cqw,10px) 0 clamp(8px,1.6cqw,12px);
    font-size:clamp(21px,7.4cqw,48px);line-height:1.02;overflow-wrap:break-word;
  }
  .villa-view .villa-title>p:last-child{
    font-size:clamp(10px,2.15cqw,14px);line-height:1.55;
    max-width:min(100%,44ch);overflow-wrap:break-word;
  }

  .villa-view .villa-switcher{
    flex-wrap:wrap;gap:clamp(4px,1cqw,7px);margin:0;max-width:100%;
  }
  .villa-view .villa-switcher span{height:clamp(24px,4.4cqw,34px);margin:0 clamp(2px,.8cqw,6px)}
  .villa-view .villa-switcher button{
    height:auto;min-height:clamp(30px,6cqw,42px);
    padding:clamp(6px,1.4cqw,10px) clamp(8px,2cqw,16px);
    font-size:clamp(7.5px,1.5cqw,9.5px);white-space:nowrap;
  }

  .villa-view .villa-metrics{
    display:flex;flex-wrap:wrap;
    gap:clamp(8px,2.2cqw,18px) clamp(14px,4cqw,30px);
    max-width:min(100%,62%);
  }
  .villa-view .villa-metrics div{min-width:0}
  .villa-view .villa-metrics div b{font:400 clamp(13px,3.6cqw,20px)/1 var(--serif)}
  .villa-view .villa-metrics div span{
    font-size:clamp(6px,1.35cqw,8px);margin-top:clamp(3px,.8cqw,6px);overflow-wrap:break-word;
  }

  /* ---------- RIGHT PANE (drawing studio): full-height flex column ---------- */
  .villa-view .drawing-studio{
    display:flex;flex-direction:column;
    gap:clamp(6px,1.6cqw,12px);
    padding:clamp(12px,3.4cqw,20px)!important;
    /* Top: clear the fixed back button (it was sitting on the drawing itself).
       Bottom: reserve the corner the presenter FAB owns, so the action row ends
       above it instead of underneath it. Both derive from the chrome's own
       tokens, so the clearance is correct at every viewport — the old flat 76px
       was measured against a control that no longer exists. */
    padding-top:var(--back-block)!important;
    padding-bottom:var(--fab-gutter)!important;
  }
  .villa-view .panel-heading{
    flex:0 0 auto;height:auto!important;min-height:0;
    flex-wrap:wrap;gap:4px clamp(6px,1.6cqw,12px);align-items:baseline;
    font-size:clamp(8px,1.6cqw,10px)!important;
  }
  .villa-view #drawingCaption{min-width:0;overflow-wrap:anywhere;line-height:1.35}
  .villa-view .panel-heading button{white-space:nowrap;font-size:clamp(7.5px,1.4cqw,9px)!important}

  .villa-view .drawing-surface{
    flex:1 1 auto;height:auto!important;min-height:0;margin:0!important;
    padding:clamp(4px,1.2cqw,8px)!important;
  }

  .villa-view .drawing-actions{
    flex:0 0 auto;height:auto!important;margin:0!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:clamp(5px,1.4cqw,8px)!important;
  }
  .villa-view .drawing-actions .primary-action{grid-column:1/-1!important}
  .villa-view .drawing-actions button{
    min-height:clamp(34px,7cqw,46px);
    padding:clamp(7px,1.6cqw,12px) clamp(4px,1.2cqw,10px);
    font-size:clamp(7.5px,1.5cqw,9px)!important;white-space:nowrap;
  }
}

/* When the studio column gets very narrow (right pane near 30%), stack actions */
@container (max-width:250px){
  .villa-view .drawing-actions{grid-template-columns:1fr!important}
  .villa-view .drawing-actions button{white-space:normal}
}

/* ═══════════════════════════════════════════════════════════════════
   FLOOR-LEVEL BUTTONS (#villaLevels / .level-stack) — bigger + clearer
   Keeps 5-col grid + green-matte look (styles.css --matte-grain / bg).
   ═══════════════════════════════════════════════════════════════════ */
.villa-view .level-stack{
  height:auto!important;min-height:clamp(56px,11.5cqw,86px);
  gap:1px;align-items:stretch;
}
.villa-view .level-stack button{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(2px,.8cqw,5px);
  padding:clamp(6px,1.8cqw,12px) clamp(2px,1cqw,8px);
  border-radius:10px!important;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.villa-view .level-stack button span{
  font-size:clamp(15px,3.4cqw,24px)!important;line-height:1;font-weight:500;
}
.villa-view .level-stack button small{
  display:block;font-size:clamp(7px,1.5cqw,10px)!important;margin-top:0!important;
  line-height:1.1;text-align:center;letter-spacing:.05em;color:var(--e-ink);
  overflow-wrap:break-word;text-transform:uppercase;
}
/* down-chevron affordance signalling floor selection */
.villa-view .level-stack button .lvl-chev{
  width:0;height:0;
  border-left:clamp(3px,.9cqw,5px) solid transparent;
  border-right:clamp(3px,.9cqw,5px) solid transparent;
  border-top:clamp(4px,1.1cqw,6px) solid currentColor;
  opacity:.32;transition:opacity .25s,transform .25s;
}
/* selected / open floor — distinct active state (Ground by default on load) */
.villa-view .level-stack button.is-active{
  color:var(--e-ink-strong)!important;
  border-color:rgba(109,96,61,.7)!important;
  box-shadow:0 0 0 1px rgba(109,96,61,.5),0 0 18px rgba(109,96,61,.22),
             inset 0 0 22px rgba(109,96,61,.10)!important;
}
.villa-view .level-stack button.is-active small{color:var(--e-ink-strong)}
.villa-view .level-stack button.is-active .lvl-chev{opacity:1;transform:translateY(1px)}

/* ═══════════════════════════════════════════════════════════════════
   IN-FRAME PLAN ZOOM — corner +/− chips + smooth transforms.
   The drawing-surface already clips (overflow:hidden) and owns the gesture
   (touch-action:none) from styles.css; here we add the chip UI (mirrors the
   compare windows' .compare-zoom) and crisp transform/crossfade transitions.
   ═══════════════════════════════════════════════════════════════════ */
.villa-view .drawing-surface{cursor:zoom-in}
/* ID wins over .drawing-surface img: crisp pan/zoom transform + a gentle opacity
   crossfade for the decoded plan swap (no blank, no white). */
.villa-view #villaPlanImage{will-change:transform;transition:transform .14s var(--ease),opacity .32s ease}
.villa-view .villa-zoom{
  position:absolute;left:14px;bottom:14px;z-index:4;display:flex;gap:0; /* left — the FAB owns the right corner */
  border:1px solid var(--e-glass-line);border-radius:12px;overflow:hidden;
  background:var(--e-glass-strong);
  backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%);
  box-shadow:0 0 0 1px rgba(63,89,58,.09),0 10px 24px rgba(63,89,58,.15);
}
.villa-view .villa-zoom button{
  width:46px;height:46px;min-width:46px;min-height:46px;
  display:grid;place-items:center;
  color:var(--e-ink);font-size:22px;line-height:1;font-weight:300;
  background:transparent;border:0;cursor:pointer;
  transition:background-color .2s var(--ease);
}
.villa-view .villa-zoom button:first-child{border-right:1px solid var(--e-line)}
.villa-view .villa-zoom button:hover{background:rgba(63,89,58,.08)}
.villa-view .villa-zoom button:active{background:rgba(63,89,58,.14)}

/* ═══════════════════════════════════════════════════════════════════════
   THE MANSION DOCKET FOLIO (client 2026-08-01: "inside mansion also bring
   in docket option… in a creative way") — the mansion's bound docket rides
   the top-right of the drawing as a folio tab: a fan of its REAL first
   pages (updated with mansion/facing), tap → the fullscreen paged
   lightbox with all 8 pages (swipe/arrows). Anchored like .villa-zoom.
   ═══════════════════════════════════════════════════════════════════════ */
.villa-view .villa-docket{
  position:absolute;right:14px;top:112px;z-index:4; /* clear of the heading row — "Expand drawing" keeps its tap target */
  display:flex;align-items:center;gap:12px;
  padding:9px 14px 9px 10px;
  border:1px solid var(--e-glass-line);border-radius:12px;
  background:var(--e-glass-strong);
  backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%);
  box-shadow:0 0 0 1px rgba(63,89,58,.09),0 10px 24px rgba(63,89,58,.15);
  text-align:left;transition:background .2s var(--ease), transform .2s var(--ease);
}
.villa-view .villa-docket:hover{background:rgba(63,89,58,.08)}
.villa-view .villa-docket:active{transform:scale(.96)}
/* the fan — three real pages, splayed like a held hand of cards */
.villa-view .vd-fan{position:relative;width:34px;height:40px;display:block}
.villa-view .vd-fan img{
  position:absolute;left:4px;top:2px;width:26px;height:34px;
  object-fit:cover;object-position:top;
  background:var(--e-ground);border:1px solid var(--e-line);border-radius:2px;
  box-shadow:0 3px 8px rgba(63,89,58,.13);
  transform-origin:50% 88%;
}
.villa-view .vd-fan img:nth-child(1){transform:rotate(-11deg)}
.villa-view .vd-fan img:nth-child(2){transform:rotate(0deg) translateY(-1px)}
.villa-view .vd-fan img:nth-child(3){transform:rotate(11deg)}
.villa-view .villa-docket:hover .vd-fan img:nth-child(1){transform:rotate(-16deg)}
.villa-view .villa-docket:hover .vd-fan img:nth-child(3){transform:rotate(16deg)}
.villa-view .vd-copy b,.villa-view .vd-copy small{display:block}
.villa-view .vd-copy b{font:400 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--e-ink-strong)}
.villa-view .vd-copy small{font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--e-ink);margin-top:4px}
/* portrait: the studio is a bottom sheet — tuck the folio tighter */
@media (orientation:portrait){
  .villa-view .villa-docket{top:auto;bottom:calc(118px + 14px);right:10px;padding:7px 11px 7px 8px}
  .villa-view .vd-copy small{display:none}
}