/* ═══════════════════════════════════════════════════════════════════════
   Embassy Citadel · responsive layer (v9)  —  TV + tablet
   ───────────────────────────────────────────────────────────────────────
   ONE proportional unit drives every fixed dimension in the suite.  It is
   the same fit-to-viewport maths the intro's stage scaler already uses
   (min(vw/1440, vh/900)), expressed as a CSS length so the plan screens —
   which are laid out with real flex boxes, not a scaled stage — grow and
   shrink by exactly the same factor.  Consequences:
     · 1440x900  → u = 1     : pixel-identical to the signed-off design
     · 1920x1080 → u = 1.2   : TV; all type and targets 20% larger
     · 2560x1440 → u = 1.6   : TV
     · 3840x2160 → u = 2.4   : 4K TV — matches the intro's own stage scale,
                                so chrome is the same physical size on every screen
     · 1280x800  → u = 0.889 : tablet landscape
     · 1024x768  → u = 0.86  : tablet landscape (floor — keeps type legible)
   The floor of .86 exists because the menu tray's labels stop fitting
   their tabs below it.  The first `--u:1px` is a deliberate fallback: a
   browser too old for clamp()/min() drops the second declaration and
   simply renders the original desktop design instead of breaking.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --u:1px;
  --u:clamp(.86px, min(100vw / 1440, 100vh / 900), 2.6px);
}

/* ── SHARED MENU (injected by ec-menu.js on every screen) ──────────── */
.ecm-shell{top:calc(24 * var(--u));left:calc(34 * var(--u));gap:calc(14 * var(--u));}
.ecm-burger{width:calc(62 * var(--u));height:calc(62 * var(--u));
  border-radius:calc(19 * var(--u));gap:calc(5.5 * var(--u));}
.ecm-burger i{width:calc(23 * var(--u));height:max(1.4px, calc(1.6 * var(--u)));}
.ecm-shell.is-open .ecm-burger i:nth-child(2){width:calc(15 * var(--u));}
.ecm-nav{gap:calc(6 * var(--u));padding:calc(7 * var(--u));border-radius:calc(22 * var(--u));}
.ecm-tab{width:calc(96 * var(--u));padding:calc(11 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u));
  border-radius:calc(16 * var(--u));gap:calc(7 * var(--u));}
.ecm-tab svg{width:calc(25 * var(--u));height:calc(25 * var(--u));}
.ecm-tab span{font-size:calc(10.5 * var(--u));}
.ecm-tab::after{bottom:calc(5 * var(--u));}
.ecm-tab:hover::after,.ecm-tab.is-current::after{width:calc(26 * var(--u));}
.ecm-back{top:calc(32 * var(--u));right:calc(34 * var(--u));height:calc(46 * var(--u));
  padding:0 calc(20 * var(--u)) 0 calc(16 * var(--u));gap:calc(10 * var(--u));
  font-size:calc(10 * var(--u));}
.ecm-back .arr{font-size:calc(14 * var(--u));}

/* headings and content drop below the injected menu, proportionally.  The
   title block is three lines deep (eyebrow, name, note) and measures ~90u, so
   the drawing starts at 214u — the shipped 196u let the note sit on the
   pane's top edge at every size. */
.page-inventory .head{top:calc(128 * var(--u));}
.page-plan .head{top:calc(118 * var(--u));}
.page-location .left-rail{top:calc(128 * var(--u));}
.page-plan .wrap{top:calc(214 * var(--u));}
.page-plan.page-compare .wrap{top:calc(168 * var(--u));}

/* ── INVENTORY (tower) ─────────────────────────────────────────────── */
.page-inventory .topbar{height:calc(88 * var(--u));padding:0 calc(34 * var(--u));}
.page-inventory .head{left:calc(34 * var(--u));}
.page-inventory .head .eb{font-size:calc(9.5 * var(--u));margin-bottom:calc(9 * var(--u));}
.page-inventory .head h1{font-size:calc(32 * var(--u));}
.page-inventory .head .sb{font-size:calc(12.5 * var(--u));margin-top:calc(10 * var(--u));
  max-width:calc(280 * var(--u));}
