/* =========================================================
   T-146 المرحلة 2 · ج — /start بنظام الشبكة
   الغلاف وحده: الخانات، الخطوط، الحقول بحدود 1px، الزر بالكتلة البيضاء
   منطق النموذج في start.html لم يُمس (الحقول، الخيارات الستة، rid، مهلة 120ث، عنوان السكربت، ?lang=)
   تُحمَّل بعد grid/grid.css وتستعمل متغيراته (--t1..--t4، --line، --line-2، --line-s، --ease)
   السماوي إشارة واحدة: نقطة النبض في AP (الجانب وشاشة الاستلام). التحديد والتقدّم والتركيز بالأبيض
   ========================================================= */
:root { --err: #FF7659; --dir: -1 }
html[dir="ltr"] { --dir: 1 }
html[lang="en"] body { font-family: var(--lat); line-height: 1.6 }
.lat { direction: ltr; unicode-bidi: isolate }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* الخانة نفسها في الرئيسية (حيلة الظلال الخمسة): خط 1px واحد بين كل خانتين */
.stage__intro, .stage__prog, .resume, .stage__form, .stage__side, .opt, .pfoot .cell {
  --l: var(--line-s);
  box-shadow: 1px 0 0 0 var(--l), 0 1px 0 0 var(--l), 1px 1px 0 0 var(--l), 1px 0 0 0 var(--l) inset, 0 1px 0 0 var(--l) inset;
}

/* ---------- الترويسة ---------- */
.bar__brand { margin-inline-end: auto }
.mark use, .side__mk use, .pulse use { fill: var(--w) }
.bar .lang { justify-content: center; min-inline-size: 64px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--t1) }
@media (hover: hover) and (pointer: fine) {
  .bar .cell.lang:hover { color: var(--w); background: rgba(255, 255, 255, .05) }
}

/* ---------- التخطيط: عمود النموذج، وجانب على المكتب ---------- */
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 400px);
  grid-template-rows: auto auto auto 1fr; align-items: stretch;
  padding-block: clamp(24px, 5vh, 56px) clamp(48px, 8vh, 96px);
}
.stage__intro, .stage__prog, .resume, .stage__form { grid-column: 1 }
.stage__intro { grid-row: 1; padding: clamp(24px, 3vw, 44px) }
.stage__prog { grid-row: 2; padding: 18px clamp(24px, 3vw, 44px) }
.resume { grid-row: 3 }
.stage__form { grid-row: 4; padding: clamp(24px, 3vw, 44px); overflow-x: clip }
.stage__side { grid-column: 2; grid-row: 1 / 5; display: flex; flex-direction: column }

/* ---------- الرأس ---------- */
.eyebrow { display: inline-block; font-family: var(--lat); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); direction: ltr }
html[lang="ar"] .eyebrow { font-family: var(--ar); letter-spacing: 0; text-transform: none; font-size: 13px; direction: rtl }
.h { font-family: var(--ard); font-weight: 600; color: var(--t1); line-height: 1.45; text-wrap: balance }
#title.h { font-size: clamp(30px, 3.6vw, 54px); margin-block: 14px 16px; max-inline-size: 16em }
.step .h { font-size: clamp(24px, 2.4vw, 36px) }
html[lang="en"] .h { font-family: var(--lat); font-weight: 600; letter-spacing: -.02em; line-height: 1.12 }
/* حشوة الكلمات تحت الحرف العربي لئلا يقصّ overflow:hidden الذيول (درس .hl) */
.h .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .06em .16em; margin-block: -.06em -.16em }
.h .w > span { display: inline-block }
.lead { color: var(--t2); max-inline-size: 40em; font-size: clamp(15px, 1.3vw, 17px) }

/* ---------- التقدّم: مربعات الرئيسية ممدودة ---------- */
.prog { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center }
.count { font-family: var(--lat); font-size: 12px; letter-spacing: .2em; color: var(--t3); direction: ltr; white-space: nowrap }
.count b { color: var(--t1); font-weight: 700 }
.count .nm { font-family: var(--ar); letter-spacing: 0; color: var(--t2); margin-inline-start: 12px; font-size: 13px }
html[lang="en"] .count .nm { font-family: var(--lat) }
.track { display: flex; gap: 6px }
.seg { position: relative; flex: 1; block-size: 6px; background: rgba(255, 255, 255, .16); overflow: hidden }
.seg i { position: absolute; inset: 0; background: var(--w); transform: scaleX(0); transform-origin: calc(50% - 50% * var(--dir)) 50%; transition: transform .45s var(--ease) }
.seg.is-done i, .seg.is-active i { transform: scaleX(1) }
.seg.is-done i { background: rgba(255, 255, 255, .45) }
.prog__names { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--t3); margin-block-start: 12px }
.prog__names span { display: inline-flex; align-items: center; gap: 6px }
.prog__names span::before { content: ""; inline-size: 6px; block-size: 6px; background: rgba(255, 255, 255, .3) }
.prog__names span.is-on { color: var(--t1) }
.prog__names span.is-on::before { background: var(--w) }
@media (max-width: 420px) { .count .nm { display: none } }
@media (min-width: 421px) { .prog__names { display: none } }

