/* ==================================================================
   راصد الفعاليات الخليجي · نظام التصميم
   رزانة وزارية أولا، والإبهار يأتي من الدقة لا من الزخرفة.

   ثلاث قواعد تحكم هذا الملف:
   ١. اللون في الرسوم البيانية **مقيس لا مذوق**: ألوان المحاور الستة عبرت
      مدقّق الرؤية اللونية على سطحنا. لا يُبدَّل لون منها بالذوق.
   ٢. النص يلبس رموز النص، لا لون السلسلة أبدا.
   ٣. الوضع الليلي **مختار** لا مقلوب آليا: كل رمز له قيمته الخاصة هناك.
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* ------------------------------------------------------------------
   الرموز
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* الهوية */
  --brand:        #0d3b66;   /* أزرق خليجي عميق */
  --brand-deep:   #092c4d;
  --brand-ink:    #061e36;
  --brand-wash:   #e8f0f7;
  --gold:         #b08129;
  --gold-soft:    #dcc48d;

  /* ⚠️ رموز الترويسة ثابتة في الوضعين: هي سطح داكن دائما، ولو تبعت --brand
     لانقلبت ورديّة ليلا لأن --brand يفتح هناك ليُقرأ على الأسود. */
  --bar-1: #061e36;
  --bar-2: #0d3b66;
  --bar-3: #092c4d;
  --bar-ink: #ffffff;

  /* الأسطح */
  --page:         #f2f4f7;
  --surface:      #ffffff;
  --surface-2:    #f7f9fb;
  --surface-3:    #e9edf2;

  /* الحبر */
  --ink:          #0f1419;
  --ink-2:        #414a54;
  --muted:        #77828e;
  --line:         #dde3ea;
  --line-soft:    #eaeff4;
  --ring:         rgba(20, 17, 15, .10);

  /* محاور اللون الستة · مقيسة، لا تُبدَّل بالذوق */
  --axis-stage:     #1f6fb2;
  --axis-word:      #e0662c;
  --axis-image:     #0f9d78;
  --axis-heritage:  #dc9a05;
  --axis-community: #d3628f;
  --axis-honour:    #7a5cc4;

  /* الحالة · محجوزة، لا تُستعمل كسلسلة أبدا */
  --ok:       #0ca30c;
  --warn:     #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --ok-text:  #006300;

  /* كروم الرسوم */
  --grid:     #e2e7ee;
  --axis-rule:#c3cbd5;

  /* الهندسة */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(20,17,15,.05), 0 1px 3px rgba(20,17,15,.04);
  --shadow-2: 0 2px 4px rgba(20,17,15,.04), 0 12px 28px -12px rgba(20,17,15,.14);
  --shadow-3: 0 4px 8px rgba(20,17,15,.06), 0 24px 48px -20px rgba(20,17,15,.22);

  --font: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", "Noto Naskh Arabic",
          system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-latin: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* بلاطة هندسية إسلامية بثماني شعب، مبنية بالفرجار لا بنموذج توليد:
     ‎1.5 كيلوبايت، حادّة عند أي تكبير، وشفافة فلا تغسل ما تحتها. */
  --tile-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23e7d2a4%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%220.34%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%22111.0%2C38.9%2082.9%2C60.0%20111.0%2C81.1%2076.2%2C76.2%2081.1%2C111.0%2060.0%2C82.9%2038.9%2C111.0%2043.8%2C76.2%209.0%2C81.1%2037.1%2C60.0%209.0%2C38.9%2043.8%2C43.8%2038.9%2C9.0%2060.0%2C37.1%2081.1%2C9.0%2076.2%2C43.8%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C-13.1%2014.2%2C0.0%2031.6%2C13.1%2010.0%2C10.0%2013.1%2C31.6%200.0%2C14.2%20-13.1%2C31.6%20-10.0%2C10.0%20-31.6%2C13.1%20-14.2%2C0.0%20-31.6%2C-13.1%20-10.0%2C-10.0%20-13.1%2C-31.6%20-0.0%2C-14.2%2013.1%2C-31.6%2010.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C-13.1%20134.2%2C0.0%20151.6%2C13.1%20130.0%2C10.0%20133.1%2C31.6%20120.0%2C14.2%20106.9%2C31.6%20110.0%2C10.0%2088.4%2C13.1%20105.8%2C0.0%2088.4%2C-13.1%20110.0%2C-10.0%20106.9%2C-31.6%20120.0%2C-14.2%20133.1%2C-31.6%20130.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C106.9%2014.2%2C120.0%2031.6%2C133.1%2010.0%2C130.0%2013.1%2C151.6%200.0%2C134.2%20-13.1%2C151.6%20-10.0%2C130.0%20-31.6%2C133.1%20-14.2%2C120.0%20-31.6%2C106.9%20-10.0%2C110.0%20-13.1%2C88.4%20-0.0%2C105.8%2013.1%2C88.4%2010.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C106.9%20134.2%2C120.0%20151.6%2C133.1%20130.0%2C130.0%20133.1%2C151.6%20120.0%2C134.2%20106.9%2C151.6%20110.0%2C130.0%2088.4%2C133.1%20105.8%2C120.0%2088.4%2C106.9%20110.0%2C110.0%20106.9%2C88.4%20120.0%2C105.8%20133.1%2C88.4%20130.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C6.2%2053.8%2C6.2%2053.8%2C-6.2%2066.2%2C-6.2%22%2F%3E%3Cpolygon%20points%3D%226.2%2C66.2%20-6.2%2C66.2%20-6.2%2C53.8%206.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%22126.2%2C66.2%20113.8%2C66.2%20113.8%2C53.8%20126.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C126.2%2053.8%2C126.2%2053.8%2C113.8%2066.2%2C113.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tile-ink:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230d3b66%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%221.0%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%22111.0%2C38.9%2082.9%2C60.0%20111.0%2C81.1%2076.2%2C76.2%2081.1%2C111.0%2060.0%2C82.9%2038.9%2C111.0%2043.8%2C76.2%209.0%2C81.1%2037.1%2C60.0%209.0%2C38.9%2043.8%2C43.8%2038.9%2C9.0%2060.0%2C37.1%2081.1%2C9.0%2076.2%2C43.8%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C-13.1%2014.2%2C0.0%2031.6%2C13.1%2010.0%2C10.0%2013.1%2C31.6%200.0%2C14.2%20-13.1%2C31.6%20-10.0%2C10.0%20-31.6%2C13.1%20-14.2%2C0.0%20-31.6%2C-13.1%20-10.0%2C-10.0%20-13.1%2C-31.6%20-0.0%2C-14.2%2013.1%2C-31.6%2010.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C-13.1%20134.2%2C0.0%20151.6%2C13.1%20130.0%2C10.0%20133.1%2C31.6%20120.0%2C14.2%20106.9%2C31.6%20110.0%2C10.0%2088.4%2C13.1%20105.8%2C0.0%2088.4%2C-13.1%20110.0%2C-10.0%20106.9%2C-31.6%20120.0%2C-14.2%20133.1%2C-31.6%20130.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C106.9%2014.2%2C120.0%2031.6%2C133.1%2010.0%2C130.0%2013.1%2C151.6%200.0%2C134.2%20-13.1%2C151.6%20-10.0%2C130.0%20-31.6%2C133.1%20-14.2%2C120.0%20-31.6%2C106.9%20-10.0%2C110.0%20-13.1%2C88.4%20-0.0%2C105.8%2013.1%2C88.4%2010.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C106.9%20134.2%2C120.0%20151.6%2C133.1%20130.0%2C130.0%20133.1%2C151.6%20120.0%2C134.2%20106.9%2C151.6%20110.0%2C130.0%2088.4%2C133.1%20105.8%2C120.0%2088.4%2C106.9%20110.0%2C110.0%20106.9%2C88.4%20120.0%2C105.8%20133.1%2C88.4%20130.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C6.2%2053.8%2C6.2%2053.8%2C-6.2%2066.2%2C-6.2%22%2F%3E%3Cpolygon%20points%3D%226.2%2C66.2%20-6.2%2C66.2%20-6.2%2C53.8%206.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%22126.2%2C66.2%20113.8%2C66.2%20113.8%2C53.8%20126.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C126.2%2053.8%2C126.2%2053.8%2C113.8%2066.2%2C113.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* الوضع الليلي: خطوة مختارة لكل رمز، لا انعكاس آلي */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --brand: #5b9fd8; --brand-deep: #3d82be; --brand-ink: #b8d8f0;
    --brand-wash: #10202f; --gold: #c9a45a; --gold-soft: #7a6234;
    --page: #0b0e12; --surface: #14181d; --surface-2: #1b2027; --surface-3: #232931;
    --ink: #eef2f6; --ink-2: #b6c0cb; --muted: #7d8894;
    --line: #2a3038; --line-soft: #20252b; --ring: rgba(255,255,255,.10);
    --axis-stage: #3d8fd0; --axis-word: #d1571f; --axis-image: #12ab83;
    --axis-heritage: #c08400; --axis-community: #c2547f; --axis-honour: #8f74d4;
    --ok-text: #0ca30c;
    --grid: #262c34; --axis-rule: #343b44;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px -12px rgba(0,0,0,.6);
    --shadow-3: 0 4px 8px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
    --tile-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%235b9fd8%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%221.0%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%22111.0%2C38.9%2082.9%2C60.0%20111.0%2C81.1%2076.2%2C76.2%2081.1%2C111.0%2060.0%2C82.9%2038.9%2C111.0%2043.8%2C76.2%209.0%2C81.1%2037.1%2C60.0%209.0%2C38.9%2043.8%2C43.8%2038.9%2C9.0%2060.0%2C37.1%2081.1%2C9.0%2076.2%2C43.8%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C-13.1%2014.2%2C0.0%2031.6%2C13.1%2010.0%2C10.0%2013.1%2C31.6%200.0%2C14.2%20-13.1%2C31.6%20-10.0%2C10.0%20-31.6%2C13.1%20-14.2%2C0.0%20-31.6%2C-13.1%20-10.0%2C-10.0%20-13.1%2C-31.6%20-0.0%2C-14.2%2013.1%2C-31.6%2010.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C-13.1%20134.2%2C0.0%20151.6%2C13.1%20130.0%2C10.0%20133.1%2C31.6%20120.0%2C14.2%20106.9%2C31.6%20110.0%2C10.0%2088.4%2C13.1%20105.8%2C0.0%2088.4%2C-13.1%20110.0%2C-10.0%20106.9%2C-31.6%20120.0%2C-14.2%20133.1%2C-31.6%20130.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C106.9%2014.2%2C120.0%2031.6%2C133.1%2010.0%2C130.0%2013.1%2C151.6%200.0%2C134.2%20-13.1%2C151.6%20-10.0%2C130.0%20-31.6%2C133.1%20-14.2%2C120.0%20-31.6%2C106.9%20-10.0%2C110.0%20-13.1%2C88.4%20-0.0%2C105.8%2013.1%2C88.4%2010.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C106.9%20134.2%2C120.0%20151.6%2C133.1%20130.0%2C130.0%20133.1%2C151.6%20120.0%2C134.2%20106.9%2C151.6%20110.0%2C130.0%2088.4%2C133.1%20105.8%2C120.0%2088.4%2C106.9%20110.0%2C110.0%20106.9%2C88.4%20120.0%2C105.8%20133.1%2C88.4%20130.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C6.2%2053.8%2C6.2%2053.8%2C-6.2%2066.2%2C-6.2%22%2F%3E%3Cpolygon%20points%3D%226.2%2C66.2%20-6.2%2C66.2%20-6.2%2C53.8%206.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%22126.2%2C66.2%20113.8%2C66.2%20113.8%2C53.8%20126.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C126.2%2053.8%2C126.2%2053.8%2C113.8%2066.2%2C113.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #5b9fd8; --brand-deep: #3d82be; --brand-ink: #b8d8f0;
  --brand-wash: #10202f; --gold: #c9a45a; --gold-soft: #7a6234;
  --page: #0b0e12; --surface: #14181d; --surface-2: #1b2027; --surface-3: #232931;
  --ink: #eef2f6; --ink-2: #b6c0cb; --muted: #7d8894;
  --line: #2a3038; --line-soft: #20252b; --ring: rgba(255,255,255,.10);
  --axis-stage: #3d8fd0; --axis-word: #d1571f; --axis-image: #12ab83;
  --axis-heritage: #c08400; --axis-community: #c2547f; --axis-honour: #8f74d4;
  --ok-text: #0ca30c;
  --grid: #262c34; --axis-rule: #343b44;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px -12px rgba(0,0,0,.6);
  --shadow-3: 0 4px 8px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
  --tile-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%235b9fd8%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%221.0%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%22111.0%2C38.9%2082.9%2C60.0%20111.0%2C81.1%2076.2%2C76.2%2081.1%2C111.0%2060.0%2C82.9%2038.9%2C111.0%2043.8%2C76.2%209.0%2C81.1%2037.1%2C60.0%209.0%2C38.9%2043.8%2C43.8%2038.9%2C9.0%2060.0%2C37.1%2081.1%2C9.0%2076.2%2C43.8%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C-13.1%2014.2%2C0.0%2031.6%2C13.1%2010.0%2C10.0%2013.1%2C31.6%200.0%2C14.2%20-13.1%2C31.6%20-10.0%2C10.0%20-31.6%2C13.1%20-14.2%2C0.0%20-31.6%2C-13.1%20-10.0%2C-10.0%20-13.1%2C-31.6%20-0.0%2C-14.2%2013.1%2C-31.6%2010.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C-13.1%20134.2%2C0.0%20151.6%2C13.1%20130.0%2C10.0%20133.1%2C31.6%20120.0%2C14.2%20106.9%2C31.6%20110.0%2C10.0%2088.4%2C13.1%20105.8%2C0.0%2088.4%2C-13.1%20110.0%2C-10.0%20106.9%2C-31.6%20120.0%2C-14.2%20133.1%2C-31.6%20130.0%2C-10.0%22%2F%3E%3Cpolygon%20points%3D%2231.6%2C106.9%2014.2%2C120.0%2031.6%2C133.1%2010.0%2C130.0%2013.1%2C151.6%200.0%2C134.2%20-13.1%2C151.6%20-10.0%2C130.0%20-31.6%2C133.1%20-14.2%2C120.0%20-31.6%2C106.9%20-10.0%2C110.0%20-13.1%2C88.4%20-0.0%2C105.8%2013.1%2C88.4%2010.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%22151.6%2C106.9%20134.2%2C120.0%20151.6%2C133.1%20130.0%2C130.0%20133.1%2C151.6%20120.0%2C134.2%20106.9%2C151.6%20110.0%2C130.0%2088.4%2C133.1%20105.8%2C120.0%2088.4%2C106.9%20110.0%2C110.0%20106.9%2C88.4%20120.0%2C105.8%20133.1%2C88.4%20130.0%2C110.0%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C6.2%2053.8%2C6.2%2053.8%2C-6.2%2066.2%2C-6.2%22%2F%3E%3Cpolygon%20points%3D%226.2%2C66.2%20-6.2%2C66.2%20-6.2%2C53.8%206.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%22126.2%2C66.2%20113.8%2C66.2%20113.8%2C53.8%20126.2%2C53.8%22%2F%3E%3Cpolygon%20points%3D%2266.2%2C126.2%2053.8%2C126.2%2053.8%2C113.8%2066.2%2C113.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ------------------------------------------------------------------
   الأساس
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; direction: rtl; text-align: right;
  font-family: var(--font);
  font-size: 15px; line-height: 1.7;
  color: var(--ink); background: var(--page);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
}

