/* ============================================================
   FOTAMAIL · Base — reset + أساسيات مشتركة
   ============================================================ */

/* ============================================================
   Inter — جاهز، بس ناقصه الملف
   ------------------------------------------------------------
   CSP بـ .htaccess فيها font-src 'self'، يعني Google Fonts
   محجوب وما بينحمّل. وهاد مقصود مش سهو: خط من طرف تالت
   بيعطيه عنوان IP لكل مين بيفتح بريده.

   لتفعيله:
     ١) نزّل Inter وحطّ Inter.woff2 بـ assets/fonts/
     ٢) فكّ التعليق عن الكتلة تحت
     ٣) .\deploy.ps1

   لحد وقتها --fm-font (tokens.css) بتبلّش بـ Inter برضو،
   فمين عندو الخط منصّب على جهازه بياخده هلق، والباقي بياخد
   خط نظامه — مش 'Google Sans' يلي ما كان بينحمّل أبداً.

   ⚠️ font-display: swap ضروري — بلاها النص بيختفي لحد ما
   ينزل الخط، ورسالة بيضا لنص ثانية أسوأ من خط بديل.
   ------------------------------------------------------------
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter.202609162341.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html {
  /* بلا هيك سفاري بيكبّر النص لحاله لما تقلب الجوال أفقي */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* بيخلّي حقول الإدخال والـscrollbars تتبع الثيم الحالي */
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  /* التدرّج بيمسك الشاشة كلها — ما في سطح أبيض بهالتصميم */
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--on-surface);
  font-family: var(--fm-font);
  font-size: var(--fm-fs-13);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* التمرير يصير داخل الأعمدة */

  /* المربع الرمادي اللي بيلمع بكل ضغطة على أندرويد/iOS —
     منشيله ومنعتمد على :active و :focus-visible بدالو */
  -webkit-tap-highlight-color: transparent;
  /* منع سحب الصفحة كلها (rubber-band) لما يخلص تمرير عمود */
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--primary-container); color: var(--on-primary-container); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--outline) transparent; }

/* حلقة تركيز واضحة للكيبورد فقط — على كل عنصر تفاعلي */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Keyframes ---------- */
@keyframes fm-pulse {
  0%   { box-shadow: 0 0 0 0 var(--fm-brand-a50); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes fm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fm-glow {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
@keyframes fm-spin { to { transform: rotate(360deg); } }
@keyframes fm-shimmer {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}
@keyframes fm-pop {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Utilities ---------- */
[hidden] { display: none !important; }
[data-preview="off"] .fm-row__preview { display: none; }
.u-hidden { display: none !important; }
.u-mis-auto { margin-inline-start: auto; }
.u-mono { font-family: var(--fm-font-mono); }
.u-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.u-scroll { overflow: auto; overscroll-behavior: contain; }
.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;
}