/* ===========================================================
   Urealm — لوحة المشروع.

   قائمةٌ تُقرأ لا تُزيَّن: ما دخل، وما فُهم، وما ينقص. والشجرة
   مطويّةٌ إلّا جذرها — من فتح مجلّدًا فيه ثمانية آلاف ملفٍّ مفتوحةً
   كلّها لا يرى شيئًا.
   =========================================================== */

.project {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-inline-size: var(--measure);
  margin-inline: auto;
  inline-size: 100%;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

.project__loading {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  min-block-size: 40dvh;
}

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

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

.project__name {
  margin: 0;
  font-size: var(--fs-5, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

.project__badge {
  padding: 2px var(--sp-3);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: var(--fs-1, 0.78rem);
  font-weight: 600;
}

.project__count { margin: 0; color: var(--fg-mute); font-size: var(--fs-1, 0.82rem); }

/* ----------------------- ما فُهم ----------------------- */

.project__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4);
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-inset);
}

.project__fact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2, 0.9rem);
  color: var(--fg-soft);
}

.project__fact.is-ok > .icon { color: var(--success); }
.project__fact.is-warn > .icon { color: var(--warn); }
.project__fact.is-bad > .icon { color: var(--danger); }
.project__fact.is-bad { color: var(--fg); }

/* ----------------------- الشجرة ----------------------- */

.project__tree {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-3);
  background: var(--bg-surface);
  max-block-size: 60dvh;
  overflow: auto;
  font-size: var(--fs-1, 0.85rem);
}

.project__children { padding-inline-start: var(--sp-4); }

.project__folder,
.project__file {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  padding: 3px var(--sp-2);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg-soft);
  font: inherit;
  text-align: start;
}

.project__folder { cursor: pointer; color: var(--fg); font-weight: 600; }
.project__folder:hover,
.project__file:hover { background: var(--hover); }

.project__foldername,
.project__filename {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project__filesize {
  color: var(--fg-faint);
  font-size: var(--fs-0, 0.72rem);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* السهم يدور عند الفتح — علامةٌ واحدة تكفي. */
.project__twist { transition: transform 160ms; flex: none; }
.project__folder.is-open .project__twist,
.project__more.is-open .project__twist { transform: rotate(-90deg); }

:dir(ltr) .project__twist { transform: rotate(180deg); }
:dir(ltr) .project__folder.is-open .project__twist,
:dir(ltr) .project__more.is-open .project__twist { transform: rotate(90deg); }

/* ----------------------- الأقسام المطويّة ----------------------- */

.project__section { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

.project__more {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: var(--bg-inset);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-1, 0.85rem);
  cursor: pointer;
  text-align: start;
}

.project__more:hover { background: var(--hover); }
.project__morebody { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.project__list,
.project__evidence {
  margin: 0;
  padding-inline-start: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--fg-soft);
  font-size: var(--fs-1, 0.82rem);
  word-break: break-word;
}

.project__claim { font-weight: 600; color: var(--fg); }
.project__why { color: var(--fg-mute); font-family: var(--font-mono, monospace); font-size: var(--fs-0, 0.74rem); }

/* ----------------------- الفعل والتنبيه ----------------------- */

.project__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.project__action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-inset);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-1, 0.85rem);
  cursor: pointer;
}

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

.project__caveat,
.project__note {
  margin: 0;
  color: var(--fg-faint);
  font-size: var(--fs-1, 0.78rem);
  line-height: 1.7;
}