/* ===========================================================================
   community-bar.css — what the community bar keeps for itself.
   Every master community. Linked by emaar-community.html alone.

   THE BAR ITSELF IS NOT HERE. The shell — the swelled ledge, the identity, the
   facts, the two layouts, the read hairline, the room the page leaves for it —
   is ledge-bar.css, because the release page (emaar-launch.html) needs the same
   bar for the same reason and DESIGN-STANDARDS.md §2 allows a shared component
   exactly one definition of its presentation. Load ledge-bar.css first; this
   file assumes it and overrides two of its rules.

   The element carries BOTH modifiers: `em-ledge--bar em-ledge--cm`. The first
   is the shared shell, the second is this page. Everything in this file is
   scoped to `--cm`, so the release bar cannot pick any of it up.

   WHAT IS THIS PAGE'S AND NOT THE SHELL'S
   ---------------------------------------
   Below 1024 the bar carries two ways out and they must never be mistaken for
   each other:

     .em-cix        THIS PAGE'S CHAPTERS — a partial sheet on the bar's own
                    plate, the page still showing above it, and not one link
                    in it that leaves the community
     .mobile-more   THE REST OF THE SITE — a full-screen plate with its own
                    ground and its own wordmark (mobile-nav.css)

   They used to be one list in one sheet. See community-bar.js's header for
   what that cost.

   Load order: after places.css, after mobile-nav.css, after ledge-bar.css.
   =========================================================================== */

/* —————————————— 1 · The two rules the shell leaves to this page —————————————— */

/* TWO SECONDARIES, ONE SHOWN AT A TIME. Not a responsive variant of one
   control — two different controls, each right for the width it appears at.

   Desktop shows Brochures: the More popover beside it is already this page's
   index, so a second index there would be a second answer to a question
   already answered.

   The phone shows Sections, because below 1024 that same More button is the
   SITE menu and the page's own index has nowhere else to live. The brochure
   panel moves one row inside the sheet; it is still one tap from the bar. */
.em-ledge--cm .em-ledge__ix { display: none; }

.em-ledge__ix-i { flex: none; width: 17px; height: 17px; }

@media (max-width: 1023px) {
  .em-ledge--cm .em-ledge__doc { display: none; }
  .em-ledge--cm .em-ledge__ix { display: inline-flex; }
}

/* THE SQUARE GETS A SECOND JOB AT DESKTOP. ledge-bar.css hides `.em-ledge__more`
   above 1023, because the sheet it opens is hidden there too. On this page it
   is not the phone's menu at that width — it is the trigger for `.em-cmore`
   below, this page's own index — so it comes back, as a labelled button rather
   than a 46px square: there is room for the word, and a word is a better
   target than a glyph. */
@media (min-width: 1024px) {
  .em-ledge--cm .em-ledge__more {
    display: inline-flex;
    width: auto;
    padding: 0 16px;
    gap: 8px;
    font-size: var(--em-text-label, 10px);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .em-ledge--cm .em-ledge__more-l { display: inline; }
  .em-ledge--cm .em-ledge__more svg { width: 16px; height: 16px; }
}

/* ————————————————————————— 2 · The More panel ————————————————————————— */

/* Desktop only. On a phone the More button opens the sheet mobile-nav.js
   already built — one menu, not two — and community-bar.js puts this page's
   sections at the top of it. */
.em-cmore {
  position: fixed;
  z-index: var(--z-popover);
  width: min(560px, calc(100vw - 2 * var(--em-gut)));
  background: var(--em-bg-inverse);
  border: 1px solid rgba(var(--em-rgb-on-inverse), .16);
  box-shadow: var(--em-elevation-drawer);
  padding: 22px 24px 20px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--em-t-fast) var(--em-e-soft),
              transform var(--em-t-fast) var(--em-e-soft);
}

.em-cmore[hidden] { display: none; }
.em-cmore.is-open { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .em-cmore { transition: none; transform: none; }
}

.em-cmore__t {
  margin: 0 0 14px;
  font-size: var(--em-text-label, 10px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse-70);
}

.em-cmore__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}

.em-cmore__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--em-control-min);
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), .1);
  background: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--em-on-night);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--em-t-fast) var(--em-e-soft),
              padding-left var(--em-t-fast) var(--em-e-soft);
}

.em-cmore__link:hover { color: var(--em-on-night); padding-left: 5px; }
.em-cmore__link:hover .em-cmore__ar { transform: translateX(3px); opacity: 1; }

.em-cmore__ar {
  flex: none;
  width: 13px;
  height: 9px;
  opacity: .45;
  transition: transform var(--em-t-fast) var(--em-e-soft),
              opacity var(--em-t-fast) var(--em-e-soft);
}

.em-cmore__link:focus-visible {
  outline: 2px solid var(--em-on-night);
  outline-offset: 2px;
}

