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

/* ── الخطّ ────────────────────────────────────────────────────────────────
   IBM Plex Sans Arabic، **نسخةٌ ثانية بقصد** من `admin-ui/public/fonts/`: تلك تمرّ
   بـ`vite` فتُعاد كتابة مساراتها إلى `/admin/fonts/`، ورحلةُ المساهم بلا خطوة بناء —
   فلو أشارت إلى ناتج اللوحة لضاع خطُّها كلّما بُنيت اللوحة بـ`emptyOutDir` ولم تُعد.
   وهي بايتاتٌ لا منطق، فلا تنحرف نسخةٌ عن أخرى.
   والوجهان مفصولان بـ`unicode-range`: العربيّ ٤٢ ك.ب لكل وزن، واللاتينيّ ١٩ — فلا
   يُنزَّل اللاتينيّ إلا حيث يُكتب رقمٌ أو حرفٌ لاتينيّ. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plex-arabic-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plex-arabic-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/plex-arabic-arabic-600.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/plex-arabic-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/plex-arabic-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/plex-arabic-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#1a1814; --ink-2:#4a4339; --muted:#797264;
  --bg:#f4efe5; --card:#fffdf8; --line:#e4dcca;
  /* حدٌّ أعمق للحوافّ التي تحمل معنى (الحقل، الصفّ) — والفاتح للفواصل الصامتة */
  --line-2:#d6ccb4;
  --accent:#7a5c2e; --accent-soft:#efe6d3;
  --ok:#2f6b4f; --warn:#8a5a12; --bad:#8d3232; --prior:#4a5b7a;
  --r:16px; --r-sm:12px;
  /* ظلٌّ دافئ بطبقتين: خيطٌ قريب يرسم الحافّة، وهالةٌ بعيدة ترفع الورقة عن الورقة */
  --shadow:0 1px 2px rgba(58,44,20,.06), 0 2px 6px rgba(58,44,20,.04), 0 14px 34px -16px rgba(58,44,20,.22);
  --shadow-lift:0 2px 4px rgba(58,44,20,.07), 0 20px 44px -20px rgba(58,44,20,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'IBM Plex Sans Arabic',"Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.9; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/**
 * جوُّ الورقة — طبقةٌ مثبَّتة خلف كل شيء.
 *
 * وهي علاجُ أكبرِ علّةٍ في الشاشة: البطاقة كانت تحتلّ ثلثاً والباقي خلفيةٌ ميتة،
 * فتُقرأ الصفحة «ناقصة» لا «واسعة». فيُملأ الفراغ بضوءٍ من الأعلى وأثرِ اللهجة في
 * الأسفل ونسيجِ حبيباتٍ خفيف — فيصير البياضُ مقصوداً.
 *
 * وفي عنصرٍ مستقلّ لا في `background` الجسم: `background-attachment: fixed` على
 * الجسم يُثقل التمرير على الجوّال (إعادة رسم الطبقة عند كل إطار).
 */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(115% 62% at 50% -12%, #fffefa 0%, rgba(255,254,250,0) 62%),
    radial-gradient(78% 46% at 100% 104%, var(--accent-soft) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(64% 40% at 0% 96%, #fbf7ee 0%, rgba(255,255,255,0) 68%);
}
/* نسيجُ الورق: نقاطٌ بمقدار حبّةٍ على شبكةٍ ٣ بكسلات. بلا صورةٍ ولا بايتٍ إضافيّ. */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(120,96,54,.09) .5px, transparent .5px);
  background-size:3px 3px;
}
/**
 * والصفحة تُوسَّط رأسياً — و`safe` شرطُ سلامتها: بلا الكلمة يقصّ التوسيطُ أعلى
 * المحتوى حين يطول (شاشة الترتيب) فيختفي العنوان فوق الحافّة بلا تمرير. ومتصفّحٌ
 * لا يعرفها يُسقط الإعلان كلَّه فيعود إلى ما كان — لا إلى محتوًى مقصوص.
 */
.wrap{
  max-width:600px; margin:0 auto; padding:22px 16px 56px;
  min-height:100dvh; display:flex; flex-direction:column; justify-content:safe center;
}
.wide{max-width:1180px}
h1,h2,h3{font-weight:700;line-height:1.5;margin:0 0 10px}
/* ولا `letter-spacing` في أيّ عنوان: العربية تتّصل حروفُها، والتباعد يفكّ الوصل. */
h1{font-size:clamp(25px,6.6vw,31px);line-height:1.42;letter-spacing:0}
h2{font-size:clamp(21px,5.4vw,25px);line-height:1.5;letter-spacing:0}
h3{font-size:17px;color:var(--ink-2)}
/* حَلْيةُ المخطوطة: خطٌّ قصير تحت العنوان الأكبر — و`h1` في سبع شاشاتٍ مفصليّة
   (المخاطبة · الترحيب · المسوّدة · الختام · شكرٌ · خطأُ رابط) لا في كل شاشة، فلا
   يصير زخرفاً مكرَّراً يُملّ.
   و`to left` لا `90deg`: التدرّج فيزيائيّ لا منطقيّ، والعنوانُ في RTL يبدأ من اليمين
   — فلو تُرك `90deg` لبدأ الخيطُ شاحباً عند العنوان وثَخُن حيث لا شيء. */
h1::after{content:'';display:block;width:46px;height:2px;border-radius:2px;margin-top:12px;
  background:linear-gradient(to left,var(--accent),rgba(0,0,0,0))}
p{margin:0 0 14px}
small,.small{font-size:14px;color:var(--muted);line-height:1.85}
/**
 * البطاقة ورقةٌ لا صندوق: تدرُّجٌ خفيف من أعلى، وخيطُ ضوءٍ داخليّ عند حافّتها
 * العليا، وحرفٌ بلهجة المساحة على جانبها المبتدئ — أثرُ حبرٍ على طرف الصفحة.
 */
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fffefb 0%,var(--card) 46%);
  border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px; box-shadow:var(--shadow);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow);
}
/* حرفُ الورقة: خيطٌ باللهجة على الجانب المبتدئ يخفت سريعاً — أثرُ حبرٍ لا شريطُ
   لون. جُرِّب ٣ بكسلات ممتدّاً إلى ٧٨٪ فقُرئ على البطاقة القصيرة **شريطاً** غريباً. */
