/* ===========================================================================
   ledge-bar.css — the information bar. ONE definition, two hosts.

   WHAT THIS IS, AND WHAT IT IS NOT
   --------------------------------
   It is NOT a new sticky bar. DESIGN-STANDARDS.md §9 says one thing owns the
   foot of the screen, and on these pages that thing already exists:
   `.em-ledge` (places.css §23), a phone-only night plate that already carries
   the page's actions, already reveals itself once the opening is past, already
   handles the safe area, and already makes the mobile dock stand down. A
   second bar would be the exact mistake §9 was written about.

   So this file makes the ledge SWELL. `.em-ledge--bar` adds an information
   register to the same element, on the same z-rung, with the same reveal:

     phone   two rows — identity + price, then the actions
     desktop one row  — identity · facts · actions, where the ledge is
                        otherwise `display: none` for every page in the build

   WHY IT IS ITS OWN FILE
   ----------------------
   It shipped inside community-bar.css, for the community page alone. The
   release page (emaar-launch.html) then needed the same bar for the same
   reason — a reader who scrolls past the hero loses Register Interest and
   Download Brochure and has no way back to either — and DESIGN-STANDARDS.md §2
   allows a shared component exactly one definition of its presentation. So the
   shell moved here, unchanged, and the two hosts keep only what is theirs:

     ledge-bar.css     the shell, the identity, the facts, the actions, the
                       two layouts, the read hairline, the room the page leaves
     community-bar.css the community's own surfaces — the desktop More popover,
                       the phone page-index sheet, the brochure panel
     (release page)    nothing. The release bar is this file and its script.
     (collection page) nothing either — same bar, this page's own answers.

   Behaviour is ledge-bar.js: ONE reveal, one dock handoff, one adoption of the
   menu square, one reading hairline, for every host that swells the ledge into
   a bar. A host calls EmaarLedgeBar.mount({ledge, gate, html}) and supplies
   only the markup — see releaseBar() in launches-pages.js and projectBar() in
   places-pages.js. community-bar.js keeps its own loop, because its gate is a
   page-index that lights a row in its own sheet on the same scroll pass: a
   second behaviour, not a second copy of this one. All three build the same
   markup and write the same two custom properties this file reads.

   WHY STICKY AND NOT FIXED
   ------------------------
   `.em-ledge` is `position: sticky; bottom: 0` and sits between </main> and
   <footer>. That is not an accident of implementation — it is what makes the
   bar settle above the footer instead of covering it, with no scroll maths at
   all. `position: fixed` would need a footer-collision observer to do worse.

   Load order: after places.css (it extends .em-ledge) and after mobile-nav.css
   (it answers .em-ledge__more's width at desktop). Before community-bar.css,
   which overrides two of its rules for the one control it gives a second job.
   =========================================================================== */

/* ————————————————————————— 1 · The shared shell ————————————————————————— */

/* The ledge is a flex row of equal-width children. An information bar is not
   equal-width children, so the modifier takes that back and lays out its own. */
.em-ledge--bar {
  display: block;
  padding-top: 0;
  /* `.em-ledge` carries `calc(13px + env(safe-area-inset-bottom))`. The rows
     below set their own vertical rhythm, so the 13px goes — but the inset
     MUST NOT: on a notched phone it is the only thing keeping the actions off
     the home indicator. Zeroing the shorthand here is how that was lost once. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.em-ledge--bar > * { flex: none; }

.em-ledge__bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  width: 100%;
  max-width: var(--em-container-wide, 1440px);
  margin-inline: auto;
  min-height: 64px;
  padding-block: 11px;
}

@media (min-width: 1024px) {
  .em-ledge__bar { padding-block: 13px; }
}

/* ————————————————————————— 2 · Identity ————————————————————————— */

/* "Where am I" is the first question the bar answers, so it is the first
   thing in the reading order and the only thing set in the display face. */
.em-ledge__id {
  flex: 0 1 auto;
  min-width: 0;
}

.em-ledge__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* The same four lines as `.em-ledge__fact dt` below, because this eyebrow
     and those labels sit on one line and read as one row. Written as
     longhands: the `font:` shorthand this replaced named a token that does
     not exist (`--em-font-sans`), whose `inherit` fallback is illegal inside
     a shorthand, so the whole declaration dropped and the eyebrow fell back
     to inherited body size and weight beside its 11px/600 neighbours. */
  font-family: var(--em-font-ui);
  font-size: var(--em-text-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse-70);
  text-decoration: none;
  transition: color var(--em-t-fast) var(--em-e-soft);
}

