/* نظام متابعة الكتب الرسمية — محافظة السويداء
   ---------------------------------------------------------------------------
   اللغة البصرية: صفحة الدفتر، لا لوحة تحكّم.
   حافّة مسطَّرة تحمل الاتجاه، حبر على ورق غير مبيَّض، أرقام جدولية،
   ولون مشبع واحد محجوز لسؤال واحد: بيد من الكتاب الآن؟

   عربي RTL كامل: كل خاصية اتجاهية منطقية (inline-start/end) لا صلبة.
   بلا CDN وبلا طلب خارجي: الخطوط محلية، والمجموعة الاحتياطية تعمل بدونها.
   سياسة أمن المحتوى تحجب سمة style، فكل قياس يمرّ من هنا.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo-semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── الورق والحبر ──────────────────────────────────────────────── */
  --paper: #f5f6f4;
  --sheet: #ffffff;
  --ink: #14201d;
  --ink-2: #55605c;
  --ink-3: #838d89;
  --rule: #d7dbd7;
  --rule-soft: #e8ebe8;

  /* ── هوية الدولة ───────────────────────────────────────────────── */
  /* القيم مسحوبة من خلفية موقع وزارة الداخلية السورية نفسها:
     الأرضية بين #042b28 و#0d342f، ولون الهوية #b8a878. */
  --gov-green: #0b332d;
  --gov-green-l: #17514e;
  --gov-gold: #b8a878;
  --gov-gold-d: #6b5c2c;   /* الذهبي حين يصير نصّاً: تباين ٥٫٨:١ */
  --gov-gold-s: #f5f1e6;

  /* ── الإشارات ─────────────────────────────────────────────────── */
  --seal: #8e2f34;         /* نجوم العلم الحمر: السرّي والهدم وحدهما */
  --seal-soft: #f8eded;
  --warn: #7a5410;
  --warn-soft: #f9f0dd;

  /* ── القياس ───────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.25rem;
  --s-7: 3.5rem;

  --r-sm: 3px;              /* قفل الشكل: حافّة واحدة صغيرة للكل، */
  --r-md: 5px;              /* والحبّة الكاملة للشارات وحدها */
  --measure: 64ch;
  --shell: 74rem;

  --font-ui: 'Cairo', 'Segoe UI', 'Noto Sans Arabic', 'Dubai', Tahoma, system-ui, sans-serif;
  --font-naskh: 'Amiri', 'Traditional Arabic', 'Noto Naskh Arabic', 'Segoe UI', serif;
}

* { box-sizing: border-box; }

html {
  font-size: 16.5px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--gov-green);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── الترويسة: شريط بازلتي من صفّين ───────────────────────────────── */
.skip {
  position: absolute;
  inset-inline-start: -999rem;
  top: 0;
  background: var(--sheet);
  color: var(--ink);
  padding: var(--s-2) var(--s-4);
  z-index: 10;
}
.skip:focus { inset-inline-start: var(--s-3); top: var(--s-2); }

.topbar {
  background-color: var(--gov-green);
  /* صدى الزخرفة الهندسية في مواقع الدولة، مرسومة بتدرّجات لا بصورة:
     لا ملف يُحمَّل ولا طلب يخرج (المبدأ ٨). */
  background-image:
    repeating-linear-gradient(45deg, rgba(184, 168, 120, 0.055) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgba(184, 168, 120, 0.055) 0 1px, transparent 1px 30px);
  color: #e9e6dc;
  border-block-end: 2px solid var(--gov-gold);
}
.topbar-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

.topbar-id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: 0.7rem 0.55rem;
}
.brand {
  font-family: var(--font-naskh);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gov-gold);
  margin-inline-end: auto;
}
.whoami {
  font-size: 0.82rem;
  color: #a8b3ac;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-block-start: 1px solid rgba(184, 168, 120, 0.22);
}
.topbar nav a {
  color: #c6cec8;
  text-decoration: none;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  border-block-end: 3px solid transparent;
  margin-block-end: -1px;
}
.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.topbar nav a[aria-current='page'] {
  color: #fff;
  font-weight: 600;
  border-block-end-color: var(--gov-gold);
}