.page-inventory .lbl .nm{font-size:calc(13.5 * var(--u));}
.page-inventory .lbl .sb{font-size:calc(9.5 * var(--u));margin-top:calc(5 * var(--u));}
.page-inventory .lbl .go{font-size:calc(12 * var(--u));margin-left:calc(8 * var(--u));}
.page-inventory .tools{right:calc(34 * var(--u));bottom:calc(34 * var(--u));gap:calc(16 * var(--u));}
.page-inventory .tool .ic{width:calc(58 * var(--u));height:calc(58 * var(--u));}
.page-inventory .tool svg{width:calc(23 * var(--u));height:calc(23 * var(--u));}
.page-inventory .tool .tx{font-size:calc(9 * var(--u));}

/* ── PLAN SCREENS (typical-plan · unit-plan · amenities-plans) ─────── */
.page-plan .topbar{height:calc(88 * var(--u));padding:0 calc(34 * var(--u));}
.page-plan .head .eb,.page-plan .head .eyebrow{font-size:calc(9.5 * var(--u));}
.page-plan .head h1{font-size:calc(29 * var(--u));}
.page-plan .head .sb,.page-plan .head .sub{font-size:calc(12.5 * var(--u));margin-top:calc(8 * var(--u));}
.page-plan .wrap{bottom:calc(26 * var(--u));gap:calc(20 * var(--u));padding:0 calc(34 * var(--u));}
.page-plan .plan-pane{border-radius:calc(18 * var(--u));}
.page-plan .plan-stage{inset:calc(14 * var(--u));}
.page-plan .rail{flex-basis:calc(268 * var(--u));gap:calc(16 * var(--u));}
.page-plan .card{padding:calc(12 * var(--u));border-radius:calc(14 * var(--u));}
.page-plan .card > .t{padding:calc(2 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));}
.page-plan .card > .t b{font-size:calc(14 * var(--u));}
.page-plan .card > .t span{font-size:calc(9 * var(--u));}
.page-plan .fl{padding:calc(11 * var(--u)) calc(12 * var(--u));gap:calc(11 * var(--u));
  border-radius:calc(10 * var(--u));}
.page-plan .fl .n{flex-basis:calc(46 * var(--u));height:calc(32 * var(--u));font-size:calc(11 * var(--u));}
.page-plan .fl .l{font-size:calc(10 * var(--u));}
.page-plan .un{padding:calc(11 * var(--u)) calc(12 * var(--u));gap:calc(11 * var(--u));
  border-radius:calc(10 * var(--u));}
.page-plan .un .sw{flex-basis:calc(18 * var(--u));height:calc(18 * var(--u));}
.page-plan .un .tx b{font-size:calc(10.5 * var(--u));}
.page-plan .un .tx i{font-size:calc(9.5 * var(--u));}
.page-plan .un .go{font-size:calc(13 * var(--u));}
.page-plan .tools{right:calc(34 * var(--u));bottom:calc(34 * var(--u));gap:calc(14 * var(--u));}
.page-plan .tool .ic{width:calc(50 * var(--u));height:calc(50 * var(--u));}
.page-plan .tool svg{width:calc(21 * var(--u));height:calc(21 * var(--u));}
.page-plan .tool .tx{font-size:calc(8.5 * var(--u));}
.page-plan .pill{padding:calc(11 * var(--u)) calc(20 * var(--u));font-size:calc(10 * var(--u));
  gap:calc(8 * var(--u));}
/* residence pins on the typical plans */
.page-plan .pin .dot{width:calc(34 * var(--u));height:calc(34 * var(--u));
  font-size:calc(13 * var(--u));line-height:calc(30 * var(--u));}
.page-plan .pin .lbl{font-size:calc(9.5 * var(--u));
  padding:calc(5 * var(--u)) calc(10 * var(--u));}
.page-plan .hint{left:calc(22 * var(--u));bottom:calc(18 * var(--u));font-size:calc(10 * var(--u));
  padding:calc(9 * var(--u)) calc(16 * var(--u));}
.page-plan .utag{padding:calc(9 * var(--u)) calc(15 * var(--u));border-radius:calc(11 * var(--u));}
.page-plan .utag b{font-size:calc(13 * var(--u));}
.page-plan .utag i{font-size:calc(9 * var(--u));}
/* zoom clusters (unit-plan · amenities-plans) */
.page-plan .zoom button{width:calc(38 * var(--u));height:calc(38 * var(--u));
  border-radius:calc(11 * var(--u));}
.page-plan .cmp{padding:calc(15 * var(--u)) calc(30 * var(--u));}
.page-plan .fl .num{flex-basis:calc(40 * var(--u));height:calc(40 * var(--u));}

