/* ============================================================
   رفد القيادة — أنماط الصفحات الداخلية (وكيل الموقع العام)
   مكمّل لـ site.css: النماذج، الأسئلة، رؤوس الصفحات، صفحات النص.
   d-khurafi.html صفحة واحدة بلا هذه المكوّنات، فبُنيت هنا من
   التوكنز نفسها حصراً — لا hex خام، خصائص منطقية فقط،
   ولا letter-spacing على العربية إطلاقاً.
   يُحمَّل بعد tokens.css و site.css في layouts/site.php.
   ============================================================ */

/* ------------------------------------------------------------
   أدوات — CSP يمنع style السطرية، فالتدرّج والإزاحات صفوف
   ------------------------------------------------------------ */
.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}
.mbs-4{margin-block-start:var(--sp-4)}
.mbs-6{margin-block-start:var(--sp-6)}
.mbe-0{margin-block-end:0}
.mbe-6{margin-block-end:var(--sp-6)}
.pbs-0{padding-block-start:0}
.fs-xs{font-size:var(--fs-xs)}

/* صف الأزرار خارج الهيرو (الهيرو له نسخته في site.css) */
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.cta-row--center{justify-content:center}

/* ------------------------------------------------------------
   رأس الصفحات الداخلية — لوحة تركوازية برأية واحدة هادئة
   ------------------------------------------------------------ */
.page-hero{position:relative;background:var(--brand-primary);color:var(--color-on-primary);overflow:hidden}
.page-hero .container{position:relative;z-index:2;display:grid;align-content:center;padding-block:clamp(2.6rem,1.8rem + 3vw,4.5rem)}
.page-hero h1{color:#fff;font-size:var(--fs-2xl);max-inline-size:24ch;margin-block-end:var(--sp-3)}
.page-hero .h1-tight{max-inline-size:30ch}
.page-hero .kicker{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--brand-mint);font-weight:600;font-size:var(--fs-sm);margin-block-end:var(--sp-4)}
.page-hero .kicker::before{content:"";inline-size:9px;block-size:9px;background:var(--color-accent);flex-shrink:0}
.page-hero .lead{color:var(--color-on-primary);max-inline-size:38rem;font-size:var(--fs-lg);margin-block-end:0}
.page-hero .cta-row{margin-block-start:var(--sp-5)}
.page-hero .crumb{color:var(--brand-mint)}
.page-hero .crumb:hover{color:#fff}
.phflag{position:absolute;inline-size:clamp(240px,26vw,430px);inset-inline-end:-8%;inset-block-end:-38%;fill:var(--brand-primary-2);opacity:.5;pointer-events:none}

/* ------------------------------------------------------------
   عقيدة رفد — سطر تحريري واحد بارز (يُعرض إن أضيف من اللوحة)
   ------------------------------------------------------------ */
.creed{padding-block:clamp(2rem,1.4rem + 2vw,3rem)}
.creed-text{max-inline-size:44rem;margin-inline:auto;margin-block-end:0;text-align:center;font-size:var(--fs-xl);font-weight:600;line-height:var(--lh-head);color:var(--brand-primary)}

/* ------------------------------------------------------------
   شريط دعوة عام — خلفية سطحية هادئة (نمط prt-cta معمَّماً)
   ------------------------------------------------------------ */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5);background:var(--color-surface-2);border-radius:var(--r-lg)}
.cta-band p{margin:0;font-weight:600;color:var(--brand-primary);max-inline-size:44rem}

/* ------------------------------------------------------------
   ملاحق البطاقات: نبذة داخل بطاقة الخدمة/القطاع + شعار الشريك
   ------------------------------------------------------------ */
.svc-x{color:var(--color-ink-2);font-size:var(--fs-sm);margin-block-end:0}
.prt-blurb{color:var(--color-ink-2);font-size:var(--fs-xs);text-align:center;margin-block-end:0;max-inline-size:24rem}
.prt figcaption a{color:var(--color-ink-2)}
.prt figcaption a:hover{color:var(--color-accent-ink)}

/* ------------------------------------------------------------
   صفحات التفاصيل — عمود متن + عمود جانبي
   ------------------------------------------------------------ */