/* نسيج هندسي رقيق جدا خلف الصفحة كلها. مرسوم بالرياضيات لا بصورة. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: var(--tile-ink);
  background-size: 190px 190px; background-repeat: repeat;
}

a { color: var(--brand); text-decoration: none;
    text-underline-offset: 3px; transition: color .15s var(--ease); }
a:hover { text-decoration: underline; color: var(--brand-deep); }

h1, h2, h3, h4 { margin: 0 0 .45rem; line-height: 1.35; font-weight: 600;
                 letter-spacing: -.005em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; color: var(--ink-2); }
p { margin: 0 0 .7rem; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------
   الترويسة
   ------------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(105deg, var(--bar-1) 0%, var(--bar-2) 58%, var(--bar-3) 100%);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow-2);
}
.topbar::after {          /* الزخرفة الهندسية: قناع لا صورة، فاللون رمز لا بكسل */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 1;
  background-image: var(--tile-gold);
  background-size: 96px 96px; background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 66%);
}
.topbar-in {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto; padding: .6rem 1.4rem;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  background: linear-gradient(160deg, #fff, #e8f0f7);
  color: #092c4d; display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem; line-height: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.22);
}
.brand-text b { display: block; font-size: 1.05rem; font-weight: 700;
                color: var(--bar-ink); letter-spacing: -.01em; }
.brand-text span { font-size: .73rem; color: rgba(255,255,255,.72); }

.nav { display: flex; gap: .1rem; flex-wrap: wrap; margin-inline-start: auto; }
.nav a {
  position: relative; color: rgba(255,255,255,.78);
  padding: .38rem .78rem; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.nav a.on { background: rgba(255,255,255,.17); color: #fff; font-weight: 600; }
.nav a.on::after {
  content: ""; position: absolute; inset-inline: .78rem; bottom: -.62rem;
  height: 2px; background: var(--gold-soft); border-radius: 2px;
}
.who { display: flex; gap: .55rem; align-items: center;
       font-size: .8rem; color: rgba(255,255,255,.76); }
.who a { color: #fff; opacity: .8; }
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  font-size: .95rem; line-height: 1; transition: background .16s var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------------
   التخطيط
   ------------------------------------------------------------------ */
.wrap { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1.4rem 3rem; }
.row  { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.spread { display: flex; justify-content: space-between; align-items: center;
          gap: .8rem; flex-wrap: wrap; }

.page-head { margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .15rem; }
.page-head .sub { color: var(--muted); font-size: .87rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 1.05rem 1.15rem;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; margin: -.1rem 0 .7rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-soft);
}
.card-head h3 { margin: 0; }

.muted { color: var(--muted); font-size: .84rem; }
.tiny  { font-size: .77rem; line-height: 1.6; }

/* ------------------------------------------------------------------
   الأرقام · أرقام تناسبية على الأرقام الكبيرة، وجدولية في الأعمدة فقط
   ------------------------------------------------------------------ */
.stat {
  font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 700;
  line-height: 1.1; color: var(--brand); letter-spacing: -.02em;
  font-variant-numeric: proportional-nums;
}
.stat-sm { font-size: 1.35rem; }
.stat-label { font-size: .8rem; color: var(--muted); margin-top: .15rem;
              display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.kpi { position: relative; overflow: hidden; }
.kpi::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--brand); opacity: .8;
}

/* ------------------------------------------------------------------
   الشارات
   ------------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.5;
}
.b-upcoming  { background: var(--brand-wash); color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.b-ongoing   { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.b-past      { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.b-cancelled { background: color-mix(in srgb, var(--critical) 12%, var(--surface)); color: var(--critical); border-color: color-mix(in srgb, var(--critical) 34%, transparent); }
.b-postponed { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: #8a6100; border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.b-pending   { background: color-mix(in srgb, var(--serious) 14%, var(--surface)); color: #9a4a22; border-color: color-mix(in srgb, var(--serious) 38%, transparent); }
.b-fam       { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
:root[data-theme="dark"] .b-postponed { color: var(--warn); }
:root[data-theme="dark"] .b-pending   { color: var(--serious); }

/* 🔖 الاستنتاج يُرى ولا يُخلَط بالمنصوص: قارئ الوزارة يعرف أيّهما بين يديه */
.inferred {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: 0 .34rem; border-radius: 4px; vertical-align: 1px;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  cursor: help;
}

.area {
  display: inline-block; font-size: .74rem; padding: 0 .36rem;
  border-radius: 4px; color: var(--ink-2); background: var(--surface-3);
  vertical-align: 1px;
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
       flex: 0 0 8px; box-shadow: 0 0 0 2px var(--surface); }

/* ------------------------------------------------------------------
   بطاقات الفعاليات
   ------------------------------------------------------------------ */
.cards { display: grid; gap: .95rem;
         grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.ev {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
  animation: rise .45s var(--ease) both;
}
.ev:hover { transform: translateY(-2px); box-shadow: var(--shadow-2);
            border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); }
.ev-stripe { height: 3px; background: var(--brand); }
.ev-body { padding: .9rem 1.05rem 1rem; flex: 1; }
.ev h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.ev h3 a { color: var(--ink); }
.ev h3 a:hover { color: var(--brand); text-decoration: none; }
.ev-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .6rem; }
.ev-line { display: flex; gap: .5rem; font-size: .86rem; color: var(--ink-2);
           margin: .2rem 0; }
.ev-line b { flex: 0 0 4.3rem; color: var(--muted); font-weight: 500; font-size: .8rem; }
.ev-sum { font-size: .875rem; color: var(--ink-2); margin: .6rem 0 0; }
.hijri { color: var(--gold); font-size: .81rem; font-weight: 500;
         margin-inline-start: 4.8rem; }
:root[data-theme="dark"] .hijri { color: var(--gold); }

.ev-more { border-top: 1px solid var(--line-soft); background: var(--surface-2);
           padding: .55rem 1.05rem; font-size: .85rem; }
.ev-more > summary {
  cursor: pointer; color: var(--brand); font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: .35rem;
}
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary::before {
  content: ""; width: 6px; height: 6px; border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor; transform: rotate(45deg);
  transition: transform .2s var(--ease); margin-block-start: -3px;
}
.ev-more[open] > summary::before { transform: rotate(-135deg); margin-block-start: 3px; }
.ev-detail { padding-top: .65rem; animation: rise .28s var(--ease) both; }

@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------
   الجداول
   ------------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; font-size: .865rem; }
th, td { padding: .52rem .65rem; text-align: right; vertical-align: top;
         border-bottom: 1px solid var(--line-soft); }
th { background: var(--surface-2); color: var(--ink-2); font-weight: 600;
     font-size: .8rem; position: sticky; top: 0; z-index: 1; }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; border-radius: var(--r-sm); }