/* ── COMPARE ───────────────────────────────────────────────────────── */
.page-compare .head{top:calc(118 * var(--u));left:calc(34 * var(--u));gap:calc(18 * var(--u));}
.page-compare .head h1{font-size:calc(26 * var(--u));}
.page-compare .wrap{bottom:calc(22 * var(--u));gap:calc(18 * var(--u));padding:0 calc(30 * var(--u));}
.page-compare .board{border-radius:calc(20 * var(--u));}
.page-compare .rail{flex-basis:auto;border-radius:calc(20 * var(--u));}
.page-compare .rt{padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));}
.page-compare .chip{min-height:calc(42 * var(--u));padding:calc(9 * var(--u));
  border-radius:calc(13 * var(--u));}
.page-compare .bt{font-size:calc(9.5 * var(--u));}
.page-compare .bt.ic{width:calc(36 * var(--u));height:calc(34 * var(--u));font-size:calc(16 * var(--u));}
.page-compare .grid-wrap{padding:calc(12 * var(--u));}
.page-compare .pg{gap:calc(10 * var(--u));}

/* ── LOCATION ──────────────────────────────────────────────────────── */
.page-location .left-rail{left:calc(34 * var(--u));}
.page-location .tc{width:calc(38 * var(--u));height:calc(38 * var(--u));
  min-width:calc(44 * var(--u));min-height:calc(44 * var(--u));font-size:calc(14 * var(--u));}
.page-location .ec-back-btn{min-height:calc(44 * var(--u));padding:0 calc(18 * var(--u));
  font-size:calc(10 * var(--u));}

/* ── GALLERY category tray — stays locked to the menu tray ─────────── */
.page-gallery .leftrail{top:calc(24 * var(--u));left:calc(545 * var(--u));right:calc(150 * var(--u));}
.page-gallery .cat-list{height:calc(82 * var(--u));padding:calc(7 * var(--u));
  border-radius:calc(22 * var(--u));gap:calc(6 * var(--u));}
.page-gallery .cat-row{padding:0 calc(4 * var(--u));border-radius:calc(16 * var(--u));
  gap:calc(7 * var(--u));}
.page-gallery .cat-row .ic,.page-gallery .cat-row .ic svg{width:calc(25 * var(--u));height:calc(25 * var(--u));}
.page-gallery .cat-row .label{font-size:calc(10.5 * var(--u));}
.page-gallery .cat-row .count{font-size:calc(8 * var(--u));top:calc(7 * var(--u));right:calc(9 * var(--u));}

/* ── FLOOR SELECTOR + MASTER PLAN overlays (styles injected at runtime,
      so these need the body class to win the cascade) ──────────────── */
body .ecfs{right:calc(34 * var(--u));top:calc(112 * var(--u));bottom:calc(112 * var(--u));
  width:calc(318 * var(--u));}
body .ecfs-title{font-size:calc(19 * var(--u));}
body .ecfs-eyebrow{font-size:calc(9.5 * var(--u));}
body .ecfs-sub{font-size:calc(9 * var(--u));}
body .ecfs-x{width:calc(28 * var(--u));height:calc(28 * var(--u));font-size:calc(14 * var(--u));
  right:calc(12 * var(--u));top:calc(12 * var(--u));}
body .ecfs-labels{width:calc(54 * var(--u));}
body .ecfs-label{font-size:calc(9 * var(--u));}
body .ecfs-label .k{font-size:calc(7 * var(--u));}
body .ecfs-handle{height:calc(30 * var(--u));}
body .ecfs-handle span{font-size:calc(13 * var(--u));}
body .ecfs-foot b{font-size:calc(8.5 * var(--u));}
body .ecmp-head{height:calc(88 * var(--u));padding-left:calc(38 * var(--u));}
body .ecmp-head b{font-size:calc(15 * var(--u));}
body .ecmp-head i{font-size:calc(9.5 * var(--u));}
body .ecmp-x{width:calc(46 * var(--u));height:calc(46 * var(--u));right:calc(26 * var(--u));
  top:calc(26 * var(--u));font-size:calc(19 * var(--u));}
body .ecmp-tools{bottom:calc(30 * var(--u));gap:calc(5 * var(--u));padding:calc(5 * var(--u));}
body .ecmp-b{padding:calc(10 * var(--u)) calc(15 * var(--u));font-size:calc(9 * var(--u));}
body .ecmp-b.ic{width:calc(40 * var(--u));height:calc(36 * var(--u));font-size:calc(17 * var(--u));}
body .ecmp-z{min-width:calc(56 * var(--u));font-size:calc(9.5 * var(--u));}

