/* ===========================================================
   Urealm — المشاهد.

   ▸ كل مشهد يبدأ بترويسةٍ واحدة ثم محتواه. لا صناديق داخل صناديق:
     المسافة تبني التسلسل، والحدّ يُستدعى حين يجب أن يُقرأ الفصل.
   =========================================================== */

.view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  max-inline-size: var(--measure);
  margin-inline: auto;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
}

.view__center { display: grid; place-items: center; min-block-size: 60dvh; }

/* المساحة تملأ ما أُعطيت بلا حدود ولا هوامش. */
.view--space { max-inline-size: none; gap: 0; block-size: 100%; }
.view--welcome { max-inline-size: none; block-size: 100%; }

.space-frame {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 100dvh;
  border: 0;
  background: var(--bg-void);
  display: block;
}

/* ----------------------- ترويسة اللوحة ----------------------- */

.panel__head { display: flex; align-items: flex-start; gap: var(--sp-4); min-inline-size: 0; }

.panel__title {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-display);
}

.panel__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; flex-wrap: wrap; }
.panel__note { font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-body); max-inline-size: var(--measure-text); }

/* ----------------------- المشهد ----------------------- */

.scene { display: flex; flex-direction: column; gap: var(--sp-7); }

.scene__head { display: flex; flex-direction: column; gap: var(--sp-2); }

.scene__greeting {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.scene__stage { display: flex; flex-direction: column; gap: var(--sp-5); }
.scene__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.scene__cell { min-inline-size: 0; }
.scene__recent { display: flex; flex-direction: column; gap: var(--sp-3); }
.scene__spark { font-size: var(--t-sm); color: var(--fg-mute); }
.scene__none { padding: var(--sp-8); text-align: center; color: var(--fg-mute); font-size: var(--t-sm); }

.scene__void {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
  text-align: center;
}

.scene__void-title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--w-medium); }
.scene__void-body { max-inline-size: 48ch; font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-body); }
.scene__void-name { font-weight: var(--w-medium); color: var(--fg); }

/* ----------------------- الطبقات الثلاث ----------------------- */

.layers { display: flex; flex-direction: column; gap: var(--sp-2); }

.layer {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}

.layer__rank {
  flex: none;
  inline-size: 26px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.layer__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.layer__name { font-size: var(--t-base); font-weight: var(--w-medium); }
.layer__line { font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-snug); }
.layer__example { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); }
.layer__chevron { flex: none; color: var(--fg-faint); }
:root[dir="rtl"] .layer__chevron { transform: scaleX(-1); }

/* ----------------------- المسار ----------------------- */

.track { display: flex; flex-direction: column; gap: var(--sp-3); }
.track__title { display: block; font-size: var(--t-md); font-weight: var(--w-medium); font-family: var(--font-display); }

.track__step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}

.track__tick {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
}

.track__text { flex: 1; min-inline-size: 0; font-size: var(--t-sm); line-height: var(--lh-snug); }
.track__note { display: block; margin-block-start: 2px; font-size: var(--t-xs); color: var(--fg-mute); }

@media (max-width: 560px) {
  .panel__head { flex-wrap: wrap; }
  .panel__head > .panel__note { flex-basis: 100%; }
  .view--welcome .panel__actions { inline-size: 100%; }
  .view--welcome .panel__actions > * { flex: 1 1 160px; }
}

/* ----------------------- البذرة ----------------------- */

.seed {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}

.seed--inline { display: inline-flex; padding: var(--sp-2) var(--sp-3); border-style: solid; }
.seed__glyph { font-size: var(--t-lg); }
.seed__label { font-size: var(--t-xs); color: var(--fg-mute); }

/* ----------------------- مساحة فارغة ----------------------- */

.blank-space {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  min-block-size: 70dvh;
  padding: var(--sp-8);
  text-align: center;
}

.blank-space__mark {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  color: var(--fg-faint);
}

.blank-space__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--w-medium); }
.blank-space__body { max-inline-size: 46ch; font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-body); }
.blank-space__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.blank-space__hint { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }

/* ----------------------- الترحيب ----------------------- */

.welcome-hero {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-12) var(--sp-8);
  text-align: center;
}

.welcome-hero__mark {
  display: grid;
  place-items: center;
  inline-size: 60px;
  block-size: 60px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
}

.welcome-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--t-2xl), 6vw, var(--t-3xl));
  font-weight: var(--w-medium);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.welcome-hero__lede {
  max-inline-size: 52ch;
  font-size: var(--t-md);
  color: var(--fg-soft);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.welcome-hero__where { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }
.welcome-outro__body { max-inline-size: var(--measure-text); font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-body); }

/* الرئيسية وصفحة العالم جدارٌ لا نصّ. و`--measure` قياسُ قراءةٍ
   (سبعون محرفًا) يخنق الجدار إلى عمودين على شاشةٍ تسع خمسة. الحدّ
   يبقى للنصّ داخلهما — الوصف والعناوين تحمل `--measure-text`. */
.view--home,
.view--realm { max-inline-size: 1180px; }

.view--realms,
.view--spaces { max-inline-size: 1180px; }

/* ===== بنر صفحة العالم — غلاف صفحة لا بطاقة ===== */
[data-route="realm"] .outlet { padding-block-start: 0; }

.view--realm .realm-head > .banner--realm {
  align-self: stretch;
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0 0 var(--sp-3);
  aspect-ratio: 16 / 5;
  min-block-size: 150px;
  max-block-size: 270px;
  border: 0;
  border-radius: 0;
}

