/* Builder C: the explorer. The pick list (#pickList), the exploring state of the page, the floor panel / bottom sheet,
   unit pins, the unit card, the room viewer, the 3D flat (model stage and walk, v5), the 2D plan without WebGL. Tokens come from site.css :root. */

#explore, .picklist, .xp-fit, .xp-tag, .xp-hhint {
  --xp-out: cubic-bezier(.22, 1, .36, 1);
  --xp-expo: cubic-bezier(.16, 1, .3, 1);
  --xp-sheet: cubic-bezier(.32, .72, 0, 1);
  --xp-glass: rgba(13, 24, 43, .62);
  --xp-line: rgba(157, 176, 201, .16);
  --xp-amber-a: rgba(242, 181, 107, .16);
}

/* ------------------------------------------------------------------ the pick list (B's section, C's rows) */
.picklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.picklist__b {
  width: 100%; display: grid; grid-template-columns: 44px 1fr 20px; grid-template-areas: "lift name go" "lift meta go";
  column-gap: 14px; row-gap: 1px; align-items: center; padding: 8px 10px 8px 12px; margin: 0;
  font: inherit; color: var(--paper); text-align: start; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 16px;
  transition: background-color .16s ease, border-color .16s ease, transform .16s var(--xp-out);
  -webkit-tap-highlight-color: transparent;
}
.picklist__lift {
  grid-area: lift; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; line-height: 1; color: var(--haze);
  border: 1.5px solid rgba(157, 176, 201, .4); background: rgba(10, 19, 34, .4);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .2s ease;
}
.picklist__name { grid-area: name; font-weight: 500; font-size: 17px; line-height: 1.3; }
.picklist__meta { grid-area: meta; font-size: 14px; line-height: 1.4; color: var(--haze); }
.picklist__note { color: var(--amber); }
.picklist__go { grid-area: go; display: grid; place-items: center; color: var(--amber); opacity: 0; transform: translateX(6px); transition: opacity .16s ease, transform .2s var(--xp-out); }
.picklist__go .xp-i { width: 18px; height: 18px; }
.picklist__b.is-lit, .picklist__b:focus-visible { background: rgba(242, 181, 107, .07); border-color: rgba(242, 181, 107, .24); }
.picklist__b.is-lit .picklist__lift, .picklist__b:focus-visible .picklist__lift {
  color: var(--night); background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 0 5px rgba(242, 181, 107, .14), 0 0 26px rgba(242, 181, 107, .55);
}
.picklist__b.is-lit .picklist__go, .picklist__b:focus-visible .picklist__go { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .picklist__b:hover { background: rgba(242, 181, 107, .07); border-color: rgba(242, 181, 107, .24); }
  .picklist__b:hover .picklist__lift { color: var(--night); background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 5px rgba(242, 181, 107, .14), 0 0 26px rgba(242, 181, 107, .55); }
  .picklist__b:hover .picklist__go { opacity: 1; transform: none; }
}
.picklist__b:active { transform: scale(.97); }
.picklist__b:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* phone: the list becomes a lift panel, two columns of call buttons */
@media (max-width: 719px), (max-aspect-ratio: 4/5) {
  .picklist { grid-template-columns: 1fr 1fr; gap: 6px; }
  .picklist > li { display: flex; }   /* the button fills its cell: one row, one height */
  .picklist__b { grid-template-columns: 40px 1fr; grid-template-areas: "lift name" "lift meta"; align-content: center; column-gap: 10px; padding: 8px; min-height: 56px; background: rgba(10, 19, 34, .38); border-color: var(--xp-line); }
  .picklist__lift { width: 38px; height: 38px; }
  .picklist__name { font-size: 15px; }
  .picklist__meta { font-size: 13px; }
  .picklist__note, .picklist__go { display: none; }
}

/* the tag that follows the pointer over the model */
.xp-tag { position: fixed; left: 0; top: 0; z-index: 29; pointer-events: none; will-change: transform; }
.xp-tag__in {
  display: inline-flex; align-items: center; gap: 11px; padding: 9px 16px 9px 10px; white-space: nowrap;
  font: 500 15px/1.35 Alexandria, system-ui, sans-serif; color: var(--paper);
  background: rgba(10, 19, 34, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 181, 107, .32); border-radius: 20px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(calc(-100% - 18px), -50%) scale(.96); transform-origin: right center;
  transition: opacity .14s ease, transform .18s var(--xp-out);
}
.xp-tag__in b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: var(--night); font-size: 13px; font-weight: 700; }
.xp-tag__in i { font-style: normal; color: var(--amber); }
.xp-tag__t { display: grid; gap: 1px; }
.xp-tag__f { display: inline-flex; align-items: center; gap: 8px; }
/* the action: what a click (or a second tap) does, in the live colour */
.xp-tag__go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; color: var(--amber-hot); }
.xp-tag__go .xp-i { width: 14px; height: 14px; stroke-width: 2; }
.xp-tag.is-on .xp-tag__in { opacity: 1; transform: translate(calc(-100% - 18px), -50%); }
.xp-tag.is-flip .xp-tag__in { transform: translate(18px, -50%) scale(.96); transform-origin: left center; }
.xp-tag.is-flip.is-on .xp-tag__in { transform: translate(18px, -50%); }
/* a finger covers the point: the tag sits above it (below it near the header), centred */
.xp-tag.is-up .xp-tag__in { transform: translate(-50%, calc(-100% - 26px)) scale(.96); transform-origin: center bottom; }
.xp-tag.is-up.is-on .xp-tag__in { transform: translate(-50%, calc(-100% - 26px)); }
.xp-tag.is-down .xp-tag__in { transform: translate(-50%, 26px) scale(.96); transform-origin: center top; }
.xp-tag.is-down.is-on .xp-tag__in { transform: translate(-50%, 26px); }

/* the hero's hint under the building (explore.js places it under the base, clear of the words); left 50% until then:
   anything past the page's edge would widen a phone's layout viewport */
