/* فَيء · T-155 · الصفحة يوم كامل
   الوضع الأساس هنا صفحة ثابتة مقصودة: كل ساعة بلونها وظل مشربيتها (بلا JS، بلا WebGL، وبحركة مخفّضة).
   .gl يحوّل الصفحة إلى مسرح ثابت يرسمه الضوء في main.js، وتبقى الحروف في DOM شفافة للقراءة الآلية والتحديد */
:root{
  --ink:#0B0B0B;--paper:#FFFFFF;--clay:#F2A36B;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,4.4vw,72px);
  --ui:#0B0B0B;--plate:#FFFFFF;--plate-fg:#0B0B0B;
  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpath fill-rule='evenodd' d='M0 0H150V150H0ZM150.0 75.0L128.0 97.0L128.0 128.0L97.0 128.0L75.0 150.0L53.0 128.0L22.0 128.0L22.0 97.0L0.0 75.0L22.0 53.0L22.0 22.0L53.0 22.0L75.0 0.0L97.0 22.0L128.0 22.0L128.0 53.0Z'/%3E%3C/svg%3E");
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpath fill-rule='nonzero' d='M150.0 75.0L128.0 97.0L128.0 128.0L97.0 128.0L75.0 150.0L53.0 128.0L22.0 128.0L22.0 97.0L0.0 75.0L22.0 53.0L22.0 22.0L53.0 22.0L75.0 0.0L97.0 22.0L128.0 22.0L128.0 53.0Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--ink);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:'Readex Pro',sans-serif;font-weight:400;overflow-x:clip;font-kerning:normal;touch-action:pan-y}
a{color:inherit}
bdi{font-family:'Manrope',sans-serif;font-weight:600}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ui);outline-offset:3px}
#sun,#track{display:none}

