/*
  موقع «السديري»: ورقة وحدة لكل الصفحات (2026-11-08).

  الألوان نفسها اللي في التطبيق، حرفياً، من Assets.xcassets في الآيفون وAppColors.kt في أندرويد:
  نفس الخلفية والسطح والنص، والأخضر الداكن لون الأفعال (في الليلي ذهبي)، والذهبي لون الختم.
  والوضع يتبع الجهاز مثل «تلقائي» في التطبيق. أي لون أو مقاس جديد ينضاف هنا، مو في صفحة.

  الأدوار:
  --background    أرضية الصفحة        AppBackground
  --surface       الأسطح (البطاقة)    AppSurface
  --text-primary  النص                 AppTextPrimary
  --text-muted    النص الثانوي         AppTextMuted (4.7:1 على الأرضية، فوق AA)
  --separator     الخطوط               AppSeparator
  --accent        الروابط والأزرار     AppAccent
  --on-accent     النص على الزر        AppOnAccent
  --accent-soft   رأس الجدول والمسار   AppAccentSoft
  --highlight     ذهبي الختم: خط الرأس بس، ما ينكتب فيه نص (2:1 على الفاتح)

  الخط: خط النظام العربي. خط التطبيق «عام الحرف اليدوية» حقوقه محفوظة لـ Iwantype بلا رخصة
  ويب مكتوبة، فما يُضمَّن هنا قبل ما يتأكد صاحب المشروع من الرخصة.
*/
:root{
  --background:#F3F0E8; --surface:#FFFFFF; --text-primary:#1F2A28; --text-muted:#6F6A5E;
  --separator:#E6E1D4; --accent:#1F4844; --on-accent:#FFFFFF; --accent-soft:#E3E9E6;
  --highlight:#C1A75E;
  --radius-card:16px; --radius-control:12px;
  --font:"SF Arabic","Geeza Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --background:#0F1A18; --surface:#1B2926; --text-primary:#F3EFE4; --text-muted:#A9A597;
    --separator:#2C3A37; --accent:#D4BC74; --on-accent:#14211F; --accent-soft:#243733;
    --highlight:#D4BC74;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--background); color:var(--text-primary);
  font-family:var(--font); font-size:17px; line-height:1.9;
}
.wrap{max-width:720px; margin:0 auto; padding:28px 16px 64px}
@media (min-width:600px){ .wrap{padding:40px 24px 72px} }

/* الرأس: شعار الشجرة بلون الأفعال مثل شاشة الترحيب في التطبيق، وتحته خط ذهبي الختم. */
.masthead{border-bottom:2px solid var(--highlight); padding-bottom:20px; margin-bottom:28px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text-primary);
       text-decoration:none; font-weight:700; font-size:18px; margin-bottom:18px}
.brand-logo{width:26px; height:32px; background:var(--accent); flex:none;
            -webkit-mask:url(logo.png) center/contain no-repeat; mask:url(logo.png) center/contain no-repeat}
h1{font-size:28px; line-height:1.45; margin:0 0 8px; font-weight:800}
@media (min-width:600px){ h1{font-size:32px} }
.sub{color:var(--text-muted); font-size:15px; margin:0}
/* التاريخ بترتيبه 2026-11-08 وسط النص العربي، وما ينكسر عند الشرطة. */
time{white-space:nowrap}
h2{font-size:21px; line-height:1.5; margin:40px 0 10px; font-weight:700}
h3{font-size:17px; margin:24px 0 6px; font-weight:700}
p,li{color:var(--text-primary)}
ul,ol{padding-inline-start:22px}
li{margin-bottom:8px}

/* المقدمة نص أكبر بلا صندوق، والبطاقة للي لازم ينقرأ لحاله بس (طريقة أو تنبيه). */
.lead{font-size:18px; margin:0 0 8px}
.card{background:var(--surface); border-radius:var(--radius-card); padding:16px 18px; margin:18px 0}
@media (min-width:600px){ .card{padding:18px 22px} }
.muted{color:var(--text-muted); font-size:15px}

.tablewrap{overflow-x:auto; margin:18px 0; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:15px; background:var(--surface)}
th,td{border:1px solid var(--separator); padding:10px 12px; text-align:right; vertical-align:top}
th{background:var(--accent-soft); font-weight:700}
/* جدول البيانات على الجوال: كل صف بطاقة، ورأس العمود قبل خانته، بدل تمرير جانبي يخفي عموداً. */
@media (max-width:599px){
  .tablewrap{overflow:visible}
  .datatable,.datatable tbody,.datatable tr,.datatable td{display:block; min-width:0; width:auto}
  .datatable{background:transparent; border:0}
  .datatable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .datatable tr{background:var(--surface); border-radius:var(--radius-card); padding:12px 16px; margin:0 0 10px}
  .datatable td{border:0; padding:2px 0}
  .datatable td:first-child{font-weight:700; padding-bottom:4px}
  .datatable td:nth-child(2)::before{content:"من أين: "; color:var(--text-muted)}
  .datatable td:nth-child(3)::before{content:"لماذا: "; color:var(--text-muted)}
}

code{background:var(--accent-soft); color:var(--text-primary); padding:2px 6px;
     border-radius:6px; font-family:inherit; font-size:15px}

a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

/* الذيل نفسه في كل صفحة، والصفحة الحالية بلا رابط. */
.foot{margin-top:48px; padding-top:20px; border-top:1px solid var(--separator); color:var(--text-muted); font-size:15px}
.foot nav{display:flex; flex-wrap:wrap; gap:6px 20px; margin-bottom:8px}
.foot nav a,.foot nav span{padding:4px 0}
.foot nav span{color:var(--text-primary); font-weight:700}
.foot p{color:var(--text-muted); margin:0}