/* واحة التفكر: shared look for the hub, video, field-trial plan and study pages.
   Night and gold from the experiences; warm paper for long reading. */
:root{
  color-scheme:light;
  --bg:#FAF7F0; --surface:#FFFFFF; --sunk:#F2EDE2; --ink:#1B2030; --dim:#545C70; --faint:#7A8194;
  --line:#E4DCCB; --line2:#D6CCB7;
  --accent:#8A5A00; --accent-soft:rgba(186,128,16,.12); --gold:#E9B44C;
  --night:#0B1430; --night2:#16254A; --night-ink:#F6F2E9; --night-dim:#B9C2D3;
  --teal:#0F7C73; --rose:#B4344A; --ok:#1E7A4C; --warn:#9A5B00;
  --display:'Reem Kufi','IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --verse:'Amiri','Traditional Arabic','Times New Roman',serif;
  --latin:'Space Grotesk','IBM Plex Sans Arabic',system-ui,sans-serif;
  /* the study's diagrams read these */
  --cds-chart-axis:#8C8577; --cds-chart-categorical-1:#B07A12; --cds-text-primary:var(--ink); --cds-text-secondary:var(--dim); --cds-chart-reference-tint:rgba(176,122,18,.08);
  --shadow:0 1px 2px rgba(27,32,48,.06),0 8px 24px rgba(27,32,48,.06);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#080E21; --surface:#101A35; --sunk:#0C1530; --ink:#F3EFE6; --dim:#B6BFD1; --faint:#8C97AD;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.2);
  --accent:#F6CB63; --accent-soft:rgba(246,203,99,.12); --gold:#F6CB63;
  --night:#060A18; --night2:#0F1C3C;
  --teal:#45D3C7; --rose:#FF8497; --ok:#83E6AE; --warn:#FFC266;
  --cds-chart-axis:#8D97AE; --cds-chart-categorical-1:#F6CB63; --cds-chart-reference-tint:rgba(246,203,99,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080E21; --surface:#101A35; --sunk:#0C1530; --ink:#F3EFE6; --dim:#B6BFD1; --faint:#8C97AD;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.2);
  --accent:#F6CB63; --accent-soft:rgba(246,203,99,.12); --gold:#F6CB63;
  --night:#060A18; --night2:#0F1C3C;
  --teal:#45D3C7; --rose:#FF8497; --ok:#83E6AE; --warn:#FFC266;
  --cds-chart-axis:#8D97AE; --cds-chart-categorical-1:#F6CB63; --cds-chart-reference-tint:rgba(246,203,99,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:76px }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.85 var(--body); text-rendering:optimizeLegibility }
img,svg,video{ max-width:100% }
a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px }
[hidden]{ display:none!important }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)) }
.skip{ position:absolute; inset-inline-start:12px; top:-60px; z-index:50; background:var(--gold); color:#1D1606; padding:8px 14px; border-radius:8px; font-weight:700 }
.skip:focus{ top:12px }

/* ---------- top bar ---------- */
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--night) }
.bar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--night); color:var(--night-ink); box-shadow:0 1px 0 rgba(255,255,255,.08) }
.bar .wrap{ display:flex; align-items:center; gap:14px; min-height:60px }
.logo{ display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; font:700 1.08rem/1 var(--display); white-space:nowrap; flex:none }
.logo svg{ width:26px; height:26px; fill:#F6CB63; filter:drop-shadow(0 0 8px rgba(246,203,99,.55)) }
.nav{ flex:1; min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; justify-content:flex-start }
.nav::-webkit-scrollbar{ display:none }
.nav a{ flex:none; color:var(--night-dim); text-decoration:none; font:600 .92rem/1 var(--body); padding:10px 12px; border-radius:999px; white-space:nowrap }
.nav a:hover{ color:var(--night-ink); background:rgba(255,255,255,.07) }
.nav a[aria-current="page"]{ color:#F6CB63; background:rgba(246,203,99,.13) }
.nav a:first-child{ margin-inline-start:auto }
@media (max-width:760px){ .logo span{ display:none } .bar .wrap{ gap:8px } .nav a:first-child{ margin-inline-start:0 } }

/* ---------- page head band ---------- */
.band{ background:radial-gradient(120% 140% at 80% 0%, var(--night2) 0%, var(--night) 60%); color:var(--night-ink); padding-block:44px 40px; position:relative; overflow:hidden }
.band::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(1.4px 1.4px at 12% 30%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 28% 70%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 46% 22%, #F6CB63 50%, transparent 51%), radial-gradient(1.1px 1.1px at 64% 58%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 86% 36%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 84%, #fff 50%, transparent 51%) }
.band .wrap{ position:relative; z-index:1 }
.kicker{ display:inline-flex; align-items:center; gap:8px; font:600 .85rem/1 var(--body); color:#F6CB63; letter-spacing:.02em; margin:0 0 14px }
.band h1{ font:700 clamp(1.9rem, 1.2rem + 2.6vw, 3rem)/1.3 var(--display); margin:0 0 12px; text-wrap:balance }
.band .lede{ font-size:1.08rem; color:var(--night-dim); max-width:62ch; margin:0 }
.meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--night-ink); font:500 .85rem/1.2 var(--body) }
.chip.warn{ background:rgba(246,203,99,.16); color:#F6CB63 }

/* ---------- long reading ---------- */
main{ display:block }
.prose{ max-width:72ch; min-width:0 }
.prose h2{ font:700 1.6rem/1.45 var(--display); margin:2.4em 0 .6em; text-wrap:balance; scroll-margin-top:84px }
.prose h3{ font:700 1.18rem/1.5 var(--body); margin:1.9em 0 .4em; text-wrap:balance; scroll-margin-top:84px }
.prose p{ margin:.7em 0 }
.prose ul,.prose ol{ padding-inline-start:1.4em; margin:.7em 0 }
.prose li{ margin:.3em 0 }
.prose li > p{ margin:.2em 0 }
.prose strong{ font-weight:700 }
.prose code{ font:500 .88em/1 ui-monospace,Menlo,Consolas,monospace; background:var(--sunk); padding:.12em .4em; border-radius:5px; direction:ltr; unicode-bidi:isolate }
.prose blockquote{ margin:1em 0; padding:.6em 1em; border-inline-start:3px solid var(--gold); background:var(--accent-soft); border-radius:0 10px 10px 0 }
.tw{ overflow-x:auto; margin:1.1em 0; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.tw table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.93rem; line-height:1.7 }
.tw th,.tw td{ text-align:start; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--line) }
.tw thead th{ background:var(--sunk); font-weight:700; white-space:nowrap }
.tw tbody tr:last-child td{ border-bottom:0 }
.fig{ margin:1.6em 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface) }
.fig .svgbox{ overflow-x:auto }
.fig svg{ display:block; width:100%; min-width:560px; height:auto; font-family:var(--body) }
.fig figcaption{ margin-top:10px; color:var(--dim); font-size:.9rem }
.q{ font-family:var(--verse); font-size:1.18em; line-height:1.9 }

/* ---------- cards and panels ---------- */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)) }
.card{ position:relative; display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); color:inherit; text-decoration:none; min-width:0; transition:transform .2s, border-color .2s }
.card:hover{ transform:translateY(-2px); border-color:var(--line2) }
.card h3{ margin:0; font:700 1.2rem/1.4 var(--display) }
.card p{ margin:0; color:var(--dim); font-size:.95rem; line-height:1.7 }
.card .go{ margin-top:auto; padding-top:6px; color:var(--accent); font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:6px }
.card .go svg{ width:18px; height:18px }
.card .ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent) }
.card .ico svg{ width:24px; height:24px }
.note{ padding:14px 16px; border-radius:12px; background:var(--accent-soft); border:1px solid var(--line); font-size:.95rem }
.note strong{ color:var(--accent) }
.btn{ appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:999px; background:var(--gold); color:#1D1606; font:700 .95rem/1 var(--body); text-decoration:none }
.btn.ghost{ background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--line2) }
.btn svg{ width:18px; height:18px }

footer.foot{ margin-top:64px; padding-block:28px 40px; border-top:1px solid var(--line); color:var(--faint); font-size:.9rem }
footer.foot .wrap{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; scroll-behavior:auto!important } }
@media print{
  .bar,.skip,footer.foot,.noprint{ display:none!important }
  body{ background:#fff; color:#000; font-size:12pt }
  .band{ background:none; color:#000; padding:0 0 12px } .band::after{ display:none } .band .lede,.chip{ color:#000 }
  .tw{ border-color:#999 } .tw table{ min-width:0 }
  a{ color:#000; text-decoration:none }
}