/* ===================================================================
   موقع «جاد» — نظام التصميم
   ===================================================================

   المرجع: وثيقة عقد القران — لا الاستمارة الحكومية.
   الاثنتان وثيقة، لكن الأولى يُفرح بها ويُحتفظ بها.
   الجدية لا تعني البرود.

   الحبر: بنّي دافئ، كحبر العفص على الوثائق القديمة
   التذهيب: أُخرى ذهبية من تذهيب المخطوطات
   الزخرفة: ربع الحزب ۞ — مربعان متقاطعان، نجمة ثمانية

   الخط العنواني: أميري — إحياء حرف المطبعة الأميرية ببولاق
   الخط الوظيفي: Readex Pro — إنساني، أدفأ من الخطوط التقنية
   =================================================================== */

:root {
  --paper:        #FAF7F0;
  --paper-raised: #FFFDF9;
  --paper-sunk:   #F3EEE3;

  --ink:          #2B2117;
  --ink-soft:     #6B5E4F;
  --ink-faint:    #9C9083;

  --rule:         #E3DACB;
  --rule-strong:  #C9BCA6;

  --gold:         #9A6E24;
  --gold-soft:    #C9A961;
  --gold-wash:    #F6EEDC;

  --verified:      #3E6B46;
  --verified-wash: #EDF3EC;
  --seal:          #8E3123;
  --seal-wash:     #F9EDE9;

  --font-display: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-ui:      'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  2.125rem;
  --step-4:  3rem;

  --gap:    1.375rem;
  --radius: 6px;
  --radius-lg: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- ربع الحزب: الزخرفة الوحيدة ---------- */

.rub {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  color: var(--gold);
  flex: none;
}
.rub svg { width: 100%; height: 100%; display: block; }

.divider {
  display: flex; align-items: center; gap: 0.875rem;
  margin: 2.5rem 0; color: var(--gold-soft);
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}
.divider .rub { font-size: 0.9rem; }

/* ---------- الترويسة ---------- */

.masthead { background: var(--paper-raised); border-bottom: 1px solid var(--rule); }

.masthead__inner {
  max-width: 64rem; margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; color: var(--ink); }

.wordmark { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; }

.brand__motto { font-family: var(--font-display); font-size: var(--step--1); color: var(--gold); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 0.5rem; }

.nav__link {
  font-size: var(--step--1); color: var(--ink-soft); text-decoration: none;
  padding: 0.4rem 0.75rem; border-radius: var(--radius);
  transition: background .14s ease, color .14s ease;
}
.nav__link:hover { background: var(--paper-sunk); color: var(--ink); }

.nav__exit {
  font-size: var(--step--1); color: var(--ink-soft); text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper-raised);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.nav__exit:hover { border-color: var(--seal); color: var(--seal); background: var(--seal-wash); }

/* ---------- الهيكل ---------- */

main { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 2.75rem 1.25rem 3.5rem; }

.sheet {
  max-width: 31rem; margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: 0 1px 2px rgba(43, 33, 23, .04);
}
.sheet--wide { max-width: 42rem; }

.sheet__title {
  font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 700; line-height: 1.3; margin: 0 0 0.4rem;
}

.sheet__lede {
  color: var(--ink-soft); font-size: var(--step--1);
  margin: 0 0 1.875rem; max-width: 38ch; line-height: 1.7;
}

/* ---------- الاستمارة ---------- */

.field { margin-bottom: var(--gap); }

.field__label {
  display: block; font-size: var(--step--1); font-weight: 500;
  margin-bottom: 0.4rem; color: var(--ink);
}

.field__hint {
  display: block; font-size: var(--step--1); color: var(--ink-faint);
  margin-top: 0.4rem; line-height: 1.6;
}
.field__hint strong { color: var(--ink-soft); font-weight: 500; }

/**
 * ⚠️ كل أنواع الحقول تُدرَج هنا.
 *    نوع ناقص من القائمة يأخذ شكل المتصفح الافتراضي —
 *    عرضاً قصيراً وحدوداً مختلفة — فيخرج عن إيقاع الاستمارة.
 */
input[type="text"], input[type="tel"], input[type="password"],
input[type="email"], input[type="number"], input[type="url"],
input[type="search"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-family: var(--font-ui); font-size: var(--step-0); font-weight: 300;
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(154, 110, 36, .14);
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); font-weight: 300; }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: 14px calc(50% + 1px), 19px calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-left: 2.25rem; cursor: pointer;
}