/* ------------------------------------------------------------------
   الإدخال
   ------------------------------------------------------------------ */
/* ⛔ **16px بلا شرط، وهذا قرارٌ لا سهو.**
   iOS يُقرّبُ الصفحةَ قسرًا عندَ لمسِ أيِّ إدخالٍ أصغرَ من 16px، **ثمّ لا
   يُرجعُها**. وقياس 2026-08-31: القاعدةُ كانت مشروطةً بـ`max-width: 760px`،
   والآيبادُ 768 و1024 فوقَ الحدِّ في الوضعَين، فكان العرضُ يتشوّهُ أمامَ
   العارضِ في أوّلِ لمسة.
   **ولمَ لا `pointer: coarse`؟** لأنّ آيبادًا بلوحةِ مفاتيحٍ يُبلّغُ `fine`،
   فيسقطُ الشرطُ في يدِ من يَعرض. والشرطُ الذي يسقطُ أحيانا أسوأُ من لا شرط.
   ⇒ **بلا شرط.** والثمنُ نصفُ ملّيمترٍ على سطحِ المكتب، والمقابلُ أنّ العطبَ
   يستحيلُ بنيويّا على كلِّ جهازٍ وكلِّ إعداد. */
input, select, textarea, button { font-family: inherit; font-size: .9rem; color: var(--ink); }
input, select, textarea { font-size: 16px; }
input[type=text], input[type=url], input[type=number], input[type=date],
input[type=password], input[type=search], select, textarea {
  width: 100%; padding: .48rem .68rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
textarea { resize: vertical; line-height: 1.6; }
label { display: block; font-size: .8rem; font-weight: 600;
        color: var(--ink-2); margin-bottom: .22rem; }
.field { margin-bottom: .75rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .48rem .95rem; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  font-weight: 600; font-size: .875rem; white-space: nowrap;
  transition: background .16s var(--ease), transform .1s var(--ease),
              box-shadow .16s var(--ease);
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep);
             text-decoration: none; box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--surface); color: var(--brand); }