/* ---------- مسودة مستعادة ---------- */
.resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px clamp(24px, 3vw, 44px); font-size: 13.5px; color: var(--t2) }
.resume[hidden] { display: none }
.resume button { min-block-size: 44px; padding-inline: 16px; border: 1px solid var(--line-2); font-size: 13px; color: var(--t1); transition: background-color .2s var(--ease) }

/* ---------- الخطوات ---------- */
.steps { position: relative; min-block-size: 380px }
.step { position: absolute; inset: 0; visibility: hidden; opacity: 0; display: grid; gap: clamp(20px, 2.6vw, 30px); align-content: start }
.step.is-current { position: relative; visibility: visible; opacity: 1 }

/* الخيارات: خانات متجاورة بخط واحد بينها */
.opts { display: grid; grid-template-columns: 1fr; gap: 0 }
@media (min-width: 640px) { .opts { grid-template-columns: 1fr 1fr } }
.opt {
  position: relative; text-align: start; background: transparent; padding: 18px 20px 16px; min-block-size: 96px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: end; overflow: hidden; isolation: isolate;
  transition: background-color .25s var(--ease)
}
@media (min-width: 640px) { .opt { padding: 24px 24px 22px; min-block-size: 118px } }
.opt::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--w); transform: scaleX(0); transform-origin: calc(50% - 50% * var(--dir)) 50%; transition: transform .35s var(--ease) }
.opt:focus-visible { outline-offset: -3px }
.opt.is-selected { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--w) }
.opt.is-selected::after { transform: scaleX(1) }
.opt .l { font-family: var(--ard); font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; color: var(--t1) }
html[lang="en"] .opt .l { font-family: var(--lat); letter-spacing: -.01em }
.opt .hnt { grid-column: 1; font-size: 13.5px; color: var(--t2); line-height: 1.6 }
.opt .k { grid-column: 2; grid-row: 1 / 3; align-self: start; font-family: var(--lat); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--t3); direction: ltr; padding: 2px 6px; transition: background-color .25s var(--ease), color .25s var(--ease) }
.opt.is-selected .k { background: var(--w); color: var(--ink) }
@media (min-width: 640px) {
  .opt--span, .opt--wide { grid-column: 1 / -1; min-block-size: 0 }
}
@media (hover: hover) and (pointer: fine) {
  .opt:hover { background: rgba(255, 255, 255, .05) }
  .opt:hover .k { color: var(--t1) }
  .opt.is-selected:hover { background: rgba(255, 255, 255, .09) }
}
.prefill { font-size: 14px; color: var(--t2); border-inline-start: 2px solid var(--w); padding: 4px 12px }
.prefill[hidden] { display: none }

