/* =====================================================================
   participant.css: تطبيق المشارك في برنامج «وثبة»
   يبني على base.css (مصدر الرموز الوحيد والمكونات المشتركة). كل لون ومسافة ومدة هنا من الرموز،
   ولا letter-spacing على العربية، والاتجاه بالخصائص المنطقية.
   الألوان بقدر: الأساسي (teal) للإجراءات والإنجاز، والفيروزي والأخضر لمسات (أجزاء الشعار والشهادات)،
   ولا أخضر نصًا على خلفية فاتحة (green-ink بدلًا منه).
   ===================================================================== */

/* ============ 1. الإطار: عمود التطبيق والرأس والشريط السفلي ============ */
body.is-participant{background:var(--bg)}
.papp{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--app-max);min-block-size:100vh;min-block-size:100dvh;margin-inline:auto;background:var(--bg)}
.ptop{position:sticky;inset-block-start:0;z-index:var(--z-sticky);background:var(--bg);padding-block-start:env(safe-area-inset-top,0px);transition:box-shadow var(--d2) var(--ease);view-transition-name:p-top}
.ptop.is-stuck{box-shadow:0 1px 0 var(--line),var(--sh-1)}
.ptop .sim-banner,.ptop .app-h{position:static}
.ptop .app-h{background:transparent;padding-block:var(--sp-2)}
.app-brand{display:inline-flex;align-items:center;min-block-size:var(--tap);padding-inline:var(--sp-1);margin-inline-start:calc(-1 * var(--sp-1));color:inherit;border-radius:var(--r-md)}
.app-brand:hover{text-decoration:none}
.app-brand:active .wmark{transform:scale(.96)}
.app-brand .wmark{transition:transform var(--d1) var(--ease)}
.hd-a{display:flex;align-items:center;gap:var(--sp-2)}
.hd-a .icon-btn,.hd-a .avatar{text-decoration:none;transition:transform var(--d1) var(--ease),background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.hd-a .icon-btn{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hd-a .icon-btn:hover{background:var(--surface-2)}
.hd-a .avatar:hover{background:var(--brand-line);text-decoration:none}
.hd-a .icon-btn:active,.hd-a .avatar:active{transform:scale(.92);transition-duration:var(--d-fast)}
.pmain{flex:1;outline:none;padding-block-end:var(--sp-8);view-transition-name:p-main}

/* الشريط السفلي: كبسولة تنزلق خلف القسم الحالي (base.css: .tabbar--glide) */
.papp .tabbar{view-transition-name:p-tabbar;padding-inline:var(--sp-2);box-shadow:0 -1px 0 var(--line),0 -8px 24px -16px rgb(31 42 51 / .18)}
.papp .tabbar{border-block-start:0}
.tb:hover{text-decoration:none}
.tb__ic{display:grid;place-items:center;inline-size:calc(var(--tap) + var(--sp-3));block-size:calc(var(--sp-8) - var(--sp-0));border-radius:var(--r-full)}
.tb__l{line-height:1.6}
.tb[aria-current="page"] .tb__l{color:var(--brand-ink)}
.tb[aria-current="page"] .icon{transform:translateY(-1px)}
.tb:focus-visible{outline-offset:-2px}

@media (min-width:48rem){
  body.is-participant{background:var(--surface-2)}
  .papp{border-inline:1px solid var(--line);box-shadow:var(--sh-1)}
}

/* الانتقال بين الأقسام: الرأس والشريط ثابتان، والمحتوى ينزلق باتجاه التنقل (التالي يدخل من اليسار في RTL) */
::view-transition-group(p-main){animation:none}
::view-transition-old(p-main){animation:vtFadeOut var(--d-vt-out) var(--ease) both}
::view-transition-new(p-main){animation:vtFadeIn var(--d-vt-in) var(--ease-out) both}
html[data-vt="forward"]::view-transition-old(p-main){animation-name:vtOutRight}
html[data-vt="forward"]::view-transition-new(p-main){animation-name:vtInLeft}
html[data-vt="back"]::view-transition-old(p-main){animation-name:vtOutLeft}
html[data-vt="back"]::view-transition-new(p-main){animation-name:vtInRight}
::view-transition-group(p-top),::view-transition-group(p-tabbar),
::view-transition-old(p-top),::view-transition-new(p-top),::view-transition-old(p-tabbar),::view-transition-new(p-tabbar){animation:none}
/* مغادرة التطبيق كله (مثل فتح رابط دعوة): الرأس والشريط يتلاشيان مع الصفحة بدل البقاء حتى نهاية الانتقال */
::view-transition-old(p-top):only-child,::view-transition-old(p-tabbar):only-child{animation:vtFadeOut var(--d-vt-out) var(--ease) both}
/* تبديل المظهر بالدائرة يشمل الصفحة كلها */
html.theme-vt .ptop,html.theme-vt .pmain,html.theme-vt .papp .tabbar{view-transition-name:none}

/* الروابط التي تبدو صفوفًا وبطاقات: بلا خط تحت عند المرور */
.irow:hover,.crow:hover,.todo:hover,.ccard__go:hover,.sec__lnk:hover,.filechip--link:hover,.cblock:hover,.cnew a:hover{text-decoration:none}

/* ============ 2. الرئيسية ============ */
.pview--home .hero{padding-block-start:var(--sp-3)}
.hero__t:focus,.pmain [tabindex="-1"]:focus{outline:none}
.irow small .num,.rows .num,.mhero .msub{white-space:nowrap}
.sec__lnk{display:inline-flex;align-items:center;min-block-size:var(--tap);margin-block:calc(-1 * var(--sp-3));font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--brand-ink)}
.todos{display:grid;gap:var(--sp-3)}
.todos .todo + .todo{margin-block-start:0}
a.todo{color:inherit;text-decoration:none}
.todo__t,.todo__m{display:block}
.todo--late{border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.todo--late .tile{background:var(--warn-soft);color:var(--warn)}
.todo__go{flex-shrink:0;pointer-events:none}
.todo:focus-visible{outline-offset:3px;border-radius:var(--r-lg)}
a.crow{color:inherit;text-decoration:none}
.crow:active{opacity:.72}
.meet__t{text-wrap:balance}

/* بطاقة «تقدمك»: حلقة النسبة ونص الإنجاز وتفصيل الأجزاء */
.prog{margin:0 var(--sp-4) var(--sp-5);padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.prog__head{display:flex;align-items:center;gap:var(--sp-5)}
.prog__txt{flex:1;min-inline-size:0}
.prog__t{font-size:var(--fs-md);line-height:var(--lh-head)}
.prog__line{margin-block-start:var(--sp-1);font-size:var(--fs-base);color:var(--ink-2);line-height:var(--lh-snug)}
.prog__line b{font-size:var(--fs-lg);color:var(--ink);font-weight:var(--fw-sb)}
.prog__hint{margin-block-start:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}

/* الحلقة (SVG): المسار يبدأ من الأعلى ويمتلئ مع عقارب الساعة. pathLength=100 فالإزاحة نسبة مئوية */
.pring{--pr:112px;--pr-w:10;position:relative;display:inline-grid;place-items:center;inline-size:var(--pr);block-size:var(--pr);flex-shrink:0}
.pring svg{position:absolute;inset:0;inline-size:100%;block-size:100%;transform:rotate(-90deg);overflow:visible}
.pring circle{fill:none;stroke-width:var(--pr-w)}
.pring__t{stroke:var(--surface-3)}
.pring__v{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p,0) * 100);transition:stroke-dashoffset 1100ms var(--ease-out)}
.pring--zero .pring__v{opacity:0}
.pring--full .pring__v{stroke:var(--green)}
.pring__c{position:relative;display:grid;justify-items:center;gap:var(--sp-0);line-height:1.1}
.pring__n{font-size:var(--fs-2xl);font-weight:var(--fw-sb);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.pring__n small{font-size:.52em;font-weight:var(--fw-m);color:var(--ink-3);margin-inline-start:1px}
.pring__k{font-size:var(--fs-2xs);font-weight:var(--fw-m);color:var(--ink-3)}
.pring--sm{--pr:64px;--pr-w:11}
.pring--sm .pring__n{font-size:var(--fs-md)}

/* تفصيل الأجزاء: لكل جزء لون قطعة من الشعار (الخطاف للقاءات، والعمود للمهام، والمعيّن للاستبانات) */
.parts{list-style:none;margin:var(--sp-5) 0 0;padding:var(--sp-4) 0 0;border-block-start:1px solid var(--line);display:grid;gap:var(--sp-3)}
.part{display:grid;grid-template-columns:6.75rem minmax(0,1fr) 3rem;align-items:center;gap:var(--sp-3)}
.part__l{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-m);color:var(--ink-2);white-space:nowrap}
.part__l .icon{inline-size:18px;block-size:18px;color:var(--part-ink)}
.part .bar{block-size:8px;border-radius:4px}
.part .bar i{background:var(--part)}
.part__v{justify-self:end;font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink)}
.part--meetings{--part:var(--logo-a);--part-ink:var(--brand)}
.part--tasks{--part:var(--logo-b);--part-ink:var(--turq-ink)}
.part--surveys{--part:var(--logo-c);--part-ink:var(--green-ink)}
.bar--xs{block-size:4px;border-radius:2px}

