/* ذكر منار العلوم — ملف الأنماط الوحيد.
   المرجع البصري: الكتاب المحقق المطبوع. ستة ألوان لا سابع لها،
   وزخرفتان اثنتان: السرلوح والجدول. */

/* ───────────────────────── الخط ───────────────────────── */

@font-face {
  font-family: 'Amiri';
  src: url('/assets/fonts/Amiri-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amiri';
  src: url('/assets/fonts/Amiri-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ───────────────────────── المتغيرات ───────────────────────── */

:root {
  --waraq:   #FBF8F1;  /* خلفية الصفحة */
  --hamish:  #EFE8D8;  /* خلفيات ثانوية */
  --hibr:    #1E1B18;  /* النص الأساسي */
  --hibr-2:  #5C554B;  /* النص الثانوي */
  --tahmir:  #7A2E24;  /* العناوين والروابط والزر الأساسي */
  --tadhhib: #A6883A;  /* الفواصل والجدول والزخرفة فقط */

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;

  /* امتداد غير مرئي لمساحة اللمس حول الروابط النصية الصغيرة،
     ليبلغ الهدف 44px كما يوجب البند 6. ليس مسافة تخطيط فلا يخضع لمقياس البند 4.4 */
  --hit: 9px;

  color-scheme: light;
}

/* ───────────────────────── الأساس ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  font-size: 19px;
  line-height: 1.9;
  color: var(--hibr);
  background: var(--waraq);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  body { font-size: 18px; }
}

img { max-width: 100%; height: auto; }

a {
  color: var(--tahmir);
  touch-action: manipulation;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover { color: var(--hibr); }

:focus-visible {
  outline: 2px solid var(--tahmir);
  outline-offset: 2px;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

/* ───────────────────────── الأنماط النصية ───────────────────────── */

.text-small { font-size: 15px; line-height: 1.7; }

.h-site {
  text-wrap: balance;
  font-size: clamp(30px, 3vw + 18px, 46px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--tahmir);
}

.h-work {
  text-wrap: balance;
  font-size: clamp(26px, 2.2vw + 16px, 36px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--tahmir);
}

.h-section {
  text-wrap: balance;
  font-size: clamp(22px, 1.2vw + 16px, 27px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--tahmir);
}

.h-minor {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hibr);
}

.prose { max-width: 36em; text-align: start; text-wrap: pretty; }
.prose p + p { margin-block-start: var(--s-2); }

.muted { color: var(--hibr-2); }

/* «٥٥٤ صفحة» و«٢٠٠٥م» تبقى كتلة واحدة لا تنكسر */
.nowrap { white-space: nowrap; }

/* أعمدة الأرقام تتراص بعرض واحد فتستقيم رأسيا */
.tabular { font-variant-numeric: tabular-nums; }

/* ───────────────────────── التخطيط ───────────────────────── */

.container {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--s-3);
}

@media (min-width: 900px) {
  .container { padding-inline: var(--s-4); }
}

main { flex: 1 0 auto; }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 10;
  background: var(--waraq);
  color: var(--tahmir);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--tadhhib);
}

.skip-link:focus {
  inset-inline-start: var(--s-2);
  top: var(--s-1);
}

/* ───────────────────────── الزخرفتان ───────────────────────── */

/* السرلوح: خط ذهبي في وسطه نجمة ثمانية */
.sarlouh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-3);
}

.sarlouh::before,
.sarlouh::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--tadhhib);
}

.sarlouh img {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
}

/* الجدول: خطان ذهبيان رفيعان بلا زوايا مستديرة */
.jadwal {
  border: 1px solid var(--tadhhib);
  outline: 1px solid var(--tadhhib);
  outline-offset: 4px;
  padding: var(--s-4);
  margin: var(--s-1);
}

@media (max-width: 600px) {
  .jadwal { padding: var(--s-3); }
}

/* ───────────────────────── الرأس ───────────────────────── */

.site-header {
  border-block-end: 1px solid var(--tadhhib);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-block: var(--s-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--hibr);
}

.brand:hover { color: var(--hibr); }
.brand:hover .brand-name { text-decoration: underline; text-underline-offset: 4px; }

.brand img { height: 44px; width: auto; }