/* ---------- الحقول: صندوق بحد 1px، والتسمية تطفو داخله ---------- */
.fields { display: grid; grid-template-columns: 1fr; gap: 14px }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr } .fields .full { grid-column: 1 / -1 } }
.f { position: relative }
.f input, .f textarea {
  display: block; inline-size: 100%; background: transparent; border: 1px solid var(--line-2); border-radius: 0;
  padding: 30px 16px 10px; color: var(--t1); font: inherit; font-size: 17px; line-height: 1.5; outline: none; resize: vertical;
  transition: border-color .2s var(--ease)
}
.f textarea { min-block-size: 132px; line-height: 1.7 }
.f input::placeholder, .f textarea::placeholder { color: transparent }
.f label {
  position: absolute; inset-inline-start: 17px; inset-inline-end: 17px; inset-block-start: 19px; font-size: 16px; line-height: 1.5; color: var(--t2);
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: calc(50% - 50% * var(--dir)) 0; transition: transform .3s var(--ease), color .2s var(--ease)
}
.f input:focus + label, .f input:not(:placeholder-shown) + label, .f textarea:focus + label, .f textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.8); color: var(--t1) }
/* شريط التركيز السفلي أُلغي: .f تحوي رسالة الخطأ تحت الحقل، فكان الشريط يقع تحت الرسالة لا تحت الحقل (قِيس: 2.63 على نص الخطأ). التركيز بالحد الأبيض وحده */
.f i { display: none }
.f input:focus, .f textarea:focus { border-color: var(--w) }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--w); outline-offset: 2px }
.f.is-invalid input, .f.is-invalid textarea { border-color: var(--err) }
.f.is-invalid label, .f.is-invalid label .rq { color: var(--err) }
.f .err { display: none; font-size: 13px; color: var(--err); margin-block-start: 8px }
.f.is-invalid .err { display: block }
.f label .rq { font-size: 13px; color: var(--t3); font-weight: 400 }
.f input[type="tel"] { text-align: start; font-family: var(--lat); letter-spacing: .04em }
html[dir="rtl"] .f input[type="tel"] { text-align: right }
.hp { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* تفضيلات التواصل والموعد: مربعات اختيار واحد، والمختار كتلة بيضاء */
.pref { display: grid; gap: 10px; padding-block-start: 6px }
.pref__k { font-size: 13.5px; color: var(--t2) }
.pref__k .rq { font-size: 13px; color: var(--t3) }
.chips { display: flex; flex-wrap: wrap; gap: 0 }
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; font-size: 14px; padding: 8px 18px;
  color: var(--t2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); margin-inline-end: -1px;
  transition: background-color .2s var(--ease), color .2s var(--ease)
}
.pill:focus-visible { outline-offset: -3px; position: relative; z-index: 1 }
.pill.is-on { background: var(--w); color: var(--ink); box-shadow: inset 0 0 0 1px var(--w); position: relative }
.pill.is-on:focus-visible { outline-color: var(--ink) } /* T-147: حلقة التركيز داخل الكتلة البيضاء كانت بيضاء فلا تُرى */
@media (hover: hover) and (pointer: fine) {
  .pill:not(.is-on):hover { color: var(--t1); background: rgba(255, 255, 255, .06) }
}
.more { box-shadow: inset 0 0 0 1px var(--line-2); padding-inline: 16px }
.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 52px; font-size: 14px; color: var(--t2) }
.more > summary::-webkit-details-marker { display: none }
.more > summary::after { content: "+"; font-family: var(--lat); font-size: 20px; line-height: 1; color: var(--t3); transition: transform .3s var(--ease) }
.more[open] > summary::after { transform: rotate(45deg) }
.more__body { display: grid; gap: 16px; padding-block: 4px 18px }
.more__hint { font-size: 13px; color: var(--t3) }

/* المراجعة */
.review { display: grid; gap: 10px }
.review__row, .summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.chip { min-block-size: 36px; display: inline-flex; align-items: center; font-size: 13px; padding: 6px 14px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--t2) }
.chip b { color: var(--t1); font-weight: 600 }
.review__edit { min-block-size: 44px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 14px; font-size: 13px; color: var(--t2); transition: color .2s var(--ease), background-color .2s var(--ease) }
.review__edit i, .back i { font-style: normal; display: inline-block; transform: scaleX(var(--dir)) }
@media (hover: hover) and (pointer: fine) {
  .review__edit:hover, .back:hover { color: var(--t1) }
  .resume button:hover, .review__edit:hover { background: rgba(255, 255, 255, .05) }
}

/* الموافقة */
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--t2); line-height: 1.7; padding-block-start: 6px; cursor: pointer }
.consent input { inline-size: 20px; block-size: 20px; margin-block-start: 3px; accent-color: var(--w); cursor: pointer }
.consent a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; white-space: nowrap }
.consent .rq { font-size: 13px; color: var(--t3); white-space: nowrap }
.consent .err { grid-column: 2; display: none; font-style: normal; font-size: 13px; color: var(--err) }
.consent.is-invalid .err { display: block }
.consent.is-invalid span { color: var(--err) }