/* بطاقة الاحتفاء بشهادة جديدة */
.cnew{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--sp-4);margin:0 var(--sp-4) var(--sp-5);padding:var(--sp-5);background:var(--surface);border:1px solid var(--brand-line);border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.cnew__mk{position:relative;display:grid;place-items:center;inline-size:68px;block-size:68px;border-radius:var(--r-lg);background:var(--tint);flex-shrink:0}
.cnew__b{flex:1;min-inline-size:0}
.cnew__k{font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--green-ink)}
.cnew__t{margin-block-start:var(--sp-0);font-size:var(--fs-md);line-height:1.5}
.cnew__p{margin-block-start:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.75}
.cnew__a{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-block-start:calc(-1 * var(--sp-1))}
.cnew--in{animation:cnewIn var(--d-spring) var(--ease-spring) both}
.cnew.is-out{animation:cnewOut var(--d2) var(--ease) both}
@keyframes cnewIn{from{opacity:0;transform:translateY(var(--rise-y)) scale(.98)}to{opacity:1;transform:none}}
@keyframes cnewOut{to{opacity:0;transform:scale(.97)}}

/* معيّنات الشعار تتطاير مرة من مركز العنصر (لحظة إنجاز أو شهادة) */
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{--ba:0deg;--br:36px;position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:7px;block-size:7px;margin:-3.5px;border-radius:1.5px;background:var(--logo-c);opacity:0;animation:burst 900ms var(--ease-out) var(--bd,180ms) both}
.burst i:nth-child(1){--ba:0deg}
.burst i:nth-child(2){--ba:45deg;--br:30px;background:var(--logo-a)}
.burst i:nth-child(3){--ba:90deg;background:var(--logo-b)}
.burst i:nth-child(4){--ba:135deg;--br:30px}
.burst i:nth-child(5){--ba:180deg;background:var(--logo-a)}
.burst i:nth-child(6){--ba:225deg;--br:30px;background:var(--logo-b)}
.burst i:nth-child(7){--ba:270deg}
.burst i:nth-child(8){--ba:315deg;--br:30px;background:var(--logo-a)}
@keyframes burst{
  0%{opacity:0;transform:rotate(var(--ba)) translateY(-6px) rotate(45deg) scale(.3)}
  25%{opacity:1}
  100%{opacity:0;transform:rotate(var(--ba)) translateY(calc(-1 * var(--br))) rotate(45deg) scale(1)}
}
.cnew__mk .burst i{--bd:700ms}
.cnew__mk .burst i:nth-child(odd){--br:44px}