/* ------- الساعات ------- */
.h{position:relative;overflow:clip;isolation:isolate;padding:clamp(72px,12vh,140px) var(--pad) clamp(96px,16vh,180px);color:var(--fg);background:var(--bg)}
.h::before{content:"";position:absolute;inset:-40%;z-index:-1;background:var(--pat);-webkit-mask:var(--shape,var(--lattice)) 0 0/var(--cell,150px);mask:var(--shape,var(--lattice)) 0 0/var(--cell,150px);transform:var(--cast)}
.fajr{--bg:#0B0B0B;--fg:#fff;--pat:#3A2417;--shape:var(--star);--cast:rotate(-24deg) scaleX(2.4)}
.shuruq{--bg:#F2A36B;--fg:#0B0B0B;--pat:#DD8A50;--cast:rotate(-20deg) scaleX(2.2)}
.duha{--bg:#fff;--fg:#0B0B0B;--pat:#EFEBE6;--cast:rotate(-14deg) scaleX(1.5)}
.dhuhr{--bg:#fff;--fg:#0B0B0B;--pat:#F2EFEB;--cast:rotate(4deg);--cell:120px}
.asr{--bg:#fff;--fg:#0B0B0B;--pat:#EAE5DE;--cast:rotate(14deg) scaleX(1.6)}
.ghurub{--bg:#F2A36B;--fg:#0B0B0B;--pat:#DD8A50;--cast:rotate(22deg) scaleX(2.4)}
.isha{--bg:#0B0B0B;--fg:#fff;--pat:#24170E;--shape:var(--star);--cast:rotate(28deg) scaleX(2.6)}
.layl{--bg:#0B0B0B;--fg:#fff;--pat:#1C1C1C;--shape:var(--star);--cast:rotate(20deg);--cell:170px}

.hour{font-family:'Alexandria',sans-serif;font-weight:600;font-size:clamp(16px,1.5vw,21px);line-height:1.6;margin-block-end:clamp(14px,2.4vh,28px)}
.hour bdi{margin-inline-end:.35em}
h1,h2,h3{font-family:'Alexandria',sans-serif;font-weight:700}
h1{font-size:min(36vw,54vh);line-height:1.25;padding-block-end:.3em}
h2{font-size:clamp(54px,12.4vw,190px);line-height:1.25;max-width:11em}
h3{font-size:clamp(36px,5.4vw,84px);line-height:1.3}
p,li{font-size:clamp(16.5px,1.45vw,21px);line-height:1.75}
.big{font-size:clamp(22px,2.9vw,44px);line-height:1.55;font-weight:500;max-width:21em}

.fajr{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-block-start:clamp(44px,7vh,70px)}
.lede{display:flex;flex-direction:column;gap:12px;padding-block:clamp(20px,3vh,32px) clamp(40px,9vh,90px)}
@media (min-width:1000px),(min-width:761px) and (orientation:landscape){.lede{position:absolute;inset-block-start:clamp(78px,12vh,120px);inset-inline-end:var(--pad);width:min(25vw,380px);padding:0}.lede .big{font-size:clamp(20px,2vw,30px)}}

.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,5vw,80px) clamp(20px,2.4vw,40px);margin-block-start:clamp(36px,7vh,88px)}
.cols>*{grid-column:span 6}
.shuruq .cols>:first-child{grid-column:1/8}
.shuruq .room{grid-column:7/13;margin-block-start:clamp(40px,14vh,180px)}
.duha h2{margin-inline-start:auto}
.duha .cols>:first-child{grid-column:6/13;order:2}
.duha .list{grid-column:1/6;order:1}
.dhuhr .cols>:first-child{grid-column:1/8}
.dhuhr .room{grid-column:2/9;margin-block-start:clamp(20px,6vh,70px)}
.asr .list{grid-column:7/13}
.asr .room{grid-column:1/7;grid-row:1;margin-block-start:clamp(60px,18vh,220px)}
.ghurub .cols>:first-child{grid-column:1/8}
.ghurub .room{grid-column:6/13;margin-block-start:clamp(30px,10vh,120px)}
.isha h2{margin-inline-start:auto}
.isha .cols>:first-child{grid-column:7/13}
.isha .list{grid-column:1/7;grid-row:1}

.now{font-size:clamp(14px,1.1vw,16px);margin-block-end:6px;font-weight:500}
.room h3+p{max-width:27em;margin-block-start:10px}
.list li{font-family:'Alexandria',sans-serif;font-weight:600;font-size:clamp(20px,2.3vw,34px);line-height:1.5;padding-block:clamp(10px,1.4vh,16px)}

/* ------- التقويم ------- */
.layl{padding-block-end:clamp(120px,18vh,200px)}
.askline{margin-block:clamp(18px,3vh,32px) clamp(28px,5vh,56px);max-width:27em}
.cal{max-width:860px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:14px}
.cal-m{font-family:'Alexandria',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,46px);line-height:1.3}
.cal-m bdi{font-weight:600}
.cal-nav{display:flex;gap:4px}
.cal-nav button{min-width:44px;min-height:44px;padding-inline:10px;font-size:15px;line-height:1.5;border-radius:0}
.cal-nav button[disabled]{opacity:.35;cursor:default}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-w span{font-size:clamp(13px,1vw,15px);line-height:1.6;text-align:center;padding-block:6px}
.day-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.5vh,6px);min-height:clamp(58px,8.6vh,88px);border-radius:0;font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(16px,1.5vw,21px);line-height:1.2}
.day-c svg{display:block;width:clamp(13px,1.3vw,18px);height:auto;fill:currentColor}
.day-c[disabled]{cursor:default;opacity:.42}
.day-c.booked{text-decoration:line-through;text-decoration-thickness:2px}
.day-c.sel{background:var(--clay);color:var(--ink);opacity:1}
.day-c:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){
  .day-c:not([disabled]):hover{outline:1px solid var(--ui);outline-offset:-1px}
  .cal-nav button:not([disabled]):hover{text-decoration:underline}
  .cta:hover{text-decoration:underline;text-decoration-color:var(--ink)}
  .credit:hover{text-decoration:underline}
}
.status{font-family:'Alexandria',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,34px);line-height:1.5;margin-block-start:clamp(18px,3vh,30px);min-height:1.5em}
.demo{font-size:clamp(14px,1.05vw,16px);line-height:1.7;max-width:44em;margin-block-start:10px}
.cta{display:block;width:fit-content;max-width:100%;margin-block-start:clamp(40px,8vh,90px);padding:.42em .8em .5em;background:var(--clay);color:var(--ink);font-family:'Alexandria',sans-serif;font-weight:700;font-size:clamp(34px,7.4vw,108px);line-height:1.3;text-decoration:none}
.fine{margin-block-start:14px}

/* ------- ثوابت الشاشة ------- */
.credit{position:fixed;top:0;inset-inline-end:0;z-index:30;background:var(--plate);color:var(--plate-fg);font-size:12.5px;line-height:1.6;padding:6px 12px;text-decoration:none}
.dial{position:fixed;z-index:30;inset-block-end:calc(12px + env(safe-area-inset-bottom));inset-inline-end:12px;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;padding-inline:8px 14px;background:var(--plate);color:var(--plate-fg);line-height:1.3;min-height:52px}
.dial[hidden]{display:none}
.dial-t{display:flex;flex-direction:column;align-items:flex-start;font-size:12.5px;line-height:1.35}
.dial-t bdi{font-size:15px;font-weight:700}
.credit,.dial{outline-color:var(--plate-fg)}

/* ------- وضع الضوء ------- */
.gl html,html.gl{background:var(--ink)}
.gl #sun{display:block;position:fixed;top:0;left:0;width:100%;height:100lvh;z-index:0;pointer-events:none}
.gl #track{display:block;width:1px}
.gl .stage{position:fixed;top:0;left:0;width:100%;height:100lvh;overflow:clip;z-index:1}
.gl .day{will-change:transform}
.gl .h{background:none;overflow:visible;isolation:auto}
.gl .h::before{content:none}
.gl .day,.gl .day *{color:transparent;background:none;text-decoration-color:transparent}
.gl .day .day-c svg{fill:transparent}
.gl .day .day-c[disabled],.gl .day .cal-nav button[disabled]{opacity:1}
.gl .day ::selection{background:rgba(242,163,107,.4)}
.gl .day .cta:hover{text-decoration-color:transparent}
.gl .h{min-height:130vh}
.gl .fajr{min-height:108vh}
.gl .dhuhr{min-height:140vh}
.gl .ghurub{min-height:150vh}
.gl .layl{min-height:0}

/* ------- الجوال ------- */
@media (max-width:760px){
  h1{font-size:min(41vw,40vh)}
  .fajr{justify-content:center}
  .gl .fajr{min-height:100vh}
  h2{font-size:clamp(50px,15vw,110px)}
  .cols>*,.shuruq .cols>:first-child,.shuruq .room,.duha .cols>:first-child,.duha .list,.dhuhr .cols>:first-child,.dhuhr .room,.asr .list,.asr .room,.ghurub .cols>:first-child,.ghurub .room,.isha .cols>:first-child,.isha .list{grid-column:1/-1;grid-row:auto;order:initial;margin-block-start:0}
  .room{margin-block-start:28px}
  .day-c{min-height:60px}
  .gl .h{min-height:130vh}
  .gl .dhuhr{min-height:140vh}
  .gl .ghurub{min-height:150vh}
  .gl .layl{min-height:0}
  .fine,.demo{padding-block-end:0}
  .layl{padding-block-end:110px}
}
@media (max-width:420px){
  .dial{gap:8px;min-height:46px;padding-block:4px}
  .dial svg{width:32px;height:32px}
}