/* =============================================================
   حالة الخدمة وشريط التعليمات — مساحة .fst-*
   -------------------------------------------------------------
   الأنصاف من سلّم DESIGN.md حصراً: 8 · 12 · 16 · 20 · 26.
   الحركة على transform/opacity وحدهما، والمدد من --f-dur.
   لا زجاج (محصور بالكروم الطافي)، ولا أرضياتٍ ملوّنةٍ للدلالة —
   الدلالة في الحدّ والحبر، لأن أرضيةً ملوّنةً على سطحٍ كثيف النصّ
   تُنتج إخفاق تضادٍّ في السمة الليلية.
   ============================================================= */

/* ── لافتة الحالة ─────────────────────────────────────────── */
.fst-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: var(--f-surface-2);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  /* الحدّ الجانبي هو حاملُ الدلالة — سطرٌ واحدٌ ملوّن يُقرأ بلا أن
     يُغرِق النصّ، ويعمل في السمتين بلا حساب تضادٍّ ثانٍ. */
  border-inline-start: 3px solid var(--fst-c, var(--f-border-2));
}
.fst-bar--ok   { --fst-c: var(--f-ok); }
.fst-bar--err  { --fst-c: var(--f-err); }
.fst-bar--warn { --fst-c: var(--f-warn); }
.fst-bar--cs   { --fst-c: var(--f-cs); }

.fst-bar--compact { padding: 9px 11px; }

.fst-bar__ico {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--fst-c, var(--f-ink-2));
  margin-block-start: 1px;
}
.fst-bar__body { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }

.fst-bar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.fst-bar__label {
  font: 700 0.88rem/1.35 var(--f-sans);
  color: var(--fst-c, var(--f-ink));
}
.fst-bar__scope,
.fst-bar__hard {
  padding: 1px 7px;
  /* أرضية النصّ 11.2px في DESIGN.md — 0.72rem = 11.52px فوقها */
  font: 600 0.72rem/1.6 var(--f-sans);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  color: var(--f-ink-2);
  background: var(--f-bg);
}
.fst-bar__hard {
  color: var(--f-err);
  border-color: color-mix(in oklab, var(--f-err) 48%, var(--f-border));
}
.fst-bar__why {
  font: 500 0.84rem/1.6 var(--f-sans);
  color: var(--f-ink);
}
.fst-bar__meta {
  font: 500 0.75rem/1.5 var(--f-sans);
  color: var(--f-ink-3);
}

/* ── الشريط الواحد ───────────────────────────────────────── */
.fst-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  box-shadow: var(--f-shadow-sm);
}
.fst-rail--flush { border-radius: var(--f-r-md); }

.fst-rail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block-end: 9px;
  border-block-end: 1px solid var(--f-border);
}
.fst-rail__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 0.86rem/1.3 var(--f-sans);
  color: var(--f-ink);
}
.fst-rail__side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.fst-rail__code {
  font: 600 0.74rem/1.5 var(--f-mono, var(--f-sans));
  color: var(--f-ink-3);
  padding: 1px 7px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
}
.fst-rail__mgr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* هدف اللمس 28px = الأرضية المعتمدة في final_board.css § ٢٠ */
  min-block-size: 28px;
  padding: 0 10px;
  font: 600 0.76rem/1 var(--f-sans);
  color: var(--f-ink-2);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  cursor: pointer;
  transition: color var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
.fst-rail__mgr:hover { color: var(--f-ink); border-color: var(--f-border-2); }
.fst-rail__mgr:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}

.fst-rows { display: flex; flex-direction: column; gap: 8px; }

.fst-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  border-inline-start: 3px solid var(--fst-c, var(--f-border-2));
}
.fst-row--err    { --fst-c: var(--f-err); }
.fst-row--warn   { --fst-c: var(--f-warn); }
.fst-row--cs     { --fst-c: var(--f-cs); }
.fst-row--ct     { --fst-c: var(--f-ct); }
.fst-row--cb     { --fst-c: var(--f-cb); }
.fst-row--ca     { --fst-c: var(--f-ca); }
.fst-row--notice { --fst-c: var(--f-cs); background: var(--f-surface-2); }
.fst-row--notice.is-urgent { --fst-c: var(--f-err); }