/* قائمة الجدارات في الرئيسية: شريط إنجاز كل جدارة وعلامة الشهادة */
.crow__p{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:6px}
.crow__p .bar{flex:1;max-inline-size:14rem}
.crow__v{min-inline-size:2.75em;font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-3);text-align:start}
.crow__cert{display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:var(--green-soft);color:var(--green-ink);flex-shrink:0}
.crow__cert .icon{inline-size:18px;block-size:18px}

/* ============ 3. ختام البرنامج ============ */
.hero--fin{margin:var(--sp-2) var(--sp-4) var(--sp-5);padding:var(--sp-6) var(--sp-5) var(--sp-5);box-shadow:var(--sh-2)}
.fin__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-block-end:var(--sp-5)}
.fin__mk{position:relative;display:inline-flex}
.hero--fin .burst i{background:var(--white)}
.hero--fin .burst i:nth-child(even){background:var(--on-solid-3)}
.fin__chip{background:var(--solid-fill);color:var(--on-solid)}
.hero--fin .hero__t{max-inline-size:none;margin-block-end:0}
.fin__lead{margin-block-start:var(--sp-2);color:var(--on-solid-2);font-size:var(--fs-sm);line-height:1.8;max-inline-size:44ch}
.hero--fin .fin__stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-3)}
.hero--fin .fin__stats > div:nth-child(3){border-inline-start:0;padding-inline-start:0}
.hero--fin .fin__stats > div:nth-child(n+3){border-block-start:1px solid var(--solid-line)}
.fin__stats b{display:flex;align-items:baseline;justify-content:flex-end;font-size:var(--fs-2xl);font-weight:var(--fw-sb);line-height:1.25;font-variant-numeric:lining-nums tabular-nums}
.fin__stats b small{font-size:.55em;color:var(--on-solid-3);font-weight:var(--fw-m)}
.fin__stats b span{font-size:inherit;color:inherit}
.fin__stats > div > span{display:block;font-size:var(--fs-xs);line-height:1.5}
@media (min-width:30rem){
  .hero--fin .fin__stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero--fin .fin__stats > div:nth-child(3){border-inline-start:1px solid var(--solid-line);padding-inline-start:var(--sp-3)}
  .hero--fin .fin__stats > div:nth-child(n+3){border-block-start:0}
}
.hero--fin .rib__bar{margin-block-start:var(--sp-6)}
.sec--certs .sec__h{margin-block-end:var(--sp-2)}

/* ============ 4. الجدارات ============ */
.ccard{gap:var(--sp-4);transition:box-shadow var(--d2) var(--ease),border-color var(--d2) var(--ease),transform var(--d3) var(--ease-out)}
.ccard__top{display:flex;align-items:center;gap:var(--sp-3)}
.ccard__top .ccard__r{flex:1;min-inline-size:0}
.ccard h3{margin-block-start:calc(-1 * var(--sp-2))}
.ccard--cert{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.ccard__mat{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2)}
.ccard__mat .icon{inline-size:17px;block-size:17px;color:var(--brand)}
.ccard__go{margin-block-start:auto}
.car__track:focus-visible{outline-offset:-2px;border-radius:var(--r-xl)}
.pg-h__a{margin-block-start:var(--sp-3);text-decoration:none}
.pg-h__a:hover{text-decoration:none}
.pad--err{padding-block-start:var(--sp-10)}
/* الجوال: البطاقة الحالية بحجمها، والجانبيتان أصغر قليلًا فيظهر العمق */
@media (max-width:63.99rem){
  .car__track .ccard:not(.is-cur){transform:scale(.965)}
}

