/* Legal pages (privacy.html, terms.html, data-deletion.html). Static, no JS, no third-party requests.
   Each page holds the Arabic version (#ar, first) and the full English version (#en). With no fragment both show,
   Arabic first; #en (or any anchor inside it) shows English only, #ar Arabic only (CSS :has + :target). A browser
   without :has simply shows both. Colours follow the app icon: gold on deep navy. */
:root{--bg:#070d1c;--bg2:#0b1430;--ink:#f4efe4;--body:#d8dbe8;--mut:#9aa3c2;--gold:#e7c07c;--gold2:#c79a55;--cream:#f6ead0;
--line:rgba(255,255,255,.1);--card:rgba(255,255,255,.035);--card2:rgba(231,192,124,.07);
--ar:'IBM Plex Sans Arabic','Noto Sans Arabic','Geeza Pro',Tahoma,system-ui,sans-serif;
--kufi:'Noto Kufi Arabic','IBM Plex Sans Arabic','Geeza Pro',sans-serif;
--lat:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;--head:'Sora','IBM Plex Sans Arabic',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{min-height:100vh;color:var(--body);font:400 17px/1.95 var(--ar);-webkit-font-smoothing:antialiased;overflow-x:clip;
background:radial-gradient(60rem 36rem at 85% -8%,rgba(231,192,124,.10),transparent 70%),radial-gradient(50rem 40rem at -10% 10%,rgba(108,75,255,.13),transparent 70%),linear-gradient(#060b18,#0a1128 50%,#0d1230)}
[lang=en]{font-family:var(--lat);font-size:16.5px;line-height:1.75}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(231,192,124,.45)}
a:hover{text-decoration-color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
strong,b{color:var(--ink);font-weight:600}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--gold);color:#111;padding:8px 14px;border-radius:8px;z-index:9}
.skip:focus{top:12px}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 18px/1 var(--kufi)}
.brand img{width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 1px rgba(231,192,124,.25),0 6px 18px -6px rgba(0,0,0,.7)}
.brand .en-name{display:none;font:600 17px/1 var(--head);letter-spacing:-.01em}
body:has(#en:target,#en :target) .brand .ar-name{display:none}
body:has(#en:target,#en :target) .brand .en-name{display:inline}
.brand b{font:600 10px/1 var(--head);letter-spacing:.14em;color:var(--gold);border:1px solid rgba(231,192,124,.5);border-radius:99px;padding:4px 7px}
.sw{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.04)}
.sw a{min-width:64px;min-height:36px;display:grid;place-items:center;padding:0 14px;border-radius:99px;color:var(--mut);text-decoration:none;font:600 14px/1 var(--ar)}
.sw a[lang=en]{font-family:var(--head);font-size:13px}
.sw a:hover{color:var(--ink)}
.sw .sw-ar,body:has(#en:target,#en :target) .sw-en{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(231,192,124,.35)}
body:has(#en:target,#en :target) .sw-ar{background:none;color:var(--mut);box-shadow:none}

/* one language at a time once chosen */
body:has(#en:target,#en :target) #ar,body:has(#ar:target,#ar :target) #en{display:none}
body:has(#en:target,#en :target) .top,body:has(#en:target,#en :target) .foot{direction:ltr}
body:has(#en:target,#en :target) .langsep{display:none}

/* document */
.doc{padding:8px 0 40px;scroll-margin-top:0}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 22px}
.tabs a{padding:7px 14px;border:1px solid var(--line);border-radius:99px;color:var(--mut);text-decoration:none;font-size:14px;line-height:1.4;background:rgba(255,255,255,.025)}
.tabs a:hover{color:var(--ink);border-color:rgba(231,192,124,.4)}
.tabs a[aria-current=page]{color:var(--ink);border-color:rgba(231,192,124,.55);background:var(--card2)}
.hd{padding:10px 0 24px;border-bottom:1px solid var(--line);margin-bottom:28px}
.kicker{font-size:13.5px;color:var(--gold);letter-spacing:.02em;margin-bottom:6px}
[lang=en] .kicker{font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
h1{font:700 clamp(30px,7vw,46px)/1.25 var(--kufi);color:var(--ink);letter-spacing:0}
[lang=en] h1{font:600 clamp(30px,6.4vw,44px)/1.15 var(--head);letter-spacing:-.025em}
.meta{margin-top:12px;color:var(--mut);font-size:14.5px;line-height:1.8}
.meta span{white-space:nowrap}
.meta span+span::before{content:"·";margin-inline:8px;color:rgba(255,255,255,.3)}
.lede{margin-top:14px;max-width:46em;font-size:18px;color:var(--ink);opacity:.92}
[lang=en] .lede{font-size:17px}

.grid{display:grid;gap:28px}
.toc{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:12px 18px}
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;font:600 14px/1.4 var(--ar);color:var(--gold)}
[lang=en] .toc summary{font-family:var(--head);letter-spacing:.1em;text-transform:uppercase;font-size:11.5px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:8px;height:8px;margin-inline-end:4px;border:solid var(--gold);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.toc details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.toc details[open] summary{margin-bottom:6px}
.toc summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.toc ol{list-style:none;padding:0;display:grid;gap:2px;counter-reset:t;font-size:14.5px;line-height:1.55}
.toc li{counter-increment:t;display:flex;gap:8px}
.toc li::before{content:counter(t);min-width:1.6em;color:var(--mut);font:500 12.5px/1.9 var(--head)}
.toc a{color:var(--body);text-decoration:none;padding:3px 0}
.toc a:hover{color:var(--gold)}
@media(min-width:720px){.toc ol{grid-template-columns:1fr 1fr;column-gap:24px}}
@media(min-width:1040px){
  .grid{grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
  .toc{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding:16px 18px}
  .toc ol{grid-template-columns:1fr}
}
/* wide screens: the contents list is a sidebar, always open (where ::details-content exists; elsewhere it stays a
   normal open/close list) */
@supports selector(details::details-content){
  @media(min-width:1040px){
    .toc details::details-content{content-visibility:visible;display:block}
    .toc summary{cursor:default;margin-bottom:6px}
    .toc summary::after{display:none}
  }
}
.body{max-width:46em;min-width:0}
.body section{padding-top:6px;margin-bottom:34px;scroll-margin-top:16px}
h2{font:600 21px/1.5 var(--ar);color:var(--ink);margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
[lang=en] h2{font:600 19.5px/1.4 var(--head);letter-spacing:-.01em}
h2 .n{font:600 13px/1 var(--head);color:var(--gold);min-width:1.6em}
h3{font:600 17px/1.6 var(--ar);color:var(--ink);margin:18px 0 6px}
[lang=en] h3{font:600 16px/1.5 var(--head)}
p+p,p+ul,ul+p,p+ol,ol+p,ul+h3,p+h3,ol+h3,dl+p,p+dl{margin-top:10px}
ul,ol{padding-inline-start:1.3em}
li{margin:5px 0}
li::marker{color:var(--gold2)}
.note{margin-top:12px;padding:12px 16px;border-inline-start:3px solid var(--gold2);background:var(--card);border-radius:10px;font-size:15.5px}
.box{border:1px solid rgba(231,192,124,.3);background:linear-gradient(180deg,rgba(231,192,124,.08),rgba(231,192,124,.025));border-radius:18px;padding:18px 20px;margin-bottom:30px}
.box h2{font-size:17px;margin-bottom:6px}
[lang=en] .box h2{font-size:16px}
.box ul{margin-top:4px}
.mail{direction:ltr;unicode-bidi:isolate;font:600 .97em var(--head);white-space:nowrap}
.code{direction:ltr;unicode-bidi:isolate;font:500 .88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cream);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.path{color:var(--ink);font-weight:600}

/* definition rows (retention, sharing) */
.rows{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:12px;background:var(--card)}
.rows>div{display:grid;gap:4px;padding:12px 16px;border-top:1px solid var(--line)}
.rows>div:first-child{border-top:0}
.rows dt{color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.6}
.rows dd{margin:0;font-size:15.5px;line-height:1.75}
@media(min-width:720px){.rows>div{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:18px}}

.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:12px;margin-top:10px}
.steps>li{counter-increment:s;position:relative;padding:14px 16px;padding-inline-start:56px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:0}
.steps>li::before{content:counter(s);position:absolute;inset-inline-start:16px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--head);color:#1a1405;background:linear-gradient(180deg,#f2d49b,#c79a55)}
.contact{border:1px solid rgba(231,192,124,.3);border-radius:16px;padding:16px 18px;background:var(--card2)}
.contact p{margin:0}

.langsep{display:flex;align-items:center;gap:14px;color:var(--mut);font:600 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;margin:12px 0 4px}
.langsep::before,.langsep::after{content:"";flex:1;height:1px;background:var(--line)}

.foot{border-top:1px solid var(--line);padding:20px 0 max(28px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;color:var(--mut);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--mut);text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot .copy{font-family:var(--head);font-size:12.5px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  body{background:#fff;color:#111;font-size:11.5pt}
  .top,.tabs,.toc,.skip,.langsep,.foot nav{display:none!important}
  #ar,#en{display:block!important}
  #en{break-before:page}
  h1,h2,h3,strong,b,.rows dt{color:#000}
  a{color:#000}
  .box,.rows,.steps>li,.contact,.note{background:none;border-color:#bbb}
  .steps>li::before{color:#000;background:#eee}
  .grid{display:block}
}