/* ====== الهوية البصرية ======
   ورق رمادي مزرق محايد، حبر أزرق داكن، لون مميز واحد (أزرق مستوحى من الزليج)، ودلالات وظيفية للتنبيه فقط.
   العنصر المميز الوحيد: شريط النجمة الثمانية (زليج) تحت قائمة التنقل. باقي الصفحة هادئ. */
@font-face{font-family:"Tadqiq Display";src:url("fonts/title.woff") format("woff"),local("Reem Kufi"),local("ReemKufi-Regular");font-weight:400 800;font-display:swap}
@font-face{font-family:"Tadqiq Maghribi";src:url("fonts/BouazziMaghribi-Regular.woff2") format("woff2"),url("fonts/BouazziMaghribi-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Tadqiq Text";src:url("fonts/text-400.woff") format("woff"),local("IBM Plex Sans Arabic"),local("IBMPlexSansArabic");font-weight:400 500;font-display:swap}
@font-face{font-family:"Tadqiq Text";src:url("fonts/text-600.woff") format("woff"),local("IBM Plex Sans Arabic SemiBold"),local("IBMPlexSansArabic-SemiBold");font-weight:600;font-display:swap}
@font-face{font-family:"Tadqiq Text";src:url("fonts/text-700.woff") format("woff"),local("IBM Plex Sans Arabic Bold"),local("IBMPlexSansArabic-Bold");font-weight:700 800;font-display:swap}
:root{
  --bg:#F3F5F6; --panel:#FFFFFF; --ink:#16212B; --mute:#55616E; --line:#DCE2E7; --soft:#E8EDF1;
  --accent:#2B4A9B; --accent-ink:#FFFFFF;
  --flag:#A3271D; --flag-bg:#FBEBE8; --warn:#7F5200; --warn-bg:#FAF0D9; --ok:#1F6B3E; --ok-bg:#E4F2E9;
  --mark:#FFE7A0; --shadow:0 1px 2px rgba(22,33,43,.05),0 6px 18px -8px rgba(22,33,43,.12);
  --f-maghribi:"Tadqiq Maghribi","Tadqiq Display","Reem Kufi",serif;
  --f-display:"Tadqiq Display","Reem Kufi","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  --f-body:"Tadqiq Text","IBM Plex Sans Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E141B; --panel:#16202A; --ink:#E8EDF2; --mute:#9AA8B6; --line:#27343F; --soft:#1D2A35;
    --accent:#8CA6EE; --accent-ink:#0E1630;
    --flag:#FF9488; --flag-bg:#3A1D1A; --warn:#F0C26B; --warn-bg:#30270F; --ok:#7FD39B; --ok-bg:#14301E;
    --mark:#5A4A12; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px -8px rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E141B; --panel:#16202A; --ink:#E8EDF2; --mute:#9AA8B6; --line:#27343F; --soft:#1D2A35;
  --accent:#8CA6EE; --accent-ink:#0E1630;
  --flag:#FF9488; --flag-bg:#3A1D1A; --warn:#F0C26B; --warn-bg:#30270F; --ok:#7FD39B; --ok-bg:#14301E;
  --mark:#5A4A12; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px -8px rgba(0,0,0,.5); color-scheme:dark;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;padding-inline:16px;font-feature-settings:'kern','liga'}
#app{max-width:1080px;margin:0 auto;padding-block:24px 64px;direction:rtl}
*{box-sizing:border-box}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:0}
h1,h2{font-family:var(--f-maghribi);font-weight:400;font-synthesis:none}   /* الخط المغربي للعناوين الأساسية؛ وزن واحد فلا تضخيم آلي */
h1{font-size:clamp(36px,6.5vw,54px);line-height:1.35}
h2{font-size:clamp(26px,3.8vw,32px);line-height:1.45;margin-bottom:12px}
h3{font-size:17px;line-height:1.5}
header{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;justify-content:space-between;margin-bottom:28px;padding-bottom:8px}
header p{margin:6px 0 0;color:var(--mute);max-width:62ch}
.tag{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--mute);background:var(--panel)}
section{margin-bottom:28px;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,3vw,24px);min-width:0;box-shadow:var(--shadow)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute);min-width:0}
input,select,textarea,button{font:inherit;color:var(--ink)}
input[type=text],input[type=number],input[type=date],input[type=email],select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 10px;width:100%;min-width:0}
textarea{resize:vertical;line-height:1.8}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 16px;transition:background-color .15s,border-color .15s}
button:hover:not(:disabled){border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{color:var(--mute);font-size:13px}
.banner{border-radius:8px;padding:10px 14px;font-size:13.5px;border:1px solid var(--line);background:var(--soft)}
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.banner.demo{background:var(--soft)}
details summary{cursor:pointer;color:var(--accent);font-size:14px}
.th{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:10px}
/* summary */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--f-display);font-size:32px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--mute)}
.verdict{border-radius:14px;padding:18px 20px;border:1px solid var(--line);border-inline-start-width:6px;background:var(--panel);margin-bottom:14px}
.verdict .lab{font-family:var(--f-display);font-size:clamp(20px,3vw,26px);line-height:1.4}
.verdict.bad{background:var(--flag-bg);border-color:var(--flag)}
.verdict.bad .lab{color:var(--flag)}
.verdict.good{background:var(--ok-bg);border-color:var(--ok)}
.verdict.good .lab{color:var(--ok)}
.verdict.mid{background:var(--warn-bg);border-color:var(--warn)}
.verdict.mid .lab{color:var(--warn)}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--flag)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:8px 8px;text-align:start;vertical-align:middle}
th{font-weight:600;color:var(--mute);font-size:13px}
.scroll{overflow-x:auto}
td input[type=number]{width:70px}
.pill{display:inline-block;border-radius:99px;padding:1px 10px;font-size:12.5px;background:var(--soft);color:var(--mute)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.no{background:var(--flag-bg);color:var(--flag)}
.pill.decl{background:var(--warn-bg);color:var(--warn)}
/* passages */
.p{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:16px;margin-bottom:12px;display:grid;gap:10px;min-width:0}
.p.camo{border-inline-start:5px solid var(--flag)}
.p.opin{opacity:.78}
.p-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.p-n{font-family:var(--f-display);font-size:15px;color:var(--mute);min-width:2.2em}
.quote{margin:0;font-size:15.5px;line-height:1.9;overflow-wrap:anywhere}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border-radius:99px;padding:2px 12px;font-size:13px;border:1px dashed var(--mute);background:transparent;display:inline-flex;gap:6px;align-items:center}
.chip.c{border-style:solid;border-color:var(--flag);background:var(--flag-bg);color:var(--flag);font-weight:600}
.chip.r{text-decoration:line-through;color:var(--mute);opacity:.6}
.chip small{font-size:11px;opacity:.85}
.p-meta{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.why{font-size:13px;color:var(--mute);margin:0}
.add{display:flex;gap:6px;align-items:center}
.add select{width:auto;max-width:200px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--mute);margin-bottom:10px}
.bm{font-size:13px}
label .hint{font-size:12px;color:var(--mute);line-height:1.5}
.guide{display:grid;gap:10px;margin-top:10px}
.g-i{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg)}
.g-i p{margin:2px 0;font-size:13.5px}
.g-i b{color:var(--ink)}
.refs{display:grid;gap:8px;margin:10px 0}
.ref{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--bg)}
.ref a{color:var(--accent);overflow-wrap:anywhere}
.ref .grow{flex:1;min-width:0}
.pill.est{background:var(--flag-bg);color:var(--flag);font-weight:600}
.checks{display:grid;gap:4px 14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:8px}
.checks label{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:14px}
.empty{border:1px dashed var(--line);border-radius:10px;padding:18px;color:var(--mute);background:var(--panel)}
.empty ol{margin:8px 0 0;padding-inline-start:20px}
.sumtxt{font-size:15.5px;line-height:1.9;margin:6px 0 0}
.chip small.auto{font-weight:400}