/* أيقونة الصفّ: حبرٌ محايد لا صبغةُ قسم.
   قِستُ `--f-cs` أيقونةً ليلاً فأعطى **2.68** أمام أرضية **3:1** —
   وأيقونةُ Material عنصرُ واجهةٍ فعتبتُها ٣ لا ٤٫٥. وخمسُ أيقوناتٍ في
   الشريط الواحد كانت مخفقةً بها. والصبغةُ لا تُفقَد: الحدُّ الجانبي
   للصفّ وحدُّ الوسم يحملانها، والدلالةُ في الأيقونة **شكلاً** لا لوناً
   (`campaign` · `gavel` · `emergency_home`…). */
.fst-row__ico {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--f-ink-2);
  margin-block-start: 1px;
}

/* ── قرارٌ سُحب: لا نبضَ على التبليغ العاجل ─────────────────
   كتبتُ أولاً نبضاً دائماً على أيقونة أول تبليغٍ عاجل (الروح ٠٦).
   فقاس `tests/audit.js` **حركتين دائمتين** في صفحة الفورمة:
     span.ff-autosave__dot :: fpol-breathe   ← قائمةٌ قبلي
     span.fst-row__ico     :: fst-pulse      ← نبضي
   والميزانية **واحدةٌ كحدّ أقصى** (DESIGN.md بند ٥). فسُحب نبضي.

   وله سببٌ دلاليٌّ يوافق القياس لا يخالفه: الروح ٠٦ محجوزةٌ لما
   **يحدث الآن** — عَلَقٌ فعليّ، حفظٌ يجري. ونقطةُ الحفظ التلقائي حالةٌ
   حيّةٌ فعلاً فتستحقّها. أما تبليغٌ قائمٌ منشورٌ منذ أمس فهو **خبرٌ ثابت**
   لا حدثٌ جارٍ، ونبضُه يُستهلك على غير أهله ويُبلّد النبضَ حين يلزم.

   والإلحاح يبقى مقروءاً بلا حركة: حدٌّ جانبيٌّ أحمر + أيقونة `campaign`
   + وسم «تبليغ عاجل» + الترتيب أولاً. أربعُ إشاراتٍ ساكنةٍ تكفي.
   ═══ فإن أُريد النبضُ لاحقاً، يُسحب أولاً من `.ff-autosave__dot`. ═══ */

.fst-row__main { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }

.fst-row__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* الوسم: الحبر `--f-ink-2` والصبغة في الحدّ وحده.
   كتبتُه أولاً بحبرٍ ملوّن (`--fst-c`) فقاس المُدقِّق **4.27 و4.35** أمام
   أرضية 4.5 — صبغاتُ الأقسام مضبوطةٌ لأسطحٍ وحدودٍ لا لنصٍّ بحجم 11.5px.
   والدلالةُ لا تُفقَد: الحدُّ الجانبي للصفّ والأيقونة يحملانها. */
.fst-row__tag {
  padding: 1px 7px;
  font: 700 0.72rem/1.6 var(--f-sans);
  color: var(--f-ink-2);
  border: 1px solid color-mix(in oklab, var(--fst-c, var(--f-border)) 42%, var(--f-border));
  border-radius: var(--f-r-sm);
}
.fst-row__scope,
.fst-row__by {
  font: 600 0.72rem/1.6 var(--f-sans);
  color: var(--f-ink-3);
}
.fst-row__scope::before { content: '·'; margin-inline-end: 5px; }
.fst-row__by::before    { content: '·'; margin-inline-end: 5px; }

.fst-row__tx {
  font: 500 0.85rem/1.65 var(--f-sans);
  color: var(--f-ink);
}