.xp-hhint {
  position: absolute; left: 50%; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; pointer-events: none;
  font: 400 14px/1.6 Alexandria, system-ui, sans-serif; color: rgba(244, 234, 219, .74); text-shadow: 0 1px 18px rgba(10, 19, 34, .8);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .5s ease, transform .7s var(--xp-out);
}
.xp-hhint.is-on { opacity: 1; transform: translate(-50%, 0); transition-duration: .8s, 1s; }
.xp-hhint i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: xp-hhint 2.6s ease-out infinite; }
@keyframes xp-hhint { 0% { box-shadow: 0 0 0 0 rgba(242, 181, 107, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(242, 181, 107, 0); } }
@media (max-width: 759px) { .xp-hhint { font-size: 13px; } }

/* ------------------------------------------------------------------ the exploring state of the page (spec z-order) */
html.xp-veil main, html.xp-veil body > footer, html.xp-veil .bar,
html.xp-unveil main, html.xp-unveil body > footer, html.xp-unveil .bar { transition: opacity .34s ease; }
html.xp-veil main, html.xp-veil body > footer, html.xp-veil .bar { opacity: 0; pointer-events: none; }
html.is-exploring:not(.xp-solo) .backdrop { z-index: 40; }
html.is-exploring:not(.xp-solo) #maq { z-index: 41; }
html.is-exploring:not(.xp-solo) .bar { visibility: hidden; }
html.is-exploring { overscroll-behavior: none; }
/* the stage covers the page (veiled, or a room photo full screen): drop the scrollbar's gutter, which fixed layers cannot paint
   into (a dead 15 px strip at the right on desktop); the page reflows only while unseen */
html.is-exploring:not(.xp-solo), html.xp-cover { scrollbar-gutter: auto; }

#explore {
  position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: 100vw; z-index: 42; pointer-events: none; overflow: hidden; overflow: clip;   /* clip: a focus or scrollIntoView inside the low sheet can no longer scroll the whole explorer up */
  color: var(--paper); font-family: Alexandria, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
}
#explore[hidden] { display: none; }
#explore button { font: inherit; color: inherit; margin: 0; }
#explore :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
#explore [tabindex="-1"]:focus { outline: none; }
.xp-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xp-i .f { fill: currentColor; stroke: none; }

/* 2D path: a navy ground with a warm pool of light where the plan lies */
.xp-ground { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; background:
  radial-gradient(60% 55% at 38% 52%, rgba(232, 148, 106, .13), transparent 70%),
  radial-gradient(120% 90% at 40% 40%, var(--navy), var(--night)); }
.xp--2d.is-on .xp-ground { opacity: 1; }
.xp-plan { position: absolute; inset: 0; pointer-events: none; }
.xp-pbox { position: absolute; transform-origin: 50% 50%; will-change: transform; }
.xp-pbox img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }

/* ------------------------------------------------------------------ unit pins */
.xp-pins { position: absolute; inset: 0; pointer-events: none; }
.xp-pin {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; translate: -50% -50%; padding: 0;
  background: none; border: 0; cursor: pointer; pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, visibility 0s .22s;
}
.xp-pin.is-on { pointer-events: auto; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.xp-pins .xp-pin { will-change: transform; }
.xp-pin__dot {
  position: absolute; inset: 5px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; line-height: 1; color: var(--amber-hot);
  background: rgba(10, 19, 34, .74); border: 2px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(242, 181, 107, .14), 0 0 22px rgba(242, 181, 107, .45), 0 6px 14px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(.6);
  transition: transform .14s var(--xp-out), opacity .12s ease, background-color .16s ease, color .16s ease;
}
.xp-pin.is-on .xp-pin__dot { opacity: 1; transform: scale(1); transition: transform .42s var(--xp-expo) var(--d, 0ms), opacity .26s ease var(--d, 0ms), background-color .16s ease, color .16s ease; }
.xp-pin.is-on.is-hot .xp-pin__dot, .xp-pin.is-on:focus-visible .xp-pin__dot { transform: scale(1.18); transition-delay: 0s; transition-duration: .16s; background: var(--amber); color: var(--night); }
.xp-pin.is-sel .xp-pin__dot { background: var(--amber); color: var(--night); box-shadow: 0 0 0 6px rgba(242, 181, 107, .22), 0 0 34px rgba(255, 212, 154, .75); }
.xp-pin.is-sel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--amber-hot); animation: xp-pulse 2.2s var(--xp-out) infinite; }
.xp-pin.is-dim { opacity: .5; }
.xp-pin.is-dim.is-hot { opacity: 1; }
.xp-pin:focus-visible { outline: none; }
.xp-pin__lab {
  position: absolute; top: 50%; right: 46px; transform: translateY(-50%); white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--paper);
  background: rgba(10, 19, 34, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(242, 181, 107, .35);
  clip-path: inset(0 0 0 100% round 999px); opacity: 0; transition: clip-path .18s var(--xp-out), opacity .12s ease;
}
.xp-pin.is-flip .xp-pin__lab { right: auto; left: 46px; clip-path: inset(0 100% 0 0 round 999px); }
.xp-pin.is-on.is-hot .xp-pin__lab, .xp-pin.is-on:focus-visible .xp-pin__lab { clip-path: inset(0 0 0 0 round 999px); opacity: 1; }
.xp-pin__up {
  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--night); background: var(--amber); opacity: 0; transition: opacity .2s ease;
}
.xp-pin.is-on .xp-pin__up { opacity: 1; transition-delay: calc(var(--d, 0ms) + 120ms); }
.xp-pin.is-up .xp-pin__dot { border-style: dashed; }
@keyframes xp-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* ------------------------------------------------------------------ the panel (desktop: a glass column at the right) */
.xp-panel {
  position: absolute; top: 20px; bottom: 20px; right: max(20px, env(safe-area-inset-right)); width: clamp(380px, 30vw, 440px);
  display: flex; flex-direction: column; pointer-events: auto; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 39, 68, .84), rgba(10, 19, 34, .92) 62%);   /* stays navy over a pale ground */
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--xp-line); border-radius: 28px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .07);
  transform: translate3d(40px, 0, 0); opacity: 0;
  transition: transform .26s var(--xp-out), opacity .2s ease;
}
.xp-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 40% at 100% 0%, rgba(242, 181, 107, .16), transparent 65%), radial-gradient(70% 30% at 0% 100%, rgba(232, 148, 106, .08), transparent 70%); }
#explore.is-ui .xp-panel { transform: none; opacity: 1; transition: transform .7s var(--xp-expo), opacity .45s var(--xp-out); }   /* only after the camera has landed and rested */
html.xp-solo .xp-panel, html.xp-solo .xp-pins { display: none; }
.xp-grip { display: none; }
.xp-views { position: relative; flex: 1; min-height: 0; }
.xp-view {
  position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(157, 176, 201, .3) transparent;
  min-height: 0; padding: 20px 26px 24px; display: flex; flex-direction: column;
  transition: transform .55s var(--xp-expo), opacity .35s var(--xp-out), visibility 0s;
}
.xp-floor.is-away, .xp-card.is-away { opacity: 0; visibility: hidden; transition: transform .3s var(--xp-out), opacity .2s ease, visibility 0s .3s; }
.xp-floor.is-away { transform: translate3d(36px, 0, 0); }   /* forward in RTL: the list leaves to the right */
.xp-card.is-away { transform: translate3d(-36px, 0, 0); }   /* and the card comes in from the left */