.card::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:0; width:2px;
  background:linear-gradient(180deg,var(--accent) 0%,rgba(0,0,0,0) 46%);
  opacity:.55;
}
.card + .card{margin-top:14px}

/* ── شريط المراحل ─────────────────────────────────────────────────────────
   كان سبعَ شرطاتٍ متطابقة لا يُقرأ منها الموضع إلا بنصٍّ بجانبها. فصار: رقمُ
   المرحلة كبيراً بالهندية، وقضبانٌ بثلاث حالات — ماضٍ، وحاضرٌ أعرضُ وأعلى، وآتٍ. */
.prog{margin:0 0 20px}
.prog__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.prog__now{display:flex;align-items:baseline;gap:7px;color:var(--muted);font-size:13.5px}
.prog__now b{font-size:27px;font-weight:700;color:var(--accent);line-height:1}
.prog__rail{display:flex;gap:5px;align-items:center;height:8px}
.prog__rail i{flex:1;height:4px;border-radius:99px;background:var(--line-2);transition:.3s}
.prog__rail i.is-done{background:var(--accent);opacity:.42}
.prog__rail i.is-now{flex:1.9;height:8px;background:var(--accent);opacity:1;
  box-shadow:0 0 0 3px var(--accent-soft)}
/* و`.progress` و`.stagelabel` حُذفتا معاً: حلّت محلَّهما `.prog*`، ولا يُترك محدِّدٌ
   في ورقةٍ بلا من يستعمله. انظر `bar()` في `journey.js`. */
/* شارة وضع المقابلة: تُذكّر المسجِّل أنه يسجّل عن غيره في كل شاشة */
.ivbadge{background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;
  padding:2px 10px;font-size:11.5px;color:var(--ink);white-space:nowrap}