.logout { margin: 0; }
.logout button {
  background: none;
  border: 1px solid rgba(184, 168, 120, 0.45);
  color: #c6cec8;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.12rem 0.65rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.logout button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

main {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
}

/* ── شاشة الدخول: الموضع الوحيد الذي تُعرض فيه الهوية كاملةً ───────── */
/* بقيّة الشاشات أسطح عمل تُقرأ ثماني ساعات، فتبقى فاتحة. هذه ليست سطح عمل. */
body.signed-out {
  background-color: var(--gov-green);
  background-image:
    repeating-linear-gradient(45deg, rgba(184, 168, 120, 0.06) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgba(184, 168, 120, 0.06) 0 1px, transparent 1px 30px);
  min-height: 100dvh;
}
body.signed-out .topbar { background: none; border: 0; }
body.signed-out .topbar-id { justify-content: center; padding-block: var(--s-7) 0; }
body.signed-out .brand {
  font-size: 2.2rem;
  line-height: 1.4;
  margin-inline-end: 0;
  text-align: center;
}
body.signed-out main { max-width: 27rem; padding-block-start: var(--s-5); }
body.signed-out h1 {
  color: var(--gov-gold);
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  max-width: none;
  margin-block-end: var(--s-4);
}
body.signed-out .panel {
  border: 0;
  border-block-start: 3px solid var(--gov-gold);
  padding: var(--s-5);
  max-width: none;
}
body.signed-out .btn { width: 100%; text-align: center; }
body.signed-out .muted { color: #9fada5; text-align: center; font-size: 0.85rem; }

/* ── سلّم الطباعة ─────────────────────────────────────────────────── */
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}
h2 {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.4;
  margin: var(--s-5) 0 var(--s-3);
  color: var(--ink);
}
p { margin: 0 0 var(--s-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: #14514a; }
a:hover { color: var(--gov-green); text-decoration-thickness: 2px; }

/* ── الأقسام: يجمعها خطّ المسطرة لا الصندوق ───────────────────────── */
.panel {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-4);
}
.panel > h2:first-child {
  margin-block-start: 0;
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--rule-soft);
}

/* ── ترويسة الكتاب: الرقم هو الهويّة ──────────────────────────────── */
.letterhead {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-inline-start: 5px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-4);
}
.letterhead.dir-in { border-inline-start-color: var(--gov-green); }
.letterhead.dir-out { border-inline-start-color: var(--ink-3); }

.letterhead-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}
.letterhead-num {
  font-family: var(--font-naskh);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
h1.letterhead-num { margin: 0; max-width: none; }
.letterhead-reg {
  font-size: 0.9rem;
  color: var(--ink-2);
}
.letterhead-title {
  font-size: 1.16rem;
  line-height: 1.5;
  margin: var(--s-3) 0 0;
  max-width: var(--measure);
}
.letterhead-meta {
  margin: var(--s-2) 0 0;
  font-size: 0.88rem;
  color: var(--ink-2);
}
.flags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-block-start: var(--s-3); }

/* ── الخطوة التالية: اللوح الذي يُقرأ أولاً ────────────────────────── */
.next-step {
  border: 1px solid var(--rule);
  border-inline-start: 5px solid var(--ink-3);
  border-radius: var(--r-md);
  background: var(--sheet);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-4);
}
.next-step h2 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 var(--s-1);
  border: 0;
  padding: 0;
}
.next-step p { font-size: 1.08rem; margin: 0; }
.next-step .who { font-size: 0.9rem; color: var(--ink-2); }
.next-mine { border-inline-start-color: var(--gov-gold); background: var(--gov-gold-s); }
.next-mine .turn { color: var(--gov-gold-d); font-weight: 700; }

/* ── النماذج ──────────────────────────────────────────────────────── */
.field { margin-block-end: var(--s-4); }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-block-end: var(--s-1);
}
.field .hint {
  font-size: 0.83rem;
  color: var(--ink-2);
  margin-block-start: var(--s-1);
  max-width: var(--measure);
}
.req::after { content: ' *'; color: var(--seal); }

input[type='text'], input[type='date'], input[type='number'],
input[type='password'], input[type='file'], select, textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #b9b3aa;
  border-radius: var(--r-sm);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.97rem;
  background: var(--sheet);
  color: var(--ink);
}
input[type='text'], input[type='number'], input[type='date'] {
  font-variant-numeric: tabular-nums;
}
/* حقل نصّي بعرض الشاشة كلها لرقم من ثلاث خانات عبث: الحقل بقدر ما يُكتب فيه */
input[type='text'], input[type='date'], input[type='number'],
input[type='password'], input[type='file'], select { max-width: 30rem; }
textarea { max-width: 46rem; }
.filters input, .filters select { max-width: none; }

input:hover, select:hover, textarea:hover { border-color: #8f8a81; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gov-green);
  outline-offset: 0;
  border-color: var(--gov-green);
}
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.6; }
input[type='checkbox'], input[type='radio'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gov-green);
  margin: 0;
  vertical-align: middle;
}
.radio-line { padding-block: 0.15rem; }
.radio-line label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-5); }