textarea { resize: vertical; line-height: 1.75; min-height: 6.5rem; }

/**
 * الحقول اللاتينية داخل صفحة عربية.
 *
 * ⚠️ dir="ltr" وحده يدفع النص لليسار، فتبدأ الكتابة من حافة
 *    بعيدة عن بقية الحقول ويختل إيقاع الاستمارة.
 *    text-align:right يعيدها لحافة الحقل العربية، ويبقى
 *    المحتوى نفسه يُقرأ من اليسار كما يجب.
 */
input[inputmode="numeric"], input[type="tel"], input[type="number"] {
  direction: ltr; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}

input[type="email"] {
  direction: ltr;
  text-align: right;
}
input[type="email"]::placeholder { text-align: right; }

/* البريد حين يُعرض نصاً لا حقلاً */
.ltr-text {
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

.group { border: 0; margin: 0 0 0.5rem; padding: 1.75rem 0 0.25rem; position: relative; }
.group + .group { border-top: 1px solid var(--rule); }
.group:first-of-type { padding-top: 0; }

.group__title {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  padding: 0; margin-bottom: 1.125rem; color: var(--ink);
  display: flex; align-items: center; gap: 0.55rem;
}
.group__title .rub { font-size: 0.72em; }

.group__lede { margin: -0.5rem 0 1.375rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.7; }

.opt { font-weight: 300; color: var(--ink-faint); font-size: 0.88em; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.125rem; }

.choice { display: flex; gap: 0.6rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice label {
  flex: 1; text-align: center; padding: 0.75rem 0.5rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; font-size: var(--step-0); color: var(--ink-soft);
  background: var(--paper-raised); transition: all .14s ease;
}
.choice label:hover { border-color: var(--gold-soft); background: var(--gold-wash); }
.choice input:checked + label {
  background: var(--ink); border-color: var(--ink);
  color: var(--paper-raised); font-weight: 400;
}
.choice input:focus-visible + label { box-shadow: 0 0 0 3px rgba(154, 110, 36, .22); }

.check { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--gold); flex: none; }

.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--seal); }

.field__err { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--seal); font-weight: 400; }

.err-list { margin: 0.6rem 0 0; padding-right: 1.1rem; }
.err-list li { margin-bottom: 0.35rem; line-height: 1.65; }
.err-list li:last-child { margin-bottom: 0; }
.err-list a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- الأزرار ---------- */