@media (max-width: 760px) {
  /* راحة الجوال: لا قص لأول حرف، وآخر المحتوى يبقى فوق الشريط. */
  .outlet {
    padding-inline: max(18px, calc(var(--sp-4) + env(safe-area-inset-left)))
                    max(18px, calc(var(--sp-4) + env(safe-area-inset-right)));
  }

  .view--home.scroll-y::after,
  .view--realms.scroll-y::after,
  .view--spaces.scroll-y::after,
  .view--realm.scroll-y::after {
    content: "";
    display: block;
    block-size: 34px;
    inline-size: 1px;
    pointer-events: none;
  }

  .page,
  .realm,
  .home__head,
  .realm-head {
    padding-inline: 2px;
  }

  .page__title,
  .home__greeting,
  .realm-head__name,
  .realm-head__desc,
  .realm-head__meta {
    padding-inline-start: 4px;
    padding-inline-end: 2px;
  }

  [data-route="realm"] .outlet {
    padding: 0 0 var(--sp-12);
  }

  .view--realm {
    --realm-content-gutter: 18px;
    max-inline-size: none;
    margin-inline: 0;
  }

  .view--realm .realm,
  .view--realm .realm-head {
    padding-inline: 0;
  }

  .view--realm .realm-head > .banner--realm {
    inline-size: 100%;
    max-inline-size: 100%;
    margin: 0 0 var(--sp-4);
    aspect-ratio: 2.35 / 1;
    min-block-size: 168px;
    max-block-size: 210px;
    border: 0;
    border-radius: 0;
  }

  .view--realm .realm-head > :not(.realm-hero) {
    margin-inline: var(--realm-content-gutter);
  }

  .view--realm .realm > .wall {
    inline-size: calc(100% - var(--realm-content-gutter) - var(--realm-content-gutter));
    margin-inline: var(--realm-content-gutter);
  }
}



/* ===== Realm immersive hero ===== */
[data-route="realm"] .topbar { display: none; }
[data-route="realm"] .outlet { padding: 0 0 var(--sp-10); }

.realm-hero {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-surface-2);
}

.view--realm {
  --realm-content-gutter: clamp(22px, 4vw, 64px);
  --realm-content-max: 1380px;
  max-inline-size: none;
  margin-inline: 0;
  inline-size: 100%;
}

.view--realm .realm {
  gap: clamp(20px, 2vw, 28px);
}

.view--realm .realm-head > .realm-hero {
  margin: 0 0 clamp(18px, 2vw, 26px);
}

.view--realm .realm-hero > .banner--realm {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  block-size: clamp(240px, 22vw, 390px);
  min-block-size: 0;
  max-block-size: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.realm-hero__back {
  position: absolute;
  z-index: 10;
  inset-block-start: max(12px, env(safe-area-inset-top));
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 15px;
  color: #fff;
  background: rgb(255 255 255 / 11%);
  box-shadow: 0 7px 24px rgb(0 0 0 / 15%);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.realm-hero__back[data-tone="light"] {
  color: #111;
  background: rgb(0 0 0 / 10%);
  border-color: rgb(0 0 0 / 14%);
  box-shadow: 0 7px 24px rgb(255 255 255 / 8%);
}
.realm-hero__back:hover { background-color: rgb(255 255 255 / 18%); }
.realm-hero__back[data-tone="light"]:hover { background-color: rgb(0 0 0 / 16%); }
.realm-hero__back:active { transform: scale(.94); }
.realm-hero__back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.realm-hero__back svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 22%)); }

.view--realm .realm-head__row,
.view--realm .realm-head__desc,
.view--realm .realm-head__meta,
.view--realm .realm > .wall {
  inline-size: min(calc(100% - (var(--realm-content-gutter) * 2)), var(--realm-content-max));
  margin-inline: auto;
}

/* Desktop canvas: use the screen instead of stretching a phone column. */
@media (min-width: 1100px) {
  .view--home,
  .view--realms,
  .view--spaces {
    max-inline-size: 1440px;
  }

  .view--home { gap: 26px; }
  .view--home .home__greeting { font-size: clamp(30px, 2.15vw, 38px); }

  .view--realm .realm-head__row { gap: 16px; }
  .view--realm .realm-head__name { font-size: clamp(30px, 2.4vw, 42px); }
  .view--realm .realm-head__desc { font-size: var(--t-base); }

  .realm-hero__back {
    inset-block-start: 18px;
    inset-inline-start: 22px;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
  }
}

@media (max-width: 760px) {
  [data-route="realm"] .outlet { padding: 0 0 var(--sp-12); }
  .view--realm { --realm-content-gutter: 18px; }

  .view--realm .realm,
  .view--realm .realm-head { padding-inline: 0; }

  .view--realm .realm-head > .realm-hero { margin-block-end: var(--sp-4); }
  .view--realm .realm-hero > .banner--realm {
    block-size: clamp(190px, 42vw, 290px);
    aspect-ratio: auto;
  }

  .realm-hero__back {
    inset-block-start: max(12px, env(safe-area-inset-top));
    inset-inline-start: 14px;
    inline-size: 43px;
    block-size: 43px;
    border-radius: 14px;
  }

  .view--realm .realm-head > :not(.realm-hero) {
    margin-inline: var(--realm-content-gutter);
  }

  .view--realm .realm-head__row,
  .view--realm .realm-head__desc,
  .view--realm .realm-head__meta {
    inline-size: auto;
    margin-inline: 0;
  }

  .view--realm .realm > .wall {
    inline-size: calc(100% - (var(--realm-content-gutter) * 2));
    margin-inline: var(--realm-content-gutter);
  }
}

/* Keep realm identity aligned to one content edge on desktop. The old
   readable-text max width centered the description by itself, making the
   header look scattered across a wide monitor. */
.view--realm .realm-head__desc {
  max-inline-size: none;
}