/* ——————————————————— 3 · The page index (phone) ——————————————————— */

/* THE SHEET IS THE BAR, SWOLLEN. Same plate, same blur, same top hairline,
   rising out of the same edge — so before a word is read the reader knows this
   belongs to the bar they pressed and to the page they are on. The site menu
   is a full-screen plate with its own ground and its own wordmark; the two can
   never be confused for one another, which is the entire point.

   DESIGN-STANDARDS §9: "the bar swells; it never stacks". This is the swell.
   It covers the ledge rather than sitting above it, because a second plate
   with a seam between them is two bars, which is the thing §9 forbids. */
.em-cix {
  position: fixed;
  inset: 0;
  /* ABOVE the ledge (48) and BELOW the two things it opens — the brochure
     dialog and the enquiry modal, both --z-modal (95) — and below the site
     menu (120). A page-scoped sheet is not the top of the stack; everything it
     hands the reader on to must arrive over it. */
  z-index: var(--z-popover);
  display: flex;
  align-items: flex-end;
}

.em-cix[hidden] { display: none; }

.em-cix__scrim {
  position: absolute;
  inset: 0;
  background: var(--em-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--em-t-mid) var(--em-e-soft);
}

.em-cix.is-open .em-cix__scrim { opacity: 1; }

.em-cix__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Twelve rows at 46px plus a head is 640; a 667px phone must still show the
     page above the sheet, or it is a full-screen menu wearing a sheet's
     clothes. The list scrolls inside instead. */
  max-height: min(76vh, 640px);
  background: var(--em-ledge);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--em-line-dark);
  /* No shadow. The ledge carries one because it is pulled over LIVE content
     and has to draw its own separation; this sheet stands on a scrim that is
     already dimming and blurring the page behind it, so a shadow would be a
     second answer to a question the scrim has answered — and the only value
     that fits is an upward one, which the elevation tokens do not have and
     which is not worth a raw colour in a file that has none. */
  color: var(--em-on-night);
  padding: 0 var(--em-gut) env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform .42s var(--em-e-panel);
}

.em-cix.is-open .em-cix__sheet { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .em-cix__scrim, .em-cix__sheet { transition: none; }
  .em-cix__sheet { transform: none; }
}

/* The one phone convention this component borrows: a grip says "sheet", and a
   sheet says "the thing under me is still there". */
.em-cix__grip {
  flex: none;
  width: 34px;
  height: 3px;
  margin: 9px auto 0;
  border-radius: var(--em-radius-circle);
  background: rgba(var(--em-rgb-on-inverse), .26);
}

.em-cix__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
}

.em-cix__eyebrow {
  margin: 0;
  font-size: var(--em-text-label, 10px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse-70);
}

/* The community, in the display face, exactly as the bar names it one row
   below. The sheet does not re-title itself "Menu": it says where you are. */
.em-cix__h {
  margin: 5px 0 0;
  font-family: var(--em-font-display, inherit);
  font-size: var(--em-text-h5);
  line-height: 1.15;
  color: var(--em-on-night);
}

.em-cix__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px calc(var(--em-gut) * -0.4) 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--em-rgb-on-inverse), .22);
  border-radius: var(--em-radius-circle);
  background: none;
  color: var(--em-on-night);
  cursor: pointer;
  transition: border-color var(--em-t-fast) var(--em-e-soft);
}

.em-cix__close:hover { border-color: var(--em-on-night); }

.em-cix__list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.em-cix__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--em-control-min);
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), .09);
  background: none;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--em-text-on-inverse-70);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--em-t-fast) var(--em-e-soft);
}

.em-cix__row:last-child { border-bottom: 0; }
.em-cix__row:hover { color: var(--em-on-night); }

.em-cix__row:focus-visible {
  outline: 2px solid var(--em-on-night);
  outline-offset: -2px;
}

.em-cix__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* WHERE THE READER IS STANDING. DESIGN-STANDARDS §8 gives in-page movement the
   underline pattern — no box, a rule on the current item — and about.css's
   .ab-index__link already draws that rule in gold. Same mark, on night.

   The lane is a FIXED 20px and only its colour changes. .ab-index grows the
   rule from 0, which moves the label; in a list the reader is scrolling past
   while the spy re-marks it, a label that steps sideways reads as a glitch. */
.em-cix__mark {
  flex: none;
  width: 20px;
  height: 1px;
  background: rgba(var(--em-rgb-on-inverse), .18);
  transition: background var(--em-t-mid) var(--em-e-soft);
}

.em-cix__row[aria-current="true"] { color: var(--em-on-night); }
.em-cix__row[aria-current="true"] .em-cix__mark { background: var(--em-text-accent-on-inverse); }

/* The two actions are not chapters, so they sit under a rule and carry an
   arrow rather than a mark: one opens a panel, one opens a form. Both keep
   the reader on this page, which is the promise this whole surface makes. */
