/* ===========================================================
   Urealm — الهيكل: الشريط العلويّ، والدرج، والمنفذ.

   ▸ **الشريط العلويّ خطٌّ لا صندوق.** حدٌّ سفليّ واحد يفصله عن
     المحتوى، بلا ظلٍّ ولا سطحٍ مرتفع. الارتفاع البصريّ يُدّخر
     للطبقات التي تطفو فعلًا — القوائم والحوارات — فيبقى له معنًى.

   ▸ والقياس محفوظ: `--measure` سبعون محرفًا. سطرٌ أطول يجعل العين
     تضيّع بدايته عند العودة، والعربية أشدّ في هذا من اللاتينية.
   =========================================================== */

.app-root { block-size: 100dvh; overflow: hidden; }

.shell {
  display: grid;
  grid-template-columns: auto 1fr;
  block-size: 100dvh;
  overflow: hidden;
}

.is-chrome-hidden .shell { grid-template-columns: minmax(0, 1fr); }

.shell__main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 100dvh;
  overflow: hidden;
}

.outlet {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
}

/* **ولا انتقال على الحاشية.** كان `transition: padding` هنا، فكان
   عرض المنفذ يتحرّك عند كلّ فتحةِ صفحة — لا عند تبديل الوضع الغامر
   وحده. والجدار يقيس عرضه ليوزّع، و`ResizeObserver` يوقظه في كلّ
   إطارٍ من الحركة: فيوزَّع على ٣٤٠ ثمّ ٣٦٦ ثمّ ٣٧٦، وترتفع البطاقات
   وتنخفض أمام صاحبها في كلّ مرّة.

   وحفظُ النِّسب سلفًا إنّما كان ليقف الجدار كاملًا في أوّل إطار —
   فحركةٌ في حاشية أبيه تهدم ما بُني له. والوضع الغامر يطفئ الانتقال
   عند الدخول أصلًا (`chrome.css`)، فلم يكن يعمل إلّا عند الخروج
   منه: ثمنٌ يُدفع في كلّ صفحة مقابل انسيابةٍ في حالةٍ واحدة. */

/* كل صفحة قابلة للتمرير تملأ المنفذ بدل أن تتمدّد بطول محتواها خلف
   القصّ الخاص بالغلاف. المحور الأفقي يُخفى لأن الأغلفة الكاملة تستخدم
   هوامش سالبة مقصودة، ولا ينبغي أن تنشئ شريط تمرير وهميًّا. */
.outlet > .scroll-y {
  block-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.view { animation: view-enter var(--dur-3) var(--ease-out) both; }

@keyframes view-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

:root[data-motion="reduced"] .view { animation: none; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .outlet { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  [data-route="studio"] .outlet { padding: 0 0 var(--sp-12); }
}

/* ----------------------- تخطّي إلى المحتوى ----------------------- */

.skip-link {
  position: fixed;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--fg);
  color: var(--bg-base);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  /* لا `display: none`: من يخفيه بالعرض يمنع التركيز عليه أصلًا. */
  transform: translateY(calc(-100% - var(--sp-4)));
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus-visible { transform: none; outline-offset: 3px; }

/* ----------------------- الشريط العلويّ ----------------------- */

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--topbar-h);
  padding-inline: var(--sp-4);
  padding-block-start: var(--safe-t);
  border-block-end: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(150%);
}

.topbar__start,
.topbar__end { display: flex; align-items: center; gap: var(--sp-1); flex: none; }

.topbar__center { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-inline-size: 0; }

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
  transition: background-color var(--dur-1) var(--ease);
}

.topbar__brand:hover { background: var(--hover); text-decoration: none; }

.topbar__back {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--r-sm);
  color: var(--fg-soft);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.topbar__back:hover { background: var(--hover); color: var(--fg); }
/* السهم يشير إلى الخلف في الاتجاهين، لا إلى اليسار دائمًا. */
:root[dir="rtl"] .topbar__back svg { transform: scaleX(-1); }

/* ---------- البحث ---------- */

.topbar__search {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-inline-size: 0;
  max-inline-size: 340px;
  flex: 1;
  min-block-size: var(--tap);
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--fg-mute);
  font-size: var(--t-sm);
  text-align: start;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.topbar__search:hover { border-color: var(--line-strong); color: var(--fg-soft); }
