/* ===========================================================
   Urealm — العُدّة.

   ▸ **الفعل الأوّل انقلابٌ لا صبغة.** `‎.btn--primary‎` حبرٌ على أرض
     الحبر: أسود على الفاتح، أبيض على الداكن. أقوى تباينٍ في الصفحة
     يذهب إلى الشيء الذي نريد أن يُضغط — ولو صُبغ بلونٍ لصار واحدًا
     من ألوانٍ تتزاحم.

   ▸ **والحالة تُقرأ بشيئين لا بلون وحده.** الخطر لونٌ وأيقونة،
     والجارِي حبرٌ ووزن، والمحدَّد أرضٌ وحدّ. من لا يميّز الألوان
     يقرأ هذه الواجهة كما يقرؤها غيره.

   ▸ والارتفاع البصريّ مدّخر: الظلّ للطبقات التي تطفو فعلًا — القوائم
     والحوارات والتنبيهات — وما دونها يفصله حدٌّ ومسافة. ظلٌّ على كل
     شيء يعني ألّا شيء يبدو مرتفعًا.
   =========================================================== */

/* ===========================================================
   الأزرار
   =========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 34px;
  padding-inline: var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* الأوّل: انقلاب. */
.btn--primary { background: var(--fg); color: var(--bg-base); border-color: var(--fg); }
.btn--primary:hover:not(:disabled) { opacity: 0.86; }

/* الثاني: سطحٌ محدود. */
.btn--subtle { background: var(--bg-surface-2); border-color: var(--line); color: var(--fg); }
.btn--subtle:hover:not(:disabled) { background: var(--bg-elevated); border-color: var(--line-strong); }

/* الثالث: حدٌّ بلا أرض. */
.btn--ghost { border-color: var(--line); color: var(--fg-soft); }
.btn--ghost:hover:not(:disabled) { background: var(--hover); color: var(--fg); border-color: var(--line-strong); }

/* الرابع: نصٌّ يُضغط. */
.btn--quiet { color: var(--fg-mute); padding-inline: var(--sp-2); }
.btn--quiet:hover:not(:disabled) { background: var(--hover); color: var(--fg); }

/* الخطر ليس أوّل الأفعال أبدًا: حدٌّ وحبرٌ أحمر، لا أرضٌ حمراء. */
.btn--danger { color: var(--danger); border-color: var(--danger-soft); }
.btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }

.btn--sm { min-block-size: 28px; padding-inline: var(--sp-3); font-size: var(--t-xs); }
.btn--lg { min-block-size: 42px; padding-inline: var(--sp-6); font-size: var(--t-base); }
.btn--block { inline-size: 100%; }

.btn__trailing { margin-inline-start: auto; color: var(--fg-faint); font-family: var(--font-mono); font-size: var(--t-2xs); }

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

.icon-btn:hover { background: var(--hover); color: var(--fg); }
.icon-btn.is-active { background: var(--selected); color: var(--fg); }

/* ===========================================================
   الحقول
   =========================================================== */

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }

.field__label { font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--fg); }
.field__hint { font-size: var(--t-xs); line-height: var(--lh-snug); color: var(--fg-mute); }

/* الخطأ لا يظهر قبل أن يُخطئ أحد. */
.field__error { display: none; font-size: var(--t-xs); color: var(--danger); }
.field__error.is-visible { display: block; }

.input {
  inline-size: 100%;
  min-block-size: 36px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--t-base);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.input::placeholder { color: var(--fg-faint); }
.input:hover { border-color: var(--line-strong); }

.input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-base);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input.is-invalid { border-color: var(--danger); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

.input--area { min-block-size: 96px; line-height: var(--lh-body); resize: vertical; }

/* ---------- الاختيار ---------- */

.select-wrap { position: relative; display: inline-flex; inline-size: 100%; }

.select {
  inline-size: 100%;
  min-block-size: 36px;
  padding: var(--sp-2) var(--sp-3);
  padding-inline-end: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg);
  font-size: var(--t-base);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}