.brand-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.site-nav a {
  font-size: 18px;
  text-decoration: none;
  padding-block: var(--s-1);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ───────────────────────── التذييل ───────────────────────── */

.site-footer {
  background: var(--hamish);
  margin-block-start: var(--s-6);
  padding-block: var(--s-4);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
}

.site-footer p { margin-block-end: var(--s-1); }
.site-footer p:last-child { margin-block-end: 0; }

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

/* ───────────────────────── مسار التنقل ───────────────────────── */

.breadcrumb {
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
  padding-block-start: var(--s-3);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--tadhhib);
  margin-inline-end: var(--s-1);
}

.breadcrumb a { color: var(--tahmir); }
.breadcrumb [aria-current="page"] { color: var(--hibr-2); }

/* ───────────────────────── ترويسة الرئيسية ───────────────────────── */

.site-intro {
  text-align: center;
  padding-block: var(--s-5) var(--s-4);
}

.site-intro .tagline {
  text-wrap: pretty;
  color: var(--hibr-2);
  max-width: 34em;
  margin-inline: auto;
  margin-block-start: var(--s-2);
}

.site-intro .count {
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
  margin-block-start: var(--s-2);
}

/* ───────────────────────── الفهرس ───────────────────────── */

.fann-section { margin-block-start: var(--s-5); }

.fann-section > .h-section { margin-block-end: var(--s-2); }
.fann-section > .h-section a { text-decoration: none; }
.fann-section > .h-section a:hover {
  color: var(--tahmir);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.index-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2);
  text-decoration: none;
  color: var(--hibr);
}

.index-row:hover,
.index-row:focus-visible {
  background: var(--hamish);
  color: var(--hibr);
}

.index-row .thumb {
  flex: none;
  width: 48px;
  height: 72px;
}

.index-row img.thumb {
  object-fit: cover;
  border: 1px solid var(--tadhhib);
  border-radius: 2px;
}

.index-body { display: block; flex: 1; min-width: 0; }

.index-line {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

/* خط التوصيل المنقط بين العنوان والنوع */
.index-title {
  display: flex;
  flex: 1;
  min-width: 0;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hibr);
}

.index-title::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--tadhhib);
  margin-inline: 12px;
  align-self: flex-end;
  margin-bottom: .45em;
}

/* خط التوصيل يقع على .45em من أسفل سطر العنوان (البند 5.3)، فيوضع
   النوع بلا هامش سفلي حتى يستقر خط كتابته على خط التوصيل نفسه */
.index-type {
  flex: none;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
  align-self: flex-end;
}

/* الروابط النصية الصغيرة: مساحة لمسها تمتد بعنصر زائف فلا يتغير تخطيطها */
.breadcrumb a,
.footer-links a,
.author-list a,
.page-404 a,
.fann-section > .h-section a {
  position: relative;
}

.breadcrumb a::after,
.footer-links a::after,
.author-list a::after,
.page-404 a::after,
.fann-section > .h-section a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: calc(var(--hit) * -1);
}

/* مسار التنقل إن انكسر سطرين: فجوة رأسية تمنع تداخل هدفي لمس */
.breadcrumb ol { row-gap: var(--s-3); }

.index-meta {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
}

@media (max-width: 600px) {
  .index-line { display: block; }
  .index-title { display: block; }
  .index-title::after { content: none; }
  .index-type { display: block; margin-bottom: 0; }
}

/* ───────────────────────── الغلاف البديل ───────────────────────── */

.cover-alt {
  aspect-ratio: 2 / 3;
  background: var(--hamish);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 14%;
  text-align: center;
  container-type: inline-size;
  border-radius: 2px;
  overflow: hidden;
}

.cover-alt::before,
.cover-alt::after {
  content: "";
  position: absolute;
  border: 1px solid var(--tadhhib);
  pointer-events: none;
}

.cover-alt::before { inset: 10px; }
.cover-alt::after  { inset: 14px; }

.cover-alt .ca-title {
  text-wrap: balance;
  font-weight: 700;
  color: var(--tahmir);
  font-size: clamp(15px, 9cqw, 24px);
  line-height: 1.4;
}

.cover-alt .ca-type {
  color: var(--hibr-2);
  font-size: 15px;
  line-height: 1.5;
}

