/* 7Code — Lab module: /lab (interactive experiments). Loaded via page_open css => ['mod-lab'].
   Card anatomy: .xp > .xp-main (.xp-bar + .xp-stage 16:10 demo + optional .xp-ctl) + .xp-info. */

.lab-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.lab-t{display:flex;align-items:flex-end;gap:.06em}
.lab-cur{display:inline-block;width:.42em;height:.12em;background:var(--red);margin-bottom:.08em;flex:0 0 auto;animation:labBlink 1.1s steps(1) infinite}
@keyframes labBlink{50%{opacity:0}}
.lab-ph .ph-meta>div span:last-child{font-weight:600}
.lab-nojs{margin-top:14px;border:1.5px solid var(--red);color:var(--red);padding:12px 14px}

/* ---------- grid of experiment cards ---------- */
.lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:18px}
.xp{position:relative;display:flex;flex-direction:column;min-width:0;border:1.5px solid var(--ink);background:var(--panel);scroll-margin-top:84px;transition:border-color .25s}
.xp:hover,.xp:focus-within{border-color:var(--red)}
.xp-main{display:flex;flex-direction:column;min-width:0}
.xp--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}
.xp--wide .xp-main{border-inline-end:1.5px solid var(--ink)}

/* top bar: file name + live state */
.xp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:38px;padding-inline:14px;border-bottom:1.5px solid var(--line);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink45);text-transform:lowercase;white-space:nowrap}
.xp-file{overflow:hidden;text-overflow:ellipsis}
.xp-st{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.xp-st i{width:7px;height:7px;border:1.5px solid var(--ink45);display:block}
.xp[data-state=live] .xp-st{color:var(--ink)}
.xp[data-state=live] .xp-st i{background:var(--red);border-color:var(--red);animation:labPulse 1.6s ease-in-out infinite}
.xp[data-state=ready] .xp-st,.xp[data-state=still] .xp-st{color:var(--ink70)}
.xp[data-state=ready] .xp-st i{background:var(--ink);border-color:var(--ink)}
.xp[data-state=loading] .xp-st i{border-color:var(--red)}
@keyframes labPulse{50%{opacity:.25}}

/* demo area */
.xp-stage{position:relative;aspect-ratio:16/10;background:#08080A;overflow:hidden;isolation:isolate}
.xp-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:crosshair}
.has-cursor .xp-cv{cursor:none}
.xp[data-kind=canvas] .xp-stage::after{content:"";position:absolute;inset:12px;pointer-events:none;opacity:.55;
  background:linear-gradient(var(--ink45),var(--ink45)) top left/12px 1.5px no-repeat,linear-gradient(var(--ink45),var(--ink45)) top left/1.5px 12px no-repeat,
             linear-gradient(var(--ink45),var(--ink45)) top right/12px 1.5px no-repeat,linear-gradient(var(--ink45),var(--ink45)) top right/1.5px 12px no-repeat,
             linear-gradient(var(--ink45),var(--ink45)) bottom left/12px 1.5px no-repeat,linear-gradient(var(--ink45),var(--ink45)) bottom left/1.5px 12px no-repeat,
             linear-gradient(var(--ink45),var(--ink45)) bottom right/12px 1.5px no-repeat,linear-gradient(var(--ink45),var(--ink45)) bottom right/1.5px 12px no-repeat}
.xp[data-kind=canvas] .xp-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.35;
  background-image:radial-gradient(rgba(242,241,236,.14) 1px,transparent 1.2px);background-size:24px 24px}
