/* =========================================================================
   محاكي قياس — 02-base.css
   الأساسيات · الخط · RTL · المناطق الآمنة في الجوال
   يُحمَّل بعد 01-tokens.css مباشرة.
   ========================================================================= */

/* -------------------------------------------------------------------------
   الخط — IBM Plex Sans Arabic
   للاستخدام أونلاين ضع هذا في <head> قبل ملفات CSS:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">

   ✅ للتطبيق الأصلي (Capacitor) يُفضَّل استضافة الخط محلياً حتى يعمل بدون
      إنترنت مثل بنك الأسئلة. نزّل ملفات woff2 ضعها في public/assets/fonts/
      وفعّل كتلة @font-face أدناه بدل رابط Google.
   ------------------------------------------------------------------------- */
/*
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../assets/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../assets/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../assets/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../assets/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
*/


/* -------------------------------------------------------------------------
   إعادة الضبط
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-normal);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* منع السحب المطاطي والتحديد العرضي داخل التطبيق الأصلي */
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

/* النص قابل للتحديد فقط حيث يهم (الأسئلة والنصوص) */
body{ -webkit-user-select:none; user-select:none; }
p, .q-text, .q-passage, .q-explanation, .account-value,
input, textarea, [contenteditable]{
  -webkit-user-select:text; user-select:text;
}

h1,h2,h3,h4,h5,h6{ margin:0; font-weight:var(--fw-bold); line-height:var(--lh-tight); letter-spacing:-.3px; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }

a{ color:var(--primary); text-decoration:none; }

button,input,select,textarea{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
button{ cursor:pointer; background:none; border:0; padding:0; }

table{ border-collapse:collapse; width:100%; }

/* الأرقام تبقى مصفوفة عمودياً (مهم للمؤقّت والدرجات) */
.timer, .stat-value, .stat-v, .score-pct, .pct, .stat-n,
.recent-exam-number, .exam-n, .price b{
  font-variant-numeric:tabular-nums;
}


/* -------------------------------------------------------------------------
   RTL — كل الصفحات <html lang="ar" dir="rtl">
   ------------------------------------------------------------------------- */
[dir="rtl"]{ text-align:start; }

/* أي محتوى لاتيني (بريد، كود، روابط) يُعزل حتى لا ينقلب ترتيبه */
.ltr, code, .account-value[data-ltr], .email-value{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:start;
}


/* -------------------------------------------------------------------------
   المناطق الآمنة (النوتش وشريط الإيماءات)
   يتطلب في <head>:
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
   ------------------------------------------------------------------------- */
:root{
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-start:  env(safe-area-inset-right,  0px);
  --safe-end:    env(safe-area-inset-left,   0px);
}


/* -------------------------------------------------------------------------
   التمرير
   ------------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

::-webkit-scrollbar{ width:4px; height:4px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }


/* -------------------------------------------------------------------------
   إمكانية الوصول — حلقة التركيز
   ------------------------------------------------------------------------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:var(--r-xs);
}


/* -------------------------------------------------------------------------
   أدوات مساعدة
   ------------------------------------------------------------------------- */
.is-hidden{ display:none !important; }              /* نفس الاسم المستخدم في appLayout.css الحالي */
[hidden]{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.stack{ display:flex; flex-direction:column; }
.stack-2{ gap:var(--s-2); } .stack-3{ gap:var(--s-3); }
.stack-4{ gap:var(--s-4); } .stack-5{ gap:var(--s-5); }
.row{ display:flex; align-items:center; gap:var(--s-3); }
.spacer{ margin-inline-start:auto; }
.text-center{ text-align:center; }
.muted{ color:var(--text2); }
.tiny{ font-size:var(--fs-xs); color:var(--text3); }