/* حقول */
label{display:block;font-weight:600;margin-bottom:7px;font-size:15px;color:var(--ink-2)}
input[type=text],input[type=tel],input[type=date],input[type=password],input[type=number],select,textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;font:inherit;color:inherit;
  box-shadow:inset 0 1px 2px rgba(58,44,20,.04);
  transition:border-color .15s, box-shadow .15s;
}
input[type=text],input[type=tel],input[type=password],textarea{min-height:52px}
input::placeholder,textarea::placeholder{color:#b3aa98}
/* وحلقةُ التركيز باللهجة نفسها لا بدرجتها الفاتحة: تلك تُخالط الورقَ فلا تكاد تُرى،
   والتركيز أوّلُ ما يحتاجه من ينتقل بلوحة المفاتيح.
   وحلقةٌ واحدة لا حلقتان: جُرِّب `outline` مع هالةٍ ٤ بكسلات فصار الحقلُ **مؤطَّراً
   بإطارين** — وأوّلُ حقلٍ في كل شاشة مركَّزٌ من نفسه، فالثقلُ يقع في كل مرّة. */
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
  box-shadow:inset 0 1px 2px rgba(58,44,20,.04);
}
.hint{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.8}

/* أزرار */
button{font:inherit;cursor:pointer;border-radius:var(--r-sm);border:1px solid transparent;
  padding:13px 22px;transition:filter .15s, transform .08s, box-shadow .15s, background .15s}