/* the stagger: one beat per block, the title's words rise inside it */
.xp-view [data-st] { opacity: 0; transform: translate3d(0, var(--dy, 18px), 0); }
.xp-view.is-in [data-st] { opacity: 1; transform: none; transition: opacity .45s var(--xp-out) calc(var(--i, 0) * 60ms + 90ms), transform .65s var(--xp-out) calc(var(--i, 0) * 60ms + 90ms); }
.xp-view.is-out [data-st] { opacity: 0; transform: translate3d(0, var(--dyo, 0px), 0); transition: opacity .18s ease, transform .22s cubic-bezier(.4, 0, 1, 1); }   /* out before a flight, all at once */
.xp-w { display: inline-block; overflow: clip; overflow-clip-margin: .5em; padding-bottom: .08em; vertical-align: bottom; } /* wide margin: the hamza and dots of Arabic rise far above the line */
.xp-view.is-in .xp-w { overflow: visible; }
.xp-w > span { display: inline-block; transform: translateY(.6em); opacity: 0; }
.xp-view.is-in .xp-w > span { transform: none; opacity: 1; transition: transform .7s var(--xp-out) calc(var(--w, 0) * 70ms + 160ms), opacity .4s ease calc(var(--w, 0) * 70ms + 160ms); }

.xp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.xp-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; margin-inline-start: -10px;
  background: transparent; border: 0; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--haze); cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s var(--xp-out);
}
.xp-back .xp-i { width: 18px; height: 18px; transition: transform .18s var(--xp-out); }
.xp-back:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .xp-back:hover { color: var(--paper); background: rgba(157, 176, 201, .1); } .xp-back:hover .xp-i { transform: translateX(3px); } }
.xp-lift {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px;
  font-weight: 800; font-size: 18px; line-height: 1; color: var(--amber-hot);
  background: rgba(10, 19, 34, .55); border: 1px solid rgba(242, 181, 107, .3);
  text-shadow: 0 0 12px rgba(255, 212, 154, .6); box-shadow: inset 0 0 12px rgba(242, 181, 107, .12);
}
.xp-head { margin-top: 14px; }
.xp-title { margin: 0; font-size: clamp(38px, 3.2vw, 50px); font-weight: 800; line-height: 1.3; color: var(--paper); }
.xp-meta { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--haze); }
.xp-note { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--amber); }
.xp-hint { margin: 16px 0 6px; font-size: 13px; color: rgba(157, 176, 201, .8); }

.xp-rows { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.xp-row {
  width: 100%; display: grid; grid-template-columns: 42px 1fr auto 18px; align-items: center; gap: 14px;
  padding: 7px 10px; text-align: start; cursor: pointer; background: transparent; border: 0; border-radius: 16px;
  transition: background-color .16s ease, opacity .2s ease, transform .16s var(--xp-out);
}
.xp-row:active { transform: scale(.98); }
.xp-ring {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 16px; line-height: 1; color: var(--amber-hot); border: 1.5px solid var(--amber);
  transition: background-color .16s ease, color .16s ease, box-shadow .2s ease;
}
.xp-row.is-up .xp-ring { border-style: dashed; }
.xp-row__main { display: grid; gap: 2px; min-width: 0; }
.xp-row__a { font-size: 21px; font-weight: 800; line-height: 1.1; }
.xp-row__a small { font-size: 13px; font-weight: 500; color: var(--haze); }
.xp-row__b { font-size: 14px; line-height: 1.4; color: var(--haze); }
.xp-kind { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--amber-hot); background: rgba(242, 181, 107, .12); border: 1px solid rgba(242, 181, 107, .28); }
.xp-row__go { color: var(--amber); opacity: 0; transform: translateX(5px); transition: opacity .16s ease, transform .2s var(--xp-out); }
.xp-row__go .xp-i { width: 18px; height: 18px; }
.xp-row.is-hot, .xp-row.is-sel { background: rgba(242, 181, 107, .08); }
.xp-row.is-hot .xp-ring, .xp-row.is-sel .xp-ring { background: var(--amber); color: var(--night); box-shadow: 0 0 0 5px rgba(242, 181, 107, .14), 0 0 24px rgba(242, 181, 107, .5); }
.xp-row.is-hot .xp-row__go { opacity: 1; transform: none; }
.xp-row.is-dim { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .xp-row:hover { background: rgba(242, 181, 107, .08); } .xp-row:hover .xp-row__go { opacity: 1; transform: none; } }

.xp-foot { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.xp-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xp-step {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 10px 0 12px; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 500; background: rgba(10, 19, 34, .45); border: 1px solid var(--xp-line); border-radius: 14px;
  transition: border-color .16s ease, background-color .16s ease, transform .16s var(--xp-out), opacity .2s ease;
}
.xp-step__i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--haze); border: 1.5px solid rgba(157, 176, 201, .4); transition: color .16s, border-color .16s, box-shadow .2s, background-color .16s; }
.xp-step__i .xp-i { width: 14px; height: 14px; }
.xp-step:active:not([disabled]) { transform: scale(.97); }
.xp-step:active:not([disabled]) .xp-step__i { color: var(--night); background: var(--amber); border-color: var(--amber); box-shadow: 0 0 18px rgba(242, 181, 107, .6); }
.xp-step[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .xp-step:not([disabled]):hover { border-color: rgba(242, 181, 107, .35); } .xp-step:not([disabled]):hover .xp-step__i { color: var(--amber-hot); border-color: var(--amber); box-shadow: 0 0 16px rgba(242, 181, 107, .35); } }

