/* proposal-v1 — دليل الخطوات الخمس في صفحة واحدة.
   يستخدم ألوان الصفحة الحالية فقط: --ink #1f0433 · --royal #3c1c54 · --gold #f9e683 · --neutral #f5f4f6
   · --silver #e8e4eb · --line #e7e1eb · #c8bad1 (حد الزر الثانوي) · #675570 (نص ثانوي في الدليل) · --lavender #ae72ff (حلقة التركيز). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* الشريط الثابت */
.flow-wrap{position:relative}
.flow-bar{position:sticky;top:0;z-index:15;background:#f5f4f6f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e8e4eb}
.flow-bar-inner{width:min(760px,calc(100% - 48px));margin:auto;padding:14px 0 0}
.flow-status{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:14px;color:#3c1c54;line-height:1.6}
.flow-status b{font-weight:600;color:#1f0433;font-size:15px}
.flow-applied{margin-inline-start:auto;color:#675570;font-size:13px}
.flow-steps{list-style:none;margin:0;padding:0 0 12px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.flow-steps li{min-width:0}
.flow-step{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;min-height:52px;border-radius:12px;border:1px solid transparent;background:transparent;color:#3c1c54;font:inherit;text-align:start;cursor:pointer}
.flow-step:hover{background:#fff;border-color:#e8e4eb}
.flow-step-mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid #c8bad1;background:#fff;color:#3c1c54;font-size:13px;font-weight:600;position:relative}
.flow-step-mark .icon{width:16px;height:16px}
.flow-step-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.flow-step-text b{font-size:13px;font-weight:600;color:#1f0433;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-step-text small{font-size:12px;color:#675570}
.flow-step.is-current{background:#fff;border-color:#c8bad1;box-shadow:0 4px 14px #1f04330d}
.flow-step.is-current .flow-step-mark{background:#f9e683;border-color:#3c1c54;color:#3c1c54}
.flow-step.is-current .flow-step-text small{color:#3c1c54;font-weight:600}
.flow-step.is-done .flow-step-mark{background:#3c1c54;border-color:#3c1c54;color:#fff}
.flow-step.is-deferred .flow-step-mark{border-style:dashed;border-color:#675570;color:#675570;background:#f5f4f6}
.flow-step.is-deferred .flow-step-text small{font-style:normal}
.flow-step:focus-visible{outline:3px solid var(--lavender);outline-offset:2px}
.flow-meter{height:3px;background:#e8e4eb;margin:0 0 -1px;border-radius:3px;overflow:hidden}
/* v4: الامتلاء بـtransform:scaleX (guide.js يضبط القيمة)؛ يبدأ من اليمين (RTL). الحركة نفسها في motion.css */
.flow-meter i{display:block;height:100%;width:100%;background:#3c1c54;transform:scaleX(0);transform-origin:100% 50%}

/* البطاقة */
body[data-page=guide] .guide-shell.flow-shell{max-width:808px;padding-top:26px}
.flow-card{scroll-margin-top:150px}
/* v4: حركات البطاقة (خروج/دخول/تتابع) نُقلت إلى motion.css تحت مفتاح واحد */
.flow-card h2:focus{outline:none}
.flow-card h2:focus-visible{outline:3px solid var(--lavender);outline-offset:4px;border-radius:6px}
.flow-deferred-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;border:1px dashed #675570;color:#3c1c54;font-size:13px;background:#f5f4f6}
.flow-deferred-badge .icon{width:15px;height:15px}
.task-kicker{margin-bottom:10px}

/* السابق / تخطّي داخل البطاقة */
.flow-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid #e8e4eb}
.flow-nav-button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:#3c1c54;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.flow-nav-button:hover:not(:disabled){background:#f5f4f6}
.flow-nav-button:disabled{color:#766a7e;opacity:.5;cursor:default}
.flow-nav-button .icon{width:17px;height:17px}
/* سهم «السابق» يشير لليمين (رجوع في RTL) */
.flow-nav-button[data-flow-prev] .icon{transform:scaleX(-1)}
.flow-nav-button:focus-visible{outline:3px solid var(--lavender);outline-offset:2px}

/* ما عندي الحين */
.flow-defer{margin-top:14px}
.flow-defer-button{background:#fff;border:1px dashed #c8bad1;color:#3c1c54;min-height:46px;font-size:14px;gap:8px}
.flow-defer-button:hover{border-color:#3c1c54;background:#f5f4f6}
.flow-defer-button .icon{width:17px;height:17px}

/* رسالة WhatsApp الجاهزة */
.flow-message{margin-top:22px;padding:18px;border-radius:16px;background:#f5f4f6;border:1px solid #e8e4eb}
.flow-message h3{margin:0;font-size:17px;font-weight:600;color:#1f0433;line-height:1.6}
.flow-message>p{margin:4px 0 12px;font-size:14px;color:#3c1c54;line-height:1.8}
.flow-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px;color:#3c1c54}
.flow-field input{font:inherit;font-size:16px;min-height:44px;padding:8px 12px;border:1px solid #c8bad1;border-radius:10px;background:#fff;color:#1f0433;max-width:320px}
.flow-field input:focus-visible{outline:3px solid var(--lavender);outline-offset:2px;border-color:#3c1c54}
.flow-bubble{white-space:pre-line;background:#fff;border:1px solid #e8e4eb;border-radius:14px 14px 4px 14px;padding:13px 15px;font-size:15px;line-height:1.9;color:#1f0433}
.flow-bubble:focus-visible{outline:3px solid var(--lavender);outline-offset:2px}
.flow-message-actions{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow-copy{min-height:46px;font-size:14px;gap:8px;background:#fff}
.flow-copy .icon{width:17px;height:17px}
.flow-copy.is-copied{background:#3c1c54;border-color:#3c1c54;color:#fff}
.flow-copy:focus-visible,.flow-defer-button:focus-visible{outline:3px solid var(--lavender);outline-offset:3px}

/* حالة الخطوات المتبقية */
.flow-pending h2{margin-bottom:6px!important}
.flow-pending>p{font-size:15px;line-height:1.9;color:#3c1c54;margin:0 0 18px}
.flow-pending-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow-pending-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e8e4eb;border-radius:14px;background:#fff}
.flow-pending-name{display:flex;flex-direction:column;flex:1;min-width:0}
.flow-pending-name b{font-size:15px;font-weight:600;color:#1f0433}
.flow-pending-name small{font-size:13px;color:#675570;line-height:1.6}
.flow-pending-state{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#3c1c54;padding:4px 9px;border-radius:99px;background:#f5f4f6;border:1px solid #e8e4eb}
.flow-pending-state.is-deferred{border:1px dashed #675570}
.flow-pending-state .icon{width:14px;height:14px}
.flow-pending-list .button{min-height:44px;font-size:13px;padding:8px 14px}

/* نافذة الإكمال */
html.flow-locked,html.flow-locked body{overflow:hidden}
.flow-dialog{width:min(480px,calc(100% - 32px));border:0;border-radius:22px;padding:30px 28px 24px;background:#fff;color:#1f0433;text-align:center;box-shadow:0 24px 60px #1f043340}
.flow-dialog::backdrop{background:#1f043366;backdrop-filter:blur(2px)}
.flow-dialog-mark{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:#f9e683;color:#3c1c54}
.flow-dialog-mark .icon{width:28px;height:28px}
.flow-dialog-lead{margin:0;font-size:16px;line-height:1.9;color:#3c1c54}
.flow-dialog-title{display:block;margin-bottom:8px;font-size:24px;line-height:1.5;font-weight:600;color:#1f0433}
.flow-dialog-line2{margin:10px 0 0;font-size:15px;line-height:1.9;color:#3c1c54}
.flow-dialog-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.flow-dialog-actions .button{min-height:48px;min-width:140px;font-size:15px}
.flow-dialog .button:focus-visible{outline:3px solid var(--lavender);outline-offset:3px}
/* v2: زر ✕ للإغلاق (48px حسب الـplaybook للنوافذ) */
.flow-dialog-close{position:absolute;top:8px;inset-inline-end:8px;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:#3c1c54;cursor:pointer}
.flow-dialog-close:hover{background:#f5f4f6}
.flow-dialog-close .icon{width:20px;height:20px}
.flow-dialog-close:focus-visible{outline:3px solid var(--lavender);outline-offset:2px}

/* شريط الجوال الثابت (يخفيه guide-simple.css بـ!important، نرجعه بمحدِّد أعلى على الجوال فقط) */
body[data-page=guide] .guide-mobile-actions.flow-mobile-bar{display:none!important}
.toast{z-index:70}

@media(max-width:760px){
  .flow-bar-inner{width:100%;padding:10px 0 0}
  .flow-status{padding:0 16px;margin-bottom:8px;font-size:13px;flex-wrap:wrap;row-gap:0}
  .flow-status b{font-size:14px}
  .flow-applied{display:none}
  .flow-steps{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .flow-steps::-webkit-scrollbar{display:none}
  .flow-steps li{flex:0 0 auto;scroll-snap-align:center}
  .flow-step{min-height:48px;padding:6px 10px 6px 12px;width:auto}
  .flow-step-mark{width:28px;height:28px;font-size:12px}
  .flow-step-text b{font-size:13px}
  body[data-page=guide] .guide-shell.flow-shell{padding-top:16px}
  .flow-card{scroll-margin-top:118px}
  body[data-page=guide] .task-panel .flow-nav{display:none}
  /* v4 (قرار أحمد 1): على الجوال يُخفى زر «تم التطبيق، التالي» المكرر داخل البطاقة ويبقى زر الشريط السفلي فقط.
     الزر يبقى في DOM؛ visibility:hidden (لا display:none) حتى يحتفظ بخانته فيبقى «افتح لوحة زد» بنفس موضعه ومقاسه حرفيًا
     (عند 320px كان الزر المكرر يلتف لسطرين ويحدد ارتفاع الصف). المخفي بـvisibility لا يُرى ولا يُضغط ولا يأخذ تركيزًا ولا يقرؤه قارئ الشاشة.
     الديسكتوب بلا أي تغيير (guide-simple.css يظهره). */
  body[data-page=guide] .flow-card .flow-panel .task-primary-actions .desktop-complete{visibility:hidden!important}
  /* v3: المساحة السفلية = ارتفاع الشريط الفعلي (يقيسه guide.js) + هامش، بدل 76px الثابتة اللي كانت أقل من الشريط عند 320px */
  body[data-page=guide][data-flow-view=task]{padding-bottom:calc(var(--flow-bottom-space,76px) + 16px)}
  html:has(body[data-page=guide][data-flow-view=task]){scroll-padding-top:calc(var(--flow-top-space,0px) + 12px);scroll-padding-bottom:calc(var(--flow-bottom-space,0px) + 12px)}
  body[data-page=guide] .guide-mobile-actions.flow-mobile-bar:not([hidden]){display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:10px 10px max(10px,env(safe-area-inset-bottom))}
  .flow-mobile-bar .button{min-height:48px;font-size:14px;width:100%;padding:8px 12px}
  .flow-mobile-bar .flow-nav-button{min-height:48px;padding:6px 8px;font-size:13px}
  .flow-message{padding:15px}
  .flow-field input{max-width:none}
  .flow-message-actions{display:grid;grid-template-columns:1fr}
  .flow-message-actions .button{width:100%;justify-content:center;padding-inline:8px}
  .flow-defer .flow-defer-button{width:100%;justify-content:center}
  .flow-pending-list li{flex-wrap:wrap}
  .flow-pending-list .button{width:100%}
  /* v3: ورقة سفلية بعرض الشاشة كاملًا كما في قاعدة الأصل (dialog{inset:auto 0 0;width:100%})، بدل 358px ملصوقة يمين */
  .flow-dialog{width:100%;max-width:none;margin:0;inset:auto 0 0;border-radius:22px 22px 0 0;padding:26px 20px max(20px,env(safe-area-inset-bottom))}
  .flow-dialog-title{font-size:21px}
  .flow-dialog-actions .button{flex:1 1 100%}
  body[data-page=guide] .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* v2: أثناء الكتابة ينزل الشريط ويختفي (بدون تغيير التخطيط)، ويرجع عند فقدان التركيز */
  body[data-page=guide].flow-typing .guide-mobile-actions.flow-mobile-bar{transform:translateY(calc(100% + 12px));visibility:hidden;pointer-events:none}
  body[data-page=guide].flow-typing .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
}
/* v3: الشاشات القصيرة (مثل 320×568): ضغط مسافات الدليل الجديدة فقط، بلا تغيير أي نص أو لون أو حجم خط */
@media(max-width:760px) and (max-height:700px){
  .flow-bar-inner{padding-top:6px}
  .flow-status{margin-bottom:4px}
  .flow-steps{padding-bottom:6px}
  .flow-step{min-height:44px;padding-block:4px}
  body[data-page=guide] .guide-shell.flow-shell{padding-top:10px}
  body[data-page=guide] .flow-card .flow-panel.task-panel{padding-top:16px}
  body[data-page=guide] .flow-card .task-instructions{margin-block:14px;gap:10px}
  .flow-defer{margin-top:8px}
  body[data-page=guide] .guide-mobile-actions.flow-mobile-bar:not([hidden]){padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .flow-mobile-bar .button{min-height:46px}
  .flow-mobile-bar .flow-nav-button{min-height:46px}
}
/* v3: أقصر من 600px (مثل 320×568): ضغط إضافي للمسافات فقط */
@media(max-width:760px) and (max-height:600px){
  body[data-page=guide] .guide-shell.flow-shell{padding-top:6px}
  body[data-page=guide] .flow-card .flow-panel.task-panel{padding-top:12px}
  body[data-page=guide] .flow-card .task-instructions{margin-block:10px}
}
/* v3: عند 320px يلتف «تم التطبيق، التالي» لسطرين فيصير الشريط 84px؛ تقليل الحشوة الأفقية فقط يبقيه سطرًا واحدًا */
@media(max-width:360px){
  body[data-page=guide] .guide-mobile-actions.flow-mobile-bar:not([hidden]){gap:4px;padding-inline:6px}
  .flow-mobile-bar .button{padding-inline:8px;gap:6px}
  .flow-mobile-bar .flow-nav-button{padding-inline:6px;gap:5px}
}
@media(prefers-reduced-motion:reduce){
  /* v4: كل الحركات في motion.css داخل (prefers-reduced-motion:no-preference)، فهنا يكفي إيقاف التمرير الناعم للشريط */
  .flow-steps{scroll-behavior:auto}
}