/* إنجاز الجدارة (البطاقة والورقة) */
.cprg__h{display:flex;align-items:center;gap:var(--sp-4)}
.cprg__txt{flex:1;min-inline-size:0}
.cprg__line{font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-snug)}
.cprg__line b{font-size:var(--fs-md);color:var(--ink);font-weight:var(--fw-sb)}
.cprg__sub{margin-block-start:var(--sp-0);font-size:var(--fs-xs);color:var(--ink-3)}
.cprg .parts{margin-block-start:var(--sp-4);padding-block-start:var(--sp-3);gap:var(--sp-2)}
.cprg .part{grid-template-columns:6.25rem minmax(0,1fr) 2.5rem}
.cprg--big .pring--sm{--pr:76px}
.cprg--big .pring--sm .pring__n{font-size:var(--fs-lg)}

/* كتلة الشهادة: حالات «متاحة بعد النهاية» و«أكملت المتطلبات» و«شهادة الإتمام متاحة» */
.cblock{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--surface-2);color:inherit}
.cblock__ic{display:grid;place-items:center;inline-size:var(--tile-sm);block-size:var(--tile-sm);border-radius:11px;background:var(--surface);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.cblock__ic .icon{inline-size:19px;block-size:19px}
.cblock .b{flex:1;min-inline-size:0}
.cblock b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-sb);line-height:1.55}
.cblock small{display:block;margin-block-start:var(--sp-0);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}
.cblock--ready .cblock__ic{background:var(--turq-soft);color:var(--turq-ink);box-shadow:none}
.cblock--on{align-items:center;min-block-size:var(--tap);background:var(--green-soft);transition:transform var(--d1) var(--ease),box-shadow var(--d2) var(--ease)}
.cblock--on .cblock__ic{background:var(--green);color:var(--ink-solid);box-shadow:none}
.cblock--on small{color:var(--ink-2)}
.cblock__go{inline-size:18px;block-size:18px;color:var(--green-ink);transition:transform var(--d2) var(--ease-out)}
@media (hover:hover){.cblock--on:hover{box-shadow:var(--sh-1)}.cblock--on:hover .cblock__go{transform:scaleX(-1) translateX(3px)}}
.cblock--on:active{transform:scale(.99)}
.cblock--on:focus-visible{outline-offset:2px;border-radius:var(--r-lg)}

/* صفوف «شهاداتي» */
/* كل شهادة بطاقة صغيرة قابلة للضغط */
.certl{display:grid;gap:var(--sp-2)}
.ilist.certl li{padding:0;border:0}
.ilist.certl .irow{margin:0;inline-size:100%;padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:border-color var(--d1) var(--ease),box-shadow var(--d2) var(--ease),transform var(--d1) var(--ease)}
@media (hover:hover){.ilist.certl a.irow:hover{background:var(--surface);border-color:color-mix(in srgb,var(--green) 45%,var(--line));box-shadow:var(--sh-2)}}
.ilist.certl .irow:active{transform:scale(.99)}
.tile--cert{background:var(--green-soft);color:var(--green-ink)}
.tile--done{background:var(--ok-soft);color:var(--ok)}
.certl__go{display:inline-flex;align-items:center;gap:var(--sp-1);flex-shrink:0;font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--brand-ink)}
.ilist .certl__go .icon{inline-size:16px;block-size:16px;color:currentColor}

/* ============ 5. صفوف القوائم (ضغط واضح على الجوال) ============ */
.ilist .irow{margin-inline:calc(-1 * var(--sp-2));padding:var(--sp-1) var(--sp-2);inline-size:calc(100% + 2 * var(--sp-2));border-radius:var(--r-md);color:inherit;transition:background-color var(--d1) var(--ease)}
.ilist .irow:active{background:var(--surface-2)}
@media (hover:hover){.ilist a.irow:hover,.ilist button.irow:hover{background:var(--surface-2)}}
.ilist .irow .b{flex:1;min-inline-size:0}
.ilist .irow > .icon{flex-shrink:0}
.ilist .irow .chip{flex-shrink:0}