.xp-cta, .xp-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .16s var(--xp-out), background-color .16s ease, box-shadow .2s ease, border-color .16s ease;
}
.xp-cta { color: var(--night) !important; background: var(--amber); border: 0; box-shadow: 0 10px 30px -10px rgba(242, 181, 107, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.xp-ghost { color: var(--paper); background: rgba(10, 19, 34, .4); border: 1px solid rgba(242, 181, 107, .35); font-weight: 500; }
.xp-cta:active, .xp-ghost:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .xp-cta:hover { background: var(--amber-hot); box-shadow: 0 14px 36px -10px rgba(255, 212, 154, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
  .xp-ghost:hover { border-color: var(--amber); background: rgba(242, 181, 107, .08); }
}
.xp-cta .xp-i, .xp-ghost .xp-i { width: 18px; height: 18px; }

/* the unit card */
.xp-kicker { margin: 0; font-size: 15px; color: var(--amber); font-weight: 500; }
.xp-card__name { margin: 6px 0 0; font-size: clamp(56px, 5.2vw, 84px); font-weight: 800; line-height: 1.2; color: var(--paper); }
.xp-card__name bdi { color: var(--amber-hot); text-shadow: 0 0 34px rgba(255, 212, 154, .45); }
.xp-stats { margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.xp-stat { padding: 14px 14px 12px; border-radius: 16px; background: rgba(10, 19, 34, .42); border: 1px solid var(--xp-line); }
.xp-stat dt { font-size: 13px; color: var(--haze); }
.xp-stat dd { margin: 6px 0 0; font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.xp-stat dd small { font-size: 14px; font-weight: 500; color: var(--haze); }
.xp-dup { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.6; color: var(--paper); background: rgba(242, 181, 107, .08); border: 1px solid rgba(242, 181, 107, .22); }
.xp-dup .xp-i { color: var(--amber); margin-top: 2px; }
.xp-acts { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }

/* ------------------------------------------------------------------ the phone: a bottom sheet */
@media (max-width: 719px), (max-width: 999px) and (orientation: portrait) {
  .xp-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: calc(100% - 72px - env(safe-area-inset-top, 0px));
    border-radius: 26px 26px 0 0; border-bottom: 0; opacity: 1; transform: translate3d(0, 100%, 0);
    transition: transform .5s var(--xp-sheet); touch-action: none;
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    background: linear-gradient(180deg, rgba(22, 39, 68, .9), rgba(10, 19, 34, .96) 40%);
  }
  #explore.is-on .xp-panel { opacity: 1; transition: transform .5s var(--xp-sheet); }
  .xp-panel.is-drag { transition: none !important; }
  .xp-grip { display: grid; place-items: center; height: 26px; flex: none; cursor: grab; touch-action: none; }
  .xp-grip span { width: 40px; height: 5px; border-radius: 3px; background: rgba(157, 176, 201, .45); }
  .xp-view { padding: 0 18px calc(22px + env(safe-area-inset-bottom, 0px)); touch-action: pan-y; }
  .xp-panel.is-low .xp-view { overflow: hidden; touch-action: none; }
  [data-drag] { touch-action: none; }
  .xp-top { min-height: 36px; }
  .xp-head { margin-top: 4px; }
  .xp-title { font-size: 32px; }
  .xp-meta { margin-top: 6px; font-size: 15px; }
  .xp-hint { margin-top: 14px; }
  .xp-row { padding: 8px 10px; gap: 12px; }
  .xp-row__a { font-size: 19px; }
  .xp-card__name { font-size: 54px; }
  .xp-stats { margin-top: 16px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .xp-stat { padding: 10px 10px 9px; }
  .xp-stat dd { font-size: 24px; }
  .xp-dup { margin-top: 12px; font-size: 14px; padding: 10px 12px; }
  .xp-acts { margin-top: 0; padding-top: 16px; gap: 8px; }   /* no push to the bottom: the sheet opens to the card's own height */
  .xp-acts .xp-cta, .xp-acts .xp-ghost { min-height: 48px; }
  .xp-pin__lab { font-size: 13px; }
}
/* the tablet's sheet: two columns instead of a phone column stretched to 768 px */
@media (min-width: 600px) and (max-width: 999px) and (orientation: portrait) {
  .xp-rows { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .xp-acts { grid-template-columns: 1fr 1fr; }
  .xp-view { padding-inline: 32px; }
}

/* ------------------------------------------------------------------ the room viewer */
/* no ground of its own: the photo is drawn with its own opacity, so during the dive the model shows through it */
.xp-room { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: auto; }
.xp-room[hidden] { display: none; }
.xp-room__stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.xp-room__stage:active { cursor: grabbing; }
.xp-room__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xp-rl { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }   /* no WebGL2: the photo as a picture */
.xp-rl img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.xp-room::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, rgba(10, 19, 34, .45), transparent 18%); opacity: 0; transition: opacity .3s ease; }
.xp-room.is-in::after { opacity: 1; transition: opacity .6s var(--xp-out); }

/* hotspots: placed every frame with the view's own camera, so they stay on their spots while it moves */
.xp-spots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.xp-spot {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  translate: calc(-100% + 22px) -50%; pointer-events: auto; will-change: transform;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s .16s;
}
.xp-room.is-in .xp-spot { opacity: 1; visibility: visible; transition: opacity .45s var(--xp-out) calc(var(--i, 0) * 90ms + 140ms), visibility 0s; }
.xp-room:not(.is-in) :is(.xp-spot, .xp-rbar, .xp-rback) { pointer-events: none; }   /* nothing to press while the camera moves */
.xp-spot i { position: relative; width: 44px; height: 44px; flex: none; }
.xp-spot i::before, .xp-spot i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; }
.xp-spot i::before { border: 2.5px solid var(--amber-hot); background: rgba(242, 181, 107, .35); box-shadow: 0 0 16px rgba(255, 212, 154, .8), 0 2px 8px rgba(0, 0, 0, .4); transition: transform .18s var(--xp-out); }
.xp-spot i::after { border: 1.5px solid var(--amber); animation: xp-ring 2.2s var(--xp-out) infinite; }
.xp-spot span {
  padding: 9px 14px; border-radius: 999px; white-space: nowrap; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--paper);
  background: rgba(10, 19, 34, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(242, 181, 107, .35);
  transition: border-color .16s ease, background-color .16s ease;
}
.xp-spot:active i::before { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .xp-spot:hover i::before { transform: scale(1.25); } .xp-spot:hover span { border-color: var(--amber); background: rgba(10, 19, 34, .78); } }
@keyframes xp-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

/* the way back to the room before (top right: the start of an RTL line, where the reel puts its back link) */
.xp-rback, .xp-apt__back {
  position: absolute; top: 20px; right: max(20px, env(safe-area-inset-right)); z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--paper); cursor: pointer;
  background: rgba(10, 19, 34, .5); border: 1px solid rgba(244, 234, 219, .24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .15s ease, transform .2s var(--xp-out), border-color .16s ease;
}
.xp-rback[hidden] { display: none; }
.xp-rback .xp-i, .xp-apt__back .xp-i { width: 18px; height: 18px; }
.xp-room.is-in .xp-rback { opacity: 1; transform: none; transition: opacity .45s var(--xp-out) .1s, transform .6s var(--xp-out) .1s, border-color .16s ease; }
.xp-rback:active, .xp-apt.is-in .xp-apt__back:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .xp-rback:hover, .xp-apt__back:hover { border-color: var(--amber); } }

.xp-rbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text close" "links close";
  align-items: end; column-gap: 32px; row-gap: 10px; padding: 120px 40px calc(30px + env(safe-area-inset-bottom, 0px));
}
.xp-rbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(to top, rgba(10, 19, 34, .95), rgba(10, 19, 34, .82) 38%, rgba(10, 19, 34, .45) 70%, transparent); }
.xp-room.is-in .xp-rbar::before { opacity: 1; transition: opacity .6s var(--xp-out); }
.xp-rbar > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .15s ease, transform .2s var(--xp-out); }
.xp-room.is-in .xp-rbar > * { opacity: 1; transform: none; transition: opacity .5s var(--xp-out) .06s, transform .7s var(--xp-out) .06s; }
.xp-room.is-in .xp-rbar > .xp-rbar__links { transition-delay: .14s; }
.xp-room.is-in .xp-rbar > .xp-rbar__close { transition-delay: .2s; }
.xp-rbar__text { grid-area: text; max-width: 640px; }
.xp-rbar__where { margin: 0 0 6px; font-size: 14px; color: var(--amber); }
.xp-rbar__title { margin: 0; font-size: clamp(32px, 3.6vw, 56px); font-weight: 800; line-height: 1.3; }
.xp-rbar__desc { margin: 10px 0 0; max-width: 54ch; font-size: 17px; line-height: 1.7; color: rgba(244, 234, 219, .86); }
.xp-rbar__links { grid-area: links; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; max-width: none; }
.xp-rlink {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: rgba(10, 19, 34, .45); border: 1px solid var(--xp-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s var(--xp-out);
}
.xp-rlink[aria-current="true"] { color: var(--night); background: var(--amber); border-color: var(--amber); cursor: default; }
.xp-rlink:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .xp-rlink:not([aria-current]):hover { border-color: rgba(242, 181, 107, .5); } }
.xp-rbar__close {
  grid-area: close; align-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 14px; cursor: pointer; white-space: nowrap;
  border-radius: 999px; font-size: 15px; font-weight: 500; background: rgba(244, 234, 219, .1); border: 1px solid rgba(244, 234, 219, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .16s ease, border-color .16s ease, transform .16s var(--xp-out);
}
.xp-rbar__close .xp-i { width: 18px; height: 18px; }
.xp-rbar__close:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .xp-rbar__close:hover { background: rgba(244, 234, 219, .18); border-color: var(--amber); } }