.select:hover { border-color: var(--line-strong); }

.select__arrow {
  position: absolute;
  inset-inline-end: var(--sp-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--fg-mute);
  pointer-events: none;
}

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

.search-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  transition: border-color var(--dur-1) var(--ease);
}

.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-field__icon { flex: none; color: var(--fg-mute); }

.search-field__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: var(--t-base);
  outline: none;
}

.search-field__input::placeholder { color: var(--fg-faint); }
.search-field__input::-webkit-search-cancel-button { appearance: none; }

/* ---------- المنزلق ---------- */

.slider { display: flex; align-items: center; gap: var(--sp-3); inline-size: 100%; }

.slider__input {
  flex: 1;
  min-inline-size: 0;
  appearance: none;
  block-size: 20px;
  background: none;
  cursor: pointer;
}

.slider__input::-webkit-slider-runnable-track {
  block-size: 4px;
  border-radius: var(--r-full);
  background: var(--bg-inset);
}

.slider__input::-webkit-slider-thumb {
  appearance: none;
  margin-block-start: -6px;
  inline-size: 16px;
  block-size: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--fg);
  transition: transform var(--dur-1) var(--ease);
}

.slider__input:active::-webkit-slider-thumb { transform: scale(1.12); }

.slider__input::-moz-range-track { block-size: 4px; border-radius: var(--r-full); background: var(--bg-inset); }
.slider__input::-moz-range-progress { block-size: 4px; border-radius: var(--r-full); background: var(--fg); }

.slider__input::-moz-range-thumb {
  inline-size: 15px;
  block-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--fg);
}

.slider__value {
  flex: none;
  min-inline-size: 3.5ch;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
  text-align: end;
}

/* ---------- المفتاح ---------- */

.switch { position: relative; display: inline-flex; flex: none; }

.switch__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  inline-size: 38px;
  block-size: 22px;
  padding: 2px;
  border-radius: var(--r-full);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.switch__thumb {
  display: block;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--r-full);
  background: var(--fg-mute);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease);
}

.switch__input:checked ~ .switch__track { background: var(--fg); border-color: var(--fg); }
.switch__input:checked ~ .switch__track .switch__thumb { background: var(--bg-base); transform: translateX(16px); }
:root[dir="rtl"] .switch__input:checked ~ .switch__track .switch__thumb { transform: translateX(-16px); }

.switch__input:focus-visible ~ .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch.is-disabled { opacity: 0.45; }

/* ===========================================================
   المبدّلات
   =========================================================== */

.segmented {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented::-webkit-scrollbar { display: none; }

.segmented__item {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-block-size: 28px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg-mute);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}

.segmented__item:hover { color: var(--fg-soft); }
.segmented__item.is-active {
  color: var(--fg);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* المؤشّر ينزلق بين الخيارات: الحركة تقول «هذا صار ذاك». */
.segmented__indicator {
  position: absolute;
  inset-block: 2px;
  z-index: 0;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), inline-size var(--dur-2) var(--ease-out);
}

.segmented--sm .segmented__item { min-block-size: 24px; padding-inline: var(--sp-2); font-size: var(--t-2xs); }

.tabs {
  display: flex;
  gap: var(--sp-1);
  border-block-end: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__tab {
  position: relative;
  flex: none;
  min-block-size: 38px;
  padding-inline: var(--sp-3);
  color: var(--fg-mute);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}

.tabs__tab:hover { color: var(--fg-soft); }
.tabs__tab.is-active { color: var(--fg); }

.tabs__tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-2);
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: var(--r-full);
  background: var(--fg);
}

/* ===========================================================
   الاختيار البصريّ
   =========================================================== */

.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.swatch {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.swatch:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.swatch.is-active { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }

.swatch__dot { inline-size: 16px; block-size: 16px; border-radius: var(--r-full); background: currentColor; }

/* ---------- بطاقات الوضع ---------- */

.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-3); }

.theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  text-align: start;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.theme-card:hover { border-color: var(--line-strong); }
.theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-card.is-active { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

/* لوحةٌ مصغّرة تُرسم بلون الوضع الذي تمثّله، لا بلون الواجهة —
   فيرى المستخدم الليل والنهار معًا قبل أن يختار. */
.theme-card__paint {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  block-size: 54px;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.theme-card__bar { inline-size: 40%; block-size: 6px; border-radius: var(--r-full); }
.theme-card__line { inline-size: 100%; block-size: 4px; border-radius: var(--r-full); }
.theme-card__line--short { inline-size: 62%; }

.theme-card[data-mode="night"] .theme-card__paint { background: #000; }
.theme-card[data-mode="night"] .theme-card__bar { background: #fafafa; }
.theme-card[data-mode="night"] .theme-card__line { background: rgb(255 255 255 / 22%); }

.theme-card[data-mode="day"] .theme-card__paint { background: #fff; }
.theme-card[data-mode="day"] .theme-card__bar { background: #09090b; }
.theme-card[data-mode="day"] .theme-card__line { background: rgb(9 9 11 / 18%); }

/* «النظام» يعرض الاثنين مشطورَين قُطريًّا — صورةٌ تقول «يتبع جهازك». */
.theme-card[data-mode="system"] .theme-card__paint {
  background: linear-gradient(115deg, #000 0 50%, #fff 50% 100%);
}

.theme-card[data-mode="system"] .theme-card__bar { background: linear-gradient(115deg, #fafafa 0 50%, #09090b 50% 100%); }
.theme-card[data-mode="system"] .theme-card__line { background: linear-gradient(115deg, rgb(255 255 255 / 30%) 0 50%, rgb(9 9 11 / 22%) 50% 100%); }

.theme-card__name { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--fg-soft); }
.theme-card.is-active .theme-card__name { color: var(--fg); }

/* ---------- الإيموجي ---------- */

.glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
  max-block-size: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.glyph {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  font-size: 20px;
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.glyph:hover { background: var(--hover); }
.glyph:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.glyph.is-active { border-color: var(--fg); background: var(--selected); box-shadow: none; }

/* ---------- حقل اللون ---------- */

.color-field { display: flex; align-items: center; gap: var(--sp-2); }

.color-field__input {
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: none;
  cursor: pointer;
}

.color-field__input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-field__input::-webkit-color-swatch { border: 0; border-radius: var(--r-sm); }
.color-field__input::-moz-color-swatch { border: 0; border-radius: var(--r-sm); }

.color-field__hex {
  inline-size: 9ch;
  min-block-size: 34px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  direction: ltr;
}

.color-field__hex::placeholder { color: var(--fg-faint); }

.color-field__auto {
  min-block-size: 34px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-mute);
  font-size: var(--t-xs);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.color-field__auto:hover { color: var(--fg); border-color: var(--line-strong); }
.color-field.is-auto .color-field__auto { border-color: var(--fg); color: var(--fg); }

/* ---------- حقل الصورة ---------- */

.image-field { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }

.image-field__label { font-size: var(--t-sm); font-weight: var(--w-medium); }

.image-field__drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  min-block-size: 132px;
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.image-field__drop:hover { border-color: var(--fg-faint); background: var(--bg-elevated); }

.image-field__preview {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.image-field.has-image .image-field__drop { border-style: solid; border-color: var(--line); }
.image-field:not(.has-image) .image-field__preview { display: none; }

.image-field__mark { display: grid; place-items: center; color: var(--fg-mute); }
.image-field__text { font-size: var(--t-xs); color: var(--fg-mute); text-align: center; }
.image-field__ghost { color: var(--fg-faint); }

.image-field__caption {
  position: absolute;
  inset-block-end: var(--sp-2);
  inset-inline-start: var(--sp-2);
  max-inline-size: calc(100% - var(--sp-12));
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--scrim);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-field__clear {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2);
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-full);
  background: var(--scrim);
  color: #fff;
}

.image-field:not(.has-image) .image-field__clear { display: none; }

/* ---------- منطقة الإفلات ---------- */

.dropzone {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.dropzone:hover { border-color: var(--fg-faint); background: var(--bg-elevated); }
.dropzone.is-disabled { opacity: 0.5; cursor: not-allowed; }
.dropzone.is-disabled:hover { border-color: var(--line-strong); background: var(--bg-surface-2); }

.dropzone__icon { color: var(--fg-mute); }
.dropzone__body { display: grid; gap: var(--sp-1); }
.dropzone__title { font-size: var(--t-base); font-weight: var(--w-medium); }
.dropzone__hint { font-size: var(--t-xs); color: var(--fg-mute); }

/* ===========================================================
   الصور الرمزية والشارات
   =========================================================== */

.avatar,
.space-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  line-height: 1;
  overflow: hidden;
  user-select: none;
}

.avatar { border-radius: var(--r-full); }
.avatar--xs { inline-size: 22px; block-size: 22px; font-size: var(--t-2xs); }
.avatar--sm { inline-size: 26px; block-size: 26px; font-size: var(--t-xs); }
.avatar--lg { inline-size: 44px; block-size: 44px; font-size: var(--t-md); }

.space-avatar--xs { inline-size: 22px; block-size: 22px; border-radius: var(--r-sm); font-size: var(--t-2xs); }
.space-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--t-md); }
.space-avatar--lg { inline-size: 56px; block-size: 56px; border-radius: var(--r-lg); font-size: var(--t-lg); }

/* الإيموجي يملأ الصندوق: حدٌّ حوله يجعله يبدو ملصقًا. */
.space-avatar.has-glyph,
.space-avatar--lg.has-glyph { border-color: transparent; background: transparent; }
.space-avatar__glyph.has-glyph { color: var(--fg); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-inset);
  color: var(--fg-mute);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  line-height: 1.6;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
  font-size: var(--t-xs);
}

.chip--accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-fg); }

.dot { inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: currentColor; flex: none; }

.value-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--bg-inset);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
}

.value-pill--ok { color: var(--success); background: var(--success-soft); }

/* ---------- المقياس ---------- */

.meter {
  inline-size: 100%;
  block-size: 6px;
  border-radius: var(--r-full);
  background: var(--bg-inset);
  overflow: hidden;
}

.meter__fill {
  block-size: 100%;
  border-radius: inherit;
  background: var(--fg);
  transition: inline-size var(--dur-3) var(--ease-out);
}

.meter--accent .meter__fill { background: var(--accent); }
.meter--success .meter__fill { background: var(--success); }
.meter--warn .meter__fill { background: var(--warn); }
.meter--danger .meter__fill { background: var(--danger); }

/* ===========================================================
   الرسائل
   =========================================================== */

.callout,
.banner,
.statement {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}

.callout__icon,
.banner__icon,
.statement__icon { flex: none; display: grid; place-items: center; color: var(--fg-mute); }

.callout__text,
.banner__text,
.statement__body { flex: 1; min-inline-size: 0; color: var(--fg-soft); }

.statement { flex-direction: column; gap: var(--sp-2); }
.statement__title { font-size: var(--t-base); font-weight: var(--w-medium); color: var(--fg); }

.callout--ok { border-color: var(--success-soft); background: var(--success-soft); }
.callout--ok .callout__icon { color: var(--success); }
.callout--warn { border-color: var(--warn-soft); background: var(--warn-soft); }
.callout--warn .callout__icon { color: var(--warn); }

/* ---------- الفراغ ---------- */

.empty {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}

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

.empty__title { font-family: var(--font-display); font-size: var(--t-md); font-weight: var(--w-medium); }
.empty__body { max-inline-size: 46ch; font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-snug); }