.detail-grid{display:grid;gap:var(--sp-5);align-items:start}
@media (min-width:64rem){.detail-grid{grid-template-columns:1.15fr .85fr}}
.detail-main,.detail-side{display:grid;gap:var(--sp-5)}
.card-h{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-lg);margin-block-end:var(--sp-4)}
.card-h .ic{inline-size:24px;block-size:24px;color:var(--brand-primary-2)}
.card--dark{background:var(--brand-primary);color:var(--color-on-primary)}
.card--dark .card-h{color:#fff}
.card--dark p{color:var(--color-on-primary)}

/* ============================================================
   لوحات تفاصيل الخدمة — ملاحظة العميل 10.
   الأقسام الثلاثة عائلة واحدة: بلاطة أيقونة مقصوصة 45° (زاوية الشعار
   نفسها)، رقم ترتيبي يبني تسلسل قراءة، وشيفرون رفد نقطةً موحّدة لكل بند
   بدل ثلاث نقاط مختلفة. الإبداع بنيوي من الهوية، لا زخرفة مضافة.
   ============================================================ */
.spec-h{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-lg);margin-block-end:var(--sp-4);
  padding-block-end:var(--sp-3);border-block-end:1px solid var(--color-line)
}
.spec-ic{
  flex-shrink:0;display:grid;place-items:center;inline-size:38px;block-size:38px;
  background:var(--brand-primary);color:var(--brand-mint);   /* 8.0:1 */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%)
}
.spec-ic .ic{inline-size:20px;block-size:20px}
.spec-t{flex:1 1 auto;min-inline-size:0}
.spec-n{
  flex-shrink:0;font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--color-accent-ink);opacity:.55
}
.spec-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.spec-list li{display:flex;gap:var(--sp-3);align-items:flex-start}
.spec-list .chev{
  flex-shrink:0;inline-size:14px;block-size:11px;
  color:var(--color-accent);fill:currentColor;margin-block-start:.5em
}
/* الشيفرون يشير مع اتجاه القراءة — يساراً بالعربية، ويميناً بالإنجليزية */
[dir="ltr"] .spec-list .chev{transform:scaleX(-1)}
/* والقصّة تنتقل إلى الركن الموازي كي تبقى في نهاية سطر القراءة */
[dir="ltr"] .spec-ic{clip-path:polygon(0 0,100% 0,100% 100%,11px 100%,0 calc(100% - 11px))}

.check-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.check-list li{display:flex;gap:var(--sp-3);align-items:flex-start}
.check-list .ic{inline-size:20px;block-size:20px;color:var(--brand-primary-2);margin-block-start:.4em}
.check-list--sm{gap:var(--sp-2);font-size:var(--fs-sm);color:var(--color-ink-2)}
.check-list--sm .ic{inline-size:16px;block-size:16px}
.step-outs-h{font-size:var(--fs-sm);color:var(--color-ink-2);margin-block:var(--sp-4) var(--sp-2)}

.tag-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--color-surface-2);color:var(--brand-primary);border-radius:var(--r-full);padding:.35em 1em;font-size:var(--fs-sm);font-weight:600;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.tag .ic{inline-size:18px;block-size:18px}
a.tag:hover{background:var(--brand-mint);color:var(--brand-primary)}

/* ------------------------------------------------------------
   متن منقّى (Sanitize::html) وصفحات النص المؤسسي
   ------------------------------------------------------------ */
.prose h3,.prose h4{margin-block-start:var(--sp-5)}
.prose ul,.prose ol{padding-inline-start:1.4em;margin-block:0 var(--sp-4);display:grid;gap:var(--sp-2)}
.prose a{text-decoration:underline;text-underline-offset:.2em}
.prose :last-child{margin-block-end:0}
.prose--page{max-inline-size:52rem}
.prose--page h2{font-size:var(--fs-xl);margin-block-start:var(--sp-6)}
.prose--page h2:first-child{margin-block-start:0}

/* ------------------------------------------------------------
   الأسئلة الشائعة — <details> ببطاقات وسهم يدور
   ------------------------------------------------------------ */
.faq-cat{font-size:var(--fs-xl);margin-block:var(--sp-6) var(--sp-4)}
.faq-list{display:grid;gap:var(--sp-3);max-inline-size:60rem;margin-inline:auto;margin-block-end:var(--sp-4)}
details.faq{background:var(--color-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
details.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5);cursor:pointer;list-style:none;font-weight:600;color:var(--brand-primary);font-size:var(--fs-lg);line-height:var(--lh-head)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--color-accent-ink)}
details.faq .chev{inline-size:20px;block-size:20px;color:var(--brand-primary-2);transition:transform var(--dur-2) var(--ease)}
details.faq[open] .chev{transform:rotate(180deg)}
details.faq .faq-body{padding-inline:var(--sp-5);padding-block-end:var(--sp-5);color:var(--color-ink-2)}
details.faq .faq-body p{margin-block-end:0}