.em-cix__rule {
  flex: none;
  margin-top: 4px;
  padding: 6px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(var(--em-rgb-on-inverse), .16);
}

.em-cix__row--act { justify-content: space-between; gap: 12px; }

.em-cix__ar {
  flex: none;
  width: 13px;
  height: 9px;
  opacity: .45;
  transition: transform var(--em-t-fast) var(--em-e-soft),
              opacity var(--em-t-fast) var(--em-e-soft);
}

.em-cix__row--act:hover .em-cix__ar { transform: translateX(3px); opacity: 1; }

/* Above 1024 the page's index is the More popover, and this sheet is not
   built for that width — same line mobile-nav.css draws for its own menu. */
@media (min-width: 1024px) {
  .em-cix { display: none; }
}

/* ————————————————————————— 4 · The brochure panel ————————————————————————— */

/* A dialog, on paper, not on the night plate: it is a reading surface, and it
   is the one place in this component where a body of text is set. */
.em-doc {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--em-gut);
}

.em-doc[hidden] { display: none; }

.em-doc__scrim {
  position: absolute;
  inset: 0;
  background: var(--em-scrim);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity var(--em-t-mid) var(--em-e-soft);
}

.em-doc__card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--em-surface-primary);
  border: 1px solid var(--em-border-subtle);
  box-shadow: var(--em-elevation-modal);
  padding: clamp(24px, 3vw, 34px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--em-t-mid) var(--em-e-panel),
              transform var(--em-t-mid) var(--em-e-panel);
}

.em-doc.is-open .em-doc__scrim { opacity: 1; }
.em-doc.is-open .em-doc__card { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .em-doc__scrim, .em-doc__card { transition: none; }
  .em-doc__card { transform: none; }
}

.em-doc__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--em-border-subtle);
  border-radius: var(--em-radius-circle);
  background: none;
  color: var(--em-text-primary);
  cursor: pointer;
  transition: border-color var(--em-t-fast) var(--em-e-soft);
}
.em-doc__close:hover { border-color: var(--em-border-strong); }

.em-doc__eyebrow {
  margin: 0;
  font-size: var(--em-text-label, 10px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow);
}

.em-doc__h { margin: 10px 0 0; padding-right: 44px; }

/* The empty state. It is a STATE, not a placeholder: it says what is not
   published rather than pretending something is on its way, and it is the
   slot the real document drops into — see COMMUNITY_DOCS in community-bar.js. */
.em-doc__none {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--em-border-subtle);
  background: var(--em-bg-primary);
}

.em-doc__none p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--em-text-secondary); }
.em-doc__none p + p { margin-top: 8px; }

.em-doc__rule {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--em-border-rule);
}

.em-doc__list { margin: 12px 0 0; padding: 0; list-style: none; }

.em-doc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--em-control-min);
  padding: 7px 0;
  border-bottom: 1px solid var(--em-border-subtle);
  font-size: 14px;
  color: var(--em-text-primary);
  text-decoration: none;
  transition: padding-left var(--em-t-fast) var(--em-e-soft);
}

.em-doc__row:hover { padding-left: 4px; }
.em-doc__row:last-child { border-bottom: 0; }

/* The file type is stated, because the reader is about to leave the site for
   a PDF and should know before they tap. Size and page count are NOT stated:
   nothing in this build knows them, and inventing them is the one thing the
   brief forbids outright. */
.em-doc__pdf {
  flex: none;
  font-size: var(--em-text-label-xs);
  font-weight: 600;
  letter-spacing: .14em;
  padding: 3px 7px;
  border: 1px solid var(--em-border-subtle);
  color: var(--em-text-muted);
}

.em-doc__n { margin: 0; font-size: 13px; color: var(--em-text-muted); }

@media (max-width: 1023px) {
  .em-doc { align-items: flex-end; padding: 0; }
  .em-doc__card {
    width: 100%;
    max-height: 84vh;
    padding-bottom: calc(clamp(24px, 3vw, 34px) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .em-doc.is-open .em-doc__card { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .em-doc__card { transform: none; }
  }
}

/* ————————————————————————— 5 · Anchors ————————————————————————— */

/* assets/ds/02-base.css sets scroll-margin-top on `section[id]`. Eight of this
   page's nine jump targets are an id on the <h2>, not on the <section>, so
   without this every More-menu jump lands the heading under the 72px header.
   Scoped to this page's own ids: the base rule stays the base rule. */
#em-about, #em-figures, #em-properties, #em-amen, #em-poi, #em-map,
#em-film-h, #em-gal, #em-faq, #em-near {
  scroll-margin-top: calc(var(--em-header-height) + 12px);
}

/* Print: a sticky bar is not a thing you can print. ledge-bar.css takes the
   bar itself; these are the surfaces it opens. */
@media print {
  .em-cmore, .em-cix, .em-doc { display: none !important; }
}