/* =====================================================================
   الدليل التفاعلي (guide.js): الجولة المضيئة، وقائمة «ابدأ هنا».
   الجولة تُرسم بإحداثيات فيزيائية (left/top + translate) لأنها تأتي من getBoundingClientRect،
   لا من اتجاه النص؛ لذلك تُستعمل هنا left/top/right/bottom عمدًا. كل ما عداها خصائص منطقية.
   ===================================================================== */
:root{--tour-scrim:rgb(12 26 33 / .62);--tour-ring:var(--turq);--onb-check:var(--ink-solid)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tour-scrim:rgb(1 6 9 / .74)}}
:root[data-theme="dark"]{--tour-scrim:rgb(1 6 9 / .74)}

/* ============ الجولة ============ */
.tour{position:fixed;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden;opacity:0;transition:opacity var(--d2) var(--ease)}
.tour::backdrop{background:transparent}
.tour.is-on{opacity:1}
.tour.is-closing{opacity:0;transition-duration:var(--d2)}
.tour:focus,.tour__card:focus{outline:none}

/* الفتحة: ظل ممتد يعتم كل ما حولها، وحلقة رفيعة بلون الهوية */
.tour__hole{--hx:50vw;--hy:50vh;--hw:0px;--hh:0px;--hr:16px;position:fixed;left:0;top:0;inline-size:var(--hw);block-size:var(--hh);border-radius:var(--hr);transform:translate(var(--hx),var(--hy));box-shadow:0 0 0 2px var(--tour-ring),0 0 0 200vmax var(--tour-scrim);pointer-events:none;transition:transform var(--d3) var(--ease-out),inline-size var(--d3) var(--ease-out),block-size var(--d3) var(--ease-out),border-radius var(--d3) var(--ease-out)}
.tour__hole::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 2px var(--tour-ring);opacity:0;pointer-events:none}
.tour__hole.is-pulse::after{animation:tourPulse 900ms var(--ease-out) 260ms 1 both}
@keyframes tourPulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}