/* ------------------------------------------------------------
   نموذج طلب الاستشارة
   ------------------------------------------------------------ */
.form-card{max-inline-size:52rem;margin-inline:auto}
.form-grid{display:grid;gap:var(--sp-5)}
@media (min-width:48rem){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .field--full{grid-column:1 / -1}
}
.field{display:grid;gap:var(--sp-2);align-content:start}
.field label{font-weight:600;font-size:var(--fs-sm);color:var(--brand-primary)}
.field .req{color:var(--color-accent-ink)}
.field .opt{font-weight:500;color:var(--color-ink-2);font-size:var(--fs-xs)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--color-ink);inline-size:100%;
  min-block-size:48px;padding:.6em .9em;
  background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--r-md);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.field textarea{resize:vertical;min-block-size:9rem;line-height:var(--lh-body)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-ink-2)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--color-accent-ink)}
.ferr{margin-block-end:0;color:var(--color-accent-ink);font-size:var(--fs-sm);font-weight:600}
.fhint{margin-block-end:0;color:var(--color-ink-2);font-size:var(--fs-xs)}
.consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-weight:500;cursor:pointer}
.consent input{inline-size:22px;block-size:22px;min-block-size:0;margin-block-start:.35em;accent-color:var(--brand-primary);flex-shrink:0}
.form-actions{margin-block-start:var(--sp-6)}
/* جسر من «تواصل» إلى «طلب استشارة» — الفصل بين النموذجين لا يعني إخفاء أحدهما */
.form-alt{margin-block-start:var(--sp-6);padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--color-line);color:var(--color-muted)}
.form-alt a{display:inline-flex;align-items:center;gap:var(--sp-2);min-block-size:28px;
  margin-inline-start:var(--sp-2);font-weight:700;color:var(--brand-primary)}
.form-alt .ic{inline-size:16px;block-size:16px;color:var(--color-accent-ink)}
.alert{display:flex;align-items:flex-start;gap:var(--sp-3);margin-block-end:var(--sp-5);padding:var(--sp-4);background:var(--color-surface-2);border-inline-start:4px solid var(--color-accent);border-radius:var(--r-md);color:var(--brand-primary);font-weight:600}
.alert .ic{inline-size:22px;block-size:22px;color:var(--color-accent-ink);margin-block-start:.2em}

/* honeypot: يُزاح خارج المشهد ولا يُخفى بـ display حتى تملأه البوتات */
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}

/* ------------------------------------------------------------
   صفحة الشكر — الرقم المرجعي بارز وقابل للنسخ بصرياً
   ------------------------------------------------------------ */
.thanks-card{max-inline-size:44rem;margin-inline:auto;text-align:center;display:grid;justify-items:center;gap:var(--sp-4)}
.thanks-ic{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:var(--r-full);background:var(--brand-primary);color:var(--brand-mint)}
.thanks-ic .ic{inline-size:30px;block-size:30px}
.thanks-h{font-size:var(--fs-2xl);margin-block-end:0}
.thanks-card p{margin-block-end:0;color:var(--color-ink-2)}
.ref-box{display:grid;gap:var(--sp-1);justify-items:center;padding:var(--sp-4) var(--sp-6);background:var(--color-surface-2);border:1px dashed var(--brand-primary-2);border-radius:var(--r-md)}
.ref-label{font-size:var(--fs-xs);font-weight:600;color:var(--color-ink-2)}
.ref-code{font-size:var(--fs-xl);font-weight:700;color:var(--brand-primary);font-variant-numeric:lining-nums tabular-nums;user-select:all}
.thanks-card .cta-row{margin-block-start:var(--sp-2)}

/* chips على خلفية فاتحة (نسخة الختام الداكنة في site.css) */
.contact-chips--light{justify-content:center}
.contact-chips--light .chip{color:var(--brand-primary);border-color:var(--color-line)}
.contact-chips--light .chip:hover{border-color:var(--brand-primary-2);background:var(--color-surface-2)}

/* ------------------------------------------------------------
   صفحة الأخطاء
   ------------------------------------------------------------ */
