/* app-modal.css — the Emaar One dialog: the owner's app, shown properly.

   Pairs with app-modal.js, which owns the vocabulary and builds the markup
   (DESIGN-STANDARDS §2 — one component, one definition). A host page carries
   ONE line: the footer's Connect link with data-em-one on it.

   Three decisions worth keeping:

   1. It is NIGHT, not paper. The link that opens this lives in the footer,
      and the footer's ground is `--p-night-800`. A cream dialog dropped over
      a black footer is a second brand arriving; the same black continuing
      upward is the site holding its breath. Every other dialog here is paper
      because every other dialog opens over paper.

   2. The DEVICE IS DRAWN, the screen is photographed. Apple ships this app's
      screenshots as marketing composites — a blue gradient, a full-caps
      caption and a phone mockup. The caption is exactly the shouting this
      site does not do, so the screen alone is cropped out of the frame
      (images/eone-property-*.webp, measured to the device's screen box) and
      the handset is built here, in the house's own materials. The bezel and
      both radii are derived from --eo-dev, so the phone stays a phone at
      every width rather than going soft at one end of the clamp. The app
      icon's radius is derived the same way and for the same reason: an icon
      and a handset are DEPICTIONS of physical things, and their corners are
      a proportion of themselves, not a surface radius the system owns.

   3. Gold marks, it never fills (§1). The eyebrow, the feature rules, the
      star, the store glyphs and the store pills' hover edge are gold.
      Nothing here stands on a gold ground.

   Every var() carries a literal fallback: this pair is loaded by fifty-four
   pages whose token sets are not identical — the defence film-modal.css
   documents. ————— */

.em-one,
.em-one * { box-sizing: border-box; }

/* 140 — the film lightbox's rung, for the same reason. This opens from the
   footer, from the More sheet (120) and from the Explore-all directory
   (130), so it has to clear all three. It cannot coexist with a film: there
   is no film inside it, and the footer is unreachable while one plays. */
.em-one {
  position: fixed; inset: 0; z-index: var(--z-film, 140);
  display: grid; place-items: center;
  padding: clamp(12px, 2.6vw, 30px);
  padding-top: calc(clamp(12px, 2.6vw, 30px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(12px, 2.6vw, 30px) + env(safe-area-inset-bottom, 0px));
  font-family: var(--em-body, "Source Sans 3", "Segoe UI", system-ui, sans-serif);
  color: var(--em-text-on-inverse, #f5f2ec);
}
.em-one[hidden] { display: none; }

.em-one__scrim {
  position: absolute; inset: 0;
  background: rgba(var(--em-rgb-night, 10, 10, 10), .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .5s ease;
}
.em-one.is-open .em-one__scrim { opacity: 1; }

/* ————————————————————————— the panel ————————————————————————— */

.em-one__panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(880px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--p-night-800, #0f0e0c);
  border: 1px solid rgba(var(--em-rgb-on-inverse, 245, 242, 236), .13);
  border-radius: var(--em-r, 2px);
  box-shadow: var(--em-sh-modal, 0 60px 140px rgba(0, 0, 0, .55));
  opacity: 0; transform: translateY(16px) scale(.988);
  transition: opacity .5s ease .06s,
              transform .72s var(--em-ease-exit, cubic-bezier(.22, 1, .36, 1)) .06s;
}
.em-one.is-open .em-one__panel { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  .em-one__panel {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

.em-one__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  margin: 0; padding: 0;
  background: rgba(var(--em-rgb-night, 10, 10, 10), .5); border: 0; border-radius: 50%;
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .8); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: color .3s ease, background .3s ease;
}
.em-one__close:hover {
  color: var(--em-text-on-inverse, #f5f2ec);
  background: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .12);
}
.em-one__close:focus-visible { outline: 2px solid var(--unveil-gold, rgba(248, 248, 248, .7)); outline-offset: 2px; }
.em-one__close svg { width: 13px; height: 13px; display: block; }

/* ————————————————————————— the picture side ————————————————————————— */

.em-one__stage {
  position: relative; overflow: hidden; min-height: 0;
  display: grid; place-items: end center;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 32px) 0;
  background:
    radial-gradient(86% 46% at 50% 88%,
      rgba(var(--em-rgb-metal, 197, 179, 150), .26),
      rgba(var(--em-rgb-metal, 197, 179, 150), 0) 72%),
    linear-gradient(176deg,
      rgba(var(--em-rgb-metal, 197, 179, 150), .1) 0%,
      rgba(var(--em-rgb-metal, 197, 179, 150), 0) 52%),
    linear-gradient(168deg, #16120e 0%, #0f0e0c 54%, #0a0a0a 100%);
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse, 245, 242, 236), .1);
}
@media (min-width: 1024px) {
  .em-one__stage {
    border-bottom: 0;
    border-right: 1px solid rgba(var(--em-rgb-on-inverse, 245, 242, 236), .1);
  }
}

/* The one hairline of gold on this side: the floor the handset stands on,
   and the only edge the picture side owns that the copy side does not. */
.em-one__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--em-rgb-grey-light), 0),
    rgba(var(--em-rgb-grey-light), .43) 50%,
    rgba(var(--em-rgb-grey-light), 0));
}