/* ============ 6. حسابي ============ */
.acct__who{flex:1;min-inline-size:0}
.acct__pct{display:grid;justify-items:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-lg);background:var(--brand-soft);color:var(--brand-ink);line-height:1.2;flex-shrink:0}
.acct__pct b{font-size:var(--fs-lg);font-weight:var(--fw-sb)}
.acct__pct small{font-size:var(--fs-2xs);font-weight:var(--fw-m)}
.acct__note{margin-block-start:var(--sp-2)}
.acct__lead{margin-block-end:var(--sp-4)}
.acct__rem{margin:var(--sp-5) 0 var(--sp-2)}
.calacts{display:grid;gap:var(--sp-2)}
.calacts__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.calacts__row > :first-child{grid-column:1/-1}
.acct__end{display:grid;gap:var(--sp-2)}
.linkbtn--bad{color:var(--bad)}
.acct .kv dd bdi{display:inline-block;max-inline-size:100%}
/* تذييل الحساب: شعار البرنامج و«بدعم من» الداعم */
.acct__donor{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);margin:var(--sp-2) var(--sp-5) 0;padding-block:var(--sp-6) var(--sp-4);border-block-start:1px solid var(--line)}
.acct__sep{inline-size:1px;block-size:var(--sp-8);background:var(--line-2)}
.remc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.remc .remc__b{justify-content:center;min-inline-size:0;min-block-size:var(--tap);padding-inline:var(--sp-2);white-space:nowrap}
.acct .segc button{min-block-size:var(--tap)}
.acct .sw{inline-size:56px;block-size:34px}
.acct .sw::after{content:"";position:absolute;inset:-5px -2px} /* منطقة لمس 44 بكسل حول المفتاح */
/* التطبيق للمس أولًا: كل زر صغير ورابط قرصي 44 بكسل على الأقل */
.papp .btn--sm,.papp .pill{min-block-size:var(--tap)}
.acct .sw i{inline-size:26px;block-size:26px}
.acct .sw[aria-checked="true"] i,.acct .sw[aria-checked="true"]:active i{transform:translateX(-22px)}

/* ============ 7. الأوراق: العنصر والجدارة والتنبيهات ============ */
.sh-tile{display:flex;flex-shrink:0}
.sh-tile .tile,.sh-tile .cnum{margin:0}
.sh-in > * + *{margin-block-start:var(--sp-4)}
.sh-in > .sh-sub{margin-block:var(--sp-6) 0}
.sh-in > .sh-sub--first{margin-block-start:0}
.sh-in > .sh-sub + *{margin-block-start:var(--sp-1)}
.sh-in > .sh-a{margin-block-start:var(--sp-5)}
.sh-in > :is(.reading,.mhero,.xp){margin-inline:0;margin-block-end:0}
.sh-in > .mhero:first-child{margin-block-start:0}
.sh-in > .cprg{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg)}
.sh-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.msub{line-height:var(--lh-body)}
.sh-sub__n{margin-inline-start:auto;font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-3)}
.ilist li:has(.tile--done) b{color:var(--ink-2)}

/* المادة القرائية ووصف المهمة */
.reading,.brief{padding:var(--sp-5);border-radius:var(--r-lg);background:var(--surface-2)}
.reading h4,.brief h4{font-size:var(--fs-md);margin-block-end:var(--sp-2)}
.reading p,.brief p{font-size:var(--fs-base);color:var(--ink-2);line-height:1.9}
.reading p + p,.brief p + p{margin-block-start:var(--sp-3)}
.reading .reading__k{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-body);margin-block-end:var(--sp-4);padding-block-end:var(--sp-4);border-block-end:1px solid var(--line)}
.brief .help{margin-block-start:var(--sp-3)}
.sh-brief{padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg)}
.sh-brief summary{font-size:var(--fs-sm)}
.sh-brief[open]{padding-block-end:var(--sp-4)}
.sh-brief .reading,.sh-brief .brief{margin-block-start:var(--sp-3);padding:var(--sp-4)}

/* النماذج داخل الورقة */
.tform,.svform{margin-block-start:var(--sp-5)}
.tform .field{margin-block-end:var(--sp-5)}
.tform .count{margin-block-end:0}
.textarea--sm{min-block-size:calc(var(--sp-16) + var(--sp-6))}
.qn{display:inline-grid;place-items:center;inline-size:var(--sp-6);block-size:var(--sp-6);margin-inline-end:var(--sp-2);border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-size:var(--fs-xs);font-weight:var(--fw-b);line-height:1;vertical-align:.1em}
.opt-t{font-weight:var(--fw-r);color:var(--ink-3);font-size:var(--fs-xs)}
.svform .likert{margin-block:0 var(--sp-6)}
.svform .likert legend{display:block}
.svq{margin-block-end:var(--sp-6)}
.lk__ends{align-items:baseline;gap:var(--sp-2)}
.lk__cap{flex:1;text-align:center;color:var(--brand-ink);font-weight:var(--fw-sb);font-size:var(--fs-xs)}
.lk label span{cursor:pointer}
@media (hover:hover){.lk label:hover span{border-color:var(--brand)}}
.likert .err,.svq .err{margin-block-start:var(--sp-2)}
.sv-chips{margin-block-start:var(--sp-4)}

/* شريط الإجراء اللاصق أسفل الورقة */
.tform .sh-a,.sh-a--sv{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
.sh-a__row{display:flex;gap:var(--sp-2)}
.sh-a__row .btn{flex:1}
.sh-a__note{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--warn)}
.sh-a__note .icon{inline-size:16px;block-size:16px}
.svp{display:grid;gap:var(--sp-2)}
.svp__t{font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-3)}
.sh-edit{margin-block-start:var(--sp-5)}
.sh-edit + .help{margin-block-start:var(--sp-2)}