.error-wrap{display:grid;place-items:center;min-block-size:52vh}
.error-card{position:relative;text-align:center;display:grid;justify-items:center;gap:var(--sp-3);max-inline-size:34rem;margin-inline:auto}
.error-card .err-flag{inline-size:120px;fill:var(--color-surface-2);margin-block-end:calc(-1 * var(--sp-6))}
.error-code{position:relative;margin-block-end:0;font-size:var(--fs-3xl);font-weight:700;color:var(--brand-primary-2);font-variant-numeric:lining-nums tabular-nums;line-height:1.1}
.error-h{font-size:var(--fs-xl);margin-block-end:0}
.error-card p{color:var(--color-ink-2);margin-block-end:var(--sp-2)}

/* روابط أسفل التذييل (الخصوصية/الوصول) */
.site-footer .base-links{display:inline-flex;gap:var(--sp-4)}
.site-footer .base-links a{color:var(--color-on-primary-2)}
.site-footer .base-links a:hover{color:var(--brand-mint)}


/* ============================================================
   أداة SERAT — أداة قياس، فسجلّها البصري سجلّ أداة قياس:
   أرقام جدولية، ومقياس مُدرَّج بشيفرون الهوية علامةً عليه، وقصّات 45°.
   لا زخرفة مضافة — كل عنصر هنا يمثّل معنىً في الأداة.
   ============================================================ */
.section--tight{padding-block:clamp(2rem,1.5rem + 2vw,3.4rem)}
.section--alt{background:var(--color-surface-2)}

/* الهيرو: الاسم اللاتيني علامةً، والشرح العربي تحته */
.serat-hero h1{display:grid;gap:var(--sp-2)}
.serat-mark{
  display:block;inline-size:fit-content;
  font-weight:700;font-size:clamp(2.6rem,2rem + 3.4vw,4.6rem);line-height:1.05;
  letter-spacing:.04em;   /* لاتيني بحت — لا يمسّ عقدة عربية */
  color:var(--color-accent);
}
.serat-sub{font-size:clamp(1.05rem,.95rem + .5vw,1.5rem);line-height:1.45;font-weight:600}

/* لوحة القياس */
.serat-gauge{
  display:grid;gap:var(--sp-5);align-items:center;
  padding:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);
  background:var(--brand-primary);color:var(--color-on-primary);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);
}
@media (min-width:48rem){.serat-gauge{grid-template-columns:auto 1fr;gap:clamp(1.5rem,1rem + 3vw,4rem)}}
.sg-figs{display:flex;gap:clamp(1.5rem,1rem + 3vw,3.5rem)}
.sg-fig{display:grid;gap:2px}
.sg-fig .num{
  font-size:clamp(2.4rem,1.9rem + 2.6vw,3.8rem);line-height:1;font-weight:700;
  color:var(--brand-mint);                       /* 8.0:1 على التركوازي */
  font-variant-numeric:lining-nums tabular-nums; /* أرقام جدولية — سجلّ القياس */
}
.sg-fig span{font-size:var(--fs-sm);color:var(--color-on-primary-2)}

/* المقياس: ستة تدريجات وشيفرون علامةً عليها */
.sg-scale{min-inline-size:0}
.sg-track{
  position:relative;display:flex;gap:6px;
  padding-block-end:18px;   /* موضع الشيفرون تحت الشريط */
}
.sg-tick{
  flex:1 1 0;block-size:8px;border-radius:2px;
  background:rgba(206,225,219,.22);
}
/* التدريجات الأربع الأولى مضيئة: تمثيل «قياس» لا نسبة حقيقية لجهة بعينها */
.sg-tick:nth-child(-n+4){background:var(--brand-mint)}
.sg-mark{
  position:absolute;inset-block-end:0;
  inset-inline-start:calc(66.6% - 9px);   /* نهاية التدريج الرابع */
  inline-size:18px;block-size:14px;color:var(--color-accent);fill:currentColor;
}
[dir="ltr"] .sg-mark{transform:scaleX(-1)}
.sg-cap{margin:var(--sp-3) 0 0;font-size:var(--fs-xs);color:var(--color-on-primary-2)}

/* مجالات الاستخدام */
/* ثلاثة في الصف على الحاسب (طلب العميل): الستة تصير صفّين تامّين،
   والصف الناقص يتوسّط لو تغيّر العدد. */