#msg{min-height:1.4em}
.prog{height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
@media (prefers-reduced-motion:reduce){.prog i{transition:none}}
@media (max-width:520px){h1{font-size:32px}.stat b{font-size:26px}}
a{color:var(--accent);text-underline-offset:3px}
body{margin:0}
[hidden]{display:none!important}

.topnav{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 18px;padding:0}
.topnav a{border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;border-radius:99px;padding:5px 14px;font-size:14px}
.topnav a:hover{border-color:var(--accent)}
.topnav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.topnav a.pdf{border-color:var(--accent);color:var(--accent);font-weight:600}

body.locked #app>*:not(.topnav){display:none}
body.locked main>*:not(.topnav):not(h1){display:none}
.gate{position:fixed;inset:0;z-index:50;background:rgba(15,22,28,.72);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.gate-card{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:20px;max-width:460px;width:100%;margin-block:auto;display:grid;gap:10px}
.gate-card h2{margin:0}.gate-card h3{margin:8px 0 0}
.g-terms{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink);font-size:14px;background:var(--soft);border-radius:8px;padding:8px 10px}
.g-btn{min-height:44px}
.acct{margin-inline-start:auto;display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.acct .who{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;color:var(--mute);font-size:13px}
.acct button{padding:3px 12px;font-size:13px;border-radius:99px}

/* الشريط المميز: نجمة ثمانية متكررة (نمط الزليج). عنصر الهوية الوحيد */
.topnav::after{content:"";flex:0 0 100%;height:20px;margin-top:8px;background:var(--accent);opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Crect x='5' y='5' width='10' height='10'/%3E%3Crect x='5' y='5' width='10' height='10' transform='rotate(45 10 10)'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/20px 20px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Crect x='5' y='5' width='10' height='10'/%3E%3Crect x='5' y='5' width='10' height='10' transform='rotate(45 10 10)'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/20px 20px}
.topnav{align-items:center}
.tag{border-color:var(--accent);color:var(--accent);background:transparent}
.quote{max-width:70ch}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.topnav,.gate,button,.row,details>summary~*{display:none!important}body{background:#fff;color:#000}}

/* محتوى يظهر بحسب نمط الموقع */
.only-full{display:none}
html[data-mode=full] .only-full{display:revert}
html[data-mode=full] .only-static{display:none}