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

/* ---------- مبدّل اللغة في الدوك ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-md);
  border: 1px solid var(--nooda-border);
  border-radius: var(--radius-full);
  color: var(--nooda-text-secondary);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--motion-base) ease-out, border-color var(--motion-base) ease-out;
}
.lang-switch:hover {
  color: var(--nooda-text-primary);
  border-color: var(--nooda-primary);
}

/* ---------- فتات الخبز ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-2xl);
  font-size: 13px;
  color: var(--nooda-text-secondary);
}
.crumbs a { color: var(--nooda-text-secondary); }
.crumbs a:hover { color: var(--nooda-primary); }
.crumbs [aria-current="page"] {
  color: var(--nooda-text-primary);
  /* عنوان المنشور قد يطول؛ الفتات سطر واحد لا فقرة. */
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumb-sep { opacity: .45; }

/* ---------- هوية الكاتب ---------- */
.p-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.p-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: none;
  background: var(--nooda-surface-variant);
}
.p-avatar-sm { width: 32px; height: 32px; }
.p-avatar-lg { width: 64px; height: 64px; }
.p-avatar-xl { width: 96px; height: 96px; }
.p-avatar-empty { display: inline-block; clip-path: url(#nooda-seed); }
.p-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-who strong { color: var(--nooda-text-primary); font-weight: 600; }
.p-handle { color: var(--nooda-text-secondary); font-size: 13px; direction: ltr; unicode-bidi: isolate; }
.p-verified { color: var(--nooda-primary); font-size: .85em; margin-inline-start: 4px; }
.p-head time { margin-inline-start: auto; color: var(--nooda-text-secondary); font-size: 13px; white-space: nowrap; }
.p-who-link { display: flex; align-items: center; gap: var(--space-md); color: inherit; }
.p-who-link:hover strong { color: var(--nooda-primary); }

/* ---------- بطاقة منشور في قائمة ---------- */
.p-card { display: flex; flex-direction: column; gap: var(--space-md); }
.p-card-link { color: inherit; display: block; }
.p-card-link:hover .p-excerpt { color: var(--nooda-text-primary); }
.p-excerpt {
  color: var(--nooda-text-secondary);
  line-height: 1.8;
  /* البطاقة موعد لا مقال: أربعة أسطر ثم دعوة للفتح. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-card-media { display: flex; gap: var(--space-sm); }
.p-card-media img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.p-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--nooda-border);
  color: var(--nooda-text-secondary);
  font-size: 13px;
}

/* ---------- صفحة منشور واحد ---------- */
.p-single-head { margin-bottom: var(--space-xl); }
.p-single-meta { margin-top: var(--space-md); color: var(--nooda-text-secondary); font-size: 14px; }
.p-single-meta a { color: var(--nooda-text-secondary); }
.p-single-meta a:hover { color: var(--nooda-primary); }
.p-body {
  /* النص هو الصفحة: أكبر من نص المتن العادي، وسطوره متباعدة كي تُقرأ لا تُمسح. */
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.95;
  color: var(--nooda-text-primary);
  margin-block: var(--space-xl);
}
.p-tag, .p-mention { color: var(--nooda-primary); }
.p-tag:hover, .p-mention:hover { color: var(--nooda-primary-light); }
.p-mention { direction: ltr; unicode-bidi: isolate; }

.p-media { display: grid; gap: var(--space-md); margin-block: var(--space-2xl); }
.p-media img, .p-media video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--nooda-border);
  background: var(--nooda-surface);
}
.p-link { word-break: break-all; }

.p-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--nooda-border);
  border-bottom: 1px solid var(--nooda-border);
  color: var(--nooda-text-secondary);
  font-size: 14px;
}
.p-open-app { margin-inline-start: auto; color: var(--nooda-primary); }

.p-section-title { font-size: 20px; margin-bottom: var(--space-lg); }

/* ---------- السلسلة ---------- */
.p-thread { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.p-thread li {
  position: relative;
  padding-inline-start: var(--space-2xl);
  color: var(--nooda-text-secondary);
  line-height: 1.8;
}
/* الخيط الذي يصل حبّات السلسلة — عمود واحد تتعلق به النقاط. */
.p-thread li::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 12px;
  bottom: calc(-1 * var(--space-md));
  width: 1px;
  background: var(--nooda-border);
}
.p-thread li:last-child::before { display: none; }
.p-thread li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--nooda-border);
}
.p-thread li.is-current::after { background: var(--nooda-primary); }
.p-thread li.is-current { color: var(--nooda-text-primary); }
.p-thread a { color: var(--nooda-text-secondary); }
.p-thread a:hover { color: var(--nooda-primary); }

/* ---------- التعليقات ---------- */
.p-comments { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xl); }
.p-comments li { padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--nooda-border); }
.p-comments p { color: var(--nooda-text-secondary); line-height: 1.85; }

/* ---------- رأس صفحة الملف ---------- */
.p-profile-head { display: flex; align-items: center; gap: var(--space-lg); margin-block: var(--space-lg); }
.p-profile-head h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); }
.p-profile-head .p-handle { font-size: 15px; }

/* ---------- ترقيم الصفحات ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-4xl);
}
.pager-now { color: var(--nooda-text-secondary); font-size: 14px; direction: ltr; unicode-bidi: isolate; }

/* ---------- ترجمة المنشور ---------- */
.p-translate { margin-top: calc(-1 * var(--space-md)); }
.p-translate-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--nooda-primary);
  cursor: pointer;
  transition: color var(--motion-base) ease-out;
}
.p-translate-btn:hover { color: var(--nooda-primary-light); }
.p-translate-btn:focus-visible { outline: 2px solid var(--nooda-primary); outline-offset: 3px; border-radius: var(--radius-xs); }
/* النص المترجم يفقد الوسوم كروابط (يُحقن نصاً لا HTML)، فيحتفظ بفواصل أسطره على الأقل. */
#p-body[lang] { white-space: pre-wrap; }