/* «حلّل بياناتي» — the 4-step bar + the guide: flashing letter, ONE pointing hand, glowing «next» button
   (owner 2026-10-24, approved mockup exports/analyse-grades-mockup/steps). */
.stepper.flow li{gap:10px;padding:10px 12px;font-size:13.5px}
.stepper.flow li b.n{width:32px;height:32px;font-size:16px}
.stepper.flow li small{display:block;font-weight:500;font-size:11.5px;color:var(--ink3)}
.stepper.flow li.now{background:var(--accent-soft);color:#7A3E00}
.stepper.flow li.now b.n{background:var(--accent);color:#fff;animation:gflash 1.1s ease-in-out infinite}
.stepper.flow li.done{color:#166534}
.gbadge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:15px;flex:0 0 28px;vertical-align:middle;margin-inline-end:6px}
[data-guide].guide-now .gbadge{background:var(--accent);animation:gflash 1.1s ease-in-out infinite}
[data-guide].guide-done .gbadge{background:var(--ok)}
.gdo{display:flex;align-items:center;gap:4px;margin:0 0 8px;font-size:15px;font-weight:800;color:var(--ink)}
.gdo small{display:block;font-weight:500;color:var(--ink3);font-size:12px}
[data-guide]{position:relative}
[data-guide].guide-now{outline:2px solid #F9C27A;outline-offset:4px;border-radius:14px}
.guide-hand{position:absolute;font-size:30px;line-height:1;pointer-events:none;z-index:20;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  inset-inline-start:-44px;top:50%;margin-top:-16px;animation:gpoke 1.1s ease-in-out infinite}
html[dir=ltr] .guide-hand{animation-name:gpoke-ltr}
.guide-go{position:relative;animation:gglow 1.2s ease-in-out infinite}
.guide-go .garw{display:inline-block;animation:garw .9s ease-in-out infinite}
html[dir=ltr] .guide-go .garw{animation-name:garw-ltr}
@keyframes gflash{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(247,148,29,.55)}50%{transform:scale(1.12);box-shadow:0 0 0 9px rgba(247,148,29,0)}}
@keyframes gpoke{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes gpoke-ltr{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes gpoke-down{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes gglow{0%,100%{box-shadow:0 0 0 0 rgba(247,148,29,.6)}50%{box-shadow:0 0 0 10px rgba(247,148,29,0)}}
@keyframes garw{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@keyframes garw-ltr{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
/* a wide or tall item (a full-width card) or a phone: the hand sits above the item's start, next to its letter, pointing down */
.guide-hand.down{inset-inline-start:34px;top:-32px;margin-top:0;animation-name:gpoke-down}
@media (max-width:760px){
  .stepper.flow{flex-wrap:wrap}
  .stepper.flow li{flex:1 1 calc(50% - 6px)}
}
@media (prefers-reduced-motion:reduce){.stepper.flow li.now b.n,[data-guide].guide-now .gbadge,.guide-hand,.guide-go,.guide-go .garw{animation:none}}
/* «كيف أستعمل الأداة؟» (owner 2026-10-25, approved mockup exports/analyse-grades-mockup/tutorial): header pill on every
   screen, the strip on the entry page, the video window (analyse._help).
   «.hlp», never «.hm»: .hm is the components heatmap table on the results page (2026-10-25 a full-screen overlay hid the report). */
.toph{display:inline-flex;align-items:center;gap:4px;border:1.5px solid #F9C27A;background:#FFF7EC;color:#7A3E00;border-radius:20px;padding:6px 12px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.help{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:4px 0 18px;padding:12px 16px;border-radius:14px;background:#fff;border:1.5px solid #F9C27A;box-shadow:0 2px 0 rgba(247,148,29,.15)}
.help .pl{flex:0 0 46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:19px;padding-inline-start:3px}
.help .tx{flex:1 1 220px;min-width:0}.help .tx b{display:block;font-size:16px;color:var(--brand)}.help .tx small{display:block;color:var(--ink3);font-size:13px}
.help .bt,.hlp .bt{display:flex;gap:8px;flex-wrap:wrap}
.hlp{position:fixed;inset:0;background:rgba(8,44,55,.62);display:flex;align-items:center;justify-content:center;z-index:99;padding:16px}
.hlp[hidden]{display:none}
.hlp .bx{background:#fff;border-radius:18px;max-width:880px;width:100%;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.4);max-height:calc(100vh - 32px);overflow:auto}
.hlp .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.hlp .hd b{font-size:18px;color:var(--brand)}
.hlp .x{border:0;background:#EEF3F4;border-radius:50%;width:34px;height:34px;font-size:18px;cursor:pointer;flex:0 0 34px}
.hlp .vd{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--brand)}
.hlp video{width:100%;height:100%;display:block;background:#000}
.hlp .chs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.hlp .chs button{display:inline-flex;gap:6px;align-items:center;border:1px solid #D5E0E3;background:#fff;border-radius:20px;padding:5px 12px;font:inherit;font-size:13px;color:var(--brand);cursor:pointer}
.hlp .chs button i{font-style:normal;color:#7E9096;direction:ltr}.hlp .chs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}.hlp .chs button.on i{color:#cfe}
.hlp .ft{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid #E5ECEE;padding-top:12px}
.hlp .ft small{color:var(--ink3);font-size:12.5px}
@media (max-width:600px){.help .bt{width:100%}.help .bt .btn{flex:1 1 140px;justify-content:center;text-align:center}.toph{padding:5px 9px}}