.xp[data-state=idle] .xp-stage,.xp[data-state=loading] .xp-stage{background:#08080A linear-gradient(110deg,transparent 30%,rgba(255,255,255,.03) 50%,transparent 70%) 0 0/200% 100%;animation:labShimmer 1.4s linear infinite}
@keyframes labShimmer{to{background-position:-200% 0}}

/* controls under the demo */
.xp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border-top:1.5px solid var(--line)}
.xp-in{flex:1 1 150px;min-width:0;min-height:44px;padding:0 14px;background:rgba(255,255,255,.03);border:1.5px solid var(--ink);color:var(--ink);font:800 16px/1.2 "Archivo",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
html[dir=rtl] .xp-in{font-family:"Cairo",sans-serif}
.xp-in::placeholder{color:rgba(242,241,236,.4);text-transform:none}
.xp-in:focus{outline:none;border-color:var(--red)}
.xp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;background:transparent;color:var(--ink);border:1.5px solid var(--ink);font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.xp-btn:hover{background:var(--ink);color:var(--paper)}
.xp-btn--fill{background:var(--ink);color:var(--paper)}
.xp-btn--fill:hover{background:var(--red);border-color:var(--red);color:#fff}
.xp-btn[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.xp-btn[hidden]{display:none}
.xp-btn:disabled,.xp-btn--fill:disabled{cursor:not-allowed;background:transparent;color:var(--ink45);border-color:var(--line)}
.xp-btn kbd{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;border:1px solid currentColor;padding:1px 5px;opacity:.7}
.xp-out{margin-inline-start:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--ink45);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir=rtl] .xp-out{font-family:"Cairo",sans-serif;font-size:13px}

/* card text */
.xp-info{display:flex;flex-direction:column;gap:10px;flex:1;padding:18px 18px 20px;border-top:1.5px solid var(--ink)}
.xp--wide .xp-info{border-top:0;justify-content:flex-end;padding:clamp(20px,2.4vw,34px)}
.xp-n{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;color:var(--red)}
.xp--wide .xp-n{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(64px,8vw,120px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--red);margin-bottom:auto}
.xp-t{font-weight:900;font-size:clamp(20px,2vw,28px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.xp--wide .xp-t{font-size:clamp(26px,3vw,44px);line-height:.95}
.xp-d{color:var(--ink70);font-size:15.5px;line-height:1.55;max-width:56ch}
.xp-tags{margin-top:2px;gap:6px}
.xp-tags li{font-size:11.5px;padding:5px 9px}
.xp-hint{font-family:var(--mono);font-size:12px;color:var(--ink45);line-height:1.5}
.xp-hint b{color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-inline-end:6px}

/* ---------- 03 palette generator ---------- */
.pal{display:flex;flex-direction:column}
.pal:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
.pal-sws{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.pal-sw{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;padding:12px 10px;background:#1b1b1f;color:#fff;transition:background-color .55s cubic-bezier(.2,.7,0,1),color .3s}
.pal-lock{width:40px;height:40px;display:grid;place-items:center;padding:0;background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.45;cursor:pointer;transition:opacity .2s,background .2s}
.pal-lock:hover{opacity:.9}
.pal-lock .sh{transition:transform .25s;transform:translateY(-3px)}
.pal-lock[aria-pressed=true]{opacity:1;background:currentColor}
.pal-lock[aria-pressed=true] svg{color:var(--sw,#000)}
.pal-lock[aria-pressed=true] .sh{transform:none}
.pal-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.pal-hex{align-self:flex-start;max-width:100%;padding:4px 0;min-height:32px;background:none;border:0;color:inherit;font:700 14px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em;text-transform:uppercase;cursor:copy;text-align:start;overflow:hidden;text-overflow:ellipsis}
.pal-hex:hover{text-decoration:underline;text-underline-offset:4px}
.pal-hsl{font:500 10.5px/1.2 "JetBrains Mono",ui-monospace,monospace;opacity:.72;direction:ltr;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .pal-hsl{text-align:end}
.pal-cr{display:flex;align-items:center;gap:5px;font:500 11px/1.2 "JetBrains Mono",ui-monospace,monospace;white-space:nowrap;direction:ltr;justify-content:flex-start}
html[dir=rtl] .pal-cr{justify-content:flex-end}
.pal-cr i{width:9px;height:9px;border:1px solid currentColor;flex:0 0 auto}
.pal-cr i.w{background:#fff}.pal-cr i.b{background:#000}
.pal-cr em{font-style:normal;font-weight:700;font-size:9.5px;padding:1px 4px;border:1px solid currentColor}
.pal-cr em.lo{opacity:.55;border-style:dashed}
.pal-toast{position:absolute;bottom:12px;inset-inline-start:50%;transform:translate(-50%,8px);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;font-weight:700;padding:8px 12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .pal-toast{transform:translate(50%,8px)}
.pal-toast.on{opacity:1;transform:translate(-50%,0)}
html[dir=rtl] .pal-toast.on{transform:translate(50%,0)}

/* ---------- 05 booking flow ---------- */
.bk{display:flex;flex-direction:column;background:#0E0E11;font-size:15px}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1.5px solid var(--line)}
.bk-steps{list-style:none;display:flex;gap:4px;min-width:0;flex:1}
.bk-steps li{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding-bottom:7px;border-bottom:3px solid var(--line);color:var(--ink45);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;transition:border-color .3s,color .3s}
.bk-steps li b{font-family:"JetBrains Mono",monospace;font-size:11px}
.bk-steps li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-steps li.is-done{border-color:var(--ink70);color:var(--ink70)}
.bk-steps li[aria-current=step]{border-color:var(--red);color:var(--ink)}
.bk-demo{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);border:1.5px solid var(--red);padding:3px 7px}
.bk-body{position:relative;flex:1;min-height:0;overflow:auto;padding:12px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.bk-pane{border:0;min-width:0;margin:0;padding:0;animation:bkIn .35s cubic-bezier(.2,.7,0,1)}
.bk-pane[hidden]{display:none}
@keyframes bkIn{from{opacity:0;transform:translateY(8px)}}
.bk-q{font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px;padding:0;outline:none}
.bk-trips{display:flex;flex-direction:column;gap:6px}
.bk-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:9px 12px;min-height:52px;border:1.5px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.bk-opt:hover{border-color:var(--ink70)}
.bk-opt input{position:absolute;opacity:0;pointer-events:none}
.bk-opt .n{grid-row:span 2;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--ink45);width:28px;height:28px;display:grid;place-items:center;border:1.5px solid var(--line)}
.bk-opt .t{font-weight:800;font-size:15px;line-height:1.2}
.bk-opt .m{font-size:12.5px;color:var(--ink45);line-height:1.3}
.bk-opt:has(input:checked){border-color:var(--red);background:rgba(255,65,50,.08)}
.bk-opt:has(input:checked) .n{background:var(--red);border-color:var(--red);color:#fff}
.bk-opt:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.bk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.bk-days button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:58px;padding:4px 2px;background:transparent;border:1.5px solid var(--line);color:var(--ink);cursor:pointer;font-family:inherit;line-height:1.15;min-width:0;transition:border-color .2s,background .2s}
.bk-days button:hover{border-color:var(--ink70)}
.bk-days .w,.bk-days .m{font-size:10.5px;color:var(--ink45);text-transform:uppercase;white-space:nowrap}
.bk-days b{font-size:17px;font-weight:900}
.bk-days button[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.bk-days button[aria-pressed=true] .w,.bk-days button[aria-pressed=true] .m{color:#fff}
.bk-pax{display:flex;flex-direction:column;gap:6px}
.bk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;border-bottom:1.5px solid var(--line);padding-bottom:6px}
.bk-l{font-weight:700}
.bk-l small{font-weight:500;color:var(--ink45);font-size:12px;margin-inline-start:4px}
.bk-stp{display:inline-flex;align-items:center;border:1.5px solid var(--ink)}
.bk-stp button{width:44px;height:40px;background:transparent;border:0;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.bk-stp button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.bk-stp button:disabled{opacity:.3;cursor:not-allowed}
.bk-stp output{min-width:34px;text-align:center;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:15px}
.bk-seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--ink)}
.bk-seg button{min-height:40px;padding:0 10px;background:transparent;border:0;border-inline-start:1.5px solid var(--line);color:var(--ink70);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.bk-seg button:first-child{border-inline-start:0}
.bk-seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.bk-chk{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600}
.bk-chk input{width:20px;height:20px;accent-color:var(--red);flex:0 0 auto}
.bk-sum{display:flex;flex-direction:column;border-top:1.5px solid var(--line)}
.bk-sum>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1.5px solid var(--line)}
.bk-sum dt{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink45);padding-top:2px;flex:0 0 auto}
.bk-sum dd{font-weight:700;text-align:end;min-width:0}
.bk-note{margin-top:8px;font-size:12.5px;color:var(--ink45)}
.bk-done{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bk-done p{color:var(--ink70);font-size:14.5px;max-width:48ch}
.bk-done .bk-q{color:var(--ink);margin-bottom:0}
.bk-ok{width:44px;height:44px;display:grid;place-items:center;background:var(--red);color:#fff;font-size:22px;font-weight:900}
.bk-foot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1.5px solid var(--line)}
.bk-foot [data-next]{margin-inline-start:auto}
.bk-count{font-family:var(--mono);font-size:11.5px;line-height:1.3;color:var(--ink45);text-transform:uppercase;letter-spacing:.04em;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bk[data-step="5"] .bk-foot{display:none}

/* ---------- under the hood ---------- */
.lab-how{padding-top:clamp(56px,7vw,96px)}
.lab-incl{margin-top:18px}

/* ---------- Arabic ---------- */
html[dir=rtl] .lab-t{line-height:1.3}
html[dir=rtl] .xp-t{line-height:1.35}
html[dir=rtl] .xp--wide .xp-t{line-height:1.3}
html[dir=rtl] .xp-st,html[dir=rtl] .xp-hint,html[dir=rtl] .xp-btn{font-size:13.5px}
html[dir=rtl] .bk-q{line-height:1.5;font-size:18px}
html[dir=rtl] .bk-steps li{font-size:13px}
html[dir=rtl] .bk-sum dt,html[dir=rtl] .bk-count,html[dir=rtl] .bk-demo{font-size:13px}
html[dir=rtl] .bk-days .w,html[dir=rtl] .bk-days .m{font-size:11.5px}
html[dir=rtl] .xp-tags li{font-family:var(--mono);font-size:13px}   /* translated tags: Cairo, not JetBrains Mono */

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .lab-grid{grid-template-columns:minmax(0,1fr)}
  .xp--wide{display:flex}
  .xp--wide .xp-main{border-inline-end:0}
  .xp--wide .xp-info{border-top:1.5px solid var(--ink);padding:18px 18px 20px}
  .xp--wide .xp-n{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;line-height:1.5;letter-spacing:0;color:var(--red);-webkit-text-stroke:0;margin-bottom:0}
  .xp--wide .xp-t{font-size:clamp(20px,3vw,28px);line-height:1}
}
@media(max-width:640px){
  .xp-bar{padding-inline:12px}
  .xp-ctl .xp-btn{flex:1 1 auto}
  .xp-ctl .xp-in{flex-basis:100%}
  .xp-out{flex-basis:100%;margin-inline-start:0}
  .xp-info{padding:16px 14px 18px}
  /* palette: rows instead of columns */
  .xp-stage.pal{aspect-ratio:auto}
  .pal-sws{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(56px,auto)}
  .pal-sw{flex-direction:row;align-items:center;padding:8px 10px;gap:10px}
  .pal-meta{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 10px}
  .pal-hex{font-size:14px;min-height:40px}
  .pal-hsl{display:none}
  .pal-cr{min-width:84px;font-size:10.5px}
  /* booking: let the flow grow instead of squeezing into 16:10 */
  .xp-stage.bk{aspect-ratio:auto;min-height:420px}
  .bk-steps li span{display:none}
  .bk-steps li[aria-current=step] span{display:inline}
  .bk-body{padding:12px}
  .bk-days{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .bk-days button{min-height:56px}
  .bk-row--g{flex-wrap:wrap}
  .bk-seg button,.bk-stp button{min-height:44px;height:44px}
  .pal-lock{width:44px;height:44px}
}
@media(max-width:400px){
  .bk-days b{font-size:15px}
}
@media(hover:none){.xp-btn kbd{display:none}}
@media(prefers-reduced-motion:reduce){
  .lab-cur{animation:none}
  .xp-stage{animation:none!important}
  .bk-pane{animation:none}
}