/* «سجّل اهتمامك»: in reach at the top left in every state of the explorer, and still while the camera moves */
.xp-reg {
  position: absolute; top: 20px; left: max(20px, env(safe-area-inset-left)); z-index: 6; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px;
  border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--paper); text-decoration: none; white-space: nowrap;
  background: rgba(10, 19, 34, .55); border: 1px solid rgba(242, 181, 107, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
  pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s .25s, border-color .16s ease, background-color .16s ease, transform .16s var(--xp-out);
}
.xp-reg .xp-i { width: 18px; height: 18px; color: var(--amber); }
#explore.is-on .xp-reg { pointer-events: auto; visibility: visible; opacity: 1; transition: opacity .34s ease, visibility 0s, border-color .16s ease, background-color .16s ease, transform .16s var(--xp-out); }
.xp-reg:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .xp-reg:hover { border-color: var(--amber); background: rgba(10, 19, 34, .75); } }

@media (max-width: 719px) {
  .xp-rbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "links" "close"; padding: 90px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }   /* the close's long label gets the whole row */
  .xp-rbar__title { font-size: 28px; }
  .xp-rbar__desc { font-size: 15px; line-height: 1.6; margin-top: 6px; }
  .xp-rbar__links { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: none; margin: 4px -18px 0; padding: 0 18px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }   /* the cut tab fades: it scrolls */
  .xp-rbar__links::-webkit-scrollbar { display: none; }
  .xp-rbar__close { justify-self: start; max-width: 100%; min-height: 48px; font-size: 14px; padding: 0 16px 0 12px; }
  .xp-spot span { font-size: 14px; padding: 8px 12px; }
  .xp-reg, .xp-rback, .xp-apt__back { top: 14px; min-height: 44px; font-size: 14px; }
  .xp-reg { left: max(14px, env(safe-area-inset-left)); padding: 0 14px 0 12px; }
  .xp-rback { right: max(14px, env(safe-area-inset-right)); top: 64px; }   /* under «سجّل اهتمامك»: the two pills do not fit one row at 390 */
  .xp-apt__back { right: max(14px, env(safe-area-inset-right)); padding: 0 14px 0 10px; }   /* short: it shares the row with «احجز معاينة» */
}

/* the pick section's heading: a big lift numeral of the floor under the pointer, and its line, cross-fading */
.xp-pnum { position: relative; height: 0; pointer-events: none; }
.xp-pnum__s {
  position: absolute; top: -34px; right: var(--nx, 0px); display: grid; justify-items: start; gap: 2px;
  opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .2s ease, transform .3s var(--xp-out);
}
.xp-pnum__s.is-in { opacity: 1; transform: none; transition: opacity .35s var(--xp-out), transform .55s var(--xp-out); }
.xp-pnum__s small { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--haze); white-space: nowrap; }
.xp-pnum__s b { font-size: clamp(84px, 7.2vw, 120px); font-weight: 800; line-height: .9; color: var(--amber-hot); text-shadow: 0 0 40px rgba(255, 212, 154, .4); font-variant-numeric: tabular-nums; }
@media (max-width: 719px), (hover: none) { .xp-pnum { display: none; } }
@media (max-height: 820px) { .xp-pnum__s small { display: none; } }   /* short screens: the caption jammed under the header */

/* ------------------------------------------------------------------ the 3D flat (v5): the model stage and the walk */
/* At a stop there is the card, the dots, the small plan and two quiet links (back, «احجز معاينة»); nothing else.
   Turquoise marks where the visitor is: the current dot, the mark on the plan, the card's room. Amber is the way on. */
#explore { --xp-live: #2BC7B4; --xp-live-a: rgba(43, 199, 180, .7); }
.xp-apt { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.xp-apt[hidden], .xp-apt [hidden] { display: none; }
.xp-apt__pad { position: absolute; inset: 0; pointer-events: auto; touch-action: none; cursor: grab; }
.xp-apt.is-grab .xp-apt__pad { cursor: grabbing; }

/* the small line (the reel's «TOWER — LEVEL 18 — RESIDENCE 18.03») and under it the load */
.xp-apt__head { position: absolute; top: 20px; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 28px); display: grid; justify-items: center; gap: 4px;
  pointer-events: none; opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .2s ease, transform .25s cubic-bezier(.4, 0, 1, 1); }
.xp-apt.is-head .xp-apt__head { opacity: 1; transform: none; transition: opacity .5s var(--xp-out), transform .7s var(--xp-out); }
.xp-apt__line { margin: 0; min-height: 44px; padding: 0 18px; display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 13px; font-weight: 400; line-height: 1.7; color: rgba(244, 234, 219, .74);
  border: 1px solid transparent; border-radius: 999px; transition: background-color .5s ease, border-color .5s ease; }