.fst-row__ackbtn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 30px;
  margin-block-start: 3px;
  padding: 0 11px;
  font: 600 0.78rem/1 var(--f-sans);
  /* لا `--f-navy` نصّاً — يقيس 1.01 ليلاً (انظر .fst-chip.is-on) */
  color: var(--f-ink);
  background: var(--f-surface);
  border: 1px solid var(--f-focus);
  border-radius: var(--f-r-sm);
  cursor: pointer;
  transition: transform var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
.fst-row__ackbtn:hover { transform: translateY(-1px); }
.fst-row__ackbtn:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}
.fst-row__ack {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 0.75rem/1.5 var(--f-sans);
  color: var(--f-ok);
}

.fst-none {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 11px;
  font: 500 0.82rem/1.5 var(--f-sans);
  color: var(--f-ink-3);
}

/* ── وسم البلاطة في كتالوج الخدمات ───────────────────────── */
.fst-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  /* كتبتُه 0.68rem = **10.88px** فوقع تحت أرضية 11.2px في DESIGN.md
     وأمسكه القياس مرّتين على بلاطتين. 0.72rem = 11.52px فوق الأرضية. */
  font: 700 0.72rem/1.7 var(--f-sans);
  color: var(--fst-c, var(--f-ink-2));
  border: 1px solid color-mix(in oklab, var(--fst-c, var(--f-border)) 45%, var(--f-border));
  border-radius: var(--f-r-sm);
  white-space: nowrap;
}
.fst-tag--err  { --fst-c: var(--f-err); }
.fst-tag--warn { --fst-c: var(--f-warn); }
.fst-tag--cs   { --fst-c: var(--f-cs); }

/* ── نافذة المدير ────────────────────────────────────────── */
/* الحاجب زرٌّ حقيقي لا `div` بمُعالج نقر: `div` قابلٌ للنقر **وعدٌ
   كاذب** لمن يتنقّل بلوحة المفاتيح — لا يُركَّز عليه ولا يُعلن دورَه.
   وعند التحويل إلى زرّ تُعاد `appearance` و`font` لأن الزرّ الأصلي
   يجرّ خطَّه ولونَه من النظام. */
.fst-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;                       /* سلّم الطبقات في DESIGN.md */
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: default;
  background: rgba(22, 21, 19, 0.42);
  animation: fst-fade var(--f-dur) var(--f-ease);
}
.fst-scrim:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: -4px !important;
}
@keyframes fst-fade { from { opacity: 0; } to { opacity: 1; } }

.fst-dlg {
  position: fixed;
  z-index: 101;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);    /* RTL: الإزاحة موجبة على المحور الأفقي */
  inline-size: min(92vw, 560px);
  max-block-size: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--f-surface);
  border: 1px solid var(--f-border-2);
  border-radius: var(--f-r-lg);
  box-shadow: var(--f-shadow-md);
  animation: fst-pop var(--f-dur-md) var(--f-ease);
}
@keyframes fst-pop {
  from { opacity: 0; transform: translate(50%, -46%) scale(0.985); }
  to   { opacity: 1; transform: translate(50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fst-scrim, .fst-dlg { animation: none; }
}

.fst-dlg__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-block-end: 1px solid var(--f-border);
}
.fst-dlg__title {
  margin: 0;
  font: 700 1rem/1.4 var(--f-disp, var(--f-sans));
  color: var(--f-ink);
}
.fst-dlg__close {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  color: var(--f-ink-2);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  /* 20 (النافذة) − حاشية وحشوة = 12 على السلّم */
  border-radius: var(--f-r);
  cursor: pointer;
}
.fst-dlg__close:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}

.fst-dlg__tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
}
.fst-dlg__tab {
  min-block-size: 32px;
  padding: 0 12px;
  font: 600 0.82rem/1 var(--f-sans);
  color: var(--f-ink-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--f-r-sm);
  cursor: pointer;
  transition: color var(--f-dur) var(--f-ease);
}
.fst-dlg__tab.is-on {
  color: var(--f-ink);
  background: var(--f-surface-2);
  border-color: var(--f-border);
}
.fst-dlg__tab:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}