.em-one__device {
  --eo-dev: min(clamp(200px, 30vw, 304px), 38vh);
  position: relative;
  width: var(--eo-dev);
  padding: calc(var(--eo-dev) * .034);
  background: linear-gradient(152deg, #333335 0%, #111112 18%, #0a0a0a 60%, #333335 100%);
  border-radius: calc(var(--eo-dev) * .145);
  box-shadow:
    0 2px 0 rgba(var(--em-rgb-on-inverse, 245, 242, 236), .06) inset,
    0 40px 70px -28px rgba(0, 0, 0, .55);
}
.em-one__screen {
  display: block; overflow: hidden;
  border-radius: calc(var(--eo-dev) * .111);
  background: #0a0a0a;
}
.em-one__screen img { display: block; width: 100%; height: auto; }

/* Below 1024 the stage is a ledge, not a column: the handset's top third
   shows and the rest runs off under the copy. A full handset there would put
   the store buttons two screens down on a phone. */
@media (max-width: 1023px) {
  .em-one__stage {
    height: clamp(152px, 25vh, 200px);
    align-items: start;
    padding: clamp(16px, 3vw, 26px) clamp(18px, 2.4vw, 32px) 0;
  }
  .em-one__device { --eo-dev: clamp(184px, 52vw, 244px); }
}

/* ————————————————————————— the copy side ————————————————————————— */

.em-one__body {
  min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 3vw, 42px) clamp(20px, 2.8vw, 44px) clamp(26px, 3vw, 40px);
}

.em-one__id { display: flex; align-items: center; gap: 13px; margin: 0 0 clamp(16px, 2vw, 22px); }
.em-one__icon {
  --eo-icon: 54px;
  flex: none; width: var(--eo-icon); height: var(--eo-icon); display: block;
  border-radius: calc(var(--eo-icon) * .2237);   /* the icon's own proportion */
  border: 1px solid rgba(var(--em-rgb-on-inverse, 245, 242, 236), .14);
}
.em-one__eyebrow {
  margin: 0;
  font-size: var(--p-11, 11px); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--unveil-gold, rgba(248, 248, 248, .7));
}
.em-one__seller {
  margin: 3px 0 0;
  font-size: var(--p-13, 13px); line-height: 1.4;
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .58);
}

.em-one__t {
  margin: 0;
  font-family: var(--em-display, Optima, "Optima Nova", Candara, "Trebuchet MS", sans-serif);
  font-weight: 400; line-height: 1.1; letter-spacing: -.012em;
  font-size: var(--p-fluid-h2-editorial, clamp(25px, 2.8vw, 37px));
  color: var(--em-text-on-inverse, #f5f2ec);
}
.em-one__lede {
  margin: clamp(12px, 1.5vw, 16px) 0 0; max-width: 40ch;
  font-size: var(--p-fluid-lede, clamp(17px, 1.35vw, 20.5px)); line-height: 1.55;
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .9);
}
.em-one__p {
  margin: 12px 0 0; max-width: 52ch;
  font-size: var(--p-15, 15px); line-height: 1.7;
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .64);
}

/* Key features — the label voice (03-typography §3), which is where capitals
   belong on this site. The items under it are sentence case, as written. */
.em-one__k {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(var(--em-rgb-on-inverse, 245, 242, 236), .12);
  font-size: var(--p-10, 10px); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--unveil-gold, rgba(248, 248, 248, .7));
}
.em-one__feat {
  list-style: none; margin: 13px 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px 26px;
}
@media (min-width: 600px) {
  .em-one__feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.em-one__feat li {
  position: relative; padding-left: 18px; min-width: 0;
  font-size: var(--p-14-5, 14.5px); line-height: 1.5;
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .84);
}
.em-one__feat li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 9px; height: 1px; background: var(--unveil-gold, rgba(248, 248, 248, .7));
}

.em-one__facts {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0;
  font-size: var(--p-12-5, 12.5px);
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .62);
}
.em-one__facts li { display: inline-flex; align-items: center; gap: 6px; }
.em-one__facts li + li::before {
  content: ""; width: 3px; height: 3px; margin-right: 8px; border-radius: 50%;
  background: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .3);
}
.em-one__facts b { font-weight: 600; color: var(--em-text-on-inverse, #f5f2ec); }
.em-one__facts svg { width: 12px; height: 12px; color: var(--unveil-gold, rgba(248, 248, 248, .7)); }

/* ————————————————————————— the stores ————————————————————————— */

.em-one__stores {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: clamp(18px, 2.2vw, 24px) 0 0;
}

/* Three trademarked lock-ups, three different typefaces, three different
   aspect ratios. What makes them read as ONE row is a shared HEIGHT — which
   is also what Apple, Google and Huawei each ask for — so height is the only
   thing set here and the widths follow the artwork. No border, no background,
   no filter: every badge already carries its own black body and hairline edge,
   and a second edge of ours would fight it. */
.em-one__store {
  display: block; line-height: 0;
  border-radius: var(--em-r, 2px);
  transition: opacity .3s ease;
}
.em-one__store img {
  display: block; width: auto; height: clamp(38px, 3.4vw, 44px);
}
.em-one__store:hover { opacity: .78; }
.em-one__store:focus-visible {
  outline: 2px solid var(--unveil-gold, rgba(248, 248, 248, .7)); outline-offset: 3px;
}

/* .54, not .42: the version line is small print, but small print that fails
   4.5:1 is decoration. Measured 4.79:1 on the panel's ground. */
.em-one__fine {
  margin: clamp(16px, 2vw, 20px) 0 0;
  font-size: var(--p-11-5, 11.5px); line-height: 1.65;
  color: rgba(var(--em-rgb-on-inverse, 245, 242, 236), .54);
}

/* ————————————————————————— motion ————————————————————————— */

@media (prefers-reduced-motion: reduce) {
  .em-one__scrim,
  .em-one__panel,
  .em-one__close,
  .em-one__store { transition: none; }
  .em-one__panel { transform: none; }
}