/* No hover, no arrow: it is a label. See community-bar.js for why. */

.em-ledge__name {
  display: block;
  margin: 5px 0 0;
  font-family: var(--em-font-display, inherit);
  font-size: var(--em-text-h5);
  font-weight: var(--p-weight-regular);
  line-height: 1.15;
  color: var(--em-on-night);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ————————————————————————— 3 · The facts ————————————————————————— */

/* A <dl>, because it is a list of label/value pairs and because the list the
   page prints in its own body is the same <dl> with the same answers. The bar
   is that list made persistent — it is not a second source, and each host's
   script derives both from one object so they cannot drift. */
.em-ledge__facts {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  margin: 0;
  min-width: 0;
}

.em-ledge__fact {
  min-width: 0;
  position: relative;
}

/* The separator is drawn, not typed: a middot in the markup would be read out
   by a screen reader between every pair. */
.em-ledge__fact + .em-ledge__fact::before {
  content: "";
  position: absolute;
  left: calc(clamp(16px, 2vw, 34px) / -2);
  top: 50%;
  width: 1px;
  height: 22px;
  transform: translateY(-50%);
  background: rgba(var(--em-rgb-on-inverse), .16);
}

.em-ledge__fact dt {
  margin: 0;
  font-family: var(--em-font-ui);
  font-size: var(--em-text-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse-70);
  white-space: nowrap;
}

.em-ledge__fact dd {
  margin: 4px 0 0;
  font-size: var(--em-text-body-sm);
  line-height: 1.2;
  color: var(--em-on-night);
  white-space: nowrap;
}

/* The price is the one fact a reader scans for, so it alone is set in the
   display face — the same distinction `.em-specs .is-price` already draws. */
.em-ledge__fact--price dd {
  font-family: var(--em-font-display, inherit);
  font-size: var(--em-text-body-lg);
}

/* ————————————————————————— 4 · Actions ————————————————————————— */

.em-ledge__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}

.em-ledge--bar .em-ledge__more { margin-left: 0; }

/* The word rides only where there is room; below 1024 the control is the 46px
   square mobile-nav.css already sized for a thumb. */
.em-ledge__more-l { display: none; }

/* The same bargain for any other word in the bar that is worth its width at
   desktop and not at 375: "Download brochure" there, "Brochure" here. */
.em-ledge__wide { display: none; }

/* ————————————————————————— 5 · Desktop ————————————————————————— */

/* The ledge is `display:none` above 1023 for every page in the build. These
   are the pages that take it back — hence the modifier on the selector: no
   other page's ledge is touched. */
@media (min-width: 1024px) {
  .em-ledge.em-ledge--bar { display: block; }

  .em-ledge--bar .em-ledge__name { font-size: var(--em-text-h5); }

  .em-ledge__wide { display: inline; }

  /* The square is the PHONE's menu. The sheet it opens is itself
     `display: none` above 1023 (mobile-nav.css), so a bar that takes the
     desktop back must not take the phone's menu button with it — and at this
     width the header carries the site's own nav two rows above. A host that
     gives the square a second job at desktop says so itself; community-bar.css
     does, and it loads after this file. */
  .em-ledge--bar .em-ledge__more { display: none; }
}