/* ---------- التحميل ---------- */

.loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-8); color: var(--fg-mute); }

.loading__spinner {
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid var(--line-strong);
  border-block-start-color: var(--fg);
  border-radius: var(--r-full);
  animation: spin 700ms linear infinite;
}

.loading__text { font-size: var(--t-sm); }

/* ===========================================================
   التنبيهات
   =========================================================== */

.toast-stack {
  position: fixed;
  inset-block-end: calc(var(--sp-5) + var(--safe-b));
  inset-inline: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: min(440px, 100%);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
  color: var(--fg);
  font-size: var(--t-sm);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}

.toast.is-in { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateY(6px) scale(0.98); }

.toast__icon { flex: none; display: grid; place-items: center; color: var(--fg-mute); }
.toast__text { flex: 1; min-inline-size: 0; }

.toast--success .toast__icon { color: var(--success); }
.toast--warn .toast__icon { color: var(--warn); }
.toast--danger .toast__icon { color: var(--danger); }

.toast__action {
  flex: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  transition: background-color var(--dur-1) var(--ease);
}

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

.toast__close { flex: none; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: var(--r-sm); color: var(--fg-mute); }
.toast__close:hover { background: var(--hover); color: var(--fg); }

/* ===========================================================
   القوائم
   =========================================================== */