/* ---------- الأزرار: التالي والإرسال كتلة بيضاء ---------- */
.actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-start: 8px }
.back { display: inline-flex; align-items: center; min-block-size: 44px; gap: 8px; color: var(--t2); font-size: 14px; padding: 10px 0; transition: color .2s var(--ease) }
.back[hidden] { display: none }
.next, .submit {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-block-size: 56px; min-inline-size: 200px; padding-inline: 24px;
  background: var(--w); color: var(--ink); font-family: var(--ard); font-weight: 600; font-size: 16px;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform 160ms var(--ease)
}
html[lang="en"] .next, html[lang="en"] .submit { font-family: var(--lat) }
.next i, .submit i { font-style: normal; font-family: var(--lat); display: inline-block; transform: scaleX(var(--dir)) }
.next:active, .submit:active { transform: scale(.97) }
.next[disabled], .submit[disabled] { background: transparent; color: var(--t3); box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none }
.submit[aria-busy="true"] { background: var(--w); color: var(--ink); box-shadow: none }
.submit .spin { display: none; inline-size: 16px; block-size: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .8s linear infinite }
.submit[aria-busy="true"] .spin { display: inline-block }
.submit[aria-busy="true"] i { display: none }
@keyframes spin { to { transform: rotate(360deg) } }
@media (hover: hover) and (pointer: fine) {
  .next:hover, .submit:hover { background: var(--ink); color: var(--w); box-shadow: inset 0 0 0 1px var(--w) }
}
.next:focus-visible, .submit:focus-visible { outline: 2px solid var(--w); outline-offset: 3px }
.note { font-size: 13px; color: var(--t3); max-inline-size: 40em }
.note.is-err { color: var(--err); font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 118, 89, .5); padding: 10px 14px }
.note.is-unsure { color: var(--t1); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line-2); padding: 10px 14px }
@media (max-width: 639px) {
  .next, .submit { inline-size: 100% }
  .actions { flex-direction: column-reverse; align-items: stretch }
  .back { justify-content: center }
}

/* ---------- تم الاستلام ---------- */
.done { text-align: center; display: grid; gap: 18px; justify-items: center; padding-block: 24px }
.pulse { position: relative; inline-size: 132px; block-size: 104px; display: grid; place-items: center; border: 1px solid var(--line) }
.pulse svg { inline-size: 72px; block-size: auto }
.pulse circle, .side__mk circle { fill: var(--cy) }
.done .h { font-size: clamp(28px, 3vw, 44px) }
.done p { color: var(--t2); max-inline-size: 30em }
.nextsteps { display: grid; gap: 10px; text-align: start; max-inline-size: 30em; margin: 6px auto 0; padding-inline-start: 1.6em; list-style: decimal; color: var(--t2); font-size: 15px; line-height: 1.7 }
.nextsteps li::marker { color: var(--t3); font-family: var(--lat); font-weight: 600 }
.done .home { display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: 22px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--t1); font-size: 14px; transition: background-color .2s var(--ease), color .2s var(--ease) }
@media (hover: hover) and (pointer: fine) {
  .done .home:hover { background: var(--w); color: var(--ink) }
}

/* ---------- الجانب: AP ثابت ---------- */
.side__obj { position: sticky; inset-block-start: var(--bar); flex: none; block-size: min(640px, calc(100svh - var(--bar) - 48px)); min-block-size: 360px; display: grid; place-items: center; overflow: hidden }
.side__mk { inline-size: 46%; block-size: auto; transition: opacity .4s var(--ease) }
.side__obj.is-drawn .side__mk { opacity: 0 }
.side__cv { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none }
.side__c1 { top: 14px; right: 16px } /* rtl-ok: زخرفة لاتينية بموضع ثابت كالرئيسية */
.side__c2 { bottom: 14px; left: 16px } /* rtl-ok */
.side__c3 { top: 14px; left: 4px; writing-mode: vertical-rl } /* rtl-ok */
.side__code { margin-block-start: auto; font-size: 11px; color: var(--t4); padding: 14px 18px; border-block-start: 1px solid var(--line-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ---------- الذيل ---------- */
.pfoot { display: grid; grid-template-columns: 1.2fr 1fr 1fr; margin-block-end: 40px }
.pfoot .cell { padding: 14px 22px; font-size: 13px; color: var(--t3); gap: 18px; flex-wrap: wrap }
.pfoot a { color: var(--t2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; min-block-size: 44px; display: inline-flex; align-items: center }
@media (hover: hover) and (pointer: fine) {
  .pfoot a:hover { color: var(--w); text-decoration-color: var(--w) }
}

/* ---------- تابلت وجوال: عمود واحد بلا جانب ---------- */
@media (max-width: 1100px) {
  .stage { grid-template-columns: minmax(0, 1fr) }
  .stage__side { display: none }
  .pfoot { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .bar .cell { padding-inline: 14px }
  .stage { padding-block: 16px 40px }
  .stage__intro, .stage__form { padding: 22px 18px }
  .stage__prog, .resume { padding-inline: 18px }
  #title.h { font-size: clamp(28px, 8vw, 36px) }
  .step .h { font-size: clamp(22px, 6.4vw, 28px) }
  .pfoot { grid-template-columns: 1fr }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .next:active, .submit:active { transform: none }
}

/* T-147: العنوان يُركَّز بعد تغيّر الخطوة؛ إزاحة أوسع فلا تلامس الحلقة الحروف */
.step .h:focus-visible { outline-offset: 6px }