/* Below 1440 the identity, three facts and the controls stop fitting on one
   line before anything wraps, so ONE fact stands down — the brief's hierarchy
   read backwards. WHICH one is the host's call and not this file's: the
   community bar keeps its property types and drops the development count, the
   release bar keeps the count and drops the size range. The host's script
   marks the spare fact; this file only says when it goes. 1439 is on the
   system's own ladder (ds_check.py BREAKPOINTS); an ad-hoc 1240 would not be. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .em-ledge__fact--spare { display: none; }
}
/* Two facts held all the way down to 1024: measured at that width the
   community bar's identity, two facts and three controls come to 1006px of
   the 1024. */

/* ————————————————————————— 6 · Phone ————————————————————————— */

/* NOT the desktop bar stacked. A different bar: two rows, a different set of
   facts, and the primary action given the width it needs for a thumb.
   Identity and price ride together on the information row because they are
   the two questions worth a persistent answer on a 375px screen; everything
   else the page still answers in its own body. */
@media (max-width: 1023px) {
  .em-ledge__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 3px 12px;
    min-height: 0;
    padding-block: 9px 0;
  }

  .em-ledge__id { grid-column: 1; }
  .em-ledge__back { display: none; }       /* the breadcrumb is four taps away, at the top of the page */

  .em-ledge__name {
    margin: 0;
    font-size: var(--em-text-body-md);
  }

  .em-ledge__facts {
    grid-column: 2;
    justify-self: end;
    gap: 0;
  }

  /* One fact on the phone: the price, whatever else the host built. The rest
     are hidden rather than unbuilt so the markup is identical at every width
     and anything that reads the bar can still read them from the DOM. */
  .em-ledge__fact:not(.em-ledge__fact--price) { display: none; }

  .em-ledge__fact dt {
    display: inline;
    font-size: var(--em-text-label-xs);
    letter-spacing: .16em;
  }
  .em-ledge__fact dd {
    display: inline;
    margin: 0 0 0 6px;
    font-size: var(--em-text-body-sm);
  }
  .em-ledge__fact--price dd { font-size: 14px; }

  .em-ledge__actions {
    grid-column: 1 / -1;
    margin-left: 0;
    padding-block: 10px 11px;
  }

  /* The primary takes the room; the secondary takes what it needs; More is a
     square. Below 360 the secondary's label is the first thing to go. */
  .em-ledge--bar .em-ledge__actions > .em-btn { flex: 1 1 auto; min-width: 0; }
  .em-ledge--bar .em-ledge__actions > .em-btn-h { flex: 0 1 auto; min-width: 0; }

  /* ——— the reader's place in the page, drawn on the hairline ———
     `.em-ledge` already carries a 1px top border. This gives that border a
     length: --ledge-read is 0..1, written by the host's script on the same
     rAF-throttled scroll handler that raises the bar. It costs no height, adds
     no control, and cannot be the first thing on the screen — the bar itself
     is not up until the page's own opening is past. Gold MARKS here; it does
     not fill (§1). */
  .em-ledge--bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    width: calc(var(--ledge-read, 0) * 100%);
    /* --em-text-accent-on-inverse, not --em-accent: the latter is the metal ON
       PAPER (#7f6535, 4.93:1 on cream and near-black on this plate). The dark
       ground has its own gold and this is it. */
    background: var(--em-text-accent-on-inverse);
    transition: width .12s linear;
    pointer-events: none;
  }
}

@media (max-width: 599px) {
  .em-ledge__bar { gap: 2px 8px; }   /* 599 is the ladder's narrow rung */
  .em-ledge__name { font-size: 14px; }
  .em-ledge--bar .em-ledge__actions { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .em-ledge--bar::before { transition: none; }
}

/* ————————————————— 7 · Room for the bar ————————————————— */

/* The bar is pulled over the page's last content, so the page needs to end
   above it. On the phone the ledge already did this; at desktop it did not
   exist, and the closing band ran under it. */
@media (min-width: 1024px) {
  body.has-ledge-bar #em-main { padding-bottom: 88px; }
}

/* Print: a sticky bar is not a thing you can print. */
@media print {
  .em-ledge--bar { display: none !important; }
}