/* the walk runs through bright rooms: there the line sits on glass, like the two links beside it */
.xp-apt[data-stage="walk"] .xp-apt__line { color: rgba(244, 234, 219, .86); background: rgba(10, 19, 34, .7); border-color: rgba(244, 234, 219, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.xp-apt[data-stage="walk"] .xp-apt__back, .xp-apt[data-stage="walk"]:not([hidden]) ~ .xp-reg { background-color: rgba(10, 19, 34, .7); }
.xp-apt__line > * + *::before { content: ""; display: inline-block; vertical-align: middle; width: 18px; height: 1px; margin-inline-end: 12px; background: rgba(244, 234, 219, .4); }
.xp-apt__line b { font-weight: 700; color: var(--paper); }
.xp-apt__load { margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; line-height: 1.7; color: var(--amber); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .4s ease; }
.xp-apt.is-load .xp-apt__load { opacity: 1; transition: opacity .3s ease .1s; }
.xp-apt[data-stage="walk"] .xp-apt__load { display: none; }
.xp-apt__load i { position: relative; width: 64px; height: 1px; background: rgba(242, 181, 107, .26); }
.xp-apt__load i::after { content: ""; position: absolute; inset: 0; background: var(--amber-hot); box-shadow: var(--glow); transform: scaleX(var(--p, 0)); transform-origin: right; transition: transform .3s ease; }   /* the amber light line fills from the start of the line */

#explore .xp-apt__back { pointer-events: auto; font-size: 15px; font-weight: 500; }   /* a quiet link, the size of «احجز معاينة» */
.xp-apt.is-in .xp-apt__back { opacity: 1; transform: none; transition: opacity .45s var(--xp-out) .1s, transform .6s var(--xp-out) .1s, border-color .16s ease; }

/* the model stage: one button and a hint, under the model */
.xp-apt__stage { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); margin-inline: auto; width: max-content; max-width: calc(100% - 36px); display: grid; justify-items: center; gap: 12px;
  pointer-events: auto; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .18s ease, transform .22s cubic-bezier(.4, 0, 1, 1); }
.xp-apt.is-in .xp-apt__stage { opacity: 1; transform: none; transition: opacity .5s var(--xp-out), transform .7s var(--xp-out); }
.xp-apt__go { min-width: 260px; }
.xp-apt__hint { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.6; color: rgba(244, 234, 219, .74); text-shadow: 0 1px 18px rgba(10, 19, 34, .8); transition: opacity .5s ease; }
.xp-apt__hint i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: xp-hhint 2.6s ease-out infinite; }
.xp-apt.is-used .xp-apt__hint { opacity: 0; }

/* the walk */
.xp-walk { position: absolute; inset: 0; pointer-events: none; }
.xp-wsheet { display: contents; }   /* the phone turns it into the bottom sheet that holds the card and the dots */
.xp-wcard, .xp-wnav, .xp-wplan { position: absolute; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); pointer-events: auto;
  opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .18s ease, transform .22s cubic-bezier(.4, 0, 1, 1); }
.xp-apt.is-in :is(.xp-wcard, .xp-wnav, .xp-wplan) { opacity: 1; transform: none; transition: opacity .5s var(--xp-out) var(--d, 0s), transform .7s var(--xp-out) var(--d, 0s); }
.xp-apt.is-move .xp-wcard { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .16s ease, transform .2s cubic-bezier(.4, 0, 1, 1); pointer-events: none; }   /* it leaves while the camera walks */
.xp-wcard { right: max(30px, env(safe-area-inset-right)); width: min(408px, calc(100% - 60px)); padding: 20px 24px 18px; isolation: isolate;
  background: linear-gradient(180deg, rgba(22, 39, 68, .8), rgba(10, 19, 34, .9) 70%); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--xp-line); border-radius: 24px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .07); }
.xp-wcard__eye { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: 13px; line-height: 1.7; color: var(--haze); }
.xp-wcard__eye i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--xp-live); box-shadow: 0 0 10px var(--xp-live-a); }
.xp-wcard__eye i + span { color: var(--paper); font-weight: 500; }
.xp-wcard__eye span + span::before { content: "·"; margin-inline-end: 8px; color: var(--amber); }
.xp-wcard__title { margin: 6px 0 0; font-size: 26px; font-weight: 800; line-height: 1.4; color: var(--paper); text-wrap: balance; }
.xp-wcard__line { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: rgba(244, 234, 219, .84); text-wrap: pretty; }
.xp-wcard__facts { margin: 14px 0 0; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 26px; border-top: 1px solid var(--xp-line); }   /* five facts (a garden on a basement floor) take a second row */
.xp-wcard__facts dt { font-size: 12px; line-height: 1.5; color: var(--haze); }
.xp-wcard__facts dd { margin: 1px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; white-space: nowrap; }

.xp-wnav { --d: .07s; left: 0; right: 0; margin-inline: auto; width: max-content; display: flex; align-items: center; gap: 2px; padding: 5px;
  background: rgba(10, 19, 34, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--xp-line); border-radius: 999px; }
.xp-wdots { display: flex; align-items: center; padding: 0 6px; }
.xp-wdot { position: relative; width: 20px; height: 44px; padding: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 999px; cursor: pointer; pointer-events: none; transition: width .4s var(--xp-out); }
@media (min-width: 1240px) and (hover: hover) and (pointer: fine) { .xp-wdot { pointer-events: auto; } }   /* a mouse on a wide window: a dot is a way to its stop. Elsewhere 20 px is no target: the dots only show the way */
.xp-wdot i { width: 7px; height: 7px; border-radius: 999px; background: rgba(244, 234, 219, .46); transition: width .4s var(--xp-out), background-color .2s ease, box-shadow .3s ease, transform .16s var(--xp-out); }
.xp-wdot[aria-current] { width: 38px; cursor: default; }
.xp-wdot[aria-current] i { width: 26px; background: var(--xp-live); box-shadow: 0 0 12px var(--xp-live-a); }
.xp-wdot::after, .xp-wstep[data-n]::after {   /* each dot names its room; at the last stop the way on names where it leads */
  content: attr(data-n); position: absolute; left: 50%; bottom: calc(100% + 12px); padding: 7px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--paper); background: rgba(10, 19, 34, .86); border: 1px solid var(--xp-line);
  opacity: 0; transform: translate(-50%, 4px); transition: opacity .12s ease, transform .16s var(--xp-out); }
.xp-wdot:focus-visible::after, .xp-wstep[data-n]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.xp-wstep { position: relative; flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--paper); background: transparent; border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, opacity .2s ease, transform .16s var(--xp-out), box-shadow .2s ease; }
.xp-wstep .xp-i { width: 18px; height: 18px; }
.xp-wstep[disabled] { opacity: .3; cursor: default; }
.xp-wstep:active:not([disabled]) { transform: scale(.94); }
.xp-wstep--next { color: var(--night) !important; background: var(--amber); box-shadow: 0 6px 18px -8px rgba(242, 181, 107, .8); }
.xp-wstep--next .xp-i { stroke-width: 2.2; }
.xp-wstep--next .xp-i + .xp-i, .xp-wstep--next.is-last .xp-i:first-child { display: none; }
.xp-wstep--next.is-last .xp-i + .xp-i { display: block; }
@media (hover: hover) and (pointer: fine) {
  .xp-wdot:not([aria-current]):hover i { background: var(--paper); transform: scale(1.4); }
  .xp-wdot:hover::after, .xp-wstep[data-n]:hover::after { opacity: 1; transform: translate(-50%, 0); }
  .xp-wstep:not(.xp-wstep--next):not([disabled]):hover { background: rgba(157, 176, 201, .12); border-color: var(--xp-line); }
  .xp-wstep--next:hover { background: var(--amber-hot); }
}