.topbar__search-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar__kbd {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-faint);
}

@media (max-width: 560px) {
  .topbar__search-label,
  .topbar__kbd { display: none; }
  .topbar__search { flex: none; inline-size: var(--tap); justify-content: center; padding-inline: 0; }
}

/* ---------- الحساب ---------- */

.topbar__account {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--r-full);
  transition: background-color var(--dur-1) var(--ease);
}

.topbar__account:hover { background: var(--hover); }

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

.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-inline-size: 0;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--fg-mute);
  font-size: var(--t-sm);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.crumb:hover { background: var(--hover); color: var(--fg); text-decoration: none; }

/* آخر فتاتٍ ليس رابطًا: هو المكان الذي أنت فيه. */
.crumb--static { color: var(--fg); font-weight: var(--w-medium); }
.crumb--static:hover { background: none; }

.crumb__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crumb__caret { flex: none; color: var(--fg-faint); opacity: 0.7; }
:root[dir="rtl"] .crumb__caret { transform: scaleX(-1); }

/* ----------------------- الدرج ----------------------- */

.shell__drawer {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-rail);
  block-size: 100dvh;
  flex: none;
}

/* العتمة مقيمةٌ في الشجرة دائمًا — يبثّها `AppShell` مرّةً ولا
   تُنزَع. فلا يجوز أن تُفتح بحركةٍ تلقائية: **بلا `pointer-events:
   none` تبتلع كل لمسةٍ على الجوال والدرج مغلق**، فتبدو الواجهة
   ميّتة. تُفتح بالصنف وحده. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  /* أسفل الدرج مباشرةً حتى لا تبتلع نقراته. */
  z-index: calc(var(--z-drawer) - 5);
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}

@media (min-width: 761px) { .drawer-scrim { display: none; } }

@media (max-width: 760px) {
  /* الغلاف بلا عرضٍ ولا لمس: هو مرجعُ الموضع لا سطحٌ يُلمس. ولولا
     `pointer-events: none` لابتلع عمودًا كامل الارتفاع من كل شاشة
     على الجوال والدرج مغلق. ويبقى بلا `transform`: من يحوّل أصلًا
     يجعله المرجعَ لأبنائه الثابتين، فيفقد ما بداخله ثباته بالنسبة
     للشاشة. */
  .shell__drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: auto;
    overflow: visible;
    pointer-events: none;
    z-index: var(--z-drawer);
  }

  /* الدرج ينزلق **تحت** الشريط العلويّ لا فوقه: الزرّ الذي فتحه يبقى
     ظاهرًا وقابلًا للّمس، فيغلقه صاحبه. حين كان يعلوه كان يغطّي زرّه،
     فلا يبقى للخروج إلا التعتيم — ومن لم يعرف ذلك ظنّ الواجهة عالقة. */
  .shell__drawer > .rail {
    position: fixed;
    inset-block-start: calc(var(--topbar-h) + var(--safe-t));
    inset-block-end: 0;
    inset-inline-start: 0;
    pointer-events: auto;
    box-shadow: var(--shadow-3);
    transform: translateX(calc(var(--flip, 1) * -110%));
    transition: transform var(--dur-3) var(--ease);
  }

  .topbar { z-index: calc(var(--z-drawer) + 2); }

  /* وللشريط أرضٌ حين ينفتح الدرج، وإلا قُرئ نصّه فوق حافّته. */
  .is-drawer-open .topbar { background: var(--bg-base); }

  .drawer-scrim { inset-block-start: calc(var(--topbar-h) + var(--safe-t)); }
  .is-drawer-open .shell__drawer > .rail { transform: none; }
  .is-drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
}

/* ----------------------- استثناء الإعدادات ----------------------- */

/* الإعدادات تدير هوامشها بنفسها: لوحةٌ ثابتة وقائمةٌ تُمرَّر، ولا
   يصحّ أن يضيف المنفذ فوقها هامشًا يزيح اللوحة عن أعلى الشاشة. */
[data-route="settings"] .outlet,
[data-route="studio"] .outlet { padding: 0; }

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

/* Hidden scrollbars must not reserve a phantom gutter. */
.outlet > .scroll-y {
  scrollbar-gutter: auto;
}