/* ===========================================================
   Urealm — العمل ومجتمعه.

   لا لون هنا ولا مقاس ولا نصف قطر من خارج `tokens.css`. ولا ظلّ
   ثقيل، ولا حدّ على كلّ شيء، ولا بطاقة داخل بطاقة: الترتيب يُقرأ
   بالمسافة والحبر كما في بقيّة التطبيق. ولو نُزعت هذه الورقة لبقيت
   الصفحة مفهومة — وهذا معيارُ أنها لم تخترع لغةً ثانية.

   والخصائص منطقيّة لا فيزيائيّة، فتنقلب الصفحة مع العربيّة بلا
   قاعدةٍ ثانية.
   =========================================================== */

/* `‎.view` يضيق إلى `--measure` لأنّ أكثر المشاهد نصّ. وهذا مشهد
   شبكةٍ ومعاينات، فيأخذ العرض كما تأخذه الرئيسيّة والعوالم — وبالحدّ
   نفسه (١١٨٠) لا بحدٍّ جديد. والحاشية من `‎.outlet` وحده، فلا تُجمع
   حاشيتان. */
.view--community,
.view--build,
.view--works,
.view--review {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-block-size: 0;
  max-inline-size: 1180px;
}

.community,
.build,
.works { padding-block: var(--sp-2) var(--sp-10); }

.works__head { padding-block-end: var(--sp-5); }

.works__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
}

.works__note { margin-block-start: var(--sp-1); color: var(--fg-mute); font-size: var(--t-sm); }

/* ----------------------- الرجوع ----------------------- */

.c-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 32px;
  color: var(--fg-mute);
  font-size: var(--t-sm);
  transition: color var(--dur-1) var(--ease);
}

.c-back:hover { color: var(--fg); }
.c-back__arrow { transform: scaleX(calc(-1 * var(--flip))); }

/* ----------------------- رأس المجتمع ----------------------- */

.c-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "back back" "identity actions";
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding-block-end: var(--sp-4);
}

.c-head > .c-back { grid-area: back; }
.c-head__identity { grid-area: identity; display: flex; align-items: center; gap: var(--sp-3); min-inline-size: 0; }
.c-head__actions { grid-area: actions; display: flex; align-items: center; gap: var(--sp-2); }

.c-head__mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
}

.c-head__titles { min-inline-size: 0; }

.c-head__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
}

.c-head__meta,
.b-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: 2px;
  color: var(--fg-mute);
  font-size: var(--t-xs);
}

.c-dot { color: var(--fg-faint); }

/* الاسم بلا «@»: العلامة تنقلب في العربيّة فتُقرأ بعد الاسم لا قبله. */
.c-who { color: var(--fg-soft); }

.c-meta-link {
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.c-meta-link:hover { color: var(--fg); }

.c-lineage { color: var(--accent-fg); text-decoration: underline; text-underline-offset: 3px; }
.c-lineage:hover { color: var(--accent-hover); }

/* الانضمام ظاهرٌ لا ضخم، ويُقرأ بالكلمة والأيقونة لا باللون. */
.c-join {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 34px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--fg);
  border-radius: var(--r-md);
  background: var(--fg);
  color: var(--bg-base);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.c-join:hover { opacity: 0.86; }

.c-join.is-on {
  border-color: var(--line);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
  cursor: default;
}

.c-join.is-on:hover { opacity: 1; }

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

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

.c-tabs::-webkit-scrollbar { display: none; }

.c-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  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);
}

.c-tab:hover { color: var(--fg-soft); }
.c-tab.is-on { color: var(--fg); }

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

.c-tab__count {
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--bg-inset);
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
}

.c-tab.is-on .c-tab__count { color: var(--fg-soft); }

/* ----------------------- الجسد ----------------------- */

.community__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-7);
  padding-block-start: var(--sp-5);
  align-items: start;
}

.community__main { min-inline-size: 0; }

.c-section { display: flex; flex-direction: column; gap: var(--sp-4); }

.c-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.c-section__note { color: var(--fg-mute); font-size: var(--t-xs); }

/* ----------------------- الجانب ----------------------- */

