/* ===========================================================
   Urealm — الشريط السفليّ وصفيحة الجوال.

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

   ▸ والحالة الجارية تُقرأ بثلاثة أشياء معًا — حبرٌ أقوى، ووزنٌ أثقل،
     وعلامةٌ فوق الأيقونة — فلا تعتمد على لونٍ وحده.

   ▸ وصفيحة الجوال هنا **منطوقةٌ بـ`.sheet-root`**: `shell/Chrome.js`
     يبثّ `.sheet` نفسه للوحة أدوات المساحة، والنطاق يفصل الاثنين.
   =========================================================== */

.tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-rail);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding-block: var(--sp-1);
  padding-block-end: calc(var(--sp-1) + var(--safe-b));
  padding-inline: var(--sp-2);
  border-block-start: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
}

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

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-block-size: 52px;
  padding: var(--sp-1);
  border-radius: var(--r-md);
  color: var(--fg-mute);
  font-size: var(--t-2xs);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

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

.tabbar__glyph {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 22px;
}

.tabbar__label {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--w-medium);
}

/* الحالة الجارية: حبرٌ كامل ووزنٌ أثقل — **ولا نقطة**.

   كانت نقطةٌ صغيرة تعلو أيقونة الحالي، وقد حُذفت بطلبٍ صريح. وهي
   زائدةٌ فعلًا: الحبر الكامل والوزن الأثقل يقولان «أنت هنا» مرّتين
   أصلًا، والثالثة زخرفةٌ تزاحم الأيقونة على مساحةٍ ضيّقة. */
.tabbar__item.is-active { color: var(--fg); }
.tabbar__item.is-active .tabbar__label { font-weight: var(--w-semi); }

/* الفعل الأوّل انقلابٌ: حبرٌ على أرض الحبر. */
.tabbar__item--primary { color: var(--fg-soft); }

.tabbar__item--primary .tabbar__glyph {
  inline-size: 36px;
  block-size: 30px;
  border-radius: var(--r-md);
  background: var(--fg);
  color: var(--bg-base);
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}

.tabbar__item--primary:hover .tabbar__glyph { opacity: 0.85; }
.tabbar__item--primary:active .tabbar__glyph { transform: scale(0.94); }

/* ===========================================================
   صفيحة الجوال
   =========================================================== */

.sheet-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.sheet-root .sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--dur-2) var(--ease);
}

.sheet-root .sheet {
  position: relative;
  inline-size: min(560px, 100%);
  max-block-size: 84dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + var(--safe-b));
  border-block-start: 1px solid var(--line);
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  /* تبدأ خارج الشاشة: الحركة تُعلن من أين جاءت. */
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-gate);
}

.sheet-root.is-open .sheet-scrim { opacity: 1; }
.sheet-root.is-open .sheet { transform: none; }

.sheet-root.is-closing .sheet-scrim { opacity: 0; }
.sheet-root.is-closing .sheet { transform: translateY(100%); }

.sheet-root .sheet__grip {
  align-self: center;
  inline-size: 36px;
  block-size: 4px;
  margin-block: var(--sp-1) var(--sp-2);
  border-radius: var(--r-full);
  background: var(--line-strong);
}

.sheet-root .sheet__title {
  padding-inline: var(--sp-3);
  padding-block-end: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
}

.sheet-root .sheet__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-block-size: 0;
}

.sheet-root .sheet__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  text-align: start;
  transition: background-color var(--dur-1) var(--ease);
}

.sheet-root .sheet__item:hover { background: var(--hover); }
.sheet-root .sheet__item:active { background: var(--active); }
.sheet-root .sheet__item.is-danger { color: var(--danger); }

.sheet-root .sheet__glyph {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
}

.sheet-root .sheet__item.is-danger .sheet__glyph { color: var(--danger); border-color: var(--danger-soft); }

.sheet-root .sheet__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
  flex: 1;
}

.sheet-root .sheet__label {
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-root .sheet__desc {
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--fg-mute);
}

.sheet-root .sheet__cancel {
  min-block-size: 48px;
  margin-block-start: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  transition: background-color var(--dur-1) var(--ease);
}

.sheet-root .sheet__cancel:hover { background: var(--bg-elevated); }