.menu {
  position: fixed;
  z-index: var(--z-menu);
  min-inline-size: 200px;
  max-inline-size: 300px;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: scale(0.97);
  transform-origin: var(--menu-origin, top center);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-out);
}

.menu.is-in { opacity: 1; transform: none; }
.menu.is-measuring { transform: none; transition: none; }

.menu__heading {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: 32px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg-soft);
  font-size: var(--t-sm);
  text-align: start;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.menu__item:hover:not(:disabled) { background: var(--hover); color: var(--fg); }
.menu__item:focus-visible { background: var(--hover); color: var(--fg); outline-offset: -2px; }
.menu__item:disabled { opacity: 0.4; }
.menu__item.is-danger { color: var(--danger); }
.menu__item.is-danger:hover { background: var(--danger-soft); }

.menu__icon { flex: none; display: grid; place-items: center; color: var(--fg-mute); }
.menu__item:hover .menu__icon { color: inherit; }
.menu__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__check { flex: none; color: var(--fg); }
.menu__kbd { flex: none; font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }
.menu__sep { block-size: 1px; margin: var(--sp-1) 0; background: var(--line); }

/* ===========================================================
   لوحة الأوامر
   =========================================================== */

.modal--palette { padding: 0; }

.palette__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--line);
}

.palette__field-icon { flex: none; color: var(--fg-mute); }

.palette__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: var(--t-md);
  outline: none;
}

.palette__input::placeholder { color: var(--fg-faint); }
.palette__input:focus-visible { outline: none; }

.palette__results { max-block-size: min(52vh, 420px); padding: var(--sp-1); }

.palette__group + .palette__group { margin-block-start: var(--sp-2); }

.palette__heading {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: 38px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg-soft);
  font-size: var(--t-sm);
  text-align: start;
}

.palette__item.is-active { background: var(--selected); color: var(--fg); }
.palette__icon { flex: none; display: grid; place-items: center; color: var(--fg-mute); }
.palette__label { flex: 1; min-inline-size: 0; }
.palette__kbd { flex: none; font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }
.palette__empty { padding: var(--sp-8); text-align: center; color: var(--fg-mute); font-size: var(--t-sm); }

/* ===========================================================
   الحوارات
   =========================================================== */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  backdrop-filter: blur(3px);
}

.modal-scrim.is-in { opacity: 1; }

body.is-modal-open { overflow: hidden; }