/* رفع الملف */
.drop{cursor:pointer}
.drop:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.upl{margin-block:var(--sp-3) 0}
.upl .filechip{animation:rise var(--d2) var(--ease-out) both}
.filechip .icon-btn{inline-size:var(--tap);block-size:var(--tap)}
.filechip--link{color:inherit;transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.filechip--link:hover{border-color:var(--brand)}
.filechip--link:active{background:var(--surface-3)}
.tform .progress{margin-block-start:var(--sp-1)}

/* حالة الإنجاز: علامة صح تُرسم، ومعيّنات تتطاير، ثم النسبة الجديدة */
.okst{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);background:var(--ok-soft)}
.okst__ic{position:relative;display:grid;place-items:center;inline-size:var(--tile);block-size:var(--tile);border-radius:50%;background:var(--ok);color:var(--surface);flex-shrink:0;animation:pop var(--d4) var(--ease-spring) both}
.okst__ic .icon{inline-size:22px;block-size:22px;stroke-width:2.6;stroke-dasharray:30;stroke-dashoffset:30;animation:draw var(--d3) var(--d2) var(--ease-out) forwards}
.okst > div > b{display:block;color:var(--ink);font-weight:var(--fw-b);line-height:var(--lh-snug)}
.okst > div > span{display:block;font-size:var(--fs-sm);color:var(--ink-2)}
.okst > div > .okst__pct{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:var(--sp-2);padding-block-start:var(--sp-2);border-block-start:1px solid color-mix(in srgb,var(--ok) 22%,transparent);font-weight:var(--fw-m);color:var(--ink);animation:rise var(--d3) var(--ease-out) both}
.okst__pct[hidden]{display:none}
.okst__pct .icon{inline-size:16px;block-size:16px;color:var(--ok)}

/* الإجابة المسلّمة */
.sh-in .answer{margin-block-start:var(--sp-3);background:var(--surface)}
.answer .flabel{display:block;color:var(--ink-3);font-weight:var(--fw-sb);font-size:var(--fs-xs)}
.answer p{color:var(--ink)}

/* ============ 8. اللقاء والحضور ============ */
.mhero > div:last-child .chip{margin-block-start:var(--sp-1)}
.mhero .msub{display:block}
.kv .linkbtn{min-block-size:auto;padding:0}
.attcard{display:grid;gap:var(--sp-4);padding:var(--sp-5);border-radius:var(--r-xl);background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line)}
.attcard__h{display:flex;align-items:flex-start;gap:var(--sp-3)}
.attcard__h b{display:block;color:var(--ink);font-weight:var(--fw-b);line-height:var(--lh-snug)}
.attcard__h small{display:block;margin-block-start:var(--sp-1);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.75}
.attcard__f{margin:0}
.attcard__f .err{justify-content:center}
.tile--y{background:var(--brand-solid);color:var(--on-solid);--ic-a:var(--solid-fill)}
.otp{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2);inline-size:100%;max-inline-size:calc(var(--btn-h-lg) * 6 + var(--sp-2) * 5);margin-inline:auto}
.otp__in{position:absolute;inset:0;z-index:1;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;background:transparent;opacity:0;font-size:var(--fs-input);caret-color:transparent;cursor:text}
.otp__c{position:relative;display:grid;place-items:center;block-size:var(--btn-h-lg);border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--line-strong);font-size:var(--fs-xl);font-weight:var(--fw-b);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease),transform var(--d2) var(--ease-out)}
.otp__c.is-on{border-color:var(--brand-line);animation:pop var(--d2) var(--ease-out)}
.otp__c.is-cur{border-color:var(--brand);box-shadow:var(--ring)}
.otp__c.is-cur:empty::after{content:"";inline-size:2px;block-size:40%;border-radius:1px;background:var(--brand)}
.otp__in[aria-invalid="true"] ~ .otp__c{border-color:var(--bad)}
.attwait{display:grid;justify-items:center;gap:var(--sp-3);padding:var(--sp-10) 0;color:var(--ink-3);font-size:var(--fs-sm)}

/* ============ 9. المواد والتنبيهات ============ */
.ilist li.mat{display:block}
.mat details > summary{list-style:none;cursor:pointer}
.mat details > summary::-webkit-details-marker{display:none}
.mat__chev{color:var(--ink-3);transform:rotate(90deg);transition:transform var(--d2) var(--ease)}
.mat details[open] .mat__chev{transform:rotate(-90deg)}
.mat__body{margin-block:var(--sp-2) var(--sp-1);padding:var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2);animation:rise var(--d2) var(--ease-out) both}
.mat__body p + p{margin-block-start:var(--sp-2)}
.ntf .irow{align-items:flex-start}
.ntf .irow > .dot{margin-block-start:var(--sp-3)}
.ntf__body{display:block;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;overflow-wrap:anywhere}
.ntf .b small{margin-block-start:var(--sp-0)}
.ntf--new b{color:var(--ink)}
.ntf__help{margin-block-start:var(--sp-5)}
.privacy--sheet{max-block-size:none;overflow:visible;padding:0}
.steps{margin:0;padding-inline-start:var(--sp-5);display:grid;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2)}
.install__lead{margin-block-end:var(--sp-2)}