/* ═══════════════════════════════════════════════════════════════════════
   PORTRAIT / NARROW  —  a tablet stood on its short edge
   The suite is composed for 16:9, so portrait does not simply shrink: the
   side-by-side pane + rail has to become a stack, and the shared chrome
   needs its own row.  Everything stays reachable and nothing overlaps.
   ═══════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  /* plan screens: drawing on top, controls underneath as a row of cards */
  .page-plan .wrap{flex-direction:column;}
  .page-plan .plan-pane{flex:1 1 auto;min-height:0;max-width:100%;}
  .page-plan .rail{flex:0 0 auto;flex-basis:auto;width:100%;flex-direction:row;
    align-items:stretch;max-height:32vh;}
  .page-plan .rail > .card{flex:1 1 0;min-width:0;}
  /* amenities-plans names its rail .floors */
  .page-plan .floors{flex:0 0 auto;max-height:32vh;}

  /* compare: board on top, filters + results underneath */
  .page-compare .wrap{flex-direction:column;}
  .page-compare .board{flex:1 1 auto;max-width:100%;min-height:0;}
  .page-compare .rail{flex:0 0 auto;flex-direction:column;max-height:52vh;}
  .page-compare .pg{grid-template-columns:repeat(3,minmax(0,1fr));}

  /* gallery: the category tray takes its own full-width row under the menu */
  .page-gallery .leftrail{left:calc(34 * var(--u));right:calc(34 * var(--u));
    top:calc(120 * var(--u));}

  /* the floor selector spans the width instead of hugging the right edge */
  body .ecfs{left:calc(28 * var(--u));right:calc(28 * var(--u));width:auto;
    top:auto;bottom:calc(44 * var(--u));height:44vh;}

  /* tower: the labels own the right edge in portrait, so the tools move left */
  .page-inventory .tools{right:auto;left:calc(34 * var(--u));bottom:calc(34 * var(--u));
    flex-direction:row;align-items:flex-end;}
  .page-inventory .head .sb{display:none;}
}

/* Landscape but short (a 4:3 tablet, 1024x768): the title block and the
   drawing compete for height — trim the subtitle, not the drawing. */
@media (orientation:landscape) and (max-height:800px){
  .page-plan .head .sb,.page-plan .head .sub{display:none;}
  /* the note is hidden here, so the drawing can start higher again */
  .page-plan .wrap{top:calc(196 * var(--u));}
  .page-plan.page-compare .wrap{top:calc(168 * var(--u));}
  .page-inventory .head .sb{font-size:calc(11.5 * var(--u));max-width:calc(240 * var(--u));}
}

/* Narrow enough that menu + category tray + Back cannot share a row */
@media (max-width:1180px) and (orientation:landscape){
  .page-gallery .cat-row .label{font-size:calc(9 * var(--u));letter-spacing:.04em;}
}

/* The tools dock is anchored to the bottom-right, which is where the rail's
   own list ends — reserve its footprint so a list item is never sat on. */
.page-plan:not(.page-compare) .rail{padding-bottom:calc(76 * var(--u));}
@media (orientation:portrait){
  .page-plan:not(.page-compare) .rail{padding-bottom:calc(84 * var(--u));}
}

/* The gallery keeps a second <img> as the crossfade buffer; until the first
   transition gives it a src the browser paints a broken-image glyph in the
   corner of the hero.  Hide it until it actually holds a picture. */
.page-gallery .hero-img:not([src]){display:none;}

/* The map's own zoom control and the shared annotate button both live in the
   bottom-right corner; on a tablet they land on top of each other, so the
   map control steps to the left of it. */
.page-location .leaflet-control-zoom{margin-right:calc(110 * var(--u)) !important;}

/* the shared annotate button floats over the rail's bottom-right corner —
   let the results grid scroll clear of it */
.page-compare .grid-wrap{padding-bottom:calc(64 * var(--u));}

/* The shared annotate dock is anchored to the bottom-right in real pixels
   while the gallery's counter rides the scaled stage, so at some sizes the two
   land on each other.  Moving the dock only shifts the clash to another size —
   the counter is the one that must clear it, by a margin wide enough to hold
   at the smallest stage scale (a portrait tablet). */
.page-gallery .hero-counter{right:144px;}