/* GISarabia.org — shared site chrome (tokens, top bar, theme toggle) */
:root{
  --paper:#EBF4DD; --sheet:#F6FAEF; --ink:#3B4953; --muted:#4F6B58; --rule:#C9D9BC; --accent:#4C6B55; --link:#3E6650; --tint:#DDE9CF; --code-bg:#E2ECD5; --code-ink:#2F3B43; --brand:#5A7863; --brand-soft:#90AB8B; --ok:#3E6650; --warn:#8A5A1F; --danger:#9B2C2C;
  --display:"IBM Plex Sans","Noto Kufi Arabic","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  color-scheme:light;
}
:root[data-theme="light"]{ --paper:#EBF4DD; --sheet:#F6FAEF; --ink:#3B4953; --muted:#4F6B58; --rule:#C9D9BC; --accent:#4C6B55; --link:#3E6650; --tint:#DDE9CF; --code-bg:#E2ECD5; --code-ink:#2F3B43; --brand:#5A7863; --brand-soft:#90AB8B; --ok:#3E6650; --warn:#8A5A1F; --danger:#9B2C2C; color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --paper:#092328; --sheet:#0D2D32; --ink:#E8F1E9; --muted:#A3BDB3; --rule:#12544F; --accent:#8BBB92; --link:#8BBB92; --tint:#0F3B3C; --code-bg:#0B282D; --code-ink:#E8F1E9; --brand:#2A835F; --brand-soft:#12544F; --ok:#8BBB92; --warn:#E0B26B; --danger:#F28B82; color-scheme:dark}}
:root[data-theme="dark"]{ --paper:#092328; --sheet:#0D2D32; --ink:#E8F1E9; --muted:#A3BDB3; --rule:#12544F; --accent:#8BBB92; --link:#8BBB92; --tint:#0F3B3C; --code-bg:#0B282D; --code-ink:#E8F1E9; --brand:#2A835F; --brand-soft:#12544F; --ok:#8BBB92; --warn:#E0B26B; --danger:#F28B82; color-scheme:dark}

.site-bar{background:var(--sheet);border-bottom:1px solid var(--rule);font-family:var(--body);direction:rtl}
.site-bar-in{max-width:1180px;margin-inline:auto;padding:10px 16px;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--ink);font-family:"IBM Plex Sans",var(--display);font-weight:700;font-size:19px;direction:ltr;letter-spacing:.01em}
.brand b{color:var(--accent);font-weight:700}
.brand span{color:var(--muted);font-weight:500;font-size:15px}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.site-nav a{color:var(--ink);text-decoration:none;font-size:15px;padding:5px 12px;border-radius:999px;white-space:nowrap}
.site-nav a:hover{background:var(--tint)}
.site-nav a.on{background:var(--tint);color:var(--accent);font-weight:600}
.site-tools{display:flex;gap:8px;align-items:center;margin-inline-start:auto}
.site-search{display:flex}
.site-search input{font:inherit;font-size:14px;width:180px;max-width:42vw;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink)}
.theme-btn{font:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:14px;line-height:1.4}
.theme-btn:hover{background:var(--tint)}
.theme-btn svg{width:16px;height:16px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:inline}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .i-sun{display:inline}:root:not([data-theme="light"]) .theme-btn .i-moon{display:none}}
.site-bar a:focus-visible,.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:700px){
  .site-bar-in{gap:8px}
  .site-nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .site-search input{width:130px}
  .theme-btn .lbl{display:none}
}

body{margin:0}

.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;font-family:var(--body)}
.footnav a{color:var(--ink);text-decoration:none;font-weight:500}
.footnav a:hover{color:var(--accent)}

