/* «كيف يمشي الإكسبرس إنتري»: the interactive explainer (Claude concept, ported 14 Oct 2026). Scoped under .zx; platform tokens from zm.css. */
.zx{--ease:cubic-bezier(.22,.8,.24,1);--move:820ms}
.zx-intro{padding-block:8px 24px}
.zx h1 span{color:var(--primary)}
.zx-lede{color:var(--muted);max-width:60ch;margin-block-start:10px}
.zx-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-block-start:20px}
.zx .zm-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* walk: narrative column + sticky stage */
.zx-walk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px)}
.zx-steps{grid-column:1;grid-row:1;position:relative}
.zx-stage-wrap{grid-column:2;grid-row:1}
.zx-nojs .zx-stage-wrap,.zx-nojs .zx-dots,.zx-nojs .zx-rounds{display:none}
.zx-nojs .zx-walk{grid-template-columns:1fr}

.zx-stage{position:sticky;top:calc(var(--hdr) + 12px);height:min(640px,calc(100vh - var(--hdr) - 40px));min-height:440px;border-radius:26px;background:linear-gradient(180deg,#fff,var(--paper));border:1px solid var(--line);overflow:hidden;isolation:isolate}
.zx-stage-title{position:absolute;top:18px;inset-inline-start:22px;margin:0;font-weight:700;font-size:15px;color:var(--primary);z-index:5;transition:opacity .3s}
.zx-gates{position:absolute;inset:0;pointer-events:none}
.zx-gate{position:absolute;top:0;left:0;width:120px;display:grid;justify-items:center;gap:2px;text-align:center;transition:transform var(--move) var(--ease),opacity var(--move) var(--ease)}
.zx-arch{width:84px;height:104px;border:2px solid var(--ink);border-bottom:0;border-radius:42px 42px 0 0;background:linear-gradient(180deg,var(--mist),transparent);margin-bottom:6px;transition:border-color .4s,background-color .4s}
.zx-gate b{font-size:16px}
.zx-gate small{font-size:13px;color:var(--muted)}
.zx-stage:not([data-step="0"]) .zx-gate small{opacity:0}
.zx-gate.zx-lit .zx-arch{border-color:var(--primary);background:linear-gradient(180deg,#f4e7ea,transparent)}

.zx-field{position:absolute;inset:0}
.zx-card{position:absolute;top:0;left:0;width:var(--cw,72px);height:var(--ch,46px);border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 22px -18px rgba(23,59,75,.7);transition:transform var(--move) var(--ease),opacity 520ms var(--ease),background-color .4s,border-color .4s,box-shadow .4s;transition-delay:var(--d,0ms);will-change:transform;padding:5px 7px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.zx-card::before,.zx-card::after{content:"";display:block;height:3px;border-radius:2px;background:var(--line)}
.zx-card::before{width:70%}
.zx-card::after{width:45%}
.zx-card i{font-style:normal;font-size:10px;line-height:1;color:var(--muted);align-self:flex-end;direction:ltr}
.zx-card.zx-cat{box-shadow:inset -4px 0 0 var(--ink),0 12px 22px -18px rgba(23,59,75,.7)}
.zx-card.zx-nom b{position:absolute;top:2px;left:5px;font-size:15px;line-height:1;color:var(--primary)}
.zx-card.zx-you{background:var(--primary);border-color:var(--primary);color:#fff;z-index:4}
.zx-card.zx-you::before,.zx-card.zx-you::after{background:rgba(255,255,255,.45)}
.zx-card.zx-you i{display:none}
.zx-card.zx-you em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px}
.zx-card.zx-in{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary),0 16px 26px -18px rgba(123,53,70,.8)}
.zx-card.zx-you.zx-in{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--primary),0 16px 26px -18px rgba(123,53,70,.8)}
.zx-card.zx-out{opacity:.28}

.zx-cut{position:absolute;left:6%;right:6%;top:0;height:0;border-top:2px dashed var(--primary);transform-origin:right;opacity:0;transition:transform var(--move) var(--ease),opacity .4s}
.zx-cut span{position:absolute;inset-inline-end:0;top:-26px;font-size:13px;font-weight:700;color:var(--primary);background:#fff;padding:0 6px}
.zx-pool{position:absolute;bottom:14px;inset-inline:22px;margin:0;font-size:14px;color:var(--muted);text-align:center;transition:opacity .3s}

.zx-apply{position:absolute;inset-inline-start:8%;top:50%;transform:translateY(-50%) translateX(28px);opacity:0;transition:opacity .5s var(--ease),transform var(--move) var(--ease);pointer-events:none;width:min(46%,280px)}
.zx-apply ol{list-style:none;margin:0;padding:0;position:relative}
.zx-apply ol::before{content:"";position:absolute;inset-inline-start:9px;top:12px;bottom:12px;width:2px;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:transform 900ms var(--ease) 200ms}
.zx-apply li{position:relative;padding-inline-start:32px;padding-block:7px;display:grid;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(260ms + var(--k)*140ms)}
.zx-apply li::before{content:"";position:absolute;inset-inline-start:2px;top:14px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary)}
.zx-apply li:first-child::before{background:var(--primary)}
.zx-apply b{font-size:16px}
.zx-apply span{font-size:14px;color:var(--muted)}
.zx-stage[data-step="4"] .zx-apply{opacity:1;transform:translateY(-50%)}
.zx-stage[data-step="4"] .zx-apply ol::before{transform:scaleY(1)}
.zx-stage[data-step="4"] .zx-apply li{opacity:1;transform:none}

/* narrative column */
.zx-dots{position:sticky;top:calc(var(--hdr) + 8px);z-index:6;display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:rgba(255,254,250,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;margin-block-end:32px;width:max-content;max-width:100%}
.zx-dots button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted)}
.zx-dots button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:12px}
.zx-dots button[aria-current="step"]{background:var(--primary);color:#fff}
.zx-dots button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.zx-step{scroll-margin-top:calc(var(--hdr) + 24px);min-height:78vh;padding-block:6vh 10vh;opacity:.38;transition:opacity .5s var(--ease)}
.zx-step.zx-active,.zx-nojs .zx-step{opacity:1}
.zx-step:last-of-type{min-height:96vh}
.zx-step-n{margin:0;color:var(--primary);font-weight:700;font-size:15px}
.zx-step h2{margin-block:4px 14px;font-size:clamp(22px,2.6vw,34px);line-height:1.3}
.zx-step h2:focus{outline:none}
.zx-step p{margin-block:0 14px;max-width:56ch}
.zx-note{font-size:15px;color:var(--muted)}
.zx-progs{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.zx-progs li{background:var(--mist);border-radius:14px;padding:10px 14px}
.zx-progs b{margin-inline-end:6px;color:var(--primary)}
.zx-srcline{margin-block-start:4px}
.zx-srcline a{font-weight:700;color:var(--primary);text-underline-offset:5px}
.zx-rounds{display:flex;flex-wrap:wrap;gap:8px;margin-block:6px 16px}
.zx-rounds button{font:inherit;font-weight:700;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.zx-rounds button[aria-checked="true"]{background:var(--ink);color:#fff}
.zx-round-text{font-weight:700}

/* reading plan */
.zx-next{margin-block-start:clamp(24px,5vw,64px);padding-block-start:clamp(24px,4vw,48px);border-block-start:1px solid var(--line)}
.zx-plan{list-style:none;margin-block:22px;padding:0;border-block-start:1px solid var(--line)}
.zx-plan li{border-block-end:1px solid var(--line)}
.zx-plan label{display:flex;align-items:center;gap:13px;min-height:56px;cursor:pointer;font-weight:700}
.zx-plan input{width:22px;height:22px;accent-color:var(--primary);flex:none}
.zx-share{display:flex;flex-wrap:wrap;align-items:center;gap:11px}
.zx-copy-msg{color:var(--muted);font-size:15px}

/* phones and narrow tablets: the stage pins under the site header, the narrative scrolls beneath and drives it */
@media (max-width:980px){
  .zx-walk{grid-template-columns:1fr;gap:0}
  .zx-stage-wrap{grid-column:1;grid-row:1;position:sticky;top:var(--hdr);z-index:7;background:var(--paper);padding:8px 0;border-block-end:1px solid var(--line)}
  .zx-stage{position:relative;top:auto;height:42vh;min-height:300px;max-height:420px;border-radius:18px}
  .zx-steps{grid-row:2}
  .zx-dots{position:relative;top:auto;margin-block:16px 0;border-radius:18px;width:auto}
  .zx-step{min-height:64vh;padding-block:4vh 8vh;scroll-margin-top:calc(var(--hdr) + min(42vh,420px) + 40px)}
  .zx-steps :is(a,button,input,[tabindex]){scroll-margin-top:calc(var(--hdr) + min(42vh,420px) + 40px)} /* keyboard focus must land below the pinned stage (Codex-side review, 14 Oct) */
  .zx-gate{width:92px}
  .zx-arch{width:60px;height:74px;border-radius:30px 30px 0 0}
  .zx-gate small{font-size:12px}
  .zx-apply{width:min(56%,240px);inset-inline-start:5%}
  .zx-apply span{display:none}
}
/* ---- additions 14 Oct 2026 (concept copy): gate icons, tappable gates + bubble, «ترشيح إقليمي» tag, related questions, understanding check, swipe, instant first paint ---- */
.zx-gates{pointer-events:none}
.zx-gate{pointer-events:auto;cursor:pointer}
.zx-arch{display:grid;place-items:center}
.zx-ico{width:68%;height:auto;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:10px;transition:stroke .4s,transform .5s var(--ease)}
.zx-ico *{stroke-dasharray:140;stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease)}
.zx-gate.zx-lit .zx-ico{stroke:var(--primary);transform:translateY(-3px)}
.zx-gate.zx-sel .zx-arch{border-color:var(--primary);box-shadow:0 0 0 4px #f4e7ea}
.zx-gate.zx-sel .zx-ico *{animation:zx-draw 900ms var(--ease) both}
@keyframes zx-draw{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
.zx-gate:hover .zx-arch{border-color:var(--primary)}
.zx-gate-info{position:absolute;left:50%;top:0;width:min(84%,380px);transform:translate(-50%,8px);opacity:0;pointer-events:none;background:#fff;border:1px solid var(--primary);border-radius:14px;padding:10px 14px;text-align:center;box-shadow:0 18px 30px -24px rgba(123,53,70,.7);transition:opacity .35s var(--ease),transform .45s var(--ease);z-index:6}
.zx-gate-info b{display:block;color:var(--primary);font-size:15px}
.zx-gate-info span{display:block;font-size:14px;color:var(--ink);line-height:1.6}
.zx-stage.zx-has-info .zx-gate-info{opacity:1;transform:translate(-50%,0)}
.zx-nom-tag{position:absolute;top:0;left:0;z-index:7;background:var(--primary);color:#fff;font-size:11px;line-height:1.35;font-weight:700;padding:1px 8px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .4s var(--ease);pointer-events:none;white-space:nowrap}
.zx-nom-tag::after{content:"";position:absolute;top:-5px;inset-inline-end:14px;border:5px solid transparent;border-bottom-color:var(--primary);border-top:0}
.zx-stage[data-step="2"] .zx-nom-tag{opacity:1;transform:none;transition-delay:.75s}
.zx-swipe-hint{display:none}
.zx-stage.zx-instant,.zx-stage.zx-instant *{transition:none!important;animation:none!important}
.zx-tap-hint{font-weight:700;margin-block-end:8px!important}
.zx-progs li{display:grid;gap:2px}
.zx-prog{all:unset;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:36px;border-radius:8px}
.zx-prog b{color:var(--primary)}
.zx-prog:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.zx-prog[aria-pressed="true"]{color:var(--primary)}
.zx-progs li:has(.zx-prog[aria-pressed="true"]){background:#f4e7ea;box-shadow:inset -4px 0 0 var(--primary)}
.zx-prog-def{font-size:15px}
.zx-prog-def a{color:var(--primary);font-weight:700;white-space:nowrap}
.zx-related{margin-block-start:18px;border-block-start:1px dashed var(--line);padding-block-start:12px}
.zx-related p{margin:0 0 6px!important;font-size:14px;font-weight:700;color:var(--muted)}
.zx-related ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.zx-related a{display:inline-flex;min-height:32px;align-items:center;text-decoration:none;font-weight:700;font-size:15px;color:var(--ink);border-block-end:1px solid var(--line)}
.zx-related a:hover{color:var(--primary);border-color:var(--primary)}
.zx-check{margin-block-start:clamp(24px,5vw,56px);padding:clamp(20px,4vw,36px) clamp(16px,4vw,32px);background:var(--mist);border-radius:22px}
.zx-check h2{margin:0 0 16px;font-size:clamp(22px,3vw,30px)}
.zx-quiz{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-block-end:12px}
.zx-quiz-q{margin:0 0 10px;font-weight:700;font-size:17px}
.zx-quiz-a{display:flex;flex-wrap:wrap;gap:8px}
.zx-quiz-a button{font:inherit;font-weight:700;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.zx-quiz-a button:hover{transform:translateY(-1px)}
.zx-quiz-a button[aria-pressed="true"].zx-ok{background:#e6efe9;border-color:#2f6b4f;color:#24543d}
.zx-quiz-a button[aria-pressed="true"].zx-bad{background:#f4e7ea;border-color:var(--primary);color:var(--primary)}
.zx-quiz-f{margin:10px 0 0;min-height:1.4em;font-weight:700}
.zx-back{font:inherit;font-weight:700;margin-inline-start:6px;border:0;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:32px}
@media (max-width:980px){
  .zx-swipe-hint{display:block;position:absolute;bottom:34px;inset-inline:16px;margin:0;text-align:center;font-size:13px;color:var(--muted);transition:opacity .4s}
  .zx-stage.zx-swiped .zx-swipe-hint,.zx-stage:not([data-step="0"]) .zx-swipe-hint{opacity:0}
  .zx-ico{margin-top:6px}
  .zx-gate-info{width:min(92%,340px)}
}
.zx-reduce *,.zx-reduce *::before,.zx-reduce *::after{transition-duration:1ms!important;transition-delay:0ms!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.zx *,.zx *::before,.zx *::after{transition-duration:1ms!important;transition-delay:0ms!important;animation:none!important}}
@media print{.zx-stage-wrap,.zx-dots,.zx-rounds,.zx-share,.zx-tools{display:none!important}.zx-step{min-height:0;opacity:1}}

/* doors (owner 14 Oct 2026, sample B): illustrated arches replace the drawn ones; the chosen door glows warm from inside */
.zx-arch.zx-art,.zx-gate.zx-lit .zx-arch.zx-art,.zx-gate.zx-sel .zx-arch.zx-art{position:relative;display:block;border:0;border-radius:0;background:none;box-shadow:none;margin-bottom:8px;overflow:visible}
.zx-door{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:transform .5s var(--ease),filter .4s}
.zx-gate.zx-lit .zx-door{transform:translateY(-3px);filter:drop-shadow(0 6px 10px rgba(123,53,70,.22))}
.zx-gate.zx-sel .zx-arch.zx-art{box-shadow:none}
.zx-art::after{content:"";position:absolute;inset:16% 20% 8%;border-radius:45% 45% 10px 10px;background:radial-gradient(ellipse at 50% 65%,rgba(244,201,93,.6),rgba(244,201,93,0) 70%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;mix-blend-mode:multiply}
.zx-gate.zx-sel .zx-art::after{opacity:1}
@media (prefers-reduced-motion:reduce){.zx-door,.zx-art::after{transition:none}}

.zx-field{pointer-events:none}.zx-gate{z-index:5}.zx-gate-info[hidden]{display:none}.zr-scene-nav{padding-inline-end:12px}

.zx-walk .zx-step[hidden]{display:none!important}.zx-walk .zx-step,.zx-walk .zx-step:last-of-type{min-height:0;padding-block:16px 24px;opacity:1}.zx-stage{height:410px;min-height:360px;position:relative;top:auto}.zx-dots{position:relative;top:auto;margin-bottom:10px;border-radius:16px}.zx-stage-wrap{position:relative;top:auto}.zx-gate{border:0;background:transparent;color:inherit;font:inherit;padding:0}.zx-gate:focus-visible{outline:3px solid var(--primary);outline-offset:5px;border-radius:14px}.zx:not(.zx-nojs) .zx-progs{display:none}.zr-scene-nav{display:flex;justify-content:space-between;gap:8px;margin-top:10px}.zr-scene-nav button{font:inherit;font-weight:700;min-height:44px;border:1px solid var(--primary);border-radius:12px;padding:8px 12px;background:var(--paper);color:var(--primary);cursor:pointer}.zr-scene-nav button:last-child{background:var(--primary);color:white}.zr-scene-nav button:disabled{opacity:.45;cursor:default}.zx-step p{font-size:17px;line-height:1.75}.zx-gate small{line-height:1.5}@media(max-width:980px){.zx-walk{display:flex;flex-direction:column;gap:12px}.zx-stage-wrap{position:relative;top:auto;order:0}.zx-steps{order:1}.zx-stage{height:340px;min-height:340px;max-height:none}.zx-step{scroll-margin-top:90px}.zx-step h2{font-size:23px}.zx-intro{padding-bottom:16px}.zx-gate-info{padding:7px 10px}.zx-gate-info span{font-size:13px}.zx-swipe-hint{display:none!important}}