.xp-wplan { --d: .14s; left: max(30px, env(safe-area-inset-left)); padding: 7px; pointer-events: none;
  background: rgba(10, 19, 34, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--xp-line); border-radius: 18px; }
.xp-wplan__in { position: relative; overflow: hidden; direction: ltr; border-radius: 12px; }
.xp-wplan img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.xp-wplan__me { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.xp-wplan__me::before {   /* the view cone: explore.js turns the mark to the camera's yaw */
  content: ""; position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(from -33deg, rgba(43, 199, 180, .7) 0 66deg, transparent 66deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 96%); mask-image: radial-gradient(closest-side, #000 18%, transparent 96%); }
.xp-wplan__me::after { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--xp-live); box-shadow: 0 0 0 2px var(--night), 0 0 10px 2px var(--xp-live-a); }

/* Below the wide desktop there are three layouts, and a window is in exactly one of them:
   column  720 to 1239 px wide and at least 540 px high (a tablet on its side, a small desktop window)
   sheet   up to 719 px wide and at least 540 px high, or upright up to 999 px wide (a phone, an upright tablet)
   bar     wider than high and under 540 px high (a phone on its side)
   In all three the dots only show the way (the two steps, the wheel, the keys and a swipe walk it): nine dots cannot
   each be a 44 px target. Whatever the layout, the card keeps out of the middle fifth of the view, where the walk looks. */

/* column: the dots would run into the card, so they sit on top of it; the column keeps to the outer 40% of the width */
@media (min-width: 720px) and (max-width: 1239px) and (orientation: landscape) and (min-height: 540px), (min-width: 1000px) and (max-width: 1239px) and (orientation: portrait) {
  .xp-wsheet { position: absolute; right: max(30px, env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); width: min(408px, calc(40vw - 30px)); display: flex; flex-direction: column-reverse; gap: 10px; }
  .xp-wcard, .xp-wnav { position: static; width: auto; margin: 0; }
  .xp-wnav { justify-content: space-between; }
  .xp-wdots { flex: 1; min-width: 0; justify-content: center; }   /* a flat with many stops: the dots close up, the row never outgrows the card */
  .xp-wdot { flex: 0 1 20px; min-width: 10px; }
  .xp-wdot[aria-current] { flex-basis: 38px; min-width: 28px; }
}
@media (min-width: 720px) and (max-width: 999px) and (orientation: landscape) and (min-height: 540px), (min-width: 720px) and (max-width: 1239px) and (orientation: landscape) and (min-height: 540px) and (max-height: 719px) {
  .xp-wcard { padding: 16px 20px 16px; }
  .xp-wcard__title { font-size: 22px; }
  .xp-wcard__facts { display: none; }   /* no room for them: the card stays low */
}

/* sheet and bar: what they share */
@media (max-width: 719px), (max-width: 999px) and (orientation: portrait), (orientation: landscape) and (max-height: 539px) {
  #explore .xp-apt__back { font-size: 14px; }
  .xp-apt__line { padding: 0 14px; font-size: 12px; gap: 8px; }
  .xp-apt__line > * + *::before { width: 10px; margin-inline-end: 8px; }
  .xp-apt__hint { font-size: 13px; }
  .xp-wsheet { position: absolute; display: flex; pointer-events: auto; }
  .xp-wcard, .xp-wnav, .xp-apt.is-in :is(.xp-wcard, .xp-wnav) { position: static; width: auto; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none; }
  .xp-apt.is-move .xp-wcard { opacity: 0; transform: none; transition: opacity .25s ease; }
  .xp-wcard__facts { display: none; }
  .xp-wnav, .xp-apt.is-in .xp-wnav { display: flex; justify-content: space-between; }
  .xp-wstep:not(.xp-wstep--next) { border-color: var(--xp-line); }
  .xp-wdots { flex: 1; min-width: 0; justify-content: center; }   /* a flat with many stops: the dots close up, the row never outgrows the phone */
  .xp-wdot { flex: 0 1 20px; min-width: 12px; }
  .xp-wdot[aria-current] { flex-basis: 38px; min-width: 30px; }
  .xp-wdot::after, .xp-wstep[data-n]::after { display: none; }
  .xp-wplan { left: max(14px, env(safe-area-inset-left)); padding: 5px; border-radius: 14px; }
  .xp-wplan__in { border-radius: 10px; }
  .xp-wplan__me::before { left: -26px; top: -26px; width: 52px; height: 52px; }
}

/* sheet: the line under the two links, the plan small in the top corner, the card and the dots in a short bottom sheet */
@media (max-width: 719px) and (min-height: 540px), (max-width: 999px) and (orientation: portrait) {
  .xp-apt__head { top: calc(66px + env(safe-area-inset-top, 0px)); }
  .xp-apt__line { min-height: 32px; }
  .xp-apt__stage { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 36px); max-width: 440px; }
  .xp-apt__go { width: 100%; min-width: 0; }
  .xp-wsheet {
    left: 0; right: 0; bottom: 0; flex-direction: column-reverse; gap: 12px; padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(22, 39, 68, .9), rgba(10, 19, 34, .96) 40%); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--xp-line); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .6);
    transform: translate3d(0, 105%, 0); transition: transform .32s cubic-bezier(.5, 0, .75, 0);
  }
  .xp-apt.is-in .xp-wsheet { transform: none; transition: transform .55s var(--xp-sheet); }
  /* the dots lead and the words follow under them: while the camera walks the sheet ducks to its row of dots (as v4's
     sheet peeks) and the room shows; at the stop it rises with the new words */
  .xp-apt.is-in.is-move .xp-wsheet, .xp-apt.is-in.is-free .xp-wsheet { transform: translate3d(0, calc(100% - 68px), 0); }   /* the free walk too: the room shows, the dots stay */
  .xp-wcard { min-height: 98px; }
  .xp-wcard__title { margin-top: 2px; font-size: 22px; }
  .xp-wcard__line { margin-top: 4px; font-size: 14px; line-height: 1.7; }
  .xp-wnav, .xp-apt.is-in .xp-wnav { width: 100%; max-width: 440px; align-self: center; }
  .xp-wplan { bottom: auto; top: calc(108px + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 359px) {   /* the narrowest phones: the two links still share their row */
  .xp-apt:not([hidden]) ~ .xp-reg, #explore .xp-apt__back { gap: 6px; font-size: 13px; }
  .xp-apt:not([hidden]) ~ .xp-reg { padding: 0 10px 0 8px; }
  .xp-apt__back { padding: 0 10px 0 6px; }
}

/* bar: the line shares the row of the two links; the words, the dots and the two steps make one low bar along the foot,
   with the plan small at its left where the window is wide enough for both */
@media (orientation: landscape) and (max-height: 539px) {
  .xp-apt__stage { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .xp-wsheet {
    left: 162px; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); align-items: center; gap: 16px; padding: 8px 18px 8px 8px;
    background: linear-gradient(180deg, rgba(22, 39, 68, .86), rgba(10, 19, 34, .94) 70%); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--xp-line); border-radius: 22px; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .65);
    opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .18s ease, transform .22s cubic-bezier(.4, 0, 1, 1);
  }
  .xp-apt.is-in .xp-wsheet { opacity: 1; transform: none; transition: opacity .5s var(--xp-out), transform .7s var(--xp-out); }
  .xp-wcard { flex: 1 1 0; min-width: 0; }
  .xp-wcard__eye { font-size: 12px; }
  .xp-wcard__title { margin-top: 0; font-size: 19px; }
  .xp-wcard__line { margin-top: 2px; font-size: 13px; line-height: 1.65; }
  .xp-wnav, .xp-apt.is-in .xp-wnav { flex: 0 1 300px; min-width: 0; }
  .xp-wplan { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (orientation: landscape) and (max-height: 539px) and (max-width: 799px) {
  .xp-wplan { display: none; }   /* the bar needs the whole width */
  .xp-wsheet { left: max(14px, env(safe-area-inset-left)); }
}
@media (orientation: landscape) and (max-height: 539px) and (max-width: 719px) {
  .xp-apt__head { top: 14px; }
  .xp-wnav, .xp-apt.is-in .xp-wnav { flex-basis: 252px; }   /* the dots close up a little: the sentence keeps to one line */
  .xp-apt__line > :first-child, .xp-apt__line > :first-child + *::before { display: none; }   /* between the two links there is room for the floor and the flat only */
}

/* ------------------------------------------------------------------ reduced motion: everything settles at once */
html[data-motion="none"] #explore *, html[data-motion="none"] #explore, html[data-motion="none"] .picklist *, html[data-motion="none"] .xp-tag *,
html[data-motion="none"] .xp-hhint, html[data-motion="none"] .xp-hhint * {
  transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important;
}

/* the free walk (W A S D): a quiet line under the header, only where there is a keyboard; off the rail the stop's card steps aside */
.xp-wkeys { position: absolute; top: calc(96px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; background: rgba(20, 24, 38, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--haze); font-size: 13px; line-height: 1.7; white-space: nowrap; max-width: calc(100% - 300px); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.xp-apt.is-in .xp-wkeys, .xp-apt.is-free .xp-wkeys { opacity: 1; }
.xp-wkeys kbd { direction: ltr; font: 600 11px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; padding: 4px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .28); color: var(--paper); }
.xp-wkeys .k { display: inline-flex; gap: 4px; }
.xp-wkeys .r, .xp-wkeys .f { margin-inline-start: 6px; }
.xp-wkeys .f, .xp-apt.is-free .xp-wkeys .r { display: none; }
.xp-apt.is-free .xp-wkeys .f { display: inline; color: var(--paper); }
.xp-apt.is-free .xp-wcard { opacity: 0; transform: translate3d(0, 10px, 0); pointer-events: none; }
@media (hover: none), (max-width: 719px) { .xp-wkeys { display: none; } }
@media (prefers-reduced-motion: reduce) { .xp-wkeys { transition: none; } }

/* the thumb stick: the free walk on a touch screen (up and down walk, left and right turn); a second finger on the view looks around */
.xp-wstick { display: none; }
@media (hover: none) and (pointer: coarse) {
  .xp-wstick { display: block; position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: 228px; width: 108px; height: 108px; border-radius: 50%;
    background: rgba(20, 24, 38, .4); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    pointer-events: auto; touch-action: none; opacity: 0; transition: opacity .4s ease; -webkit-tap-highlight-color: transparent; }
  .xp-apt.is-in .xp-wstick { opacity: 1; }
  .xp-wstick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(244, 240, 233, .86); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .14s ease, background-color .2s ease; }
  .xp-wstick.is-on i { transition: background-color .2s ease; background: var(--xp-live); }
}
@media (prefers-reduced-motion: reduce) { .xp-wstick, .xp-wstick i { transition: none; } }

/* «اعثر على شقتك»: filter chips above the floor list; the floors without a match fade, the building lights the others */
.xp-fit { margin: 22px 0 10px; }
.xp-fit__h { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--amber); }
.xp-fit__row { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-fit__b { min-height: 40px; padding: 0 15px; border-radius: 999px; font: inherit; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer;
  color: var(--paper); background: rgba(10, 19, 34, .42); border: 1px solid var(--xp-line); -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--xp-out); }