/* لون النصّ فوق اللهجة متغيّر: هوية المساحة قد تكون فاتحة فلا يُقرأ عليها أبيض */
.btn{background:var(--accent);color:var(--accent-ink,#fff);font-weight:600;min-height:52px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -10px rgba(58,44,20,.7)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px -8px rgba(58,44,20,.7)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink-2);font-weight:600;min-height:52px}
.btn-ghost:hover{background:var(--card);border-color:var(--accent)}
.btn-ghost:active{transform:translateY(1px)}
/* ٤٤ بكسلاً حدُّ اللمس المريح — والرحلة تُقطع على جوّالٍ بيد كبير سنّ */
.btn-quiet{background:transparent;border:none;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;padding:11px 10px;min-height:44px}
.btn-quiet:hover{color:var(--ink-2)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.spacer{flex:1}
/**
 * وأزرارُ الفعل تقتسم السطر بدل أن تطفو صغيرةً في طرفه.
 * الإبهام يبلغ عرض الشاشة لا زاويتَها، والزرُّ الوحيد يملأ السطر فيُقرأ دعوةً
 * واحدة لا خياراً بين أشياء. و`min-width` تمنع انقسامَ الثلاثة إلى أعمدةٍ ضيّقة.
 */
.actions{margin-top:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.actions .btn,.actions .btn-ghost{flex:1 1 140px;min-width:130px}
/* وصفٌّ ليس فيه إلا «رجوع» يُوسَّط: كان يطفو في طرف الشاشة يتيماً تحت الزرّ.
   و`:has` غيرُ معروفةٍ في متصفّحٍ قديم فتُسقط القاعدةَ وحدها — ولا يتأثّر شيء. */
.actions:has(> .btn-quiet:only-child){justify-content:center;margin-top:10px}

/* قوائم الأسماء */
.namelist{display:flex;flex-direction:column;gap:9px;margin:12px 0}
.nameitem{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:8px 12px;box-shadow:0 1px 2px rgba(58,44,20,.04);
  transition:border-color .15s, box-shadow .15s}
.nameitem:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/**
 * والصفُّ سطران **بقصد** لا بضيق.
 *
 * الحقلُ `width:100%` فيلتفّ ما بعده حتماً (قرارُ `flex-wrap` المقيس)، وكان يُقرأ
 * مفكَّكاً: اسمٌ في أعلى اليمين، وأزرارٌ في أسفل اليسار، وبينهما بياضٌ بلا سبب.
 * فيُعطى الحقلُ خيطاً سفلياً فيُقرأ سطرَ كتابةٍ لا فراغاً، ويُدفع «حذف» إلى الطرف
 * فيتوازن السطر الثاني: الجنسُ عند المبتدأ والحذفُ عند المنتهى.
 *
 * و`min-height:44px` هنا **للتضامّ لا لحدّ اللمس**: الحدُّ مضمونٌ بلا هذه القاعدة
 * (الحقول العامة ٥٢، مقيس) — وهي تُنقصه إلى ٤٤ فلا يطول الصفُّ بلا داعٍ. ولا تُقرأ
 * علاجاً لهدفِ لمسٍ ناقص، فتلك القاعدة حُذفت بعد أن بطل سندُها (انظر أسفل الورقة).
 */
.nameitem input[type=text]{border:none;padding:5px 2px;background:transparent;box-shadow:none;
  font-size:17px;border-bottom:1px dashed var(--line);border-radius:0;min-height:44px}
.nameitem input[type=text]:focus{outline:none;box-shadow:none;border-bottom-color:var(--accent)}
.nameitem{row-gap:6px}
.nameitem .rm{margin-inline-start:auto}
/**
 * والاسمُ يبتلع فراغَ السطر فيُدفع فعلُه إلى الطرف.
 *
 * كان `.nm` سطرياً بمقاس نصّه، فيقع الزرُّ الذي يليه **حيث انتهى الاسم** — فطرفُ
 * شاشة المراجعة درجٌ مكسور: خمسة عشر زرَّ «تعديل» كلٌّ في موضع، والعينُ لا تجد
 * عموداً تنزل عليه. وأثرُه الثاني أسوأ: صفُّ المرفق يُقاس ٣٢٠ بكسلاً في حاويةٍ
 * ٣١٥ — فيلتفّ «حذف» إلى سطرٍ ثانٍ يمينُه فارغ، والصفُّ ضعفا ارتفاعه.
 * و`min-width:0` شرطُ الانكماش، و`overflow-wrap` لأن الاسم يأتي من الناس.
 */
.nameitem .nm{flex:1 1 0;min-width:0;overflow-wrap:anywhere;word-break:break-word}
/* وما يوصف به الاسم (صيغةُ الملف وحجمُه) سطرٌ تحته لا ذيلٌ له */
.nameitem .nm .sub{display:block;font-size:13px;color:var(--muted);line-height:1.6}
.gsel{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;flex:0 0 auto;vertical-align:middle}
/* أهدافُ لمسٍ لا تقلّ عن ٤٤ بكسلاً: أكثر المستعملين على الجوال، ومنهم كبار سنّ
   يُدخلون بأصابع أقلّ دقّة — وخطأ اللمس هنا يعيد ترتيب أخٍ في محلّ أخ.
   و`min-width` معه بعد أن صارت «ولد/بنت» ⇐ «ذكر/أنثى»: «ذكر» أضيق رسماً، فخرج
   الزرُّ **٤٣٫٦ بكسلاً** عرضاً — مقيسٌ على ٣٩٠، وأسقط أربع شاشات في حارس الجوّال.
   وهو عينُ ما لـ`.lsel button` منذ أن قِيست «حيّ» ثلاثةَ أحرف. */
.gsel button{border:none;background:#fff;padding:11px 14px;min-height:44px;min-width:44px;font-size:14px;color:var(--muted);border-radius:0}
.gsel button.on{background:var(--accent);color:var(--accent-ink,#fff)}
/* «وش نناديك؟» — أول اختيار في الرحلة، ومنه تُصرَّف كل شاشة بعده، فيأخذ عرض البطاقة */
.gsel.gbig{display:flex;width:100%;margin-top:16px;border-radius:var(--r-sm)}
.gsel.gbig button{flex:1;padding:20px 12px;min-height:66px;font-size:18px;font-weight:600;color:var(--ink)}
.gsel.gbig button:hover{background:var(--card)}
.gsel.gbig button.on:hover{background:var(--accent)}
.gsel.gbig button + button{border-inline-start:1px solid var(--line-2)}
.rm{border:none;background:transparent;color:var(--muted);padding:11px 12px;min-height:44px;min-width:44px;border-radius:9px}
.rm:hover{background:#fbf6ec;color:var(--bad)}

/* ── ترتيب ────────────────────────────────────────────────────────────────
   الصفُّ كان **ستّة عناصر في سطر واحد** (مقبض · رقم · اسم · جنس · «تقريبي» · سهمان)
   فيُقرأ استمارةً لا محادثة، ويُعصَر على ٣٦٠. فصار سطرين: الاسمُ وحده أعلى، وما
   يُفعَل به أسفلَ بخطٍّ فاصل. والمحدِّدات كما هي (`.grab`, `.idx`, `.nm`, `[data-up]`,
   `[data-ap]`) — الحرّاس قائمة عليها. */
.orderlist{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.orderitem{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:10px 12px;cursor:grab;box-shadow:0 1px 2px rgba(58,44,20,.04)}
.orderitem.self{border-color:var(--accent);background:linear-gradient(180deg,#fff 0%,var(--accent-soft) 100%);
  box-shadow:0 0 0 1px var(--accent) inset, 0 2px 8px -4px rgba(58,44,20,.3)}
.orderitem.approx{border-style:dashed}
.orderitem .idx{flex:0 0 auto;width:30px;height:30px;margin-top:7px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--accent)}
/* و`flex:1` على الاسم داخل عمودٍ تمدُّه **طولاً** لا عرضاً — فيُلغى داخل الغلاف */
.orderitem .nm{flex:1;font-weight:600;font-size:17px}
.oi__main .nm{flex:0 1 auto}
.oi__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-block:5px}
.oi__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-top:1px dashed var(--line);padding-top:4px;margin-top:2px}
.oi__g{font-size:12px;color:var(--muted);font-weight:400}
/* مقبضُ السحب. سحبُ HTML5 (`draggable`) **لا يُطلق حدثاً واحداً على اللمس**، فكان
   ترتيبُ الإخوة على الجوّال معطَّلاً والنصّ يَعِد بالسحب — فصار بأحداث المؤشّر.
   و`touch-action:none` على المقبض **وحده**: على الصفّ كلّه تمنع تمريرَ الصفحة
   بالإصبع فوق القائمة، فينسدّ الطريق إلى ما تحتها. */
.orderitem .grab{flex:0 0 auto;display:grid;place-items:center;min-width:44px;min-height:44px;
  color:var(--muted);font-size:17px;line-height:1;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none}
.orderitem.dragging .grab{cursor:grabbing}
.arrows{display:flex;gap:4px;flex:0 0 auto}
.arrows button{border:1px solid var(--line-2);background:#fff;padding:0 12px;min-height:44px;min-width:44px;
  font-size:13px;border-radius:9px;color:var(--ink-2)}
.arrows button:hover{background:var(--accent-soft);border-color:var(--accent)}
.dragging{opacity:.4}

/* قرارات (تأكيد/نفي) */
.decide{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:11px 13px;margin-bottom:9px;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(58,44,20,.04)}
.decide .nm{flex:1;font-weight:600;min-width:120px;font-size:17px}
.dbtn{border:1px solid var(--line-2);background:#fff;padding:11px 14px;font-size:14px;min-height:44px}
.dbtn.yes.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.dbtn.no.on{background:var(--bad);color:#fff;border-color:var(--bad)}
.dbtn.unk.on{background:var(--muted);color:#fff;border-color:var(--muted)}
.reasons{width:100%;padding-top:8px;border-top:1px dashed var(--line);margin-top:6px}
.reasons label{font-weight:400;font-size:14px;display:flex;gap:8px;align-items:flex-start;margin-bottom:4px}

/* ── سلسلة النسب — ستُّ حلقاتٍ في شاشةٍ واحدة ────────────────────────────
   كانت حقلاً في كل شاشة (ثمانِ نقراتٍ قبل أن يُرسَل حرف)، والنسبُ يُسرد دفعةً واحدة
   كما يُقال في المجلس. والعنوانُ **سطرٌ فوق الحقل** لا بجانبه: بجانبه يُعصر الحقلُ
   على ٣٩٠ حتى لا يتّسع لاسم، ومعه منتقي الحال في السطر نفسه. */
.chainrow{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:10px 12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(58,44,20,.04);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:6px;min-width:0;
  transition:border-color .15s, box-shadow .15s}
.chainrow:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chainrow__lbl{flex:0 0 100%;color:var(--muted)}
.chainrow__opt{opacity:.8}
.chainrow input[type=text]{flex:1 1 130px;min-width:0;border:none;padding:5px 2px;
  background:transparent;box-shadow:none;font-size:17px;border-radius:0;min-height:44px;
  border-bottom:1px dashed var(--line);overflow-wrap:anywhere}
.chainrow input[type=text]:focus{outline:none;box-shadow:none;border-bottom-color:var(--accent)}
/* والمنتقي في سطر الحقل لا تحته بحاشية: الحاشيةُ صُمّمت لشاشةٍ فيها سؤالٌ واحد */
.chainrow .lifeq{margin-top:0}

/* ── حالُ الاسم ───────────────────────────────────────────────────────────
   ثلاثٌ ظاهرة مع كل اسم (حيّ · متوفّى · ما أدري) بدل سؤالٍ مستقلٍّ بعد المرحلة.
   ونصُّها أقصر من نصّ الجنس، فتأخذ حشوةً أضيق ولا تدفع الصفّ إلى سطرٍ ثالث.
   و«رحمه الله» تظهر في الصفّ نفسه — بلا شاشةٍ ولا نقرة — وتُخفى وهي فارغة، فلا
   تفتح فجوةً في صفٍّ لم يُعلَّم فيه شيء. */
/* و`min-width` لازمة: «حيّ» كلمةٌ من ثلاثة حروف، فبالحشوة وحدها يخرج الزرّ ٣٥ بكسلاً
   عرضاً — والحدُّ حدُّ إصبعٍ في الاتجاهين لا في الطول وحده (مقيس على ٣٩٠). */
.lsel button{padding:11px 9px;font-size:13px;min-width:44px}
.lifeq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.decide .lifeq{width:100%;padding-top:8px;border-top:1px dashed var(--line);margin-top:6px}
.bless{font-size:13.5px;color:var(--muted)}
.bless:empty{display:none}

/* تنبيهات — حاشيةٌ على طرف الصفحة: خيطٌ باللهجة وأرضيةٌ دافئة منها.
   و`--accent-soft` وحدها لا تكفي أرضيةً: الخادم يمزجها ٨٨٪ نحو الأبيض فتخرج شبه
   رماديّة (`#efebe6` من اللهجة الافتراضية) — قِيست فقُرئت الحاشيةُ صندوقاً رمادياً.
   فتُمزج هنا بنسبةٍ أظهر، ويسبقها **لونٌ ثابت** يأخذه متصفّحٌ لا يعرف `color-mix`. */
.note{border-inline-start:3px solid var(--accent);
  background:#efe8d8;
  background:color-mix(in srgb, var(--accent) 13%, #fffcf3);
  padding:14px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:14px 0;font-size:15px;
  line-height:1.85;color:var(--ink)}
.note.warn{border-color:var(--warn);background:#fdf4e3}
.note.bad{border-color:var(--bad);background:#fbeceb}
.err{color:var(--bad);font-size:14.5px;margin-top:10px;line-height:1.8}
.err:not(:empty){background:#fbeceb;border-inline-start:3px solid var(--bad);
  padding:10px 13px;border-radius:0 var(--r-sm) var(--r-sm) 0}

/* شارات الحالة */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:20px;border:1px solid}
.b-verified{color:var(--ok);border-color:var(--ok);background:#f1f8f4}
.b-unverified{color:var(--muted);border-color:var(--line);background:#fafafa}
.b-prior{color:var(--prior);border-color:var(--prior);background:#f2f5fa}
.b-disputed{color:var(--bad);border-color:var(--bad);background:#fdf3f3}

/* لوحة المسؤول */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;
  padding:10px 14px;color:var(--muted)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:28px;line-height:1.3}
.stat span{font-size:13px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);table-layout:fixed}
/* اسمٌ طويل بلا فواصل كان يمدّ الصفحة إلى عشرات آلاف البكسلات فتخرج أزرار كل الصفوف
   خارج الشاشة — والاسم يأتي من مستخدم، فلا يُفترض فيه طول ولا فواصل. */
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top;
  overflow-wrap:anywhere;word-break:break-word}
/* وكان الحرزُ على الجداول وحدها: اسمٌ طويل بلا فواغر في رحلة المساهم يمدّ الشاشة
   ٨٧٣ بكسلاً عند ٣٧٥، فتخرج أسهم صاحبه ومربّعاته خارجها فلا يستطيع ترتيب نفسه. */
.nameitem,.orderitem,.decide,.card,.tree li{min-width:0}
.nameitem input[type=text],.orderitem .nm,.decide .nm,.tree li,.namelist,.card h2{
  overflow-wrap:anywhere;word-break:break-word}
th{background:#f3eee3;font-size:13px}
.tree{font-size:14px}
.tree ul{list-style:none;padding-inline-start:20px;border-inline-start:1px dotted var(--line);margin:2px 0}
.tree li{margin:2px 0}
.tree .mark{font-family:monospace;font-weight:700;display:inline-block;width:1.3em}
.tree .v-verified{color:var(--ok)} .tree .v-unverified{color:var(--muted)}
.tree .v-prior{color:var(--prior)} .tree .v-disputed{color:var(--bad)}
.tree .fem{font-style:italic}
code{background:#f2ece0;padding:3px 8px;border-radius:7px;font-size:13.5px;direction:ltr;display:inline-block}
.linkbox{display:flex;gap:8px;align-items:center;background:#fff;border:1px dashed var(--line-2);padding:11px;border-radius:var(--r-sm)}
.linkbox code{flex:1;overflow:auto;white-space:nowrap}
@media(max-width:600px){ .wrap{padding:16px 13px 48px} }

/* مربّعات الاختيار والخيارات كانت ١٣×١٣ — أصغر من ثلث حدّ اللمس. و`!important` لازمة:
   القوالب تحمل `style="width:auto"` سطراً وهو يعلو على ورقة الأنماط، فكان العلاج
   نصفَ مطبَّق (الطولُ وحده). ويُوسَّع معها الملصق ليكون هو مساحة اللمس لا المربّع. */
input[type=checkbox],input[type=radio]{width:22px!important;height:22px;accent-color:var(--accent);flex:0 0 auto}

/* قائمةُ ما عبّأه من هذا الرقم — سطرٌ لكلٍّ، والاسمُ يبتلع فراغه فلا يتشتّت وسمُه */
.mine{list-style:none;margin:10px 0 0;padding:0}
.mine__i{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.mine__n{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.mine__c{color:var(--accent);white-space:nowrap}
label.row{min-height:44px;padding:4px 2px}
.reasons label{min-height:44px;padding:6px 2px}

/* واسمٌ طويل بلا فواغر كان يمدّ خمس شاشاتٍ أخرى لم يشملها العلاج الأول: منها نصّ
   سؤال المرحلة ٦، ومرآة الختام، وصفّان أُسقط سؤالُهما بعد ذلك. وأسوأها القائمة
   المنسدلة: `select` تتّسع لأعرض خياراتها فتدفع أزرار الجنس خارج الشاشة. */
.card,.card p,.card label,.card b,.card small,.card li,.note{min-width:0}
.card p,.card label,.card b,.card small,.card li,.note{overflow-wrap:anywhere;word-break:break-word}
select{max-width:100%}
select option{max-width:100%}


/* وكانت هنا `@media (pointer: coarse){.nameitem input{min-height:44px}}` — أُضيفت يوم
   كان الحقلُ ٣٨ بكسلاً، ووُصفت بأنها **القاعدة الوحيدة التي أسندها القياس**. وقد
   بطل سندُها: صار للحقول العامة `min-height:52px`، فأُرجعت هي وأُرجع بديلُها
   في `.nameitem` كلٌّ وحده فبقيت ٧٥/٧٥ — لأن الأخرى تحرسها. وقِيس الأربع:
   ٤٤ · ٤٤ · ٤٤ · **٥٢ بلا الاثنتين**. أي أن الحدّ مضمونٌ بلا كلتيهما، وإنما تُبقيان
   الصفَّ متضامّاً. فبقيت واحدةٌ (في `.nameitem`) وحُذفت هذه — تاسعةً بعد ثمانٍ.
   وخيارُ القائمة (`.combo__opt`) سبقها ثامنةً: ٥٠ بكسلاً بقاعدةٍ وبدونها. */

/* زرُّ اختيار الملف — الأصليّ يكتبه المتصفّح **بلغته**: «Choose File» و«No file chosen»
   بالإنجليزية وسط استبانةٍ عربية كاملة، ولا سبيل إلى ترجمتهما. فيُكتب الزرّ عربياً
   ويبقى الحقلُ نفسُه فوقه شفافاً مالئاً له: النقرة تصله مباشرةً، ويبقى قابلاً للتركيز
   بلوحة المفاتيح ومقيساً هدفَ لمسٍ كاملاً — بخلاف إخفائه وربطِه بملصق. */
.filepick{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;max-width:100%;
  background:#fff;color:var(--muted);border:1px solid var(--line);border-radius:10px}
.filepick__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* و`inset:-1px` لا `0`: الحقل المطلق يملأ صندوق **الحشو** لا صندوق الحدّ، فيقصر
   بحدَّيه — قِيس ٤٢ بكسلاً على ٣٦٠ و٣٩٠، والحدّ ٤٤. */
.filepick input[type=file]{position:absolute;inset:-1px;opacity:0;cursor:pointer}

/* وصفُّ الاسم يلتفّ بدل أن يُعصر. حقلٌ ومنتقي جنسٍ وملصقٌ وزرُّ حذفٍ في صفٍّ واحد
   لا يتّسع لها ٣٩٠: يُقاس ملصق «مو متأكد» **٣١ بكسلاً عرضاً** (وطوله ١١٢ لأن نصّه
   ينزل حرفاً حرفاً) — والحدّ حدُّ إصبعٍ في الاتجاهين لا في الطول وحده. وقاعدةُ
   الالتفاف لا تعمل إلا حين يضيق الصفّ فعلاً، فلا تمسّ ما كان يتّسع.
   وهي تكفي وحدها: أُضيفت معها قاعدةٌ ثانية لصفّ تصحيح المراجعة (`.rev__edit`) فأُرجعت
   وحدها فبقيت ٥٧/٥٧ — فحُذفت، كما حُذفت ستٌّ قبلها. */
.nameitem{flex-wrap:wrap}

/* ترويسة هوية المساحة — شعار العائلة أعلى كل شاشة */
.brandhead{display:flex;justify-content:center;margin:0 0 18px}
.brandhead__logo{max-height:64px;max-width:min(100%,240px);object-fit:contain}
@media(max-width:600px){ .brandhead__logo{max-height:52px} }

/* القائمة المنسدلة التي تُرشَّح بالكتابة — شاشة المقام (دولة · منطقة · مدينة).
   والقائمة **مطلقة** لا في مجرى الصفحة: لو دفعت ما تحتها لقفز زرّا «رجوع/احفظ»
   عند كل حرفٍ يُكتب. و`inset-inline:0` لا `left/right` — في RTL تنعكس الجهتان. */
.field{margin-bottom:14px}
.field[hidden]{display:none}
.combo{position:relative}
.combo__list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:20;
  margin:0;padding:4px;list-style:none;max-height:min(46vh,320px);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.combo__list[hidden]{display:none}
.combo__opt{padding:10px 12px;border-radius:8px;cursor:pointer;overflow-wrap:anywhere}
.combo__opt:hover,.combo__opt.is-active{background:var(--accent-soft)}
.combo__opt[aria-selected="true"]{font-weight:700}
.combo__empty{padding:10px 12px;color:var(--muted);font-size:13px}

/* سطر فحص الاسم — يقع تحت الحقل ولا يزحزح ما بعده إلا حين يقول شيئاً.
   والأزرار فيه أهدافُ لمسٍ كسائرها، فحدُّها من كتلة `pointer: coarse` القائمة. */
.namehint{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;
  color:var(--muted);margin:6px 0 0}
.namehint:empty{display:none}
.namehint b{color:var(--ink)}
.namehint__ok{color:var(--ink-2)}
.namehint .btn-quiet{padding:6px 10px}
/* وتنبيهُ الجنس يقع تحت الصفّ كلِّه لا بجانب حقلٍ فيه — وصفُّ الاسم `flex` فيلزمه سطرٌ كامل */
.genderhint{flex-basis:100%;color:var(--warn)}
.genderhint .btn-quiet{color:var(--ink-2)}

/* ── الحركة ───────────────────────────────────────────────────────────────
   `render()` تستبدل محتوى الصفحة، فكل شاشةٍ تحلّ محلّ سابقتها بلا فاصل — يُقرأ
   إعادةَ تحميلٍ لا انتقالاً. فظهورٌ وارتفاعٌ قصير، وبطاقةٌ واحدةٌ في الشاشة فلا
   تتزاحم الحركات. والانزلاق **رأسيّ**: الأفقيّ في RTL فيزيائيٌّ لا منطقيّ.

   ويُطفأ كلُّه مع `prefers-reduced-motion` — وليس تجميلاً: الحركة تُسبّب دواراً
   لمن به حساسيةٌ دهليزية، والنظام يُعلنها ويجب أن تُطاع. */
@keyframes nb-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes nb-fade{from{opacity:0}to{opacity:1}}
.card{animation:nb-rise .24s cubic-bezier(.22,.68,.3,1) both}
.brandhead,.prog{animation:nb-fade .3s ease both}
/* والقائمة المنسدلة تنفتح فلا تظهر دفعةً: أصلُها من أعلاها فتُقرأ نازلةً من حقلها */
@keyframes nb-drop{from{opacity:0;transform:scaleY(.94)}to{opacity:1;transform:none}}
.combo__list{transform-origin:top center;animation:nb-drop .13s ease-out both}
@media (prefers-reduced-motion: reduce){
  .card,.brandhead,.prog,.combo__list{animation:none}
  *{transition-duration:.01ms!important}
}