.use-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4)}
/* نصف بكسل مطروح — المجموع الدقيق كان يُنزل العنصر الأخير سطراً */
.use-grid > *{flex:1 1 100%;max-inline-size:100%}
@media (min-width:36rem){
  .use-grid > *{flex-basis:calc((100% - var(--sp-4)) / 2 - 0.5px);max-inline-size:calc((100% - var(--sp-4)) / 2)}
}
@media (min-width:62rem){
  .use-grid > *{flex-basis:calc((100% - 2 * var(--sp-4)) / 3 - 0.5px);max-inline-size:calc((100% - 2 * var(--sp-4)) / 3)}
}
.use{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);background:var(--color-surface);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.use:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.use-ic{
  flex-shrink:0;display:grid;place-items:center;inline-size:44px;block-size:44px;
  background:var(--brand-primary);color:var(--brand-mint);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
}
[dir="ltr"] .use-ic{clip-path:polygon(0 0,100% 0,100% 100%,13px 100%,0 calc(100% - 13px))}
.use-ic .ic{inline-size:22px;block-size:22px}
.use h3{margin:0;font-size:var(--fs-md);line-height:1.45}

/* الأساس المنهجي والنشأة */
.serat-cols{display:grid;gap:var(--sp-6)}
@media (min-width:64rem){.serat-cols{grid-template-columns:1.15fr .85fr;align-items:start}}
.serat-p{color:var(--color-ink-2);max-inline-size:46rem}
.model-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block-start:var(--sp-4)}
.model{
  padding:.55em 1.1em;background:var(--color-surface);
  border-radius:var(--r-md);box-shadow:var(--shadow-1);
  font-weight:700;font-size:var(--fs-sm);color:var(--brand-primary);
  border-inline-start:3px solid var(--color-accent);
}
.serat-note h3{margin-block-end:var(--sp-3);font-size:var(--fs-lg)}
.serat-note p{color:var(--color-ink-2);margin-block-end:0}
.serat-dev{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  margin-block-start:var(--sp-4);padding-block-start:var(--sp-4);
  border-block-start:1px solid var(--color-line);
  font-weight:600;color:var(--brand-primary)!important;
}
.serat-dev .ic{inline-size:20px;block-size:20px;flex-shrink:0;color:var(--color-accent-ink);margin-block-start:.15em}

/* مواءمة رؤية 2030 */
.serat-v2030{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5);background:var(--color-surface);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  border-inline-start:4px solid var(--color-accent);
}
.serat-v2030 .ic{inline-size:26px;block-size:26px;flex-shrink:0;color:var(--brand-primary-2);margin-block-start:.15em}
.serat-v2030 p{margin:0;font-weight:600;color:var(--brand-primary)}

/* نداء الصفحة */
.serat-cta{display:grid;gap:var(--sp-4);align-items:center}
@media (min-width:48rem){.serat-cta{grid-template-columns:1fr auto;gap:var(--sp-5)}}
.serat-cta p{margin:0}

/* ============================================================
   الاستبيان في الموقع العام — نموذج هادئ أسفل الصفحة، لا نافذة
   منبثقة: المنبثقة تُغلق قبل قراءتها وتُقاس بمعدّل إغلاق لا إجابة.
   ============================================================ */
.survey-sec{position:relative;overflow:hidden;background:var(--color-surface-2)}
/* راية واحدة مقصوصة بالحافة — توقيع القسم بلا ضجيج */
.survey-sec .sv-flag{
  position:absolute;inset-block-start:-8%;inset-inline-start:-6%;
  /* fill لا color: الوسم بلا fill يرث الأسود لا currentColor — كبقية رايات الموقع */
  inline-size:min(34vw,300px);fill:var(--brand-mint);opacity:.55;
  pointer-events:none;z-index:0
}
.survey-sec .container{position:relative;z-index:1}
.survey{max-inline-size:46rem;margin-inline:auto;padding:clamp(1.5rem,3vw,2.5rem)}
.survey-intro{color:var(--color-ink-2);margin-block-end:var(--sp-6)}

.sq{border:0;margin:0;padding:0;min-inline-size:0}
.sq + .sq{margin-block-start:var(--sp-6);padding-block-start:var(--sp-5);border-block-start:1px solid var(--color-line)}
/* الرقم على يمين السؤال يعطي القارئ إحساس التقدّم بلا شريط تقدّم كاذب */
.sq legend{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-3);
  inline-size:100%;padding:0;margin-block-end:var(--sp-2);
}
.sq-n{
  flex:none;font-size:var(--fs-xs);font-weight:700;color:var(--color-accent-ink);
  font-variant-numeric:lining-nums tabular-nums;min-inline-size:1.6rem;line-height:1.9
}
.sq-q{flex:0 1 auto;font-weight:600;color:var(--brand-primary);font-size:var(--fs-lg);line-height:1.55}
.sq-q label{font:inherit;color:inherit}
.sq-req{
  flex:none;align-self:center;font-size:var(--fs-xs);font-weight:600;
  color:var(--color-accent-ink);background:var(--brand-peach);
  padding:.1em .5em;border-radius:var(--r-full)
}
.sq-help{color:var(--color-ink-2);font-size:var(--fs-sm);margin-block:0 var(--sp-3);padding-inline-start:2.35rem}