/* ============ 10. التحميل ============ */
.pskel{display:grid;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}
.pskel__a{block-size:var(--sp-4);inline-size:30%}
.pskel__t{block-size:var(--sp-10);inline-size:72%;border-radius:var(--r-md)}
.pskel__b{block-size:var(--sp-5);inline-size:48%}
.pskel__rib{block-size:var(--sp-10);margin-block:var(--sp-4) var(--sp-4)}
.pskel__prog{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5);margin-block-end:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.pskel__prog > div{flex:1}
.pskel__ring{inline-size:96px;block-size:96px;border-radius:50%;flex-shrink:0}
.pskel__s{inline-size:60%}
.pskel__card{block-size:calc(var(--sp-16) * 2);border-radius:var(--r-lg)}
.shskel{display:grid;gap:var(--sp-3)}
.shskel__s{inline-size:40%}

/* ============ 11. الإيقاع والتسلسل (الجوال أولًا) ============ */
/* الأعمدة تذوب على الجوال فيبقى ترتيب الأقسام كما هو */
.hcol{display:contents}
.ptabs{display:none}

/* بطاقة اللقاء القادم سطح مستقل مثل بطاقات المطلوب منك، والإجراءات صف كامل بعرض البطاقة */
.sec--next .meet{padding:var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.meet .meet__a{grid-column:1/-1;display:flex;gap:var(--sp-2);margin:0;padding-block-start:var(--sp-3);border-block-start:1px solid var(--line)}
.meet .meet__a .btn{flex:1 1 0;min-inline-size:0}

/* عناوين المجموعات داخل الأوراق: تسلسل واضح بدل نص رمادي صغير */
.sh-in .sh-sub{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-b);color:var(--ink);line-height:var(--lh-head)}
.sh-in .sh-sub + .ilist{margin-block-start:var(--sp-1)}
.sh-h h3{line-height:var(--lh-head)}
.sh-h small{line-height:var(--lh-snug)}

/* رأس الصفحات الداخلية */
.pg-h .h2{font-size:var(--fs-2xl);line-height:var(--lh-head)}
.pg-h .lead{max-inline-size:var(--read-max);font-size:var(--fs-sm);line-height:var(--lh-body)}
.acct__h .h2{font-size:var(--fs-xl)}

/* أسهم السلايدر: على الأجهزة ذات المؤشر الدقيق فقط (اللمس يكفيه السحب والنقاط) */
.car__nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-3)}
.car__arr{display:none}
.car__arr:disabled{opacity:.4;cursor:default}
.car__dot{inline-size:var(--tap);block-size:var(--tap)}
@media (hover:hover) and (pointer:fine){
  .car__arr{display:inline-grid}
  .car__arr:not(:disabled):hover{background:var(--brand-soft);color:var(--brand-ink)}
  .car__arr:not(:disabled):active{transform:scale(.94)}
}

/* ============ 12. الشاشات الضيقة ============ */
@media (max-width:23rem){ /* 368 */
  .app-h{padding-inline:var(--sp-4)}
  .hero,.sec,.pg-h,.acct__h{padding-inline:var(--sp-4)}
  .prog,.cnew,.hero--fin{margin-inline:var(--sp-3)}
  .prog,.cnew{padding:var(--sp-4)}
  .prog__head{gap:var(--sp-4)}
  .pring{--pr:96px}
  .pring--sm{--pr:60px}
  .part{grid-template-columns:6rem minmax(0,1fr) 2.75rem;gap:var(--sp-2)}
  .cnew__mk{inline-size:56px;block-size:56px}
  .car__track{padding-inline:var(--sp-4);scroll-padding-inline:var(--sp-4)}
  .todo{padding:var(--sp-3);gap:var(--sp-3)}
  .todo__go{padding-inline:var(--sp-3)}
  .attcard{padding:var(--sp-4)}
  .hero--fin{padding-inline:var(--sp-4)}
  .acct__pct{padding-inline:var(--sp-2)}
}