.btn {
  display: block; width: 100%; padding: 0.85rem 1rem;
  font-family: var(--font-ui); font-size: var(--step-0); font-weight: 400;
  color: var(--paper-raised); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background .14s ease, transform .08s ease;
}
.btn:hover { background: #3A2D1F; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(154, 110, 36, .35); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--quiet { background: var(--paper-raised); color: var(--ink); border-color: var(--rule-strong); }
.btn--quiet:hover { background: var(--paper-sunk); border-color: var(--ink-faint); }

.actions {
  display: flex; gap: 0.875rem; margin-top: 2rem;
  padding-top: 1.625rem; border-top: 1px solid var(--rule);
}
.actions .btn { flex: 1; }

/* ---------- الرسائل ---------- */

.note {
  padding: 0.875rem 1rem; border-radius: var(--radius);
  font-size: var(--step--1); margin-bottom: var(--gap); line-height: 1.7;
}
.note--error { background: var(--seal-wash); border: 1px solid #E8CFC8; color: #71261B; }
.note--ok    { background: var(--verified-wash); border: 1px solid #CBDCC9; color: #2E5235; }
.note--dev   { background: var(--gold-wash); border: 1px dashed var(--gold-soft); color: #6B4E16; }

/* ---------- الصفحة الرئيسية ---------- */

.home { max-width: 46rem; margin: 0 auto; }

.hero { padding: 1.5rem 0 3rem; text-align: center; }
.hero__mark { font-size: 2rem; color: var(--gold); margin-bottom: 1.5rem; display: block; }

.hero__title {
  font-family: var(--font-display); font-size: var(--step-4);
  font-weight: 700; line-height: 1.22; margin: 0 0 1.125rem;
  letter-spacing: -0.01em;
}

.hero__rule { width: 4.5rem; height: 2px; background: var(--gold); margin: 0 auto 1.375rem; border: 0; }

.hero__text {
  font-size: var(--step-1); line-height: 1.8; color: var(--ink-soft);
  max-width: 34ch; margin: 0 auto 2rem; font-weight: 300;
}

.hero__cta { display: inline-block; width: auto; padding: 0.9rem 2.75rem; font-size: var(--step-1); }
.hero__scope { margin: 1.125rem 0 0; font-size: var(--step--1); color: var(--ink-faint); }

.band { padding: 2.75rem 0; border-top: 1px solid var(--rule); }

.band__title {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  margin: 0 0 1.625rem; display: flex; align-items: center; gap: 0.6rem;
}
.band__title .rub { font-size: 0.7em; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step; display: flex; gap: 1.125rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(step, arabic-indic);
  flex: 0 0 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  color: var(--gold); background: var(--gold-wash);
  border-radius: 50%; align-self: flex-start;
}
.steps b { display: block; font-weight: 500; margin-bottom: 0.2rem; }
.steps span { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; }

.absent {
  background: var(--ink); color: var(--paper);
  margin-inline: -1.25rem; padding: 2.75rem 1.25rem;
  border-top: 0; border-radius: var(--radius-lg);
}
.absent .band__title { color: var(--paper-raised); }
.absent .band__title .rub { color: var(--gold-soft); }
.absent ul { list-style: none; margin: 0; padding: 0; }
.absent li {
  padding: 1rem 0; border-bottom: 1px solid rgba(250, 247, 240, .14);
  display: flex; gap: 1rem; align-items: baseline;
}
.absent li:last-child { border-bottom: 0; padding-bottom: 0; }
.absent b {
  flex: 0 0 9rem; font-weight: 700; font-size: var(--step-1);
  font-family: var(--font-display); color: var(--gold-soft);
}
.absent span { color: #D6CCBC; font-size: var(--step--1); line-height: 1.75; }

.guardian-note {
  border-right: 3px solid var(--gold); background: var(--gold-wash);
  padding: 1.25rem 1.375rem; border-radius: var(--radius); margin: 0;
}
.guardian-note p { margin: 0 0 0.875rem; color: var(--ink-soft); line-height: 1.8; }
.guardian-note p:last-child { margin-bottom: 0; }
.guardian-note strong { color: var(--ink); font-weight: 500; }

.counter { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.6rem; }
.counter b {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.counter span { color: var(--ink-soft); font-size: var(--step--1); }

.closing { padding: 2.75rem 0 1rem; text-align: center; }
.closing .btn { max-width: 21rem; margin-inline: auto; }
.closing p { color: var(--ink-faint); font-size: var(--step--1); margin: 1rem 0 0; }
/* ⚠️ محصورة في الفقرة وحدها: `.closing a` العامة كانت تغلب `.btn`
   (تخصيص 0,1,1 مقابل 0,1,0) فتجعل نص الزر بلون خلفيته — فيختفي. */
.closing p a { color: var(--ink); }

.assurances { max-width: 31rem; margin: 1.75rem auto 0; padding: 0; list-style: none; }
.assurances li {
  display: flex; gap: 0.875rem; align-items: baseline;
  padding: 0.8rem 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-soft);
}
.assurances li:last-child { border-bottom: 0; }
.assurances b {
  color: var(--ink); font-weight: 500; flex: 0 0 7.5rem;
  font-family: var(--font-display); font-size: var(--step-0);
}

/* ---------- الختم ---------- */

.seal { width: 124px; height: 124px; margin: 0 auto 1.5rem; position: relative; display: grid; place-items: center; }
.seal__star { position: absolute; inset: 0; color: var(--gold-soft); opacity: .35; }
.seal__star svg { width: 100%; height: 100%; }
.seal__text {
  position: relative; text-align: center;
  font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 700; line-height: 1.25; color: var(--gold);
}

/* ---------- لوحة الحساب ---------- */

.panel {
  max-width: 38rem; margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: 0 1px 2px rgba(43, 33, 23, .04);
}

.datalist { margin: 0; }
.datalist div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1);
}
.datalist div:last-child { border-bottom: 0; }
.datalist dt { color: var(--ink-soft); margin: 0; }
.datalist dd { margin: 0; font-weight: 500; text-align: left; }
.datalist dd.num { direction: ltr; font-variant-numeric: tabular-nums; }

.status-line {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.95rem 1.125rem; border-radius: var(--radius);
  font-size: var(--step--1); margin-bottom: 1.5rem; line-height: 1.6;
}
.status-line--draft    { background: var(--gold-wash); color: #6B4E16; border: 1px solid var(--gold-soft); }
.status-line--pending  { background: var(--paper-sunk); color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.status-line--approved { background: var(--verified-wash); color: #2E5235; border: 1px solid #CBDCC9; }
.status-line--rejected { background: var(--seal-wash); color: #71261B; border: 1px solid #E8CFC8; }

.meter { height: 6px; background: var(--paper-sunk); border-radius: 3px; overflow: hidden; margin: 0.6rem 0 0; }
.meter span { display: block; height: 100%; background: var(--gold); border-radius: 3px; }

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

.verify-box {
  margin-top: 1.125rem; padding: 1.125rem;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
}
.verify-box__text { margin-bottom: 1rem; }
.verify-box__text strong { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.verify-box__text span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.7; }
.verify-box .btn--quiet { width: auto; padding: 0.55rem 1.375rem; font-size: var(--step--1); display: inline-block; }
.verify-box__note { margin: 0.875rem 0 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: var(--step--1); line-height: 1.65; }
.verify-box__note--ok   { background: var(--verified-wash); color: #2E5235; }
.verify-box__note--warn { background: #FBF1DA; color: #6B4E16; }
.verify-box__note--info { background: var(--paper-sunk); color: var(--ink-soft); }
.verify-box__fine { margin: 0.875rem 0 0; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.6; }

.group--sealed {
  background: var(--paper-sunk); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 1.375rem; margin-top: 1.75rem;
}

/* ---------- صفحة التجارب ---------- */

.devbar {
  background: var(--ink); color: var(--gold-soft);
  text-align: center; padding: 0.5rem 1rem; font-size: var(--step--1);
}
.devbar a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

.test-list { list-style: none; margin: 0; padding: 0; }
.test-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1);
}
.test-list li:last-child { border-bottom: 0; }
.test-list .who { display: flex; flex-direction: column; gap: 0.1rem; }
.test-list .who b { font-weight: 500; }
.test-list .who span { color: var(--ink-faint); direction: ltr; text-align: right; }
.test-list form { margin: 0; }
.test-list button {
  font-family: var(--font-ui); font-size: var(--step--1);
  padding: 0.4rem 1rem; border: 1px solid var(--rule-strong);
  background: var(--paper-raised); color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
.test-list button:hover { background: var(--ink); color: var(--paper-raised); border-color: var(--ink); }

.tag {
  display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.5rem;
  border-radius: 999px; background: var(--paper-sunk); color: var(--ink-soft);
}
.tag--ok { background: var(--verified-wash); color: #2E5235; }

/* ---------- التذييل ---------- */

.colophon {
  border-top: 1px solid var(--rule); padding: 1.75rem 1.25rem;
  text-align: center; font-size: var(--step--1);
  color: var(--ink-faint); background: var(--paper-raised);
}
.colophon .rub { font-size: 0.85rem; margin-bottom: 0.6rem; display: block; margin-inline: auto; }

.sheet__foot {
  margin-top: 1.75rem; padding-top: 1.375rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-soft); text-align: center;
}
.sheet__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- الجوال ---------- */

@media (max-width: 600px) {
  .row { grid-template-columns: 1fr; gap: 0; }
  .actions { flex-direction: column; }
  main { padding: 1.75rem 1rem 2.5rem; }
  .sheet { padding: 1.625rem 1.25rem; }
  .hero__title { font-size: var(--step-3); }
  .hero__cta { display: block; width: 100%; }
  .absent { margin-inline: -1rem; padding-inline: 1.25rem; border-radius: 0; }
  .absent b { flex-basis: 100%; }
  .absent li { flex-wrap: wrap; gap: 0.25rem; }
  .assurances b { flex-basis: 6.5rem; }
  .brand__motto { display: none; }
  .panel { padding: 1.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ===================================================================
   البحث والنتائج — المرحلة 13
   =================================================================== */

/* رقم داخل نص عربي: اللاتينية من اليسار، والجدولية تمنع الاهتزاز */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.note--warn { background: #FBF1DA; border: 1px solid #EBD9AE; color: #6B4E16; }

.searchwrap { max-width: 44rem; margin: 0 auto; }

/* ---------- شريط الفلاتر ---------- */

.filters {
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.75rem; margin-bottom: 1.75rem;
  box-shadow: 0 1px 2px rgba(43, 33, 23, .04);
}
.filters__title {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 700; margin: 0 0 1.5rem; display: flex;
  align-items: center; gap: 0.5rem;
}
.filters__grid { display: grid; gap: 1.125rem; }
@media (min-width: 34rem) {
  .filters__grid { grid-template-columns: 1fr 1fr; }
}

.agerange { display: flex; align-items: center; gap: 0.6rem; }
.agerange input { width: 100%; text-align: center; }
.agerange__dash { color: var(--ink-faint); }

.filters__more { margin-top: 1.5rem; }
.filters__more > summary {
  cursor: pointer; font-size: var(--step--1); color: var(--ink-soft);
  padding: 0.5rem 0; list-style: none;
}
.filters__more > summary::-webkit-details-marker { display: none; }
.filters__more > summary::before { content: '◂ '; color: var(--gold); }
.filters__more[open] > summary::before { content: '▾ '; }
.filters__more > summary:hover { color: var(--ink); }

.chipset { margin-top: 1.125rem; }
.chipset__label {
  display: block; font-size: var(--step--1); color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* شريحة اختيار: المربع مخفي والمظهر على النص */
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip > span {
  display: inline-block; cursor: pointer;
  font-size: var(--step--1); padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-soft); background: var(--paper);
  transition: background .12s, color .12s, border-color .12s;
}
.chip > span:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--paper-raised);
}
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.filters__switches {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.switch { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.switch input { width: auto; margin: 0; accent-color: var(--gold); }
.switch span { font-size: var(--step--1); color: var(--ink-soft); }

.filters__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.filters__actions .btn { flex: 1; text-decoration: none; text-align: center; }

/* ---------- النتائج ---------- */

.results__count {
  font-size: var(--step--1); color: var(--ink-soft);
  margin: 0 0 1rem; padding-inline-start: 0.25rem;
}
.results__fine {
  font-size: var(--step--1); color: var(--ink-faint);
  line-height: 1.7; margin: 1.5rem 0 0; padding-inline-start: 0.25rem;
}

.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.25rem 1.375rem; margin-bottom: 0.875rem;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.card:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 2px 10px rgba(43, 33, 23, .07);
  transform: translateY(-1px);
}
.card__head { display: flex; align-items: baseline; gap: 0.75rem; }
.card__name {
  font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 700; color: var(--ink);
}
.card__age { font-size: var(--step--1); color: var(--ink-soft); }
.card__where {
  font-size: var(--step--1); color: var(--gold);
  margin-top: 0.2rem;
}
.card__facts {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
  margin-top: 0.7rem; font-size: var(--step--1); color: var(--ink-soft);
}
/* فاصل نقطي بين الحقائق بدل الفواصل في النص */
.card__facts span + span::before { content: '۞'; margin-inline-end: 0.5rem; color: var(--gold-soft); }
.card__badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.875rem;
}

/* شارة النشاط — لون ونص، فلا يُفهم اللون وحده */
.dot { display: inline-flex; align-items: center; gap: 0.35rem;
       font-size: 0.75rem; color: var(--ink-soft); }
.dot::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--ink-faint);
}
.dot--fresh::before { background: var(--verified); }
.dot--warm::before  { background: var(--gold); }
.dot--idle::before  { background: var(--rule-strong); }

.pager { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.pager .btn { flex: 1; text-decoration: none; text-align: center; }

/* ---------- الملف العام ---------- */

.profileview__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.875rem;
}
.profileview__age { font-size: var(--step--1); color: var(--ink-soft); }

.bio {
  font-size: var(--step-0); line-height: 1.9; color: var(--ink-soft);
  margin: 0; white-space: pre-line;
}

.nextstep {
  margin-top: 1.75rem; padding: 1.25rem 1.375rem;
  background: var(--paper-sunk); border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
}
/* العنوان وحده — الابن المباشر. وبدون > يصير كل strong داخل
   الفقرات كتلةً فيُقذف إلى سطر جديد. */
.nextstep > strong { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.nextstep p {
  margin: 0 0 0.6rem; font-size: var(--step--1);
  color: var(--ink-soft); line-height: 1.75;
}
.nextstep__soon {
  color: var(--gold) !important; margin-bottom: 0 !important;
}

.actions--two { display: flex; gap: 0.75rem; flex-wrap: wrap; }
@media (max-width: 26rem) { .actions--two { flex-direction: column; } }

/* ===================================================================
   الطلبات والتواصل — المرحلة 14
   =================================================================== */

/* عدّاد غير المقروء في الشريط */
.pip {
  display: inline-block; min-width: 1.15rem; margin-inline-start: 0.3rem;
  padding: 0 0.3rem; border-radius: 999px;
  background: var(--seal); color: var(--paper-raised);
  font-size: 0.7rem; line-height: 1.15rem; text-align: center;
  direction: ltr; font-variant-numeric: tabular-nums;
}

/* قائمة المستجدات */
.notelist { list-style: none; margin: 0; padding: 0; }
.notelist li {
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-soft); line-height: 1.75;
}
.notelist li:last-child { border-bottom: 0; }
.notelist li.is-new { color: var(--ink); }
.notelist li.is-new::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--gold); margin-inline-end: 0.5rem;
}

/* صف طلب في قائمة الرجل */
.reqrow {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.125rem 0; border-bottom: 1px solid var(--rule);
}
.reqrow:last-of-type { border-bottom: 0; }
.reqrow__main { flex: 1 1 14rem; min-width: 0; }
.reqrow__act { flex: 0 0 auto; }
.reqrow__act .btn { width: auto; padding: 0.5rem 1.1rem; font-size: var(--step--1); }

/* خانة البلاغ — مطوية، فلا تقترح نفسها */
.reportbox { margin: 1.25rem 0; }
.reportbox > summary {
  cursor: pointer; font-size: var(--step--1); color: var(--ink-faint);
  list-style: none; padding: 0.4rem 0;
}
.reportbox > summary::-webkit-details-marker { display: none; }
.reportbox > summary::before { content: '◂ '; color: var(--gold-soft); }
.reportbox[open] > summary::before { content: '▾ '; }
.reportbox > summary:hover { color: var(--ink-soft); }

.endform .btn { width: auto; padding: 0.65rem 1.5rem; }

/* ---------- صندوق الرقم ---------- */

.numberbox {
  margin: 1.5rem 0; padding: 1.5rem 1.25rem; text-align: center;
  background: var(--paper-sunk);
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
}
.numberbox__who {
  font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.875rem;
}
.numberbox__img {
  display: block; margin: 0 auto; max-width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.numberbox__fine {
  margin-top: 0.875rem; font-size: var(--step--1);
  color: var(--ink-faint); line-height: 1.7;
}

/* -------------------------------------------------------------------
   الشريط العلوي على الجوال
   ⚠️ رابط «الطلبات» جعل الروابط خمسة، فخرج الشريط عن حافة الشاشة
      ودُفع الموقع كله ٣٢ بكسل. والعلاج أن يلتفّ الشريط سطرين على
      الشاشات الضيقة بدل حذف رابط يحتاجه الناس.
   ------------------------------------------------------------------- */
@media (max-width: 34rem) {
  .masthead__inner {
    flex-wrap: wrap; justify-content: center;
    gap: 0.5rem 0.75rem; padding-inline: 1rem;
  }
  .brand { width: 100%; justify-content: center; }
  .nav {
    width: 100%; justify-content: center;
    flex-wrap: wrap; gap: 0.25rem;
  }
  .nav__link { padding-inline: 0.5rem; }
  .nav__exit { padding-inline: 0.75rem; }
}

/* ===================================================================
   الورد — المرحلة 16

   من أين جاء اللون:
   ليس ورديّ مواقع المواعدة. هو **ورد المخطوط**: اللون الذي يملأ
   زهرات التذهيب في صدر الصفحة المخطوطة، إلى جانب الذهب. فهو يجلس
   مع الذهب الموجود لأنهما من حرفة واحدة، لا لأنهما اتفقا صدفة.

   وله سند ثانٍ في موضوع الموقع نفسه: ماء الورد يُرشّ على الضيوف
   في ليلة العقد.

   ⚠️ والحدّ الذي لا يُتجاوز: الوردي هوية وزينة، **لا يحمل معنى**.
      الأخضر «موثّق» والأحمر «خطأ». ولو حمل الوردي معنى ثالثاً
      لصار على القارئ أن يحفظ ثلاثة ألوان بدل اثنين.
   =================================================================== */

:root {
  --rose:       #B2566E;   /* ورد المخطوط — الزخرفة */
  --rose-deep:  #8C3C52;   /* النصّ والأزرار */
  --rose-soft:  #E3B9C5;   /* الحدود والخيوط */
  --rose-wash:  #FCF2F4;   /* أرضية خافتة */
  --rose-mist:  #FAE9ED;   /* أرضية أظهر */
}

/* -------------------------------------------------------------------
   ⚠️ أولاً: فصل «الخطأ» عن الورد

   قِسنا الفرق بين وردنا (#8C3C52) وأحمر الخطأ (#8E3123) فكان
   1.10 فقط — أي أنهما بنفس الثقل تقريباً. ومع انتشار الورد في
   كل صفحة، تفقد رسالة الخطأ صوتها: تبدو عنصراً ورديّاً آخر.

   فالفصل هنا **بالبنية لا باللون**: شريط سميك على حافة البداية.
   ومن لا يميّز الألوان أصلاً يراه كما يراه غيره.
   ------------------------------------------------------------------- */
.note { border-inline-start-width: 4px; border-inline-start-style: solid; }
.note--error { border-inline-start-color: var(--seal); }
.note--ok    { border-inline-start-color: var(--verified); }
.note--warn  { border-inline-start-color: var(--gold); }
.note--dev   { border-inline-start-color: var(--gold-soft); }

/* -------------------------------------------------------------------
   ١ | شريط التذهيب — الشيء الواحد المسموح له بالجرأة

   حاشية المخطوط المُذهَّب: شبكة معيّنات ذهبية وبينها وردية.

   ⚠️ مرسوم بتدرّجات CSS لا بصورة: لا طلب شبكة، ولا ملف يضيع عند
      النقل، ويبقى حادّاً على أي شاشة.
   ------------------------------------------------------------------- */
.illum {
  height: 9px;
  background:
    repeating-linear-gradient(135deg, var(--gold) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(45deg,  var(--rose) 0 3px, transparent 3px 9px),
    var(--gold-wash);
  border-bottom: 1px solid var(--rule);
}

/* -------------------------------------------------------------------
   ٢ | الهوية
   ------------------------------------------------------------------- */
.wordmark      { color: var(--rose-deep); }
.brand__motto  { color: var(--gold); }
.masthead      { background: linear-gradient(var(--rose-wash), var(--paper-raised) 70%); }
.nav__link:hover { background: var(--rose-wash); color: var(--rose-deep); }

/* عدّاد الطلبات — ورديّ لا أحمر: خبر لا إنذار */
.pip { background: var(--rose); }

/* -------------------------------------------------------------------
   ٣ | الصدر

   ⚠️ التدرّج ينطفئ عند 58% لا عند الحافة. الحقل الورديّ الممتدّ
      إلى آخر القسم يبدو لوحاً مصمتاً لا ضوءاً.
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  background: radial-gradient(135% 92% at 50% -8%,
              var(--rose-mist) 0%, var(--rose-wash) 32%, var(--paper) 58%);
}
.hero::before,
.hero::after {
  content: '';
  position: absolute; inset-inline: 12%; height: 1px;
  background: linear-gradient(90deg, transparent,
              var(--gold-soft) 22%, var(--rose-soft) 50%, var(--gold-soft) 78%, transparent);
}
.hero::before { top: 0; }
.hero::after  { bottom: 0; }

.hero__mark { color: var(--rose); }
.hero__rule {
  border: 0; height: 1px; width: 7rem; margin: 1.25rem auto;
  background: linear-gradient(90deg, transparent,
              var(--rose-soft), var(--gold-soft), var(--rose-soft), transparent);
}

/* -------------------------------------------------------------------
   ٤ | العناوين والزخرفة
   ------------------------------------------------------------------- */
.sheet__title, .filters__title { color: var(--rose-deep); }
.band__title  .rub { color: var(--rose); }
.group__title .rub { color: var(--rose); }
.filters__title .rub { color: var(--rose); }
.colophon .rub { color: var(--rose); }

/* -------------------------------------------------------------------
   ٥ | الأزرار
   ------------------------------------------------------------------- */
.btn:not(.btn--quiet) {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, .18);
}
.btn:not(.btn--quiet):hover {
  background: var(--rose);
  border-color: var(--rose);
}
.btn--quiet:hover {
  border-color: var(--rose-soft);
  color: var(--rose-deep);
  background: var(--rose-wash);
}

/* -------------------------------------------------------------------
   ٦ | الحقول والشرائح
   ------------------------------------------------------------------- */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--rose);
}
.chip input:checked + span {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
}
.chip input:focus-visible + span { outline-color: var(--rose); }

/* -------------------------------------------------------------------
   ٧ | البطاقات
   ------------------------------------------------------------------- */
.card__name { color: var(--rose-deep); }
.card:hover {
  border-color: var(--rose-soft);
  box-shadow: 0 2px 12px rgba(178, 86, 110, .11);
}
.card__facts span + span::before { color: var(--rose-soft); }

/* -------------------------------------------------------------------
   ٨ | صندوق الرقم — خاتمة الطريق، فلتبدُ كذلك
   ------------------------------------------------------------------- */
.numberbox {
  border-color: var(--rose-soft);
  background: radial-gradient(120% 100% at 50% 0%,
              var(--rose-wash) 0%, var(--paper-sunk) 70%);
}

/* -------------------------------------------------------------------
   ٩ | التذييل
   ------------------------------------------------------------------- */
.colophon {
  border-top: 0;
  background: linear-gradient(var(--rose-wash), transparent 60%);
  position: relative;
}
.colophon::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              var(--gold-soft) 25%, var(--rose-soft) 50%, var(--gold-soft) 75%, transparent);
}

/* -------------------------------------------------------------------
   ١٠ | حركة واحدة

   ظهور الصدر عند فتح الصفحة. لحظة واحدة مرتّبة خير من حركات
   متفرقة على كل بطاقة.
   ------------------------------------------------------------------- */
@keyframes jad-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hero__mark  { animation: jad-rise .5s ease-out both; }
.hero__title { animation: jad-rise .5s ease-out .06s both; }
.hero__rule  { animation: jad-rise .5s ease-out .12s both; }
.hero__text  { animation: jad-rise .5s ease-out .18s both; }
.hero__cta   { animation: jad-rise .5s ease-out .24s both; }

/* ⚠️ من طلب تقليل الحركة لا تتحرك عنده الصفحة */
@media (prefers-reduced-motion: reduce) {
  .hero__mark, .hero__title, .hero__rule, .hero__text, .hero__cta { animation: none; }
}