/* PWP site header (redesign 2026-10-19, owner approved study 15): the console header from v2.css with the links
   Home · Store · Dashboard · Tutorials, the account key with the customer's full name, and the sign-in popover.
   Also: the dark theme palette (the Windows program's colours), dark scrollbars and the logo for each theme.
   Loaded on every customer page next to v2.css; pwp-header.js does the behaviour. */

/* the line under the logo is gone (owner: no «المعايرة مو تخمين») */
.brand .sub{display:none!important}

nav .nav-act,nav .top-act{position:relative}
.nav-links a.ph-dash{--i:var(--i-user)}
.nav-links a.ph-tut{--i:var(--i-doc)}

/* account key: the customer's full name when signed in */
nav .ph-key i.ph-av{font-style:normal;font:700 12.5px 'Changa','Saira Condensed',sans-serif;color:#fff}
nav .ph-key.ph-named{width:auto!important;padding:0 6px 0 12px!important;gap:8px;display:inline-flex!important;align-items:center;font:600 13.5px 'Changa','IBM Plex Sans',sans-serif;color:#E6E9EE!important;white-space:nowrap;max-width:260px}
[dir=ltr] nav .ph-key.ph-named{padding:0 12px 0 6px!important}
nav .ph-key.ph-named span{overflow:hidden;text-overflow:ellipsis}
nav .ph-key.ph-named i.ph-av{width:26px;height:26px;border-radius:7px;background:#C8141F;display:grid;place-items:center;flex:none}
@media (max-width:900px){nav .ph-key.ph-named span{display:none}nav .ph-key.ph-named{padding:0 6px!important}}
/* Marzouq's side panel open on the dashboard (marzouq-dock.js, html.mzd-open) takes 400px: the header packs tighter */
@media (min-width:1181px) and (max-width:1640px){html.mzd-open nav .ph-key.ph-named span{display:none}html.mzd-open nav .ph-key.ph-named{padding:0 6px!important}}
@media (min-width:1181px) and (max-width:1400px){html.mzd-open .nav-links a{padding:0 10px!important;gap:6px}html.mzd-open .nav-links a::before{display:none}}

/* the popover (sign-in, and the account menu) */
.ph-pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:70;width:340px;max-width:calc(100vw - 20px);box-sizing:border-box;background:#fff;color:#14171B;border:1px solid #C9CFD7;border-radius:8px;box-shadow:0 24px 50px -20px rgba(20,23,27,.45);padding:18px;text-align:start;font-family:'IBM Plex Sans','Noto Sans Arabic',system-ui,sans-serif;line-height:1.5;animation:phPop .3s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .ph-pop{font-family:'Noto Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
.ph-pop:before{content:"";position:absolute;top:-1px;inset-inline:0;height:3px;border-radius:8px 8px 0 0;background:linear-gradient(90deg,#C8141F 0 60%,#C9A24A 60% 70%,#14171B 70%)}
@keyframes phPop{from{opacity:0;transform:translateY(-6px)}}
.ph-pop *{box-sizing:border-box}
.ph-pop h4{font:700 1.15rem 'Changa','Saira Condensed',sans-serif;margin:2px 0 4px;color:#14171B}
.ph-pop p{font-size:.86rem;color:#5D6672;margin:0 0 14px;line-height:1.5}
.ph-pop label{display:block;font:600 .8rem 'Changa','IBM Plex Sans',sans-serif;color:#2A2F37;margin:0 0 6px}
.ph-pop input{width:100%;height:46px;margin:0;border:1.5px solid #B9C1CB;border-radius:8px;background:#fff;box-shadow:inset 0 2px 3px rgba(20,23,27,.07);padding:0 12px;font:500 16px 'IBM Plex Sans',sans-serif;color:#14171B;outline:none;direction:ltr;text-align:left}
.ph-pop input:focus{border-color:#C8141F;box-shadow:0 0 0 3px rgba(200,20,31,.18)}
.ph-logo{display:block;height:26px;width:auto;margin:2px 0 12px}
.ph-sso{display:grid;gap:8px;margin-bottom:12px}
.ph-sso button{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;width:100%;border-radius:8px;border:1px solid #C9CFD7;background:#fff;color:#14171B;font:600 .92rem 'Changa','IBM Plex Sans',sans-serif;cursor:pointer;box-shadow:0 2px 0 #B9C1CB}
.ph-sso button:hover{border-color:#8E97A3}
.ph-sso button.ap{background:#14171B;color:#fff;border-color:#000;box-shadow:0 2px 0 #000}
.ph-sso button.app svg{color:#C8141F}
.ph-sso button:disabled{opacity:.6;cursor:default}
.ph-getapp{display:block;text-align:center;margin:-2px 0 10px;font-size:.78rem;color:#5D6672;text-decoration:none}
.ph-getapp b{color:#14171B;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ph-getapp:hover b{color:#C8141F}
.ph-or{display:flex;align-items:center;gap:10px;margin:4px 0 12px;color:#8A94A1;font-size:.78rem}
.ph-or:before,.ph-or:after{content:"";flex:1;height:1px;background:#DDE2E8}
.ph-pw{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.ph-pw b{font-size:.78rem;color:#C8141F;cursor:pointer}
.ph-code{display:flex;gap:8px;direction:ltr;justify-content:center;margin-bottom:6px}
.ph-pop .ph-code input{width:42px;text-align:center;font-size:20px;font-weight:700;padding:0}
.ph-go{width:100%;min-height:44px;margin-top:12px;border-radius:8px;border:1px solid #B01019;background:#C8141F;color:#fff;font:700 .98rem 'Changa','IBM Plex Sans',sans-serif;cursor:pointer;box-shadow:0 3px 0 #8E0E16;display:flex;align-items:center;justify-content:center;gap:8px}
.ph-go:active{transform:translateY(2px);box-shadow:0 1px 0 #8E0E16}
.ph-go:disabled{opacity:.65;cursor:default}
.ph-sm{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:.8rem;color:#5D6672}
.ph-sm b{color:#14171B;cursor:pointer;font-weight:600}
.ph-sm a{color:#5D6672;text-decoration:underline;text-underline-offset:3px}
.ph-note{font-size:.78rem!important;color:#5D6672;text-align:center;margin:-4px 0 10px!important}
.ph-err{display:none;margin:0 0 12px;padding:9px 11px;border-radius:8px;background:#FDEEEE;border:1px solid #F1C7C9;color:#A00F18;font-size:.84rem;line-height:1.5}
.ph-err.ok{background:#EAF6EF;border-color:#BFE3CD;color:#1F7A43}
.ph-err:not(:empty){display:block}
.ph-menu{width:260px;padding:8px}
.ph-menu .ph-mh{display:flex;align-items:center;gap:10px;padding:10px 8px 12px;border-bottom:1px solid #DDE2E8;margin-bottom:6px;min-width:0}
.ph-menu .ph-mh>div{min-width:0}
.ph-menu .ph-mh b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-menu .ph-mh i{width:36px;height:36px;border-radius:8px;background:#14171B;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.ph-menu .ph-mh small{display:block;color:#5D6672;font:500 .75rem 'IBM Plex Mono',monospace;direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-menu a,.ph-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:10px;border-radius:6px;font:500 .92rem 'Changa','IBM Plex Sans',sans-serif;text-align:start;color:#14171B;text-decoration:none;background:none;border:0;cursor:pointer}
.ph-menu a:hover,.ph-menu button:hover{background:#EEF1F4}
.ph-menu .ph-out{color:#A00F18}
@media (max-width:900px){.ph-pop{position:fixed;top:120px;inset-inline:10px;width:auto;max-height:calc(100vh - 130px);overflow:auto}}

/* ── dark theme (pages that offer it: the dashboard) — the Windows program's palette (PWP مكتب, theme.css) ──
   Turned on by html.dk (dashboard.js) or html[data-theme=dark]. Tokens for page styles: --w-* */
:root{--w-bg:#F3F4F6;--w-side:#FAFAFB;--w-sf:#FFFFFF;--w-sf2:#F4F5F7;--w-bd:#E1E3E7;--w-inBd:#C3C7CD;--w-tx:#15171A;--w-tx2:#3F434A;--w-mu:#5A5E66;--w-mu2:#7A7E86;--w-on:#E9EBEE;
  --w-blue:#1F65B5;--w-blueBg:#EBF2FA;--w-purple:#6A4FD6;--w-purpleBg:#EFEBFD;--w-gold:#8A6414;--w-goldBg:#FBF5E6;--w-green:#1F7A43;--w-greenBg:#EAF6EF;--w-amber:#8A5A0E;--w-amberBg:#FBF1DF;
  --w-red:#B42A2F;--w-redBg:#FDEEEE;--w-redBd:#F1C7C9;--w-brand:#C8141F;--w-ctl:#FFFFFF;--w-ctlBd:#BBC0C8;--w-ctlHv:#EEF1F5;--w-well:#FFFFFF}
html.dk,html[data-theme=dark]{--w-bg:#0E0F11;--w-side:#121316;--w-sf:#16171A;--w-sf2:#1C1D21;--w-bd:#2C2E33;--w-inBd:#3A3D43;--w-tx:#ECECEE;--w-tx2:#B9BBC0;--w-mu:#9A9DA3;--w-mu2:#7C7F86;--w-on:#26282C;
  --w-blue:#6AA9E0;--w-blueBg:#141B23;--w-purple:#A898E6;--w-purpleBg:#1D1A2A;--w-gold:#D4A24C;--w-goldBg:#1D190F;--w-green:#5CC487;--w-greenBg:#13201A;--w-amber:#E5A44C;--w-amberBg:#2A1C0F;
  --w-red:#FF8A8E;--w-redBg:#2A1416;--w-redBd:#5A2226;--w-brand:#D7262F;--w-ctl:#23252A;--w-ctlBd:#474A52;--w-ctlHv:#2D3036;--w-well:#0B0C0E;
  color-scheme:dark;scrollbar-color:#2C2E33 #0E0F11}
html.dk *,html[data-theme=dark] *{scrollbar-color:#2C2E33 transparent}
html.dk ::-webkit-scrollbar,html[data-theme=dark] ::-webkit-scrollbar{width:10px;height:10px;background:#0E0F11}
html.dk ::-webkit-scrollbar-track,html[data-theme=dark] ::-webkit-scrollbar-track{background:#0E0F11}
html.dk ::-webkit-scrollbar-thumb,html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#2C2E33;border:2px solid #0E0F11;border-radius:6px}
html.dk ::-webkit-scrollbar-thumb:hover,html[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#3A3D43}
html.dk ::-webkit-scrollbar-corner,html[data-theme=dark] ::-webkit-scrollbar-corner{background:#0E0F11}
/* the right PWP logo for the theme: ink on light, light on dark (use both images with these classes) */
.lg-light{display:none!important}
html.dk .lg-ink,html[data-theme=dark] .lg-ink{display:none!important}
html.dk .lg-light,html[data-theme=dark] .lg-light{display:block!important}
/* the popover follows the theme */
html.dk .ph-pop,html[data-theme=dark] .ph-pop{background:#16171A;color:#ECECEE;border-color:#2C2E33;box-shadow:0 0 40px rgba(0,0,0,.55)}
html.dk .ph-pop h4,html[data-theme=dark] .ph-pop h4,html.dk .ph-menu a,html[data-theme=dark] .ph-menu a,html.dk .ph-menu button,html[data-theme=dark] .ph-menu button,html.dk .ph-sm b,html[data-theme=dark] .ph-sm b,html.dk .ph-getapp b,html[data-theme=dark] .ph-getapp b{color:#ECECEE}
html.dk .ph-pop p,html[data-theme=dark] .ph-pop p,html.dk .ph-pop label,html[data-theme=dark] .ph-pop label,html.dk .ph-sm,html[data-theme=dark] .ph-sm,html.dk .ph-sm a,html[data-theme=dark] .ph-sm a,html.dk .ph-getapp,html[data-theme=dark] .ph-getapp,html.dk .ph-menu .ph-mh small,html[data-theme=dark] .ph-menu .ph-mh small{color:#9A9DA3}
html.dk .ph-pop input,html[data-theme=dark] .ph-pop input{background:#0B0C0E;border-color:#474A52;color:#ECECEE;box-shadow:none}
html.dk .ph-sso button,html[data-theme=dark] .ph-sso button{background:#23252A;border-color:#474A52;color:#ECECEE;box-shadow:0 2px 0 #0A0B0D}
html.dk .ph-sso button.ap,html[data-theme=dark] .ph-sso button.ap{background:#ECECEE;color:#0E0F11;border-color:#ECECEE}
html.dk .ph-or:before,html[data-theme=dark] .ph-or:before,html.dk .ph-or:after,html[data-theme=dark] .ph-or:after,html.dk .ph-menu .ph-mh,html[data-theme=dark] .ph-menu .ph-mh{background:#2C2E33;border-color:#2C2E33}
html.dk .ph-menu .ph-mh,html[data-theme=dark] .ph-menu .ph-mh{background:none}
html.dk .ph-menu a:hover,html[data-theme=dark] .ph-menu a:hover,html.dk .ph-menu button:hover,html[data-theme=dark] .ph-menu button:hover{background:#1C1D21}
html.dk .ph-menu .ph-out,html[data-theme=dark] .ph-menu .ph-out{color:#FF8A8E}
html.dk .ph-err,html[data-theme=dark] .ph-err{background:#2A1416;border-color:#5A2226;color:#FF8A8E}
/* Marzouq's chat stays light in every theme (owner 2026-10-19) */
.pwp-panel,.mzd{color-scheme:light}
/* pages whose own CSS has no layout for the nav's inner row (app.html, device.html) get the same one as the others */
:where(nav.top > .nav-in){display:flex;align-items:center;gap:28px;max-width:1180px;width:100%;margin:0 auto;padding:0 28px;box-sizing:border-box}
@media (max-width:640px){:where(nav.top > .nav-in){padding:0 16px}}
nav.top:has(> .nav-in){height:auto;padding:0}
/* one account (owner-approved plan 2026-10-19): the way this device signed in before, big; «طريقة ثانية»; the warning;
   the short line under Apple */
.ph-sso.ph-one{margin-bottom:6px}
.ph-sso button.ph-big{height:54px;font-size:1rem}
.ph-was{font:600 .86rem 'Changa','IBM Plex Sans',sans-serif;color:#14171B;margin:0 0 10px}
.ph-pop p.ph-aph{font-size:.76rem;color:#5D6672;margin:-2px 0 2px;text-align:center}
.ph-alt{justify-content:center;margin-top:8px}
.ph-alt b{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ph-pop p.ph-warn{margin:0 0 12px;padding:8px 10px;border-radius:8px;background:#FBF1DF;border:1px solid #EBCF9A;color:#6B4708;font-size:.8rem;line-height:1.5}
html.dk .ph-was,html[data-theme=dark] .ph-was{color:#ECECEE}
html.dk .ph-pop p.ph-aph,html[data-theme=dark] .ph-pop p.ph-aph{color:#9A9DA3}
html.dk .ph-pop p.ph-warn,html[data-theme=dark] .ph-pop p.ph-warn{background:#2A1C0F;border-color:#5A3F14;color:#E5A44C}