/* ═══════════════════════════════════════════════════════════
   سالم — نظام التصميم المشترك
   الفكرة: «الورق المؤمَّن» — ورق الوثائق الرسمية المحمي من التزوير.
   حبر أخضر داكن، أخضر الختم، ذهبي الختم، ونقش أمني يُستخدم في موضع واحد.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#EDF0EB;      /* ورق مخضرّ فاتح */
  --card:#FAFBF8;       /* سطح الورقة */
  --ink:#14241F;        /* حبر */
  --muted:#5B6B65;
  --line:#CCD5CF;
  --soft:#E2E9E4;
  --signal:#0D6B52;     /* أخضر الختم — الأفعال والروابط */
  --signal-ink:#FFFFFF;
  --flag:#E3B64A;       /* ذهبي الختم — جديد/تنبيه */
  --bad:#B3261E;
  --good:#0D6B52;
  --sans:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --display:var(--sans);
  --serif:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:6px;
}

body{font-family:var(--sans)}

:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── الترويسة الموحّدة ── */
.s-head{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:0 0 14px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.s-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.s-brand svg{width:28px;height:28px;color:var(--signal);display:block}
.s-brand b{font-family:var(--sans);font-weight:700;font-size:21px;line-height:1}
:root[lang="en"] .s-brand b{font-size:19px;letter-spacing:-.01em}
.s-nav{display:flex;gap:4px;flex-wrap:wrap;margin-inline-start:12px}
.s-nav a{
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;
  padding:6px 10px;border-radius:var(--r);
}
.s-nav a:hover{color:var(--ink);background:var(--soft)}
.s-nav a[aria-current="page"]{color:var(--signal);background:var(--soft)}
.s-end{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.s-head .lang{
  margin:0;padding:6px 12px;cursor:pointer;font:600 12px var(--sans);
  background:transparent;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
}
.s-head .lang:hover{border-color:var(--ink)}
@media (max-width:640px){
  .s-head{gap:10px}
  .s-nav{order:3;width:100%;margin:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .s-nav a{white-space:nowrap;padding:6px 9px;font-size:13.5px}
}

/* ── التذييل الموحّد ── */
.s-foot{
  margin-top:48px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;color:var(--muted);
}
.s-foot a{color:var(--muted)}
.s-foot a:hover{color:var(--ink)}
.s-foot .s-mark{font-weight:700;font-size:15px;color:var(--ink)}

/* ── أزرار عامة ── */
.s-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px var(--sans);padding:11px 20px;border-radius:var(--r);cursor:pointer;
  background:var(--signal);color:var(--signal-ink);border:1px solid var(--signal);text-decoration:none;
}
.s-btn:hover{filter:brightness(1.08)}
.s-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.s-btn.ghost:hover{border-color:var(--ink);filter:none}
.s-tag{
  display:inline-block;font:600 11px var(--sans);padding:1px 8px;border-radius:20px;
  background:var(--flag);color:var(--ink);vertical-align:2px;margin-inline-start:6px;line-height:1.7;white-space:nowrap;
}

/* ── الورقة المؤمَّنة: إطار بنقش أمني (يُستخدم في موضع واحد لكل صفحة) ── */
.s-sheet{
  border:16px solid transparent;border-radius:4px;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    url("/guilloche.svg") 0 0/72px 24px repeat border-box;
  box-shadow:0 0 0 1px var(--line);
}