/* UI/UX layer — loaded last. Tokens first, then navigation, orientation, demo ergonomics, theme. */
:root{--tx2:#c3c9d8;--ink:#0c0f15;--ink2:#0e1620;--nav:rgba(10,12,17,.82);--shadow:0 14px 44px rgba(0,0,0,.4);--ease:cubic-bezier(.2,.7,.2,1)}
:root[data-theme=light]{--bg:#f2f4f8;--p1:#ffffff;--p2:#e8ecf3;--bd:#d2d9e5;--tx:#131826;--tx2:#38425a;--mu:#566077;--am:#b45f00;--cy:#0a7396;--gr:#13803f;--rd:#c0392b;--ink:#eef1f7;--ink2:#eaf1f8;--nav:rgba(255,255,255,.86);--shadow:0 14px 44px rgba(20,30,60,.14);color-scheme:light}

/* ===== navigation: one calm bar; the sections live in a menu with a live "you are here" label ===== */
#nav{gap:10px}
.links{display:none!important}
#menuBtn{display:inline-flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;max-width:min(44vw,400px)}
#menuBtn em{font-style:normal;opacity:.7}
#menuBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#prog{margin-inline-start:auto}
#trbtn{border-color:var(--cy)}
#trbtn:hover{background:var(--cy);color:#04141a}
#theme{padding-inline:11px;font-size:15px;line-height:1}
#menu{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:55;width:min(780px,calc(100vw - 20px));max-height:calc(100vh - 80px);overflow:auto;background:var(--p1);border:1px solid var(--bd);border-radius:18px;box-shadow:var(--shadow);padding:10px;animation:menuIn .22s var(--ease)}
#menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mi{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;transition:background .15s}
.mi:hover{background:var(--p2)}
.mi.on{background:var(--p2);box-shadow:inset 3px 0 0 var(--am)}
[dir=rtl] .mi.on{box-shadow:inset -3px 0 0 var(--am)}
.mi i{font:800 12px Sora,sans-serif;font-style:normal;color:var(--am);min-width:22px}
.mi span{flex:1;font-size:14px;line-height:1.3}
.mi em{font:600 12px ui-monospace,Consolas,monospace;font-style:normal;color:var(--mu)}
.mi em.ok{color:var(--gr);font-size:14px}
.mf{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--bd)}
.mf button{background:var(--p2);color:var(--tx);border:1px solid var(--bd);border-radius:99px;padding:8px 14px;font:600 13px Cairo,Sora,sans-serif;cursor:pointer}
.mf button:hover{border-color:var(--am)}

/* ===== orientation ===== */
.path{padding:34px 0 0}
.paths{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{display:flex;flex-direction:column;gap:6px;text-align:start;background:var(--p1);border:1px solid var(--bd);border-radius:var(--r);padding:20px;color:inherit;font:inherit;cursor:pointer;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.pcard:hover{transform:translateY(-4px);border-color:var(--am);box-shadow:var(--shadow)}
.pcard i{font-style:normal;font-size:26px;line-height:1}
.pcard h3{font-size:17px;margin-top:6px}
.pcard p{margin:0;flex:1;color:var(--mu);font-size:14px;line-height:1.5}
.pcard small{color:var(--am);font-weight:600;font-size:12.5px}
.nextsec{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:40px 0 0;padding:18px 22px;border:1px solid var(--bd);border-radius:var(--r);background:var(--p1);transition:border-color .2s,transform .25s var(--ease)}
.nextsec:hover{border-color:var(--am);transform:translateX(4px)}
[dir=rtl] .nextsec:hover{transform:translateX(-4px)}
.nextsec small{display:block;color:var(--mu);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
[dir=rtl] .nextsec small{letter-spacing:0;font-size:13px}
.nextsec b{font-size:17px}
.nextsec i{font-style:normal;font-size:22px;color:var(--am)}
[dir=rtl] .nextsec i{transform:scaleX(-1)}
main .sec:not(.path){position:relative}
main .sec:not(.path)::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--bd) 20%,var(--bd) 80%,transparent)}
.lead{max-width:62ch;font-size:17.5px;line-height:1.65}
.sh h2{text-wrap:balance}
.foot-links{display:flex;justify-content:center;gap:12px;margin-top:18px}
.foot-links a,.foot-links button{background:none;border:1px solid var(--bd);border-radius:99px;padding:8px 16px;color:var(--mu);font:600 13px Cairo,Sora,sans-serif;cursor:pointer}
.foot-links a:hover,.foot-links button:hover{border-color:var(--am);color:var(--tx)}

/* hero: one primary action, one secondary, one text link */
.hero .btn.alt{border-color:var(--cy);color:#d9f4ff}
.hero .btn.alt:hover{background:var(--cy);color:#04141a}
.lnk{align-self:center;color:var(--mu);font-size:14px;padding:8px 2px;border-bottom:1px solid transparent;transition:.2s}
.lnk:hover{color:var(--tx);border-color:var(--am)}
.hero{--tx:#e8eaf0;--mu:#9aa3b8;--am:#ffb454;--bd:#252b3b;--p2:#171b26}

/* ===== demo ergonomics ===== */
.cv:not(.ready){background:#0a0c11}
.cv:not(.ready)::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%) 0 0/220% 100%;animation:shim 1.5s linear infinite}
.cv:not(.ready)::after{content:"Loading 3D scene…";position:absolute;inset:0;z-index:3;display:grid;place-items:center;color:#9aa3b8;font-size:13px}
[dir=rtl] .cv:not(.ready)::after{content:"جارٍ تحميل المشهد…"}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.view>.miss{margin:14px 0 0}
.mapbox canvas,.bars{background:#11141c}
.ctl>.rst{float:inline-end;margin:-2px 0 6px 8px;background:var(--p2);color:var(--mu);border:1px solid var(--bd);border-radius:99px;padding:4px 11px;font:600 12px Cairo,Sora,sans-serif;cursor:pointer}
.ctl>.rst:hover{color:var(--tx);border-color:var(--am)}
.ctl>.rst+.grp{margin-top:0}
.grp{padding-top:10px;border-top:1px solid var(--bd)}
.grp:first-child,.ctl>.rst+.grp{border-top:0;padding-top:0}
.btn{transition:transform .15s var(--ease),border-color .2s,background .2s}
.btn:active,.seg button:active,.pill:active{transform:scale(.97)}
.card{transition:border-color .2s,transform .25s var(--ease)}
.card:hover{border-color:var(--bd);transform:translateY(-2px)}

/* glossary tips: dotted term, explanation on hover / focus (works with keyboard) */
.tt{position:relative;border-bottom:1px dotted var(--cy);cursor:help;color:var(--tx)}
.tt::after{content:attr(data-tip);display:none;position:absolute;z-index:30;inset-inline-start:0;bottom:calc(100% + 8px);width:max-content;max-width:min(280px,80vw);padding:10px 13px;border-radius:12px;background:var(--p2);color:var(--tx);border:1px solid var(--bd);box-shadow:var(--shadow);font:400 13px/1.5 Sora,Cairo,sans-serif;pointer-events:none;text-transform:none;letter-spacing:0;white-space:normal}
[dir=rtl] .tt::after{content:attr(data-tip-ar);font-family:Cairo,sans-serif}
.tt:hover::after,.tt:focus::after{display:block;animation:tipIn .15s var(--ease)}
@keyframes tipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== phone / tablet: the 3D view stays pinned while you move sliders ===== */
@media(max-width:980px){
  .paths{grid-template-columns:1fr 1fr}
  .mg{grid-template-columns:1fr}
  .demo:not(.focus) .view{display:contents}
  .demo:not(.focus):not(.solo) .cv{position:sticky;top:62px;z-index:6;aspect-ratio:auto;height:clamp(210px,38vh,340px);box-shadow:0 12px 26px rgba(0,0,0,.4)}
  .roles{grid-template-columns:repeat(3,1fr)}
  .view>.miss{margin:0}
}
@media(max-width:760px){
  #tbtn,#theme{display:none}
  #trbtn{font-size:0;padding-inline:11px}
  #trbtn::before{content:"🎓";font-size:16px}
  #menuBtn{max-width:40vw}
  .roles{grid-template-columns:1fr}
}
@media(max-width:560px){
  .paths{grid-template-columns:1fr}
  .pcard{padding:16px}
  .nextsec{padding:14px 16px}
  .lead{font-size:16.5px}
}

/* ===== light theme (hero stays a dark studio; viewports stay dark so lighting reads true) ===== */
:root[data-theme=light] body{background:var(--bg)}
:root[data-theme=light] .btn{background:var(--p1);color:var(--tx)}
:root[data-theme=light] .hero .btn{background:rgba(23,27,38,.7);color:#e8eaf0}
:root[data-theme=light] .hero .btn.pri{background:var(--am);color:#1a1205}
:root[data-theme=light] .btn.pri,:root[data-theme=light] .seg button.on,:root[data-theme=light] .chips button.on,:root[data-theme=light] .links a.on,:root[data-theme=light] .tr-chips button.on,:root[data-theme=light] .skip{background:var(--am);color:#fff;border-color:var(--am)}
:root[data-theme=light] .tabs button.on{background:var(--cy);color:#fff;border-color:var(--cy)}
:root[data-theme=light] .pill[aria-pressed=true]{background:var(--cy);color:#fff}
:root[data-theme=light] #trbtn:hover{color:#fff}
:root[data-theme=light] .cmpl{box-shadow:0 0 14px rgba(0,0,0,.5)}
:root[data-theme=light] .cue{background:var(--ink2)}
:root[data-theme=light] #dock{background:rgba(255,255,255,.95)}
:root[data-theme=light] .tr-h{background:rgba(255,255,255,.94)}
:root[data-theme=light] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#cdd5e3,#b3bdd0)}
:root[data-theme=light] input[type=range]::-moz-range-track{background:#cdd5e3}
:root[data-theme=light] details.code pre{background:#0a0d12}
:root[data-theme=light] .miss li i{border-color:#a9b4c8}
:root[data-theme=light] .qq button.ok,:root[data-theme=light] .tr-opts button.ok{background:rgba(19,128,63,.1)}
:root[data-theme=light] .qq button.no,:root[data-theme=light] .tr-opts button.no{background:rgba(192,57,43,.08)}
:root[data-theme=light] .rem{background:linear-gradient(90deg,rgba(180,95,0,.1),transparent)}
:root[data-theme=light] [dir=rtl] .rem{background:linear-gradient(270deg,rgba(180,95,0,.1),transparent)}
:root[data-theme=light] .pcard:hover,:root[data-theme=light] .card:hover{border-color:var(--am)}
:root[data-theme=light] .tag,:root[data-theme=light] .fsb{color:#e8eaf0}
:root[data-theme=light] .hero .veil{background:linear-gradient(90deg,rgba(10,12,17,.88) 0%,rgba(10,12,17,.45) 42%,transparent 70%),linear-gradient(0deg,var(--bg) 0%,transparent 28%)}
:root[data-theme=light] [dir=rtl] .hero .veil{background:linear-gradient(270deg,rgba(10,12,17,.88) 0%,rgba(10,12,17,.45) 42%,transparent 70%),linear-gradient(0deg,var(--bg) 0%,transparent 28%)}
@media(prefers-reduced-motion:reduce){#menu{animation:none}.cv:not(.ready)::before{animation:none}.pcard,.nextsec,.card{transition:none}}