.c-side {
  position: sticky;
  inset-block-start: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-side__preview { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.c-side__open {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-align: center;
  transition: background-color var(--dur-1) var(--ease);
}

.c-side__open:hover { background: var(--hover); }
.c-side__summary { color: var(--fg-soft); font-size: var(--t-xs); line-height: var(--lh-body); }


/* ----------------------- المؤلّف ----------------------- */

.c-composer { display: flex; gap: var(--sp-3); align-items: flex-start; }

.c-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  color: var(--fg-mute);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}

.c-composer__field { flex: 1; min-inline-size: 0; }

.c-composer__input,
.c-thread__input {
  inline-size: 100%;
  min-block-size: 38px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  resize: none;
  transition: border-color var(--dur-1) var(--ease);
}

.c-composer__input:focus-visible,
.c-thread__input:focus-visible { border-color: var(--accent-line); outline: none; }

.c-composer__input--sheet { min-block-size: 120px; }
.c-composer__foot { display: flex; justify-content: flex-end; margin-block-start: var(--sp-2); }

.c-composer__sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}

.c-composer__opener {
  flex: 1;
  min-block-size: 38px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--fg-faint);
  font-family: inherit;
  font-size: var(--t-sm);
  text-align: start;
  cursor: pointer;
}

/* مسودّةٌ باقية: تُقرأ بالحبر لا بلونٍ وحده. */
.c-composer__opener[data-draft="yes"] { color: var(--fg); font-weight: var(--w-medium); }

/* ----------------------- تعليق العمل ----------------------- */

.c-buildthread { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-surface); }

.c-buildthread__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--t-sm);
  cursor: pointer;
  list-style: none;
}

.c-buildthread__summary::-webkit-details-marker { display: none; }
.c-buildthread[open] .c-buildthread__summary { border-block-end: 1px solid var(--line); }
.c-buildthread > .c-thread { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

/* ----------------------- المرشّحات ----------------------- */

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

.c-filter {
  min-block-size: 28px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--fg-mute);
  font-family: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.c-filter:hover { background: var(--hover); color: var(--fg-soft); }

/* المختار يُقرأ بالانقلاب لا بصبغة. */
.c-filter.is-on {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg-base);
  font-weight: var(--w-medium);
}

/* ----------------------- المنشورات ----------------------- */

.c-feed__list { display: flex; flex-direction: column; gap: var(--sp-3); }

.c-post {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}

.c-post[data-state="pending"] { opacity: 0.66; }
.c-post[data-state="failed"] { border-color: var(--danger-soft); }

.c-post__head { display: flex; align-items: center; gap: var(--sp-3); }
.c-post__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-inline-size: 0; flex: 1; }
.c-post__name { color: var(--fg); font-size: var(--t-sm); font-weight: var(--w-medium); }
.c-post__time { color: var(--fg-faint); font-size: var(--t-2xs); }

.c-post__body {
  margin-block-start: var(--sp-3);
  color: var(--fg-soft);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.c-post__foot { margin-block-start: var(--sp-3); }

.c-post__action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 30px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-mute);
  font-family: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

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

.c-post__failed {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--danger-soft);
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: var(--t-xs);
}

.c-post__retry,
.c-error button { color: inherit; font-family: inherit; text-decoration: underline; cursor: pointer; }

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px 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-2xs);
  font-weight: var(--w-medium);
}

.c-chip[data-tone="accent"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-fg); }

/* ----------------------- التعليقات ----------------------- */

.c-thread { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--line); }
.c-buildthread > .c-thread { margin-block-start: 0; padding-block-start: var(--sp-3); border-block-start: 0; }

/* هدف التعليق مكتوب، فلا يختلط تعليق المنشور بتعليق العمل. */
.c-thread__scope {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-faint);
  font-size: var(--t-2xs);
}

.c-thread__list { display: flex; flex-direction: column; gap: var(--sp-3); margin-block: var(--sp-3); }
.c-thread__empty { margin-block: var(--sp-3); color: var(--fg-faint); font-size: var(--t-xs); }