/* المصغرة: الجدول وحده بلا نص، لأن العنوان مكتوب إلى جانبها في الصف
   ولا يجوز في الموقع نص أصغر من 15px */
.cover-alt.thumb { padding: 0; }
.cover-alt.thumb::before { inset: 4px; }
.cover-alt.thumb::after  { inset: var(--s-1); }

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

.work-frame { margin-block-start: var(--s-3); }

.work-head {
  text-align: center;
  margin-block-end: var(--s-4);
}

.work-head .h-work { margin-block-end: var(--s-1); }

/* حجم المتن بلون الحبر الثانوي: التمييز باللون لا بحجم يخرج عن مقياس البند 4.3 */
.work-byline {
  text-wrap: pretty;
  color: var(--hibr-2);
  font-size: 19px;
  line-height: 1.7;
}

.work-grid { display: block; }

@media (min-width: 800px) {
  .work-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--s-4);
    align-items: start;
  }
}

/* تحت 800px: الغلاف موسط بعرض أقصاه 200px، والزران بعرض كامل،
   وبين عمود الغلاف وما تحته 40px. وفوقها العمودان متجاوران فلا هامش،
   وإلا اجتمع الهامش مع حشو الجدول فصار الفراغ 80px وهو خارج مقياس البند 4.4 */
@media (max-width: 799px) {
  .work-aside { margin-block-end: var(--s-4); }

  .work-cover-box {
    max-width: 200px;
    margin-inline: auto;
  }
}

.work-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 12px 24px -16px rgb(30 27 24 / .45);
}

.work-actions {
  margin-block-start: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.btn {
  display: flex;
  touch-action: manipulation;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--s-2);
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background: var(--tahmir);
  color: var(--waraq);
  border: 1px solid var(--tahmir);
}

.btn-primary:hover {
  color: var(--waraq);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-secondary {
  background: transparent;
  color: var(--hibr);
  border: 1px solid var(--hibr);
}

.btn-secondary:hover {
  color: var(--hibr);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.no-file {
  margin-block-start: var(--s-3);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
  text-align: center;
}

.work-block + .work-block { margin-block-start: var(--s-4); }

.work-block > .h-minor { margin-block-end: var(--s-2); }

.work-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  align-items: baseline;
}

.work-meta dt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
}

.work-meta dd {
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  line-height: 1.7;
  color: var(--hibr);
}

.related { margin-block-start: var(--s-5); }
.related > .h-section { margin-block-end: var(--s-2); }

/* ───────────────────────── صفحة القراءة ───────────────────────── */

body.reader {
  display: block;
  min-height: 100dvh;
  overflow: hidden;
}

.reader-bar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: max(var(--s-2), env(safe-area-inset-right)) max(var(--s-2), env(safe-area-inset-left));
  border-block-end: 1px solid var(--tadhhib);
  background: var(--waraq);
  font-size: 15px;
  line-height: 1.4;
}

.reader-bar a {
  display: flex;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
}
.reader-bar a:hover { text-decoration: underline; text-underline-offset: 4px; }

.reader-site { flex: none; font-weight: 700; color: var(--hibr); }

.reader-title {
  font-size: 15px;
  font-weight: 400;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hibr-2);
}

.reader-bar .reader-link { flex: none; }

.reader-frame {
  display: block;
  width: 100%;
  height: calc(100dvh - 56px);
  border: 0;
}

.only-wide { display: inline; }
.only-narrow { display: none; }

@media (max-width: 700px) {
  .reader-site { display: none; }
  .only-wide { display: none; }
  .only-narrow { display: inline; }
}

/* ───────────────────────── صفحة المؤلف و404 ───────────────────────── */

.page-head {
  padding-block-start: var(--s-5);
  margin-block-end: var(--s-3);
}

.author-works { margin-block-start: var(--s-5); }
.author-works > .h-section { margin-block-end: var(--s-2); }

.author-list {
  list-style: none;
  padding: 0;
  max-width: 24em;
}

.author-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-1);
  border-block-end: 1px solid var(--hamish);
}

.author-list .count {
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hibr-2);
}

.page-404 { padding-block: var(--s-5) var(--s-6); }
.page-404 .h-site { margin-block-end: var(--s-3); }