.fst-dlg__body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 14px 16px 16px;
  overflow-y: auto;
}

.fst-f { display: flex; flex-direction: column; gap: 6px; }
.fst-f__l {
  font: 600 0.8rem/1.4 var(--f-sans);
  color: var(--f-ink-2);
}
/* `<small>` بلا مقاسٍ صريح يورث 0.83em من 12.8px = **10.7px** — تحت
   أرضية 11.2px في DESIGN.md. المقاس يُصرَّح ولا يُترك للوراثة. */
.fst-f__l small { font-size: 0.75rem; font-weight: 500; color: var(--f-ink-3); }
.fst-req {
  margin-inline-start: 6px;
  font: 700 0.7rem/1 var(--f-sans);
  font-style: normal;
  color: var(--f-err);
}
.fst-f select,
.fst-f textarea,
.fst-f input[type="date"] {
  inline-size: 100%;
  padding: 8px 10px;
  font: 500 0.86rem/1.6 var(--f-sans);
  color: var(--f-ink);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  transition: border-color var(--f-dur) var(--f-ease);
}
.fst-f textarea { resize: vertical; min-block-size: 66px; }
.fst-f select:focus-visible,
.fst-f textarea:focus-visible,
.fst-f input:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 1px !important;
  border-color: var(--f-focus);
}
.fst-err {
  font: 500 0.76rem/1.5 var(--f-sans);
  color: var(--f-err);
}

.fst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fst-chips--wrapy { max-block-size: 132px; overflow-y: auto; }
.fst-chip {
  min-block-size: 28px;
  padding: 0 10px;
  font: 600 0.76rem/1 var(--f-sans);
  color: var(--f-ink-2);
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  cursor: pointer;
  transition: color var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
/* حالة «مختار»: الحبر `--f-ink` والدلالة في الحدّ والأرضية.
   كتبتُها أولاً `color: var(--f-navy)` فقاس المُدقِّق **1.01** في السمة
   الليلية — وهو نفس الدرس المدفوع في حلقة التركيز: **الكحلي حبرٌ نهاريٌّ
   لا يصلح نصّاً على أرضيةٍ ليلية**. ولذلك `--f-focus` نفسه يقلب إلى
   `--f-cs` ليلاً. فلا يُكتب `--f-navy` لوناً لنصٍّ في أي حالٍ. */
.fst-chip.is-on {
  color: var(--f-ink);
  background: var(--f-surface-2);
  border-color: var(--f-focus);
}
.fst-chip:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}

/* الحقلُ الملفوف بـ`<label>` هدفُه اللافتة لا المربّع (WCAG 2.5.8،
   وهو استثناءٌ مُنفَّذ في a11y-audit.js). فاللافتةُ هي التي يجب أن
   تبلغ ٢٤px: قِستُها ٢٢ فرُفعت. */
.fst-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 26px;
  padding-block: 2px;
  font: 500 0.82rem/1.55 var(--f-sans);
  color: var(--f-ink);
  cursor: pointer;
}
.fst-check input {
  flex: 0 0 auto;
  inline-size: 17px;
  block-size: 17px;
  accent-color: var(--f-navy);
}
.fst-check input:focus-visible {
  outline: 2px solid var(--f-focus) !important;
  outline-offset: 2px !important;
}

.fst-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px;
  font: 500 0.78rem/1.6 var(--f-sans);
  color: var(--f-ink-3);
  background: var(--f-surface-2);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
}
.fst-note b { color: var(--f-ink-2); }

.fst-dlg__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block-start: 4px;
}

@media (max-width: 520px) {
  .fst-dlg { inline-size: 96vw; max-block-size: 92vh; }
  .fst-dlg__body { padding: 12px; }
  .fst-rail { padding: 11px; }
}

@media print {
  .fst-rail__mgr, .fst-row__ackbtn, .fst-scrim, .fst-dlg { display: none !important; }
}