/* البطاقة */
.tour__card{--cx:50vw;--cy:50vh;position:fixed;left:0;top:0;inline-size:min(23.5rem,calc(100vw - 24px));transform:translate(var(--cx),var(--cy));padding:var(--sp-5) var(--sp-5) var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-3);transition:transform var(--d3) var(--ease-out),opacity var(--d2) var(--ease)}
.tour__card::before{content:"";position:absolute;inset-inline:var(--sp-5);inset-block-start:-1px;block-size:3px;border-radius:0 0 var(--r-full) var(--r-full);background:linear-gradient(to left,var(--teal),var(--turq),var(--green))} /* من اليمين (بداية السطر) إلى اليسار */
.tour__card[data-place="none"]{opacity:0;transition:none}
.tour.is-on .tour__card:not([data-place="none"]){animation:tourCardIn var(--d-spring) var(--ease-spring) both}
@keyframes tourCardIn{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
.tour__card.is-nudge{animation:tourNudge 380ms var(--ease-out) 1}
@keyframes tourNudge{40%{scale:1.025}100%{scale:1}}
.tour__card.is-seeking .tour__in{opacity:.5;pointer-events:none}

/* على الجوال: مثبتة أسفل الشاشة (أو أعلاها إن كان العنصر في الأسفل) */
.tour__card[data-place^="dock"]{left:12px;right:12px;inline-size:auto;transform:none;transition:opacity var(--d2) var(--ease)}
.tour__card[data-place="dock-bottom"]{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.tour__card[data-place="dock-top"]{top:calc(12px + env(safe-area-inset-top,0px))}
.tour.is-on .tour__card[data-place="dock-bottom"]{animation:tourDockUp var(--d-sheet) var(--ease-sheet) both}
.tour.is-on .tour__card[data-place="dock-top"]{animation:tourDockDown var(--d-sheet) var(--ease-sheet) both}
@keyframes tourDockUp{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes tourDockDown{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}

/* السهم: مربع مُدار على حافة البطاقة المقابلة للعنصر (إحداثيات فيزيائية) */
.tour__arrow{display:none;position:absolute;inline-size:14px;block-size:14px;background:var(--surface);border:1px solid var(--line);transform:rotate(45deg)}
.tour__card[data-place="below"] .tour__arrow{display:block;top:-8px;left:calc(var(--ax,50%) - 7px);border-right:0;border-bottom:0}
.tour__card[data-place="above"] .tour__arrow{display:block;bottom:-8px;left:calc(var(--ax,50%) - 7px);border-left:0;border-top:0}
.tour__card[data-place="left"] .tour__arrow{display:block;right:-8px;top:calc(var(--ay,50%) - 7px);border-left:0;border-bottom:0}
.tour__card[data-place="right"] .tour__arrow{display:block;left:-8px;top:calc(var(--ay,50%) - 7px);border-right:0;border-top:0}

.tour__in{position:relative;transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease)}
.tour__in.is-out{opacity:0;transform:translateY(4px)}
.tour__in.is-in{animation:tourIn var(--d2) var(--ease-out) both}
@keyframes tourIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tour__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-block-end:var(--sp-3)}
.tour__n{display:inline-flex;align-items:baseline;gap:4px;padding:1px var(--sp-3);border-radius:var(--r-full);background:var(--brand-soft);color:var(--brand-ink);font-size:var(--fs-xs);font-weight:var(--fw-m);line-height:1.9}
.tour__n b{font-weight:var(--fw-sb)}
.tour__skip{display:inline-flex;align-items:center;min-block-size:36px;margin-block:-6px;margin-inline-end:calc(-1 * var(--sp-2));padding-inline:var(--sp-2);border:0;border-radius:var(--r-full);background:none;color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-m);transition:color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.tour__skip:hover{color:var(--ink);background:var(--surface-2)}
.tour__fl{display:flex;align-items:center;gap:var(--sp-3);margin-block-end:var(--sp-2);color:var(--green-ink);font-size:var(--fs-xs);font-weight:var(--fw-sb)}
.tour__t{font-size:var(--fs-lg);line-height:var(--lh-head);color:var(--ink)}
.tour__b{margin-block-start:var(--sp-1);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2)}
.tour__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-block-start:var(--sp-4)}
.tour__dots{display:flex;align-items:center;gap:5px;min-inline-size:0;flex-wrap:wrap}
.tour__dots i{display:block;inline-size:6px;block-size:6px;border-radius:var(--r-full);background:var(--surface-3);transition:inline-size var(--d2) var(--ease-out),background-color var(--d2) var(--ease)}
.tour__dots i.is-past{background:var(--brand-line)}
.tour__dots i.is-on{inline-size:18px;background:var(--brand)}
.tour__nav{display:flex;align-items:center;gap:var(--sp-1);flex-shrink:0}
.tour__nav .btn{min-block-size:40px;padding-inline:var(--sp-4)}
.tour__nav .btn--ghost{padding-inline:var(--sp-3)}
@media (max-width:22.5rem){ /* 360 */
  .tour__card{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .tour__nav .btn{padding-inline:var(--sp-3)}
  .tour__nav .btn--ghost span{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ============ قائمة «ابدأ هنا» ============ */
.onb{position:relative;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);overflow:hidden}
.onb::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;background:linear-gradient(to left,var(--teal),var(--turq),var(--green))} /* من بداية السطر (اليمين) */
.onb__h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4)}
.onb__mk{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:var(--r-lg);background:var(--tint);flex-shrink:0}
.onb__ring{position:relative;display:grid;place-items:center;inline-size:46px;block-size:46px}
.onb__ring svg{position:absolute;inset:0;inline-size:100%;block-size:100%;transform:rotate(-90deg);overflow:visible}
.onb__ring circle{fill:none;stroke-width:3.4}
.onb__rt{stroke:var(--surface-3)}
.onb__rv{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p,0) * 100);transition:stroke-dashoffset 900ms var(--ease-out)}
.onb__ring b{position:relative;font-size:var(--fs-sm);font-weight:var(--fw-sb);line-height:1;color:var(--ink)}
.onb__ring small{font-size:.72em;font-weight:var(--fw-m);color:var(--ink-3)}
.onb__k{font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--brand-ink)}
.onb__t{margin-block-start:var(--sp-0);font-size:var(--fs-md);line-height:1.45}
.onb__s{margin-block-start:var(--sp-1);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
.onb__s b{font-weight:var(--fw-sb);color:var(--ink)}
.onb__x{align-self:start;margin-block-start:calc(-1 * var(--sp-2));margin-inline-end:calc(-1 * var(--sp-2))}
.onb__list{display:grid;gap:var(--sp-1);margin:var(--sp-4) 0 0;padding:0;list-style:none}
.onb__i{display:flex;align-items:center;gap:var(--sp-3);min-block-size:var(--tap);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);font-weight:var(--fw-m);color:var(--ink);transition:background-color var(--d2) var(--ease),color var(--d2) var(--ease)}
.onb__i.is-done{background:transparent;color:var(--ink-3);font-weight:var(--fw-r)}
.onb__l{flex:1;min-inline-size:0;line-height:1.5}
.onb__c{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;border:1.5px solid var(--line-strong);flex-shrink:0;transition:background-color var(--d2) var(--ease),border-color var(--d2) var(--ease)}
.onb__c svg{inline-size:14px;block-size:14px;fill:none;stroke:var(--onb-check);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-done .onb__c{background:var(--green);border-color:var(--green)}
.is-done .onb__c svg{stroke-dashoffset:0}
.is-fresh .onb__c{animation:pop var(--d-spring) var(--ease-spring) 120ms both}
.is-fresh .onb__c svg{stroke-dashoffset:1;animation:draw 420ms var(--ease-out) 360ms both}
.is-fresh .onb__l{animation:onbFade 600ms var(--ease) 200ms both}
@keyframes onbFade{from{color:var(--ink)}}
.onb__go{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;min-block-size:36px;margin-inline-end:calc(-1 * var(--sp-2));padding-inline:var(--sp-3) var(--sp-2);border:0;border-radius:var(--r-full);background:none;color:var(--brand-ink);font-size:var(--fs-xs);font-weight:var(--fw-sb);white-space:nowrap;text-decoration:none;transition:background-color var(--d1) var(--ease)}
.onb__go .icon{inline-size:16px;block-size:16px}
.onb__go:hover{background:var(--brand-soft);text-decoration:none}
.onb--done .onb__mk{background:var(--brand-soft)}
.onb--done .onb__t{color:var(--ink)}
.onb--celebrate .onb__mk{animation:pop var(--d-spring) var(--ease-spring) both}
.onb__fin{display:flex;justify-content:flex-end;margin-block-start:var(--sp-3)}
.onb.is-out{animation:onbOut 300ms var(--ease) both;pointer-events:none}
@keyframes onbOut{to{opacity:0;transform:translateY(-6px) scale(.985)}}
.onb.is-flash{animation:onbFlash 1400ms var(--ease-out) 1}
@keyframes onbFlash{0%,30%{box-shadow:var(--sh-2),0 0 0 4px var(--brand-line)}100%{box-shadow:var(--sh-2),0 0 0 4px transparent}}
@media (min-width:40rem){
  .onb__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-2)}
}
@media (min-width:64rem){
  .pview--home > .onb{grid-column:1/-1;margin:0 0 var(--sp-6);padding:var(--sp-5) var(--sp-6)}
  .pview--home > .onb .onb__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* في نظرة الطاقم: بعرض المحتوى مثل اللوحات */
.page [data-onb-slot] .onb{margin:var(--sp-5) 0 0}
@media (min-width:90rem){.page [data-onb-slot] .onb__list{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  .tour,.tour__hole,.tour__card,.tour__in,.onb__rv{transition:none}
  .tour.is-on .tour__card,.tour__card.is-nudge,.tour__in.is-in,.onb.is-flash,.onb.is-out{animation:none}
}

/* مداخل الدليل في حسابي وقائمة الحساب */
.acct__guide{margin-block-start:var(--sp-3)}
.menu__i .menu__n{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--ink-3)}