/* ── الأزرار: واحد رئيسي في كل شاشة ──────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.44rem 1.15rem;
  border: 1px solid var(--gov-green);
  border-radius: var(--r-sm);
  background: var(--gov-green);
  color: #fff;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, transform 0.06s ease;
}
.btn:hover { background: var(--gov-green-l); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-plain {
  background: var(--sheet);
  color: var(--ink);
  border-color: #b9b3aa;
  font-weight: 400;
}
.btn-plain:hover { background: #f0ede8; color: var(--ink); }
.btn-danger { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn-danger:hover { background: #a03a3f; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-block-start: var(--s-4);
}
.btn-row form { margin: 0; }
.panel > .btn-row:first-child, .actions .btn-row { margin-block-start: 0; }

/* ── الرسائل: شريط جانبي لا صندوق ملوَّن ─────────────────────────── */
.msg {
  border-inline-start: 4px solid;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-2) var(--s-4);
  margin-block-end: var(--s-4);
  max-width: var(--measure);
}
.msg-error { background: var(--seal-soft); border-color: var(--seal); }
.msg-warn { background: var(--warn-soft); border-color: var(--warn); }
.msg-ok { background: var(--gov-gold-s); border-color: var(--gov-gold-d); }
.msg strong { font-weight: 700; }
.msg ul { margin: var(--s-1) 0 0; padding-inline-start: 1.1rem; }

/* ── الجداول: المسطرة، بلا حشو رمادي ─────────────────────────────── */
.table-wrap { overflow-x: auto; margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { padding: 0.55rem 0.7rem; text-align: start; vertical-align: top; }
thead th {
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  border-block-end: 2px solid var(--ink-3);
  padding-block-end: 0.35rem;
}
tbody td { border-block-end: 1px solid var(--rule-soft); }
tbody tr:hover td { background: #faf8f4; }
tbody tr:last-child td { border-block-end: 0; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* جدول بأعمدة قصيرة يأخذ عرضه من محتواه بدل أن يُمدّ عبر الشاشة كلها */
table.compact { width: auto; min-width: 22rem; }
table.compact th, table.compact td { padding-inline-end: var(--s-6); }
table.compact th:last-child, table.compact td:last-child { padding-inline-end: 0.7rem; }

/* خليّة الرقم في القوائم: الرقم هو المفتاح، والسجل تحته بصوت خافت */
.cell-key { white-space: nowrap; }
.cell-key a {
  font-family: var(--font-naskh);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--ink);
  border-block-end: 1px solid var(--rule);
}
.cell-key a:hover { color: var(--gov-gold-d); border-block-end-color: var(--gov-gold); }
.cell-key .reg { display: block; font-size: 0.76rem; color: var(--ink-2); line-height: 1.4; }
.cell-subject { min-width: 0; }
.cell-subject .sub { display: block; max-width: 46ch; }

/* ── الشارات: حبّة كاملة، ومعنى واحد لكل لون ──────────────────────── */
.badge {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.55;
  font-weight: 600;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink-2);
  white-space: nowrap;
}
button.badge { cursor: pointer; font-family: var(--font-ui); }
button.badge:hover { border-color: var(--gov-green); color: var(--ink); }
.badge-state { background: var(--sheet); border-color: var(--gov-green); color: var(--gov-green); }
.badge-closed { background: #eeebe6; border-color: transparent; color: var(--ink-2); }
.badge-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.badge-danger { background: var(--seal-soft); border-color: var(--seal); color: var(--seal); }

/* ── نظرة الرئيسية: العدد أكبر من اسمه ───────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat {
  background: var(--sheet);
  padding: var(--s-2) var(--s-4) var(--s-3);
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.stat:hover { background: #faf8f4; color: var(--ink); }
.stat .n {
  display: block;
  font-family: var(--font-ui);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gov-green);
  font-variant-numeric: tabular-nums;
}
.stat .label { display: block; font-size: 0.82rem; color: var(--ink-2); margin-block-start: 0.1rem; }
.stat-closed .n { color: var(--ink-3); font-weight: 400; }

/* ── الخط الزمني: تسلسل حقيقي، فالعلامات مستحقّة ─────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  border-inline-start: 2px solid var(--rule);
  padding: 0 0 var(--s-4) 0;
  padding-inline-start: var(--s-4);
  margin-inline-start: var(--s-1);
  position: relative;
}
.timeline li:last-child { border-inline-start-color: transparent; padding-block-end: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  inset-inline-start: -5px;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sheet);
  border: 2px solid var(--ink-3);
}
.timeline li:first-child::before { background: var(--gov-green); border-color: var(--gov-green); }
.timeline li.flagged { border-inline-start-color: var(--warn); }
.timeline li.flagged::before { background: var(--warn); border-color: var(--warn); }
.timeline .what { font-weight: 600; }
.timeline .when { font-size: 0.82rem; color: var(--ink-2); }
.timeline .msg { margin-block: var(--s-1); font-size: 0.9rem; }

/* ── قائمة الوصف ─────────────────────────────────────────────────── */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  margin: 0;
}
.kv dt {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-2);
  padding-block: 0.35rem;
  padding-inline-end: var(--s-5);
  white-space: nowrap;
  border-block-end: 1px solid var(--rule-soft);
}
.kv dd {
  margin: 0;
  padding-block: 0.35rem;
  border-block-end: 1px solid var(--rule-soft);
}
/* الحدّ على النصّ نفسه لا على الخانة، وإلا انقطع خطّ المسطرة في منتصف اللوح */
.kv dd > * { max-width: var(--measure); }
.kv dt:last-of-type, .kv dd:last-of-type { border-block-end: 0; }