.c-comment { display: flex; align-items: flex-start; gap: var(--sp-2); }
.c-comment[data-state="pending"] { opacity: 0.66; }
.c-comment[data-state="failed"] .c-comment__text { color: var(--danger); }
.c-comment__body { flex: 1; min-inline-size: 0; }
.c-comment__name { color: var(--fg); font-size: var(--t-xs); font-weight: var(--w-medium); }
.c-comment__time { margin-inline-start: var(--sp-2); color: var(--fg-faint); font-size: var(--t-2xs); }
.c-comment__text { color: var(--fg-soft); font-size: var(--t-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.c-comment__remove { opacity: 0; }
.c-comment:hover .c-comment__remove,
.c-comment__remove:focus-visible { opacity: 1; }

.c-thread__compose { display: flex; gap: var(--sp-2); align-items: center; }
.c-thread__compose .c-thread__input { flex: 1; }

/* ----------------------- الأعمال ----------------------- */

.c-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.c-grid--variants { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.c-work {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease);
}

.c-work:hover { border-color: var(--line-strong); }
.c-work__stage { border-block-end: 1px solid var(--line); }
.c-work__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.c-work__name { font-size: var(--t-md); font-weight: var(--w-medium); }
.c-work__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: 2px; color: var(--fg-mute); font-size: var(--t-2xs); }
.c-work__actions { display: flex; gap: var(--sp-2); }

.c-work__enter,
.c-work__link {
  min-block-size: 30px;
  padding-inline: var(--sp-3);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  transition: background-color var(--dur-1) var(--ease);
}

.c-work__enter { border-color: var(--fg); background: var(--fg); color: var(--bg-base); }
.c-work__enter:hover { opacity: 0.86; }
.c-work__link { color: var(--fg-soft); }
.c-work__link:hover { background: var(--hover); color: var(--fg); }

/* ----------------------- التحديثات ----------------------- */

.c-updates { display: flex; flex-direction: column; gap: var(--sp-3); }

.c-update {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}

.c-update__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.c-update__version { color: var(--fg); font-family: var(--font-mono); font-size: var(--t-sm); font-weight: var(--w-semi); }
.c-update__time { margin-inline-start: auto; color: var(--fg-faint); font-size: var(--t-2xs); }

.c-update__notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-block-start: var(--sp-3);
  padding-inline-start: var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  list-style: disc;
}

/* ----------------------- الأعضاء ----------------------- */

.c-members { display: flex; flex-direction: column; gap: var(--sp-2); }
.c-member { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.c-member__name { color: var(--fg); font-size: var(--t-sm); }

/* ----------------------- الخطأ ----------------------- */

.c-error {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--danger-soft);
  border-radius: var(--r-lg);
  color: var(--danger);
}

.c-error__text { flex: 1; font-size: var(--t-sm); }

/* ===========================================================
   المعاينة الحيّة
   =========================================================== */

.live { position: relative; background: var(--bg-sunken); }

.live__stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / var(--live-ratio, 0.62);
  overflow: hidden;
}

.live__scene {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: scale(var(--live-scale, 0.25));
  transform-origin: top left;
  /* المصدر الفيزيائيّ لازم: المشهد يُقاس من زاويةٍ ثابتة مهما كان
     اتّجاه الصفحة، وإلّا خرج نصفه من الإطار في العربيّة. */
}

:root[dir="rtl"] .live__scene { transform-origin: top right; }

.live__scene iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

.live__skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-surface-2);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.live[data-state="idle"] .live__skeleton,
.live[data-state="loading"] .live__skeleton { opacity: 1; }

.live__skeleton-bar {
  block-size: 10px;
  border-radius: var(--r-full);
  background: var(--bg-inset);
  animation: live-pulse 1.6s var(--ease-in-out) infinite;
}

.live__skeleton-bar:nth-child(2) { inline-size: 72%; animation-delay: 0.15s; }
.live__skeleton-bar:nth-child(3) { inline-size: 44%; animation-delay: 0.3s; }

@keyframes live-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.live__failed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--bg-surface);
}

.live__failed-text { color: var(--fg-mute); font-size: var(--t-xs); }
.live__retry { color: var(--fg); font-family: inherit; font-size: var(--t-xs); text-decoration: underline; cursor: pointer; }

/* «مباشر» شارةٌ لا زينة: تقول إن ما تراه يعمل تحت إصبعك. */
.live__flag {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--bg-frost);
  color: var(--fg-soft);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.live[data-state="live"] .live__flag { opacity: 1; }

/* لا شريط أدوات فوق المعاينة: كان يغطّي ما جاء ليُظهره، ولا يختفي
   على اللمس. وملءُ الشاشة في شريط الأجهزة بصفحة العمل. */

.live:fullscreen { background: var(--bg-base); }
.live:fullscreen .live__stage { block-size: 100dvh; aspect-ratio: auto; }

/* ===========================================================
   صفحة العمل
   =========================================================== */

.b-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "back back" "titles actions";
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding-block-end: var(--sp-4);
}

.b-head > .c-back { grid-area: back; }
.b-head__titles { grid-area: titles; min-inline-size: 0; }
.b-head__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.b-head__name { font-family: var(--font-display); font-size: var(--t-xl); font-weight: var(--w-semi); line-height: var(--lh-tight); }