.xp-fit__b:active { transform: scale(.96); }
.xp-fit__b:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.xp-fit__b[aria-pressed="true"] { color: var(--night); background: var(--amber); border-color: var(--amber); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .xp-fit__b:not([aria-pressed="true"]):hover { border-color: rgba(242, 181, 107, .5); } }
.xp-fit__out { margin: 8px 0 0; min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--haze); }
.xp-fit__out:empty { min-height: 0; margin: 0; }
.picklist__b { transition: background-color .16s ease, border-color .16s ease, transform .16s var(--xp-out), opacity .3s ease; }
.picklist__b.is-off { opacity: .38; }
.picklist__n.is-fit { color: var(--amber-hot); font-weight: 700; }
.xp-row.is-miss:not(.is-sel), .xp-pin.is-miss:not(.is-sel):not(.is-hot) { opacity: .32; }
@media (max-width: 759px) {   /* one row that scrolls sideways: the list keeps its place */
  .xp-fit { margin: 18px 0 8px; }
  .xp-fit__row { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut, 20px)); padding: 2px var(--gut, 20px); scrollbar-width: none; }
  .xp-fit__row::-webkit-scrollbar { display: none; }
  .xp-fit__b { min-height: 44px; flex: none; }
}
@media (max-height: 820px) and (min-width: 760px) { .xp-fit { margin: 12px 0 6px; } .xp-fit__h { margin-bottom: 6px; } .xp-fit__b { min-height: 36px; } }

/* share a flat: a quiet line under the card's two buttons */
.xp-share { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin: 0;
  font: inherit; font-size: 14px; color: var(--haze); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: color .16s ease, transform .16s var(--xp-out); }
.xp-share .xp-i { width: 17px; height: 17px; color: var(--amber); }
.xp-share:active { transform: scale(.97); }
.xp-share:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.xp-share.is-done { color: var(--amber-hot); }
@media (hover: hover) and (pointer: fine) { .xp-share:hover { color: var(--paper); } }

/* a duplex's stair stop: the way to its other level */
.xp-wlevel { margin-top: 12px; min-height: 46px; padding: 0 18px; font-size: 15px; }
.xp-wlevel[hidden] { display: none; }
@media (max-width: 719px) { .xp-wlevel { margin-top: 8px; min-height: 44px; width: 100%; } }