.modal {
  display: flex;
  flex-direction: column;
  inline-size: min(520px, 100%);
  max-block-size: min(86dvh, 760px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(8px) scale(0.99);
  transition: transform var(--dur-2) var(--ease-out);
}

.modal-scrim.is-in .modal { transform: none; }

.modal--sm { inline-size: min(400px, 100%); }
.modal--lg { inline-size: min(720px, 100%); }
.modal--xl { inline-size: min(1000px, 100%); }
.modal--confirm { inline-size: min(420px, 100%); }
.modal.is-busy { pointer-events: none; opacity: 0.7; }

.modal__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}

.modal__titles { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.modal__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--w-medium); }
.modal__desc { font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-snug); }

.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-sm);
  color: var(--fg-mute);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.modal__close:hover { background: var(--hover); color: var(--fg); }

.modal__body {
  flex: 1 1 0%;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-5) var(--sp-5);
}
.modal__prose { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-base); color: var(--fg-soft); line-height: var(--lh-body); }

.modal__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--line);
  background: var(--bg-surface);
}

/* ===========================================================
   المجموعات والإعدادات
   =========================================================== */

.group { display: flex; flex-direction: column; gap: var(--sp-2); }
.group.is-filtered { display: none; }

.group__title {
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.group__body {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.group--danger .group__body { border-color: var(--danger-soft); }

.setting {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.setting + .setting { border-block-start: 1px solid var(--line); }
.setting.is-filtered { display: none; }
.setting.is-disabled { opacity: 0.5; pointer-events: none; }

.setting--block { flex-direction: column; align-items: stretch; gap: var(--sp-3); }

.setting__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.setting__title-row { display: flex; align-items: center; gap: var(--sp-2); }
.setting__title { margin: 0; font-size: var(--t-base); font-weight: var(--w-medium); }
.setting__desc { font-size: var(--t-xs); color: var(--fg-mute); line-height: var(--lh-snug); }
.setting__control { flex: none; }
.setting__wide { inline-size: 100%; }

.panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.panel__lede { max-inline-size: var(--measure-text); font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-body); }

/* ---------- المراجعة ---------- */

.review { display: flex; flex-direction: column; gap: var(--sp-3); }
.review__head { display: flex; align-items: center; gap: var(--sp-3); }
.review__icon { flex: none; display: grid; place-items: center; color: var(--fg-mute); }
.review__title { font-size: var(--t-base); font-weight: var(--w-medium); }
.review__sub { font-size: var(--t-xs); color: var(--fg-mute); }

.review__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  overflow: hidden;
}

.review__entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  background: var(--bg-surface);
  font-size: var(--t-sm);
}

/* ---------- الإفصاح ---------- */

.disclosure { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-surface); overflow: hidden; }

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-1) var(--ease);
}

.disclosure__summary::-webkit-details-marker { display: none; }

.disclosure__summary::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid var(--fg-mute);
  border-block-end: 1.5px solid var(--fg-mute);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease);
}

.disclosure[open] .disclosure__summary::after { transform: rotate(-135deg); }
.disclosure__body { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--t-sm); color: var(--fg-soft); }

/* ---------- نموذج المساحة ---------- */

.space-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.space-form__head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.space-form__head-fields { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

/* الشعار قناعٌ لا صورة: يُطلى بلون الحبر فيتبع الثيم والسياق، ويبقى
   ملفٌّ واحد مصدرًا له هنا وفي بطاقات الجدار. */
.logo-mark {
  display: inline-block;
  flex: none;
  background: currentcolor;
  mask: var(--logo-mask) center / contain no-repeat;
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
}

/* سطرُ «لا شيء هنا» في قوائم الإعدادات. كان يُبَثّ بلا نمط، فيخرج
   بحجم المتن ولونه وكأنّه محتوًى لا غيابُ محتوى. */
.sidebar__empty {
  margin: 0;
  padding: var(--sp-3) 0;
  color: var(--fg-mute);
  font-size: var(--t-sm);
}