.b-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 34px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-soft);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.b-action:hover { background: var(--hover); color: var(--fg); }
.b-action--primary { border-color: var(--fg); background: var(--fg); color: var(--bg-base); }
.b-action--primary:hover { background: var(--fg); color: var(--bg-base); opacity: 0.86; }

.b-devices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-block-end: var(--sp-4); }

.b-stage {
  display: flex;
  justify-content: center;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-sunken);
}

/* **والمعاينة لا تبتلع الشاشة.** بنسبة الجوّال (١٫٩) كان ارتفاعها
   ٦٤٦ بكسل على شاشةٍ ارتفاعها ٨٠٠ — صفحةٌ كاملة لإطارٍ واحد، ولا يبقى
   لما تحته شيء. فيُحدّ بارتفاع النافذة. */
.b-stage__frame {
  inline-size: min(100%, var(--b-device-w, 1280px));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-base);
  overflow: hidden;
  transition: inline-size var(--dur-3) var(--ease);
}

.b-stage:fullscreen { padding: 0; border: 0; border-radius: 0; }
.b-stage:fullscreen .b-stage__frame { inline-size: 100%; block-size: 100dvh; border: 0; border-radius: 0; }
.b-stage:fullscreen .live__stage { block-size: 100dvh; aspect-ratio: auto; }
.b-stage .live__stage { max-block-size: 62dvh; }
.b-stage:fullscreen .live__stage { max-block-size: none; }

.b-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block-start: var(--sp-4);
}

.b-foot__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--fg-mute); font-size: var(--t-xs); }
.b-foot__link { color: var(--accent-fg); font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================
   التكيّف التدريجيّ

   لا مقاسان بل ثلاثة انتقالات: الجانب يذهب أوّلًا لأنه ثانويّ، ثمّ
   تنضغط الشبكة، ثمّ يُعاد ترتيب الرأس. فالأساسيّ آخر ما يتأثّر.
   =========================================================== */

@media (max-width: 1080px) {
  .community__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  /* الجانب ليس عمودًا الآن، فيصير سطرًا واحدًا فوق المحتوى ولا يتكرّر
     ما قاله الرأس: المعاينة وحدها هي الجديد. */
  .c-side { position: static; flex-direction: row; align-items: center; gap: var(--sp-4); order: -1; }
  .c-side__preview { inline-size: 220px; flex: none; }
  .c-side__open { flex: none; }
}

@media (max-width: 760px) {
  .community,
  .build,
  .works { padding-block: var(--sp-2) var(--sp-12); }

  .works__title { font-size: var(--t-xl); }

  /* **والرأس صفّان لا ثلاثة.** كان الرجوع سطرًا، والهويّة سطرًا،
     والأفعال سطرًا ثالثًا — مئةً وثلاثةً وستّين بكسلًا قبل أن يبدأ
     شيء. والأفعالُ زرٌّ وشارة، فتسع مع الاسم في سطره. */
  .c-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "back back" "identity actions";
    align-items: center;
  }

  .b-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "titles" "actions"; }
  .b-head__actions { justify-content: flex-start; }
  .c-head__mark { inline-size: 38px; block-size: 38px; }

  /* والملخّص سطران يكفيان تحت المعاينة؛ ما زاد يُطوى. */
  .c-side__summary { -webkit-line-clamp: 2; }

  /* وشريط تعليقات العمل سطرٌ رفيع لا بطاقة. */
  .c-buildthread__summary { padding: var(--sp-2) var(--sp-3); font-size: var(--t-xs); }

  .c-head__name,
  .b-head__name { font-size: var(--t-lg); }

  /* **الجانب لا يزيح المحتوى على الجوّال.** كان عمودًا كاملًا فوق
     الموجز، فيمضي نصفُ الشاشة قبل أوّل منشور. فيصير سطرًا مضغوطًا:
     معاينةٌ صغيرة حيّة، وإلى جانبها الطريقُ إلى العمل ووصفُه. */
  .c-side { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .c-side__preview { inline-size: 168px; flex: none; }
  .c-side__preview .live__stage { aspect-ratio: 1 / 0.78; }
  .c-side__open { flex: none; padding: var(--sp-1) var(--sp-3); font-size: var(--t-xs); }
  .c-side__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .c-side { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; }
  .c-side__open { grid-column: 2; justify-self: start; }
  .c-side__summary { grid-column: 2; }
  .c-side__preview { grid-row: 1 / -1; }

  .c-grid,
  .c-grid--variants { grid-template-columns: minmax(0, 1fr); }

  /* بطاقة تملأ العرض، ولا تمرير أفقيّ في أيّ قسم. */
  .c-work__actions { flex-wrap: wrap; }
  .c-post { padding: var(--sp-3); }
  .c-comment__remove { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .live__skeleton-bar { animation: none; }
  .b-stage__frame { transition: none; }
}

/* ===========================================================
   المراجعة والنشر

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

.review { padding-block: var(--sp-2) var(--sp-10); }

.r-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "back back" "titles actions";
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding-block-end: var(--sp-5);
}

.r-head > .c-back { grid-area: back; }
.r-head__titles { grid-area: titles; min-inline-size: 0; }
.r-head__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.r-kicker { color: var(--fg-mute); font-size: var(--t-xs); }

.r-title {
  margin-block-start: 2px;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
}

.review__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-7);
  align-items: start;
}

.review__main { display: flex; flex-direction: column; min-inline-size: 0; }

.r-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--line);
}

.review__main > .r-block:first-child { border-block-start: 0; padding-block-start: 0; }

.r-block__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.r-block__title { font-size: var(--t-md); font-weight: var(--w-semi); }
.r-block__note { margin-block-start: 2px; color: var(--fg-mute); font-size: var(--t-xs); line-height: var(--lh-snug); }

.r-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-block-size: 40px;
}

.r-row__text { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.r-row__label { color: var(--fg); font-size: var(--t-sm); font-weight: var(--w-medium); }
.r-row__hint { color: var(--fg-faint); font-size: var(--t-2xs); line-height: var(--lh-snug); }

/* ما ليس خيارًا يُقال ولا يُعرض مفتاحًا. */
.r-fixed,
.r-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--fg-mute);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
}

