/* مرفق · T-158 */
:root{
  --navy:#13294B;--navy-70:rgba(19,41,75,.72);--navy-14:rgba(19,41,75,.16);--mist:#EEF2F7;--white:#FFFFFF;
  --ease:cubic-bezier(.16,1,.3,1);
  --ar-d:'Alexandria','Readex Pro',sans-serif;--ar:'Readex Pro','Alexandria',sans-serif;--lat:'Manrope','Readex Pro',sans-serif;
  --pad:clamp(18px,4vw,56px);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{background:var(--white);color:var(--navy);-webkit-text-size-adjust:100%}
html.js{touch-action:pan-y pinch-zoom}
body{font-family:var(--ar);font-size:16px;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
a{color:inherit}
ul{list-style:none;padding:0}
fieldset{border:0;padding:0;min-inline-size:0}
.lat,.num{font-family:var(--lat)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:20;background:var(--navy);color:var(--white);padding:10px 16px;transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}
.concept{position:fixed;z-index:12;inset-block-start:10px;inset-inline-end:10px;font-size:11.5px;line-height:1.5;padding:6px 10px;background:var(--white);color:var(--navy);text-decoration:none;border:1px solid var(--navy-14);border-radius:999px}

#stage{position:fixed;inset:0;inline-size:100%;block-size:100vh;block-size:100lvh;z-index:2;pointer-events:none;display:block}
html.nogl #stage{position:absolute;block-size:100svh}

/* --- القسم الأول --- */
.s{position:relative;min-block-size:100svh;padding:var(--pad)}
.panel{position:relative;z-index:3}
#touch{block-size:100svh;min-block-size:520px;overflow:clip}
.wm{position:absolute;z-index:3;inset-block-start:clamp(14px,3vh,28px);inset-inline-start:var(--pad);font-family:var(--ar-d);font-weight:700;font-size:clamp(22px,2.3vw,30px);line-height:1.3}
.wm small{display:block;font:400 12px/1.5 var(--ar);color:var(--navy-70)}
h1{font-family:var(--ar-d);font-weight:700;font-size:min(13.2vw,25vh);line-height:1.3;transition:color .5s var(--ease)}
h1 span{position:absolute;white-space:nowrap}
h1 .w1{inset-block-start:13vh;inset-inline-start:var(--pad);white-space:normal;inline-size:min-content}
h1 .w3{inset-block-end:9vh;inset-inline-end:var(--pad)}
html.touched h1{color:var(--mist)}
.lede{transition:opacity .4s var(--ease);position:absolute!important;inset-block-end:clamp(18px,5vh,44px);inset-inline-start:var(--pad);max-inline-size:27ch;font-size:clamp(15px,1.3vw,18px);line-height:1.7}
html.spotted .lede{opacity:0;pointer-events:none}
.hint{color:var(--navy-70);font-size:.86em;margin-block-start:.35em}

#spot{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);overflow:clip}
#spot.on{opacity:1}
#spot svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
#spot polyline{fill:none;stroke:var(--navy);stroke-width:1;stroke-opacity:.6}
#spotname{position:absolute;top:0;left:0;will-change:transform;inline-size:max-content;max-inline-size:min(92vw,640px)}
#spotname b{display:block;font-family:var(--ar-d);font-weight:700;font-size:clamp(46px,6vw,104px);line-height:1.3;white-space:nowrap}
#spotname span{background:var(--white);inline-size:fit-content;display:block;font-size:clamp(14px,1.35vw,19px);line-height:1.5;max-inline-size:36ch}
@media (max-width:999px) and (max-height:700px){#spotname span{background:transparent;text-shadow:0 0 3px var(--white),0 0 3px var(--white),0 0 6px var(--white)}}
#tag{position:fixed;left:0;top:0;z-index:5;pointer-events:none;background:var(--navy);color:var(--white);font-size:13px;line-height:1.4;padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .2s linear;white-space:nowrap}
#tag.on{opacity:1}

/* --- الأقسام --- */
h2{font-family:var(--ar-d);font-weight:700;font-size:clamp(34px,5.2vw,76px);line-height:1.3}
.sub{color:var(--navy-70);margin-block-start:.4em}
.step{font-size:14px;color:var(--navy-70);margin-block-end:.5em}
h1:focus,h2:focus{outline:none}

#regions,#step1,#step3{display:flex;flex-direction:column;justify-content:center}
#regions .panel,#step1 .panel,#step3 .panel{background:var(--white)}
#regions h2{font-size:clamp(30px,3.8vw,54px)}
#regions .panel,#step1 .panel{inline-size:min(46vw,620px);margin-inline-end:auto}
#step3 .panel{inline-size:min(44vw,600px);margin-inline-start:auto}

#reglist{margin-block-start:clamp(12px,2.4vh,28px);display:grid;gap:clamp(10px,1.8vh,20px)}
.emerg{margin-block-start:clamp(12px,2.2vh,22px);padding-inline-start:12px;border-inline-start:2px solid var(--navy);font-size:14.5px;line-height:1.6;font-weight:500;max-inline-size:52ch}
.grp h3{font-family:var(--ar);font-weight:500;font-size:14px;line-height:1.5;color:var(--navy-70);margin-block-end:6px}
.grp ul{display:flex;flex-wrap:wrap;gap:6px}
.grp button{font-size:clamp(14.5px,1.2vw,17px);line-height:1.4;padding:8px 12px;min-block-size:44px;border:1px solid var(--navy-14);border-radius:999px;background:var(--white);transition:background-color .25s var(--ease),color .25s var(--ease)}
.grp button[aria-current="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}

.dept{font-size:clamp(18px,1.8vw,24px);line-height:1.5;margin-block-start:.5em;font-weight:500}
.limit{font-size:14.5px;line-height:1.6;margin-block-start:.6em;color:var(--navy-70);max-inline-size:44ch}
legend{font-size:14px;padding:0;margin-block-end:8px;color:var(--navy-70)}
fieldset{margin-block-start:clamp(16px,3vh,28px)}
.opt{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--white)}
.opt.c3{grid-template-columns:repeat(3,1fr)}
.opt button{min-block-size:56px;padding:10px 8px;border:1px solid var(--navy-14);border-radius:12px;background:var(--white);font-size:clamp(16px,1.5vw,20px);line-height:1.35;font-family:var(--ar-d);font-weight:600;transition:background-color .25s var(--ease),color .25s var(--ease)}
.opt button small{display:block;font:400 12.5px/1.45 var(--ar);color:var(--navy-70)}
.opt button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.opt button[aria-pressed="true"] small{color:rgba(255,255,255,.82)}

.go{display:inline-flex;align-items:center;justify-content:center;min-block-size:52px;padding:10px 26px;border-radius:999px;background:var(--navy);color:var(--white);font-family:var(--ar-d);font-weight:600;font-size:17px;line-height:1.3;text-decoration:none;margin-block-start:clamp(18px,3vh,28px);transition:opacity .25s var(--ease),transform .2s var(--ease)}
.go:disabled{opacity:.42;cursor:not-allowed;transform:none}
.again{min-block-size:52px;padding:10px 24px;border:1px solid var(--navy);border-radius:999px;font-family:var(--ar-d);font-weight:600;margin-block-start:clamp(18px,3vh,28px);margin-inline-start:8px}

/* --- الخطوة الثانية: الأيام والأوقات حلقتان حول الجسم --- */
#step2{min-block-size:100svh}
#step2 .head{max-inline-size:24vw}
#step2 h2{font-size:clamp(30px,3.5vw,52px)}
#step2 .sub{font-size:14.5px;line-height:1.6}
#step2 .foot{position:absolute;inset-block-end:var(--pad);inset-inline-end:var(--pad);text-align:end}
.readout{font-family:var(--ar-d);font-weight:600;font-size:clamp(18px,1.9vw,26px);line-height:1.4}
/* بلا حركة أو بلا WebGL: قائمتان عاديتان */
.rings{position:relative;z-index:3;margin-block:20px}
.ring{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:14px;max-inline-size:640px}
.chip{min-block-size:44px;min-inline-size:56px;padding:6px 12px;line-height:1.2;font-size:14px;border:1px solid var(--navy-14);border-radius:12px;background:var(--white);transition:background-color .25s var(--ease),color .25s var(--ease)}
.chip b{display:block;font-family:var(--lat);font-weight:700;font-size:17px;line-height:1.2}
.chip small{font-size:11.5px;font-family:var(--ar)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.chip:disabled{cursor:not-allowed;background:var(--white);color:rgba(19,41,75,.72);text-decoration:line-through;border-style:dashed}
html.rings3d .rings{margin:0;position:static}
html.rings3d .ring{display:contents}
html.rings3d .chip{position:fixed;left:0;top:0;will-change:transform,opacity;margin:0;opacity:0;pointer-events:none;z-index:1;transition:background-color .25s var(--ease);color:rgba(19,41,75,var(--ta,1));border-color:rgba(19,41,75,var(--fa,.16))}
html.rings3d .chip:disabled{color:rgba(19,41,75,.72)}
html.rings3d .chip[aria-pressed="true"]{color:var(--white);border-color:var(--navy)}

/* --- المراجعة --- */
dl{margin-block-start:clamp(14px,2.6vh,24px)}
dl div{display:flex;justify-content:space-between;gap:16px;padding-block:clamp(7px,1.3vh,12px);border-block-end:1px solid var(--navy-14)}
dt{color:var(--navy-70);font-size:14.5px}
dd{margin:0;font-family:var(--ar-d);font-weight:600;font-size:clamp(15px,1.45vw,20px);line-height:1.4;text-align:end}
dd.empty{font-family:var(--ar);font-weight:400;color:var(--navy-70)}
.missing{font-size:14px;margin-block-start:.6em}
.done{font-weight:500;margin-block-start:.8em;max-inline-size:44ch;scroll-margin-block:40px}
.done:empty{display:none}
.after{margin-block-start:14px;font-size:13.5px;line-height:1.6;color:var(--navy-70);display:grid;gap:4px}

/* --- الختام: يغطي المسرح فيتوقف الرسم --- */
#end{position:relative;z-index:6;background:var(--navy);color:var(--white);min-block-size:100vh;min-block-size:100lvh;padding:clamp(64px,12vh,120px) var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
#end h2{font-size:clamp(36px,7.4vw,112px)}
.cta{align-self:flex-start;display:inline-flex;align-items:center;min-block-size:64px;padding:12px 40px;border-radius:999px;background:var(--white);color:var(--navy);font-family:var(--ar-d);font-weight:700;font-size:clamp(20px,2.2vw,30px);line-height:1.3;text-decoration:none;transition:transform .25s var(--ease)}
#end :focus-visible{outline-color:var(--white)}
.disc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.78)}

@media (hover:hover) and (pointer:fine){
  .concept:hover{background:var(--mist)}
  .grp button:not([aria-current="true"]):hover{background:var(--mist)}
  .opt button:not([aria-pressed="true"]):hover{background:var(--mist)}
  .go:not(:disabled):hover{transform:translateY(-1px)}
  .chip:not([aria-pressed="true"]):not(:disabled):hover{background:var(--mist)}
  .cta:hover{transform:translateY(-2px)}
}

/* --- البديل بلا WebGL --- */
html.nogl #spot{position:absolute;block-size:100svh}

html:not(.js) .lede.panel{display:none}
/* --- التابلت عمودياً --- */
@media (min-width:768px) and (max-aspect-ratio:1/1){
  h1{font-size:11vw}
}

/* --- الجوال --- */
@media (max-width:767px){
  .concept{font-size:10.5px;padding:5px 9px;inset-block-start:8px;inset-inline-end:8px}
  .wm{inset-block-start:10px;inset-inline-start:14px;font-size:22px}
  .wm small{font-size:11px}
  h1{font-size:min(17.5vw,12vh)}
  h1 .w1{inset-block-start:64px;inset-inline-start:14px;inline-size:auto;white-space:nowrap}
  h1 .w3{inset-block-start:calc(64px + 1.25em);inset-block-end:auto;inset-inline-start:14px;inset-inline-end:auto}
  .lede{inset-block-end:12px;inset-inline-start:14px;inset-inline-end:14px;max-inline-size:none;font-size:14px;line-height:1.55;background:var(--white);padding:8px 10px;border:1px solid var(--navy-14);border-radius:12px}
  .hint{margin-block-start:0}
  .s{padding:14px}
  #regions,#step1,#step3{justify-content:flex-start;padding-block-start:38svh}
  #regions .panel,#step1 .panel,#step3 .panel{inline-size:auto;margin-inline:-14px;padding:10px 14px 16px}
  #step2 .head{background:var(--white);margin-inline:-14px;padding-inline:14px}
  #step2 .head{max-inline-size:none;padding-block-start:48px}
  #step2 h2{font-size:26px}
  #step2 .sub{font-size:13.5px;line-height:1.5}
  #step2 .foot{inset-block-end:14px;inset-inline:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:start}
  #step2 .go{margin:0;padding-inline:18px;flex:none}
  .readout{font-size:15px}
  .chip{min-inline-size:50px;min-block-size:44px;padding:5px 8px;font-size:12.5px}
  .chip b{font-size:15px}
  #spotname b{font-size:clamp(38px,12.4vw,72px)}
  .lede p:first-child{display:none}
  .lede{padding:6px 10px}
  .hint{font-size:13px}
  #end h2{font-size:clamp(34px,10.5vw,64px)}
  .cta{align-self:stretch;justify-content:center}
}

@media (max-width:767px) and (max-height:780px){
  #step2 .sub{display:none}
  #step2 .head{padding-block-start:40px}
  #step2 h2{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

html.dragging,html.dragging *{-webkit-user-select:none;user-select:none}