/* الخيارات تأخذ عرض نصّها وتلتفّ — لا شرائح بعرض النموذج فيها كلمة واحدة */
.sq-opts{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-inline-start:2.35rem}
.sq-opt{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  flex:0 1 auto;max-inline-size:100%;
  padding:.6em 1em;cursor:pointer;
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--r-md);
  line-height:1.6;
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.sq-opt input{flex:none;accent-color:var(--brand-primary);inline-size:1.05em;block-size:1.05em;margin:0}
.sq-opt:hover{border-color:var(--color-accent)}
.sq-opt:focus-within{outline:2px solid var(--color-accent);outline-offset:2px}
/* الاختيار يُقرأ من البطاقة كلها لا من دائرة 16px */
.sq-opt:has(input:checked){background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.sq-opt:has(input:checked) input{accent-color:var(--brand-mint)}

/* التقييم أزرار مرقّمة لا نجوم: الرقم يُقرأ بلا لبس على قارئ الشاشة،
   والنجمة نصفها المملوء غامض بصرياً في الشاشات الصغيرة. */
.sq-scale{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-inline-start:2.35rem}
.sq-star{position:relative;cursor:pointer}
.sq-star input{position:absolute;opacity:0;inline-size:100%;block-size:100%;margin:0;cursor:pointer}
.sq-star span{
  display:grid;place-items:center;min-inline-size:3.25rem;min-block-size:3.25rem;
  font-variant-numeric:lining-nums tabular-nums;font-weight:700;font-size:var(--fs-lg);
  color:var(--brand-primary);
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--r-md);
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.sq-star:hover span{border-color:var(--color-accent)}
.sq-star input:checked + span{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
.sq-star input:focus-visible + span{outline:2px solid var(--color-accent);outline-offset:2px}
/* طرفا المقياس مسمّيان: «3 من 5» بلا تسمية لا تعني شيئاً */
.sq-anchors{
  display:flex;justify-content:space-between;
  max-inline-size:min(100%,22rem);margin-block-start:var(--sp-2);
  padding-inline-start:2.35rem;
  font-size:var(--fs-xs);color:var(--color-ink-2)
}

.survey textarea,.survey input[type="text"],.survey input[type="email"]{
  inline-size:100%;padding:var(--sp-3);
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--r-md);
  font:inherit;color:var(--color-ink);line-height:var(--lh-body)
}
.survey textarea{resize:vertical;min-block-size:6rem}
.survey textarea:focus-visible,.survey input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}

.survey-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);
  margin-block-start:var(--sp-6);padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--color-line)
}
.survey-privacy{
  display:flex;align-items:center;gap:var(--sp-2);
  margin:0;font-size:var(--fs-xs);color:var(--color-ink-2);line-height:1.7
}
.survey-privacy .ic{inline-size:16px;block-size:16px;flex:none;color:var(--brand-primary-2)}

@media (max-width:35.99rem){
  /* الجوال: نلغي إزاحة الرقم كي لا يضيع عرض السطر */
  .sq-help,.sq-opts,.sq-scale,.sq-anchors{padding-inline-start:0}
  .sq-opt{inline-size:100%}
  .sq-star span{min-inline-size:2.85rem;min-block-size:2.85rem}
}
@media (prefers-reduced-motion:reduce){.sq-opt,.sq-star span{transition:none}}

/* رسالة تأكيد/خطأ في الموقع العام — الاستبيان يعود لمكانه فيحتاج تأكيداً */
.site-alert{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  margin-block:var(--sp-5) 0;padding:var(--sp-4);
  border-radius:var(--r-md);border-inline-start:3px solid transparent;
  line-height:var(--lh-body)
}
.site-alert .ic{inline-size:22px;block-size:22px;flex:none;margin-block-start:.15em}
.site-alert--success{background:var(--brand-mint);color:var(--brand-primary);border-inline-start-color:var(--brand-primary-2)}
.site-alert--error{background:#FFE8E0;color:#8A2E0B;border-inline-start-color:var(--color-accent)}