.r-fixed svg,
.r-notice svg { flex: none; margin-block-start: 1px; }

.r-terms {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-4);
  color: var(--fg-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  list-style: disc;
}

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

/* ---------- الجانب: ما يخرج فعلًا، وزرّ إخراجه ---------- */

.review__side {
  position: sticky;
  inset-block-start: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.r-stage { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.r-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.r-facts > div { text-align: center; }
.r-facts dt { color: var(--fg-faint); font-size: var(--t-2xs); }
.r-facts dd { margin-block-start: 2px; color: var(--fg); font-size: var(--t-sm); font-weight: var(--w-medium); }

.r-commit { display: flex; flex-direction: column; gap: var(--sp-2); }
.r-commit .btn { inline-size: 100%; min-block-size: 40px; }
.r-commit__note { color: var(--fg-faint); font-size: var(--t-2xs); line-height: var(--lh-snug); text-align: center; }

/* المسوّدة تُقال في رأس صفحتها. */
.banner--draft { margin-block-end: var(--sp-4); }

/* ---------- الأعمال: الرأس والمسوّدات ---------- */

.works__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-end: var(--sp-5);
}

.works__section { display: flex; flex-direction: column; gap: var(--sp-3); padding-block-end: var(--sp-6); }

.works__section-title {
  color: var(--fg-mute);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}

@media (max-width: 1080px) {
  .review__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  /* المعاينة تسبق القرار على الشاشات الضيّقة: تُرى أوّلًا ثمّ يُقرَّر. */
  .review__side { position: static; order: -1; }
  .r-stage { max-inline-size: 420px; }
}

@media (max-width: 760px) {
  .review { padding-block: var(--sp-2) var(--sp-12); }
  .r-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "titles" "actions"; }
  .r-title { font-size: var(--t-lg); }
  .r-stage { max-inline-size: none; }
  .r-row { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .r-row .segmented { inline-size: 100%; }
  .r-row .switch { align-self: flex-start; }
}

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

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

   فتُرفع تحت `pointer: coarse` وحدها إلى أربعةٍ وأربعين، ويبقى
   المكتبُ على كثافته. */
@media (pointer: coarse) {
  .c-work__enter,
  .c-work__link,
  .b-action,
  .c-side__open { min-block-size: 44px; }

  .c-post__action,
  .c-filter,
  .c-back,
  .b-foot__link,
  .c-meta-link { min-block-size: 40px; display: inline-flex; align-items: center; }

  /* والزرّان يتقاسمان السطر بدل أن يضيقا: عرضٌ كافٍ لا نصفُ كلمة. */
  .c-work__actions > * { flex: 1 1 0; justify-content: center; }
}

@media (pointer: coarse) and (max-width: 560px) {
  .c-side__open { min-block-size: 44px; display: inline-flex; align-items: center; }
}