/* ── المصفاة ─────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.filters .field { margin-block-end: 0; min-width: 9rem; flex: 1 1 9rem; }
.filters .btn-row { margin-block-start: 0; }

/* سطر تمهيدي يشرح غرض الشاشة — أكبر قليلاً من النصّ وأخفت من العنوان */
.lede {
  font-size: 1.05rem;
  color: var(--ink-2);
  max-width: var(--measure);
  margin-block-end: var(--s-4);
}

/* الكلمة المولَّدة: تُقرأ مرّة وتُنقل بلا خطأ، فالوضوح قبل الجمال */
.issued {
  background: var(--gov-gold-s);
  border: 1px solid var(--gov-gold);
  border-inline-start: 5px solid var(--gov-gold);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-5);
}
/* تنبيه يستحقّ التوقّف عنده — لا خطأ، بل أمرٌ يجب أن يُعلَم */
.stop {
  border-inline-start: 4px solid var(--seal);
  background: var(--seal-soft);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.stop .t { font-weight: 700; color: var(--seal); display: block; margin-block-end: var(--s-1); }
.stop p:last-child { margin-block-end: 0; }

.pw-form { display: flex; gap: var(--s-2); align-items: center; }
.pw-form input { max-width: 11rem; font-size: 0.9rem; padding: 0.3rem 0.5rem; }
.pw-form .btn { white-space: nowrap; }

.issued h2 { margin-block-start: 0; border: 0; padding: 0; font-size: 1.06rem; }
.issued .pw {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gov-gold-d);
  background: var(--sheet);
  border: 1px dashed var(--gov-gold);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-block: var(--s-3);
  direction: ltr;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: all;
  max-width: none;
}

.count {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-block: 0 var(--s-2);
}

/* ── أصناف عرض ────────────────────────────────────────────────────── */
/* سمات style المضمَّنة محجوبة بسياسة أمن المحتوى (style-src 'self')،
   فتموت صامتةً. كل تحديد عرض يمرّ من هنا. */
.w-sm { max-width: 14rem; }
.w-md { max-width: 22rem; }
.w-lg { max-width: 26rem; }
.mt-xs { margin-block: 0.4rem 0; }

/* ── مساعدات ──────────────────────────────────────────────────────── */
.muted { color: var(--ink-2); }
.empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
}
.empty p { max-width: none; }
details.optional {
  border-block-start: 1px solid var(--rule-soft);
  margin-block: var(--s-4) 0;
  padding-block-start: var(--s-2);
}
details.optional summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-2);
  padding-block: var(--s-2);
}
details.optional summary:hover { color: var(--ink); }
details.optional[open] summary { margin-block-end: var(--s-3); }

/* ── الهاتف ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  html { font-size: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  main { padding: var(--s-4) var(--s-3) var(--s-6); }
  .topbar-inner { padding: 0 var(--s-3); }
  .brand { font-size: 1.15rem; }
  .topbar nav { overflow-x: auto; flex-wrap: nowrap; }
  .topbar nav a { font-size: 0.85rem; padding: 0.5rem 0.6rem; white-space: nowrap; }
  .panel, .letterhead { padding: var(--s-3); }
  .table-wrap { margin-inline: calc(var(--s-3) * -1); padding-inline: var(--s-3); }
  .letterhead-num { font-size: 2.8rem; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { border-block-end: 0; padding-block: var(--s-2) 0; }
  table { font-size: 0.88rem; }
}