.btn.ghost:hover { background: var(--brand-wash); }
.btn.sm { padding: .27rem .62rem; font-size: .8rem; }
.btn.danger { background: var(--critical); border-color: var(--critical); }
.toolbar {
  display: flex; gap: .55rem; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 1.1rem; padding: .85rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1);
}
.toolbar .field { margin: 0; min-width: 152px; }

/* ------------------------------------------------------------------
   السلايدر
   ------------------------------------------------------------------ */
.slider-wrap { padding: .35rem 0 0; }
input[type=range] {
  width: 100%; accent-color: var(--brand); height: 22px; cursor: pointer;
}
.slider-ticks { display: flex; justify-content: space-between;
                font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.slider-ticks span { transition: color .16s var(--ease); }
.slider-ticks span.on { color: var(--brand); font-weight: 700; }

/* ------------------------------------------------------------------
   التقويم
   ⚠️ الحالة تُحمَل بالامتلاء لا بالهيوة، والعائلة يحملها الاسم المكتوب.
      أربعة عشر لونا في شبكة شهر ضجيج لا لوحة.
   ------------------------------------------------------------------ */
.cal { width: 100%; border-collapse: separate; border-spacing: 0;
       table-layout: fixed; background: var(--surface); }
.cal th {
  text-align: center; padding: .55rem .3rem; font-size: .8rem;
  background: var(--surface-2); color: var(--ink-2);
  border-bottom: 1px solid var(--line); position: static;
}
.cal td {
  height: 118px; padding: .28rem; vertical-align: top; overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  border-inline-start: 1px solid var(--line-soft);
}
.cal td:last-child { border-inline-end: 1px solid var(--line-soft); }
.cal td.out { background: var(--surface-2); }
.cal td.today { background: color-mix(in srgb, var(--gold) 8%, var(--surface));
                box-shadow: inset 0 0 0 2px var(--gold); }
.cal-num { display: flex; justify-content: space-between; align-items: baseline;
           font-size: .78rem; margin-bottom: .25rem; padding: 0 .15rem; }
.cal-num .g { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-num .h { color: var(--gold); font-size: .7rem; }
.cal-ev {
  display: block; font-size: .74rem; line-height: 1.5;
  padding: .1rem .35rem; margin-bottom: .16rem; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-inline-start: 3px solid var(--brand);
  background: var(--brand-wash); color: var(--ink);
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.cal-ev:hover { text-decoration: none; transform: translateX(-2px);
                background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.cal-ev.is-ongoing { background: var(--brand); color: #fff; border-inline-start-color: var(--gold); }
.cal-ev.is-past { background: var(--surface-3); color: var(--muted);
                  border-inline-start-color: var(--line); }

/* رأس التقويم وأدواته: يلتف بلا قصّ على أي عرض */
.cal-head { display: flex; justify-content: space-between; align-items: flex-end;
            gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-tools { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.cal-nav-btns { display: inline-flex; gap: .3rem; }
#tapHint { display: none; }

/* نقاط الموبايل: اليوم المزدحم يُقرأ عددا ولونا، والتفصيل بلمسة */
.cal-dots { display: none; align-items: center; gap: 3px; padding: 0 .15rem; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-count { font-size: .68rem; color: var(--muted); margin-inline-start: 2px;
             font-variant-numeric: tabular-nums; }
.cal td.has-ev { cursor: pointer; }
.cal-more { display: block; font-size: .68rem; color: var(--brand);
            cursor: pointer; padding: .05rem .35rem; }

/* قائمة الأيام: العرض الأول على الجوال */
.cal-list { display: flex; flex-direction: column; gap: .8rem; }
.day-block { background: var(--surface); border: 1px solid var(--line);
             border-radius: var(--r); box-shadow: var(--shadow-1);
             padding: .35rem .85rem .55rem; }
.day-block.today { box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-1); }
.day-head { display: flex; justify-content: space-between; align-items: baseline;
            gap: .6rem; flex-wrap: wrap; padding: .5rem 0 .4rem;
            border-bottom: 1px solid var(--line-soft); margin-bottom: .3rem; }
.day-date { font-size: .95rem; }
.day-ev { display: flex; align-items: center; gap: .6rem;
          padding: .5rem .1rem; border-bottom: 1px solid var(--line-soft);
          color: var(--ink); min-height: 44px; }
.day-ev:last-child { border-bottom: 0; }
.day-ev:hover { text-decoration: none; background: var(--surface-2); }
.day-ev .stripe { flex: 0 0 4px; width: 4px; align-self: stretch;
                  border-radius: 3px; min-height: 34px; }
.day-ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.day-ev-body b { font-size: .92rem; font-weight: 600; line-height: 1.5; }
.day-ev .badge { flex: 0 0 auto; }

/* ------------------------------------------------------------------
   الرسوم البيانية
   ------------------------------------------------------------------ */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-rule { stroke: var(--axis-rule); stroke-width: 1; }
.chart text { fill: var(--muted); font-family: var(--font); font-size: 10.5px; }
.chart .tick { font-variant-numeric: tabular-nums; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round;
                      stroke-linecap: round; }
.chart .series-dot { stroke: var(--surface); stroke-width: 2; }

.legend { display: flex; flex-wrap: wrap; gap: .45rem .95rem;
          font-size: .8rem; margin-top: .6rem; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
            margin-inline-end: .35rem; vertical-align: -1px; flex: 0 0 10px; }
.legend > span { display: inline-flex; align-items: center; gap: .3rem; }

.bar-row { display: flex; align-items: center; gap: .6rem; margin: .34rem 0;
           font-size: .84rem; }
.bar-row .lbl { display: block; flex: 0 0 36%; width: 36%; text-align: start;
                color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.bar-row .track { display: block; flex: 1; height: 15px; min-width: 0;
                  background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.bar-row .fill { display: block; height: 100%; background: var(--brand);
                 border-radius: 0 4px 4px 0; min-width: 2px;
                 animation: grow .55s var(--ease) both; transform-origin: right; }
.bar-row .fill[style*="width:0%"] { min-width: 0; }
.bar-row .val { display: block; flex: 0 0 3.4rem; color: var(--ink-2);
                font-size: .81rem; font-variant-numeric: tabular-nums;
                text-align: start; }
.bar-row.dim .fill { opacity: .42; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* تلميح التمرير: يُحسّن ولا يحجب. كل قيمة موجودة أيضا في عرض الجدول. */
.tip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0;
  transform: translateY(4px); transition: opacity .12s var(--ease);
  background: var(--ink); color: var(--page); font-size: .78rem;
  padding: .38rem .6rem; border-radius: 7px; box-shadow: var(--shadow-3);
  max-width: 260px; line-height: 1.55;
}
.tip.on { opacity: 1; transform: none; }
.tip b { color: #fff; }
:root[data-theme="dark"] .tip { background: #2f2b28; color: var(--ink); }

.chart-toggle { display: inline-flex; border: 1px solid var(--line);
                border-radius: var(--r-sm); overflow: hidden; }
.chart-toggle button {
  border: 0; background: var(--surface); color: var(--muted);
  padding: .2rem .58rem; font-size: .76rem; cursor: pointer;
}
.chart-toggle button.on { background: var(--brand); color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------
   ملاحظات وحالات فارغة
   ------------------------------------------------------------------ */
.note {
  border-inline-start: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  padding: .62rem .9rem; border-radius: var(--r-sm);
  font-size: .85rem; margin: .65rem 0; color: var(--ink-2);
}
.note.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.note.bad  { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--surface)); }
.note.ok   { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.note b { color: var(--ink); }
/* ⚠️ عنوان الملاحظة. كان `class="t"` مستعملا في ستة مواضع **بلا أي تعريف**،
   فيلتصق العنوان بنصّه: «لماذا لا تُعرَض نسبة التغيّرلم تكتمل فترتان». */
.note .t {
  display: block; margin-bottom: .2rem;
  font-weight: 700; color: var(--ink);
}

.empty { text-align: center; padding: 2.6rem 1.2rem; color: var(--muted); }
.empty-mark { font-size: 1.9rem; opacity: .35; display: block; margin-bottom: .5rem; }

.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
        background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
        border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.refetching { opacity: .55; transition: opacity .2s var(--ease); }

/* ------------------------------------------------------------------
   النافذة
   ------------------------------------------------------------------ */
.modal-bg {
  position: fixed; inset: 0; z-index: 60; padding: 1.2rem;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(3px);
  display: none; place-items: center;
}
.modal-bg.on { display: grid; animation: fade .16s var(--ease) both; }
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); width: min(600px, 100%);
  max-height: 88vh; overflow: auto; padding: 1.35rem 1.45rem;
  box-shadow: var(--shadow-3); animation: pop .22s var(--ease) both;
}
.modal h2 { margin-bottom: .3rem; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------
   الدخول
   ------------------------------------------------------------------ */
/* ثابتة على كامل النافذة: أضمن من 100vh مع أشرطة المتصفحات المتحركة.
   ⚠️ ولون الأساس **لون صريح لا تدرج**: التدرجات الشعاعية كطبقة خلفية سفلى
      لم تُطلَ في المتصفح هنا، وثلاث محاولات مزج وأقنعة لم تصلحها. واللون
      الصريح يعمل من أول مرة، والعمق يأتي من الظل الداخلي لا من التدرج.
      (القاعدة العامة: ما لا يُطلى لا يُناقَش، يُستبدل.) */
.login-page {
  position: fixed; inset: 0; overflow: auto;
  display: grid; place-items: center; padding: 1.2rem;
  background-color: #0e3557;
  background-image: var(--tile-gold);
  background-size: 208px 208px;
  background-repeat: repeat;
  box-shadow: inset 0 0 min(46vw, 620px) min(9vw, 130px) rgba(4, 18, 32, .74);
}
.login-page > * { position: relative; z-index: 1; }
.login-page .login-card { background: #ffffff; color: #0f1419; }
.login-page .login-card h1 { color: #0d3b66; }
.login-page .login-card .sub, .login-page .login-card .tiny { color: #77828e; }
.login-page .login-card label { color: #414a54; }
.login-page .login-card input { background: #fff; border-color: #dde3ea; color: #0f1419; }
.login-page .login-card .rule { background: #dde3ea; }
.login-page .login-card .rule::after { background: #ffffff; color: #b08129; }
.login-page .login-card .btn { background: #0d3b66; border-color: #0d3b66; color: #fff; }
.login-page .login-card .mark { background: linear-gradient(160deg, #0d3b66, #092c4d); }
.login-card {
  width: min(410px, 100%); padding: 2.1rem 1.9rem;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.55);
  animation: pop .4s var(--ease) both;
}
.login-card .mark {
  width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 14px;
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  color: #fff; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
  box-shadow: var(--shadow-2);
}
.login-card h1 { text-align: center; color: var(--brand); font-size: 1.45rem; }
.login-card .sub { text-align: center; color: var(--muted);
                   font-size: .84rem; margin-bottom: 1.3rem; line-height: 1.65; }
.rule { height: 1px; background: var(--line); margin: 1.1rem 0; position: relative; }
.rule::after { content: "◆"; position: absolute; inset-inline-start: 50%;
               top: -.62rem; transform: translateX(50%); color: var(--gold);
               background: var(--surface); padding: 0 .5rem; font-size: .7rem; }

/* ------------------------------------------------------------------
   التذييل
   ------------------------------------------------------------------ */
.foot { text-align: center; color: var(--muted); font-size: .78rem;
        padding: 1.6rem 1rem 2.6rem; line-height: 1.9; }
.foot .sep { color: var(--gold); margin: 0 .4rem; }

/* ------------------------------------------------------------------
   استجابة وطباعة
   ------------------------------------------------------------------ */
/* ==================================================================
   الموبايل أولا: الوكيل المساعد يعمل من هاتفه (قرار المالك 2026-08-27).
   ⚠️ القاعدة الأولى: الخط **يكبر** على الشاشة الصغيرة لا يصغر. النسخة
      الأولى كانت تنزل به إلى 14.5px فجاءت الشكوى منها نصا.
   ⚠️ والثانية: كل إدخال 16px فما فوق، فأقل منها يجعل iOS يقرّب الصفحة
      قسرا عند كل تركيز في حقل، ولا يرجعها.
   ================================================================== */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: .9rem .8rem 2.4rem; }
  .tiny { font-size: .8rem; }
  .muted { font-size: .86rem; }

  /* الترويسة: صف واحد للتنقل يُمرَّر أفقيا، ولا يلتهم ثلث الشاشة */
  .topbar-in { padding: .5rem .8rem; gap: .35rem .8rem; }
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 1rem; }
  .brand-text b { font-size: .95rem; }
  .brand-text span { display: none; }
  .nav {
    order: 3; flex: 1 1 100%; margin: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: .15rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: .42rem .7rem; font-size: .88rem; flex: 0 0 auto; }
  .nav a.on::after { bottom: -.2rem; }
  .who { margin-inline-start: auto; font-size: .78rem; }
  .who .who-role { display: none; }

  /* لمس مريح: 44px هدف اللمس الأدنى */
  .btn { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }
  .btn.sm { min-height: 38px; padding: .35rem .75rem; font-size: .85rem; }
  .icon-btn { width: 38px; height: 38px; }
  input[type=text], input[type=url], input[type=number], input[type=date],
  input[type=password], input[type=search], select, textarea {
    font-size: 16px; padding: .6rem .75rem;
  }
  label { font-size: .85rem; }

  .toolbar { padding: .7rem .75rem; gap: .5rem; }
  .toolbar .field { min-width: calc(50% - .5rem); flex: 1 1 calc(50% - .5rem); }
  .toolbar .field:first-child { min-width: 100%; flex-basis: 100%; }

  .cards { grid-template-columns: 1fr; }
  .ev h3 { font-size: 1.08rem; }
  .ev-line { font-size: .92rem; }
  .ev-line b { flex-basis: 4rem; font-size: .84rem; }
  .ev-sum { font-size: .92rem; }
  .hijri { margin-inline-start: 4.5rem; font-size: .85rem; }
  .badge { font-size: .78rem; }
  .stat { font-size: 1.9rem; }
  .stat-label { font-size: .84rem; }
  table { font-size: .88rem; }
  .bar-row .lbl { width: 44%; }

  /* النافذة: من أعلى الشاشة، فلوحة مفاتيح iOS لا تبتلع أزرار الحفظ */
  .modal-bg { padding: .6rem; align-items: start; }
  .modal-bg.on { place-items: start center; }
  .modal { max-height: 92dvh; padding: 1.05rem 1rem;
           margin-top: max(.4rem, env(safe-area-inset-top)); }

  /* التقويم على الجوال: الشبكة أيام تُلمس ونقاط ملوّنة، لا نصوص مبتورة */
  .cal { table-layout: fixed; min-width: 0; }
  .cal th { padding: .4rem .1rem; font-size: .72rem; }
  .cal td { height: 64px; padding: .2rem .15rem; }
  .cal-num { font-size: .82rem; padding: 0 .1rem; }
  .cal-num .h { display: none; }
  .cal-pills { display: none; }
  .cal-dots { display: flex; flex-wrap: wrap; }
  #tapHint { display: block; }

  .cal-head { align-items: stretch; }
  .cal-head > div:first-child { width: 100%; }
  .cal-tools { width: 100%; justify-content: space-between; }

  .foot { font-size: .8rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* شاشة ضيقة جدا (iPhone SE ومثيلاتها): تقويم الشبكة يضيق أكثر */
@media (max-width: 390px) {
  .cal td { height: 56px; }
  .cal-dot { width: 6px; height: 6px; }
  .cal-nav-btns .btn { padding-inline: .6rem; }
}
@media print {
  .topbar, .toolbar, .btn, .icon-btn, .foot, .chart-toggle { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .card, .ev { box-shadow: none; break-inside: avoid; border-color: #ccc; }
  a { color: #000; text-decoration: none; }
}
@media (forced-colors: active) {
  .card, .ev, .badge { border: 1px solid CanvasText; }
  .bar-row .fill { background: CanvasText; }
}

/* ------------------------------------------------------------------
   اللمس : شرطُه اللمسُ لا عرضُ الشاشة
   ------------------------------------------------------------------
   ⛔ **عطبٌ قِيسَ في 2026-08-31 قبلَ عرضِ المعرضِ بساعات.**
   كانت قاعدةُ «كلُّ إدخالٍ 16px» داخلَ `@media (max-width: 760px)` وحدَها.
   **والآيبادُ 768 عموديًّا و1024 أفقيًّا, أي فوقَ الحدِّ في الوضعَين معًا.**
   ⇒ بقيت الإدخالاتُ 14.4px, **فيُقرّبُ iOS الصفحةَ قسرًا عند كلِّ لمسةٍ على
     مربّعِ البحثِ أو مرشّحِ الدولة**, ثمّ لا يُرجعُها. وهذا يقعُ أمامَ العارضِ
     في أوّلِ عشرِ ثوانٍ من العرض.

   والدرسُ: **الشرطُ الصحيحُ هو `pointer: coarse` لا عرضُ الشاشة.** فالإصبعُ
   إصبعٌ على شاشةِ 768 وعلى شاشةِ 1366, والفأرةُ فأرةٌ على 1280 وعلى 3840.
   ⇒ وهذه الكتلةُ **لا تمسُّ سطحَ المكتبِ إطلاقًا**: الفأرةُ لا تُطابقُ الشرط.
   ------------------------------------------------------------------ */
/* ⚠️ والشرطُ مركّبٌ لا مفرد: `hover: none` تمسكُ الآيبادَ الذي يُبلّغُ
   `pointer: fine` لأنّ به لوحةَ مفاتيح. وأيُّهما تحقّقَ كفى. */
@media (hover: none), (pointer: coarse) {
  /* ٢. أرضيّةٌ للنصِّ الصغير: 11.2px تُقرأُ على مكتبٍ ولا تُقرأُ على طاولةِ
        معرضٍ وقوفًا. والزيادةُ محسوبةٌ فلا تكسرُ الشبكة. */
  .tiny, .fam, .role, .stat span, .slider-ticks { font-size: .82rem; }
  .ex-meta > div, .says, .why { font-size: .88rem; }
  .muted.tiny, .who-role { font-size: .8rem; }

  /* ٣. أهدافُ اللمس: 44 هو حدُّ آبل، و40 هامشٌ عمليٌّ داخلَ الشبكة */
  .nav a, .who a, .btn, .icon-btn, select, .toolbar button {
    min-height: 40px;
  }
  .nav a, .who a { display: inline-flex; align-items: center; }
  .btn.sm { min-height: 36px; }

  /* ٤. البطاقةُ كلُّها هدفٌ واحد، فلا يُلاحَقُ العنوانُ بالإصبع */
  .card h3 a, .card h2 a { display: inline-block; padding-block: .15rem; }
}

/* الآيبادُ الأفقيُّ: ثلاثةُ أعمدةٍ للعارضين بدلَ عمودَين، فالبطاقةُ لا تتمدّد */
@media (pointer: coarse) and (min-width: 1000px) {
  .ex-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
}