/* ---------- appearance: accent colours (contrast-checked ≥4.5:1 on all surfaces) ---------- */
:root[data-accent="teal"]{--accent:#1D6663;--link:#1D6663}
:root[data-accent="blue"]{--accent:#2D5C99;--link:#2D5C99}
:root[data-accent="violet"]{--accent:#674A97;--link:#674A97}
:root[data-accent="rose"]{--accent:#9C3A5E;--link:#9C3A5E}
:root[data-accent="amber"]{--accent:#7F5410;--link:#7F5410}
:root[data-theme="dark"][data-accent="teal"]{--accent:#6CC7C0;--link:#6CC7C0}
:root[data-theme="dark"][data-accent="blue"]{--accent:#8DB6F2;--link:#8DB6F2}
:root[data-theme="dark"][data-accent="violet"]{--accent:#C2A8F0;--link:#C2A8F0}
:root[data-theme="dark"][data-accent="rose"]{--accent:#F2A0BC;--link:#F2A0BC}
:root[data-theme="dark"][data-accent="amber"]{--accent:#E6C17A;--link:#E6C17A}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"])[data-accent="teal"]{--accent:#6CC7C0;--link:#6CC7C0}
 :root:not([data-theme="light"])[data-accent="blue"]{--accent:#8DB6F2;--link:#8DB6F2}
 :root:not([data-theme="light"])[data-accent="violet"]{--accent:#C2A8F0;--link:#C2A8F0}
 :root:not([data-theme="light"])[data-accent="rose"]{--accent:#F2A0BC;--link:#F2A0BC}
 :root:not([data-theme="light"])[data-accent="amber"]{--accent:#E6C17A;--link:#E6C17A}
}
/* fonts */
:root[data-font="naskh"]{--body:"Noto Naskh Arabic","IBM Plex Sans",Tahoma,serif}
:root[data-font="system"]{--body:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;--display:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
/* text size */
:root{--fs:1}
:root[data-size="1"]{--fs:.9}:root[data-size="3"]{--fs:1.1}:root[data-size="4"]{--fs:1.22}:root[data-size="5"]{--fs:1.36}
main,article.prose,.wrap>section{font-size:calc(1em * var(--fs))}

/* ---------- reading mode ---------- */
:root[data-reading="on"] .toc,:root[data-reading="on"] .site-search,:root[data-reading="on"] .site-nav{display:none!important}
:root[data-reading="on"] .wrap{grid-template-columns:minmax(0,1fr)!important;max-width:780px!important}
:root[data-reading="on"] main{max-width:68ch;margin-inline:auto;font-size:calc(1.08em * var(--fs));line-height:2.05}
:root[data-reading="on"] main p,:root[data-reading="on"] main li{max-width:none}
:root[data-reading="on"] .mast{padding-block:22px 18px}
:root[data-reading="on"] .mast h1{font-size:clamp(24px,3.4vw,34px)}
:root[data-reading="on"] .levels,:root[data-reading="on"] .facts{display:none}
.read-exit{display:none;position:fixed;bottom:18px;inset-inline-start:18px;z-index:60;font:inherit;font-family:var(--body);font-size:14px;cursor:pointer;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:999px;padding:8px 16px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
:root[data-reading="on"] .read-exit{display:inline-flex;gap:6px;align-items:center}
.read-progress{position:fixed;top:0;inset-inline-start:0;height:3px;background:var(--accent);width:0;z-index:70;display:none}
:root[data-reading="on"] .read-progress{display:block}

/* ---------- appearance popover ---------- */
.ap{position:relative}
.ap-btn{font:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:14px;line-height:1.4}
.ap-btn:hover{background:var(--tint)}
.ap-btn svg{width:18px;height:18px}
.ap-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80;width:300px;max-width:calc(100vw - 24px);background:var(--sheet);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.22);padding:14px;display:none;font-family:var(--body);text-align:start}
.ap.open .ap-pop{display:grid;gap:12px}
.ap-h{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 6px}
.ap-row{display:flex;flex-wrap:wrap;gap:6px}
.ap-opt{font:inherit;font-size:14px;cursor:pointer;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);white-space:nowrap}
.ap-opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}
.ap-opt .dot{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.15)}
.ap-sw{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid var(--sheet);box-shadow:0 0 0 1px var(--rule);padding:0}
.ap-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.ap-size{display:flex;align-items:center;gap:8px}
.ap-size button{font:inherit;width:36px;height:32px;cursor:pointer;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font-weight:700}
.ap-size output{flex:1;text-align:center;font-family:var(--mono);font-size:13px;color:var(--muted)}
.ap-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink);width:100%;font-size:14.5px}
.ap-toggle .sw{width:38px;height:22px;border-radius:999px;background:var(--rule);position:relative;flex:none;transition:background .15s}
.ap-toggle .sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--sheet);transition:inset-inline-start .15s}
.ap-toggle[aria-pressed="true"] .sw{background:var(--accent)}
.ap-toggle[aria-pressed="true"] .sw::after{inset-inline-start:19px}
.ap-toggle small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.ap-btn:focus-visible,.ap-opt:focus-visible,.ap-sw:focus-visible,.ap-toggle:focus-visible,.ap-size button:focus-visible,.read-exit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:700px){.ap-btn .lbl{display:none}}