/* ============ 13. الكمبيوتر: تطبيق عريض بتنقل علوي وأعمدة ============ */
@media (min-width:64rem){
  body.is-participant{background:var(--bg)}
  body.is-participant.has-tabbar .toast{inset-block-end:var(--sp-8)}
  .papp{max-inline-size:var(--content-max);padding-inline:var(--page-x);border-inline:0;box-shadow:none}
  .papp .tabbar{display:none}
  /* الرأس بعرض الشاشة دون فيض: الخلفية تمتد عبر border-image لا بعناصر أعرض */
  .ptop{border-image:conic-gradient(var(--bg) 0 0) fill 0//0 100vmax}
  .ptop.is-stuck{box-shadow:none}
  .ptop::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;border-image:conic-gradient(var(--line) 0 0) fill 0//0 100vmax;opacity:0;transition:opacity var(--d2) var(--ease)}
  .ptop.is-stuck::after{opacity:1}
  .ptop .sim-banner{border-image:conic-gradient(var(--yellow-soft) 0 0) fill 0//0 100vmax}
  .ptop .app-h{padding-inline:0;min-block-size:calc(var(--header-h) + var(--sp-3))}
  .app-brand .wmark{--wm-h:34px}

  /* التنقل العلوي: أقراص بأيقونة وتسمية، والحالي بلون الهوية */
  .ptabs{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);box-shadow:var(--sh-1)}
  .ptab{display:inline-flex;align-items:center;gap:var(--sp-2);min-block-size:var(--tap);padding-inline:var(--sp-4);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink-2);text-decoration:none;transition:background-color var(--d2) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease)}
  .ptab .icon{inline-size:18px;block-size:18px}
  .ptab:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
  .ptab:active{transform:scale(.97)}
  .ptab[aria-current="page"]{--ic-a:var(--turq-soft);background:var(--brand-soft);color:var(--brand-ink)}
  .ptab:focus-visible{outline-offset:2px;border-radius:var(--r-full)}

  .pmain{padding-block:0 var(--sp-16)}
  .pview .pg-h{padding-block:var(--sp-6)}
  .pview .sec,.pview .hero,.pview .pg-h,.pview .acct__h,.pview .pad{padding-inline:0}

  /* الرئيسية: البطلة وبطاقة التقدم في الصف الأول، ثم عمودان */
  .pview--home,.pview.acct{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:clamp(var(--sp-8),4vw,var(--sp-16));align-items:start}
  .pview--home > .hero{grid-column:1;grid-row:1}
  .pview--home > .prog{grid-column:2;grid-row:1;align-self:center;margin:var(--sp-5) 0 var(--sp-6)} /* مسافة تفصلها عن الرأس وعن بطاقة الشهادة تحتها */
  .pview--home > .cnew{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;margin:0 0 var(--sp-6);padding:var(--sp-5) var(--sp-6)}
  .pview--home > .cnew .cnew__a{grid-column:3;margin:0}
  .pview--fin > .hero{grid-column:1/-1}
  .pview--fin > .sec--certs{grid-column:1}
  .pview--fin > .hcol--side{grid-column:2}
  .pview--home:not(.pview--fin) > .hcol--side{grid-column:2}
  .pview.acct > .acct__h,.pview.acct > .acct__donor{grid-column:1/-1}
  .hcol{display:block;min-inline-size:0}
  .pview--home .hero{padding-block:var(--sp-4) var(--sp-10)}
  .pview--home .hero__t{font-size:var(--fs-display)}
  .pview--home .rib{max-inline-size:none}
  .pring{--pr:132px;--pr-w:9}
  .pring--sm{--pr:64px;--pr-w:11}
  .prog{padding:var(--sp-6)}
  .hcol > .sec:first-child{border-block-start:1px solid var(--line)}
  .hcol--side > .sec{padding-block:var(--sp-6)}
  /* الختام: النص في البداية والحصيلة في النهاية، والرحلة بعرض البطاقة */
  .pview .hero--fin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--sp-12);align-items:end;margin:var(--sp-2) 0 var(--sp-6);padding:var(--sp-8) var(--sp-10) var(--sp-8)}
  .hero--fin .fin__top,.hero--fin .rib{grid-column:1/-1}
  .hero--fin .hero__t{font-size:var(--fs-display)}
  .hero--fin .fin__stats{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-block-start:0}
  .hero--fin .fin__stats > div{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-block-start:1px solid var(--solid-line)}
  .hero--fin .fin__stats > div:nth-child(even){border-inline-start:1px solid var(--solid-line);padding-inline-start:var(--sp-4)}
  .hero--fin .fin__stats > div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .pview--home .todos{grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}

  /* الجدارات: سلايدر بثلاث بطاقات ظاهرة وطرف الرابعة، بمحاذاة حافة المحتوى */
  .pview--comps .car__track{gap:var(--sp-4);padding:var(--sp-2) 0 var(--sp-5);scroll-padding-inline:0;scroll-snap-type:x proximity}
  .pview--comps .ccard{flex:0 0 calc((100% - 2 * var(--sp-4)) / 3.25);scroll-snap-align:start}
  @media (hover:hover){.pview--comps .ccard:hover{box-shadow:var(--sh-2)}}
  .pview--comps .ccard:focus-within{border-color:var(--brand-line)}
  .pview--comps > .sec{max-inline-size:var(--read-max)}

  /* اللقاءات: القادمة والسابقة متجاورتان */
  .pview--meet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));column-gap:clamp(var(--sp-8),4vw,var(--sp-16));align-items:start}
  .pview--meet > .pg-h,.pview--meet > .pad{grid-column:1/-1}
  .pview--meet .pg-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-2) var(--sp-6)}
  .pview--meet .pg-h > .h2{flex-basis:100%}
  .pview--meet .pg-h .lead{flex:1 1 24rem;margin:0}
  .pview--meet .pg-h__a{margin:0}

  /* حسابي */
  .pview.acct .acct__h{padding-block:var(--sp-6) var(--sp-8)}
  .acct__donor{margin-inline:0;padding-block:var(--sp-8) var(--sp-2)}
  .sec--next .meet{padding:var(--sp-5)}
}

/* ============ 14. تقليل الحركة ============ */
@media (prefers-reduced-motion:reduce){
  .burst{display:none}
  .car__track .ccard:not(.is-cur){transform:none}
}

/* حسابي: مفتاحا تذكيرات البريد وواتساب */
.acct__sws{display:grid}
.acct__sws > .sw-row + .sw-row{margin-block-start:var(--sp-3);padding-block-start:var(--sp-3);border-block-start:1px solid var(--line)}