:root{
  --ink:#0F203B; --ink-2:#1B3156; --ink-3:#2C4979;
  --gold:#CF9C51; --gold-2:#E6BC7E; --gold-soft:#F7EEE0;
  --text:#0F203B; --text-2:#4C5B72; --text-3:#536178;
  /* ⚠ 2.2.2: ‎--text-3 من #5A6980 إلى #536178 و‎--warn من #9A6B0E إلى #8A5E0A —
     الفحصُ الآليّ للتباين وجدهما دون ٤٫٥ على الأرضيّات المظلَّلة (رؤوس الجداول
     ٤٫٤٧، الشارات الذهبيّة ٤٫٠٧). و‎--gold-ink للذهب نصّاً: الذهبُ نفسه ٢٫٤٦ على الأبيض.
     ⚠ 2.2.2: --text-3 #5A6980 → #536178 and --warn #9A6B0E → #8A5E0A — the
     automated contrast audit found both under 4.5 on shaded grounds (table heads
     4.47, gold badges 4.07). --gold-ink is gold AS TEXT: gold itself is 2.46 on white. */
  --gold-ink:#8F6320;
  /* ⚠ ‎--text-3 كان #97A0AE فيعطي تبايناً 2.25:1 على أرضية الحجر الدافئة —
     دون حدّ WCAG AA‏ (4.5:1) بمرتين، وهو لون التواريخ والعناوين الفرعية على
     هاتفٍ يُقرأ في الشمس. وكان أيضاً رمادياً بارداً من اللوحة المتقاعدة
     (‎#F6F7FA)، فلم يتبع الأرضيةَ حين دفئت. القيمة الجديدة هي الدرجة
     التالية على سُلّم ‎--text-2 نفسه (فارق الأقنية محفوظ): 4.76:1.
     ⚠ --text-3 was #97A0AE — 2.25:1 on the warm stone ground, less than half
     the WCAG AA floor of 4.5:1, and it is the colour of every date and
     subtitle on a phone read in daylight. It was also a COOL grey left from
     the retired #F6F7FA palette: the ground turned warm in the identity pass
     and the text ramp never followed. The new value is the next step on
     --text-2's own ramp — same channel deltas — and reads 4.76:1. */
  --line:#DCDEE3; --line-2:#E8E6E0;
  --bg:#EFEDE7; --card:#FFFFFF;
  --ok:#2F6B4F; --ok-bg:#E9F1EB; --warn:#8A5E0A; --warn-bg:#FDF4E0;
  --bad:#A63A2E; --bad-bg:#F9EDEA;
  --r:var(--rad-l); --r-sm:var(--rad-s);
  /* 3.0.6 · سُلَّمُ الخطّ والزوايا (docs/DESIGN.md §7) — كلُّ حجمٍ وزاويةٍ من هنا.
     ⚠ 3.0.6 · the one type scale and the radii: every font-size and border-radius in
     this file and in the views reads one of these. 2xs is for grids, chart
     annotations and count badges alone; reading text starts at sm (12).
     Above 22px (gate, hero, KPI figures) a size is a display size and stays literal. */
  /* 3.2.19 · SIRA 2.0 · لغة التصميم: ستّة أساليب للنصّ، لكلٍّ ارتفاعُ سطرٍ ثابت (docs/DESIGN.md §7)
     ⚠ 3.2.19 · SIRA 2.0, the language: six text styles, each with a fixed line height
     (docs/DESIGN.md §7). A size is chosen by ROLE — large title · title · headline · body ·
     subhead · caption — never by eye. The old ten-step --fs-* scale now NAMES those six,
     so every rule written against it collapsed onto them at once (18 styles measured on
     one screen became six). Phone values below 1100px, desk values above. */
  --t-lt:28px; --t-ti:22px; --t-he:16px; --t-bo:16px; --t-su:14px; --t-ca:12px;
  --fs-2xs:11px; --fs-xs:var(--t-ca); --fs-sm:var(--t-ca); --fs-base:var(--t-su); --fs-md:var(--t-bo);
  --fs-body:var(--t-bo); --fs-lg:var(--t-he); --fs-xl:var(--t-ti); --fs-2xl:var(--t-ti); --fs-3xl:var(--t-lt);
  /* ⚠ ارتفاع السطر من الحجم نفسه، مقرَّباً إلى شبكة ٢ بكسل؛ والعربيّة أعلى بأربعة · the line
     height comes from the size itself, rounded to a 2px grid, Arabic 4px taller (its letters
     climb and fall further). Latin 12/16 13/18 14/20 15/20 16/22 20/26 22/28 26/32 28/34;
     Arabic 12/20 13/22 14/24 15/24 16/26 20/30 22/32 26/38 28/40. Read by the one :where(*)
     rule under body — nothing inherits a 1.55 factor any more. */
  --lh1:calc(1.3em + 1px); --lh2:calc(1.1em + 4px); --lh3:calc(1.1em + 4px);
  /* 3.2.19 · ثلاثة ارتفاعات للأزرار والحقول · three control heights (desk 28 · 32 · 40 below) */
  --h-s:36px; --h-m:44px; --h-l:50px;
  --rad-s:6px; --rad-m:8px; --rad-l:14px; --rad-pill:999px;
  /* 3.2.19 · السطح: حافّةٌ بنصف بكسل وظلٌّ يكاد لا يُرى · a surface: a half-pixel edge, a near-nil shadow */
  --hair:rgba(15,32,59,.09); --fill:rgba(15,32,59,.06); --fill-2:rgba(15,32,59,.035);
  /* ⚠ 3.0.6 · Inter for Latin and every figure (tabular numerals), IBM Plex Sans Arabic
     for Arabic — the fallback order IS the pairing. IBM Plex Mono is gone from the
     app: a mono figure reads as code, and Arabic must never land in a mono face (rule 38).
     The payment sheet and the ledger PDF keep their own faces (their CSS travels). */
  --font-ui:'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  --font-num:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;
  /* 2.2.64 · سُلَّمُ المسافات الواحد (docs/DESIGN.md §2) · the one spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --sh:0 0 0 .5px var(--hair), 0 1px 3px rgba(15,32,59,.04);
  --sh-2:0 2px 6px rgba(15,32,59,.07), 0 18px 40px rgba(15,32,59,.1);
  --nav-h:calc(60px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);font-feature-settings:'cv11','ss03';background:var(--bg);
  color:var(--text);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;min-height:100vh}
/* 3.2.19 · كلُّ عنصرٍ يحسب سطره من حجمه — لا يرث معاملاً · every element takes its line height
   from its own size; :where() weighs nothing, so a component's own line-height still wins. */
:where(*){line-height:min(var(--lh1),var(--lh2),var(--lh3))}
@supports (width:round(nearest,1px,1px)){:where(*){line-height:round(nearest,min(var(--lh1),var(--lh2),var(--lh3)),2px)}}
:root[dir=rtl]{--lh1:calc(1.6em + 1px); --lh2:calc(1.3em + 5px); --lh3:calc(1.2em + 6.5px)}
@media(min-width:1100px){:root{--t-lt:26px; --t-ti:20px; --t-he:15px; --t-bo:14px; --t-su:13px; --t-ca:12px;
  --h-s:28px; --h-m:32px; --h-l:40px}}
.mono,.num,.fig{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:'tnum','cv11'}
button,input,select,textarea{font-family:inherit;font-size:var(--fs-lg);color:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
b,strong{font-weight:600}
[hidden]{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#CFD5E0;border-radius:var(--rad-s)}

/* ═══ شاشة الدخول · the sign-in screen (2.3.1) ═════════════════════════════
   بتصميم «SIRA Sign In»: لوحةُ العلامة كحليّةٌ عميقة (‎#0A1729‎) والنموذجُ على الحجر
   (‎#F6F4EE‎). الذهبُ يرسم خطوطاً ولا يملأ خلف نصّ (القاعدة ٣٨)، وCormorant للعنوان
   اللاتينيّ وحده ومن ٤٠ بكسلاً فما فوق. على الهاتف تصير اللوحةُ رأساً فوق النموذج.
   From the "SIRA Sign In" design: the brand panel in navy depth, the form on stone.
   Gold draws lines and never fills behind text (rule 38); Cormorant for the Latin
   headline alone, and only from 40px up. On a phone the panel becomes a header. */
#gate{--gt-depth:#0A1729;--gt-stone:#F6F4EE;--gt-n70:#4C5B72;--gt-n40:#97A0AE;--gt-n12:#DCDEE3;
  --gt-lift:#E6BC7E;--gt-kick:#8A5A17;--gt-bad:#A63A2E;
  min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  color:var(--ink);background:var(--gt-stone);-webkit-font-smoothing:antialiased}
.gt-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:56px clamp(40px,5vw,72px) 40px;background:var(--gt-depth);color:#fff}
.gt-wm{position:absolute;inset-inline-end:-140px;bottom:-120px;width:620px;opacity:.06;pointer-events:none}
.gt-lock{display:flex;align-items:center;gap:14px;position:relative}
.gt-lock img{width:40px;height:auto;display:block}
.gt-name{display:flex;flex-direction:column;gap:2px}
.gt-name b{font-size:var(--fs-2xl);font-weight:600;letter-spacing:.14em;color:var(--gt-lift)}
.gt-name small{font-size:var(--fs-xs);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--gt-n40)}
.gt-hero{margin-top:auto;display:flex;flex-direction:column;gap:20px;max-width:620px;position:relative}
.gt-rule{display:flex;align-items:center;gap:12px}
.gt-rule i{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--gold)}
.gt-rule b{width:64px;height:1px;background:var(--gold)}
.gt-hero h1{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(48px,5.3vw,76px);font-weight:500;
  line-height:1.02;letter-spacing:-.01em;color:#fff}
/* ⚠ العربيّة لا تُكتب بـ Cormorant (لا حروف عربيّة فيه) ولا تُباعَد · Arabic is never set
   in Cormorant (it has no Arabic) and never letter-spaced */
html[lang=ar] .gt-hero h1{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:clamp(36px,4.2vw,60px);
  font-weight:600;line-height:1.25;letter-spacing:0}
.gt-hero p{margin:0;font-size:var(--fs-xl);line-height:1.6;color:var(--gt-n12);max-width:520px;text-wrap:pretty}
.gt-foot{margin-top:72px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;font-size:var(--fs-sm);color:var(--gt-n40);position:relative}
.gt-live{display:inline-flex;align-items:center;gap:8px;color:var(--gt-n12)}
.gt-live i{position:relative;width:7px;height:7px;border-radius:50%;background:#4E9A6A;flex:none}
.gt-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4E9A6A;
  animation:gtPulse var(--m-pulse) var(--ease) infinite}
.gt-live.off i,.gt-live.off i::after{background:var(--gt-bad)}
.gt-live.off i::after{animation:none}
@keyframes gtPulse{from{transform:scale(1);opacity:.55}to{transform:scale(2.6);opacity:0}}
.gt-ver{margin-inline-start:auto}
.gt-side{display:flex;flex-direction:column;padding:40px clamp(32px,4.5vw,64px)}
.gt-top{display:flex;justify-content:flex-end}
.gt-seg{display:flex;border-radius:var(--rad-m);box-shadow:inset 0 0 0 1px var(--gt-n12);padding:2px;background:#fff}
.gt-seg button{min-height:32px;padding:0 12px;border-radius:var(--rad-s);font-size:var(--fs-base);font-weight:600;color:var(--gt-n70)}
.gt-seg button[lang=ar]{font-family:'IBM Plex Sans Arabic',sans-serif}
.gt-seg button.on{background:var(--ink);color:#fff}
.gt-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.gt-form{margin:auto 0;width:100%;max-width:400px;align-self:center;display:flex;flex-direction:column;gap:20px;padding:32px 0}
.gt-head{display:flex;flex-direction:column;gap:8px}
.gt-k{font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gt-kick)}
html[lang=ar] .gt-k{letter-spacing:0;font-size:var(--fs-base);font-weight:600}
.gt-head h2{margin:0;font-size:32px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
html[lang=ar] .gt-head h2{letter-spacing:0}
.gt-head p{margin:0;font-size:var(--fs-body);color:var(--gt-n70);line-height:1.5}
.gt-msg{display:flex;gap:10px;align-items:flex-start;background:#F5E1DE;color:#7A2A21;border-radius:var(--rad-m);
  padding:12px 14px;font-size:var(--fs-md);line-height:1.45}
.gt-msg>i{width:8px;height:8px;transform:rotate(45deg);background:var(--gt-bad);flex:none;margin-top:6px}
.gt-msg.ok{background:#E3EFE6;color:#21502F}
.gt-msg.ok>i{background:#2F6B45}
.gt-f{display:flex;flex-direction:column;gap:8px;margin:0}
.gt-f>span:first-child,.gt-fh label{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin:0}
.gt-fh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gt-forgot{font-size:var(--fs-base);font-weight:600;color:#2C4979;padding:4px 0;margin:-4px 0}
.gt-forgot:hover{color:var(--gt-kick)}
.gt-forgot:disabled{opacity:.5}
#gate input{height:48px;width:100%;box-sizing:border-box;border-radius:var(--rad-m);border:0;
  box-shadow:inset 0 0 0 1px var(--gt-n12);background:#fff;padding:0 14px;font-size:var(--fs-body);color:var(--ink);
  outline:none;text-align:start;transition:box-shadow var(--m-1,.12s) var(--ease,ease)}
#gate input::placeholder{color:var(--gt-n40)}
#gate input:focus{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(207,156,81,.25)}
#gate input.bad{box-shadow:inset 0 0 0 1.5px var(--gt-bad)}
#gate input.bad:focus{box-shadow:inset 0 0 0 1.5px var(--gt-bad),0 0 0 4px rgba(166,58,46,.15)}
#gate .pw-wrap input{padding-inline-end:52px}
#gate .pw-wrap button{color:var(--gt-n70);inset-inline-end:2px;width:44px;height:44px}
#gate .pw-wrap button:hover{color:var(--ink)}
#gate .pw-wrap button.on{color:var(--gt-kick)}
.gt-caps{font-size:var(--fs-sm);color:var(--gt-kick)}
/* 3.2.30 · «ابقَ متّصلاً على هذا الجهاز» · keep me signed in on this device */
.gt-keep{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--fs-base);color:var(--gt-kick);cursor:pointer}
.gt-keep input{width:20px;height:20px;margin:0;accent-color:#2C4979;flex:none}
/* ⚠ 3.2.39 · «#gate input» (حقول النصّ) أثقلُ من «.gt-keep input» فصار المربّعُ حقلاً بعرض النموذج ودفع
   النصَّ خارج الشاشة · the text-field rule outweighed this one: the box became a full-width field and
   pushed its label off the screen. Same weight now, after it */
#gate .gt-keep input{width:20px;height:20px;padding:0;border-radius:var(--rad-s);box-shadow:none;background:none;transition:none}
#gate .gt-keep input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;box-shadow:none}
.gt-btn{height:50px;border-radius:var(--rad-m);background:var(--ink);color:#fff;font-size:var(--fs-body);font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;
  transition:background var(--m-1,.12s) var(--ease,ease)}
.gt-btn:hover{background:#1B3156}
.gt-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gt-btn:disabled{cursor:default;opacity:.85}
.gt-btn .spin{width:16px;height:16px;border-width:2px;border-color:rgba(255,255,255,.3);border-top-color:var(--gt-lift)}
.gt-terms{font-size:var(--fs-base);color:var(--gt-n70);line-height:1.55;text-align:center;max-width:400px;align-self:center;text-wrap:pretty}
.gt-terms button{font-size:var(--fs-base);font-weight:600;color:#2C4979;padding:0}
.gt-terms button:hover{color:var(--gt-kick)}
#g-cfgwarn{margin:0}
/* الهاتف واللوح العموديّ: اللوحةُ رأسٌ فوق النموذج، والحقولُ ١٦ بكسلاً كي لا يكبّر iOS ·
   the phone and a portrait tablet: the panel is a header above the form, and fields at
   16px so iOS does not zoom */
@media(max-width:899px){
  /* ⚠ الرأسُ قصير: زرُّ «دخول» يُرى بلا تمرير على هاتف. العنوانُ الكبير يكرّر كلمات القفل
     فيُخفى عن العين ويبقى لقارئ الشاشة، واللغةُ تصعد إلى الرأس · the header is short: Sign
     in is seen with no scrolling on a phone. The big headline repeats the lockup's words, so
     it is hidden from the eye and kept for screen readers, and the language moves up */
  #gate{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .gt-brand{padding:calc(18px + env(safe-area-inset-top)) 20px 16px}
  .gt-wm{width:240px;inset-inline-end:-70px;bottom:-110px}
  .gt-lock img{width:34px}
  .gt-name b{font-size:var(--fs-xl)}
  .gt-hero{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
  .gt-foot{margin-top:14px;font-size:var(--fs-sm);gap:6px 14px}
  #g-where{display:none}
  .gt-top{position:absolute;top:calc(18px + env(safe-area-inset-top));inset-inline-end:20px;z-index:1}
  .gt-seg button{min-height:40px}
  .gt-side{padding:0 20px calc(20px + env(safe-area-inset-bottom))}
  .gt-form{padding:26px 0 24px;gap:18px;margin:0 auto}
  .gt-head h2{font-size:26px}
  #gate input{font-size:var(--fs-lg)}
  .gt-forgot{padding:12px 0;margin:-12px 0}
  .gt-terms{margin-top:auto}
  .gt-terms button{padding:12px 0;margin:-12px 0}
}
@media(prefers-reduced-motion:reduce){.gt-live i::after{animation:none}}
/* ═══ قفل العلامة · the wordmark lockup ═══════════════════════════════
   بناءٌ من نظام الهوية: الواصف يتباعد ليُحاذي عرض الشعار تماماً، فيُقرأ جزءاً
   من القفل لا تعليقاً تحته. والتباعد ناتجُ المحاذاة لا رقمٌ مُقدَّر.
   ⚠ وكان مضبوطاً بـ IBM Plex Mono: خطُّ الأرقام لا خطُّ علامة. أمّا خطّ الشعار
   نفسه (29LT Bukra) فتجاريّ وغير مرخَّصٍ هنا — والشعار صورة لا نصّ حيّ — فلا
   سبيل إلى «نفس خطّ الشعار»، والبناء هو ما يجعله ينتمي إليه.
   ═══ The construction from the identity system: the descriptor letterspaces to
   justify to exactly the wordmark's width, so it reads as part of the lockup
   rather than a caption beneath it. The tracking is a RESULT of the
   justification, not an estimated number.
   ⚠ It was set in IBM Plex Mono — a figure face used as a wordmark. The logo's
   own face (29LT Bukra) is commercial and unlicensed here, and the logo is
   artwork rather than live text, so "the same font as the logo" is not
   available; the construction is what makes it belong. */
.wm-lock{display:block;width:max-content}
/* ⚠⚠ direction:ltr إلزاميّ. الحروف عناصرُ مستقلّة في صفٍّ مرن، واتجاه الصفّ
   يتبع اتجاه المستند — ففي العربية انعكس ترتيبها وقرأ الشعار «ECAPSKROW».
   الواصف كلمةٌ لاتينية دائماً، فاتجاهه لا يتبع الصفحة.
   ⚠⚠ direction:ltr is mandatory. The letters are separate items in a flex row,
   and a flex row follows the document direction — so under RTL they laid out
   right-to-left and the lockup read "ECAPSKROW". The descriptor is a Latin
   word always; its direction does not follow the page. */
.wm-desc{display:flex;justify-content:space-between;width:100%;direction:ltr;
  font-weight:600;color:var(--gold-2);line-height:1}
.wm-desc i{font-style:normal}

/* ═══ SHELL ═══ */
#app{min-height:100vh;padding-bottom:var(--nav-h)}
/* ⚠ كانت الأرضية ‎rgba(246,247,250,.88) — أي ‎#F6F7FA، الرمادي البارد الذي
   تقاعد في تحوّل الهوية (قاعدة ٣٨) — مكتوبةً بالرقم لا بالرمز، فبقيت شريطاً
   بارداً ثابتاً فوق أرضيةٍ دافئة. الآن ‎--bg نفسها.
   ⚠ This was rgba(246,247,250,.88) — #F6F7FA, the cool grey the identity
   pass retired (rule 38) — hardcoded rather than tokenised, so the sticky
   bar stayed a cold strip over a warm ground. It is --bg now. */
.topbar{position:sticky;top:0;z-index:40;background:rgba(239,237,231,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.3px}
.topbar .who{font-size:var(--fs-sm);color:var(--text-3);margin-top:-2px}
/* ⚠ خمسةُ أزرارٍ (٢٢٨ بكسل) وعنوانٌ من كلمةٍ واحدة لا تنكسر («Counterparties»)
   لا يتّسعان لـ ٣٩٠ بكسل، فكانت الصفحةُ كلُّها تنزلق جانباً ١٤ بكسل. العنوانُ
   يتقلّص الآن ويُختصر بنقاط، والأزرارُ لا تُمسّ — هي الهدفُ تحت الإصبع.
   ⚠ Five buttons (228px) beside a one-word title that cannot break
   ("Counterparties") do not fit in 390px, and the whole page slid sideways by
   14px. The title shrinks and ellipsises now; the buttons are untouched —
   they are what the finger aims at. */
.topbar>div:first-child{min-width:0;flex:1 1 auto}
.topbar h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-actions{flex:0 0 auto}
/* والسطرُ الشارح تحت العنوان سطران على الأكثر على الهاتف — كان أربعة، فيأكل
   ربعَ الشاشة قبل أن تبدأ الصفحة. · The subtitle is two lines at most on a
   phone — it ran to four and took a quarter of the screen before the page began. */
@media(max-width:899px){.topbar .who{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
.tb-actions{display:flex;gap:7px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:var(--rad-m);background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);transition:var(--tr-ui)}
.icon-btn:active{transform:scale(.93)}
main{padding:16px 16px 24px;max-width:1180px;margin:0 auto}

/* bottom nav (mobile) */
#bnav{position:fixed;bottom:0;inset-inline:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;
  grid-template-columns:repeat(var(--bn,5),1fr);padding-bottom:env(safe-area-inset-bottom)}
#bnav button{padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:var(--fs-xs);color:var(--text-3);font-weight:500;position:relative;transition:var(--tr-ui)}
#bnav button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
#bnav button.on{color:var(--ink)}
#bnav button.on::before{content:"";position:absolute;top:0;inset-inline-start:22%;width:56%;height:2.5px;
  background:var(--gold);border-radius:0 0 3px 3px}
#bnav .badge{position:absolute;top:5px;inset-inline-end:calc(50% - 20px);background:var(--bad);color:#fff;
  font-size:var(--fs-2xs);font-weight:600;min-width:16px;height:16px;border-radius:var(--rad-m);display:grid;
  place-items:center;padding:0 4px;font-family:var(--font-num)}
/* side nav (desktop) */
#snav{display:none}

/* ═══ HERO ═══ */
.hero{background:linear-gradient(150deg,#223C66 0%,#162846 55%,#0F203B 100%);
  border-radius:20px;padding:20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 34px rgba(15,32,59,.22);margin-bottom:14px}
.hero::after{content:"";position:absolute;inset-inline-end:-52px;top:-52px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(207,156,81,.22),transparent 68%)}
.hero .lab{font-size:var(--fs-sm);color:rgba(255,255,255,.62);font-weight:500}
.hero .big{font-size:var(--t-lt);font-weight:600;line-height:1.05;margin:4px 0 2px;letter-spacing:-1.5px}
.hero .sub{font-size:var(--fs-sm);color:rgba(255,255,255,.5)}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.13);position:relative;z-index:1}
.hero-split .lab{font-size:var(--fs-xs)}
.hero-split .v{font-size:var(--fs-2xl);font-weight:600;margin-top:1px;letter-spacing:-.5px}
.hero-split .v.warn{color:var(--gold-2)}
.hero-wide{grid-column:1/-1}
.spark{display:flex;align-items:flex-end;gap:4px;height:36px;margin-top:16px;position:relative;z-index:1}
.spark div{flex:1;background:rgba(255,255,255,.18);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.spark div.hot{background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.spark-x{display:flex;gap:4px;margin-top:5px;position:relative;z-index:1}
.spark-x span{flex:1;text-align:center;font-size:var(--fs-2xs);color:rgba(255,255,255,.4);
  font-family:var(--font-num)}

/* ═══ SECTIONS ═══ */
.sec{margin-bottom:22px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 2px}
.sec-h h3{font-size:var(--fs-md);font-weight:600;letter-spacing:-.2px}
/* هدف اللمس ٤٤ نقطة، وكان ٣٤. الحشو يوسّع المساحة والهامش السالب يلغيه بصرياً،
   فيكبر ما تلمسه الإصبع ولا يتحرّك ما تراه العين.
   A 44px touch target, up from 34. The padding grows the hit area and the
   negative margin cancels it visually: the finger gets more, the eye sees the
   same. */
.more{font-size:var(--fs-base);color:var(--ink-3);font-weight:600;
  padding:13px 6px;margin:-13px -6px;min-height:44px;display:inline-flex;align-items:center}
.sec-h .cnt{font-size:var(--fs-sm);color:var(--text-3);font-family:var(--font-num)}

/* approval cards */
.appr{background:var(--card);border-radius:var(--r);border:1px solid var(--line);padding:15px;
  margin-bottom:10px;box-shadow:var(--sh);position:relative;overflow:hidden}
.appr::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3.5px;background:var(--gold)}
.appr-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.appr-purpose{font-size:var(--fs-md);font-weight:600;line-height:1.4;margin-bottom:3px}
.appr-meta{font-size:var(--fs-sm);color:var(--text-3)}
.appr-amt{font-size:26px;font-weight:600;margin:9px 0 13px;letter-spacing:-.9px}
.appr-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.appr-wait{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);padding:9px;
  text-align:center;font-size:var(--fs-base);font-weight:600}

/* project cards */
.pcard{background:var(--card);border-radius:var(--r);border:1px solid var(--line);padding:15px;
  margin-bottom:10px;box-shadow:var(--sh);transition:var(--tr-ui);text-align:start;width:100%;display:block}
.pcard:active{transform:scale(.99)}
.pcard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
.pcard-n{font-size:var(--fs-body);font-weight:600;letter-spacing:-.2px}
.pcard-s{font-size:var(--fs-sm);color:var(--text-3);margin-top:1px}
.pcard-figs{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px}
.pcard-figs>div{flex:1}
.pcard-figs .l{font-size:var(--fs-xs);color:var(--text-3)}
.pcard-figs .v{font-size:var(--fs-body);font-weight:600;letter-spacing:-.3px;margin-top:-1px}
.track{height:7px;background:var(--line-2);border-radius:var(--rad-s);overflow:hidden}
.track i{display:block;height:100%;border-radius:var(--rad-s);background:linear-gradient(90deg,var(--ink-3),var(--ink));
  transition:width var(--m-bar) var(--ease)}
.track i.over{background:linear-gradient(90deg,#C44,#A63A2E)}
/* الإنجاز بالذهبي والإنفاق بالكحلي · progress in gold against spend in navy.
   شريطان متطابقان لوناً يُقارَنان بالقراءة لا بالنظر، وهما موضوعان فوق بعضهما
   ليُقارَنا بالنظر — فاللون هو ما يجعل المقارنة لحظية.
   Two identically coloured bars must be compared by reading, and they are
   stacked precisely so they can be compared by looking: the colour is what makes
   the comparison instant. */
.track i.built{background:linear-gradient(90deg,var(--gold-2,#E0BC4A),var(--gold))}
.track-lab{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-3);margin-top:5px}

/* stat tiles */
/* minmax(0,1fr) لا 1fr: الأخيرة تعني minmax(auto,1fr) فلا ينكمش العمود دون
   عرض محتواه الأدنى، فتتجاوز البطاقات حاويتها في المساحات الضيّقة.
   minmax(0,1fr), not 1fr: the latter means minmax(auto,1fr), so a track cannot
   shrink below its content's min-content width and the tiles overflow a narrow
   container — which is what pushed the report page sideways. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{min-width:0}
.tile .l,.tile .v{overflow-wrap:anywhere}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh)}
.tile .l{font-size:var(--fs-sm);color:var(--text-2);font-weight:500;line-height:1.3}
.tile .v{font-size:var(--fs-3xl);font-weight:600;margin-top:3px;letter-spacing:-.6px}
.tile .v.pos{color:var(--ok)} .tile .v.neg{color:var(--bad)} .tile .v.gold{color:var(--warn)}
.tile .n{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}

/* ═══ CARDS / TABLES ═══ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card-h{padding:13px 15px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:var(--fs-md);font-weight:600}
.card-h .hint{font-size:var(--fs-sm);color:var(--text-3);font-weight:400}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
th{background:var(--line-2);color:var(--text-2);font-weight:600;font-size:var(--fs-sm);padding:9px 12px;
  text-align:start;white-space:nowrap;letter-spacing:.02em}
td{padding:11px 12px;border-top:1px solid var(--line-2);vertical-align:middle}
td.num,th.num{text-align:end}
tfoot td{background:var(--gold-soft);font-weight:600;border-top:1.5px solid var(--gold)}
.empty{padding:44px 22px;text-align:center;color:var(--text-3);font-size:var(--fs-md)}
.empty .ico{width:46px;height:46px;border-radius:var(--rad-m);background:var(--line-2);margin:0 auto 12px;
  display:grid;place-items:center;font-size:var(--fs-3xl)}
.empty b{display:block;color:var(--text);font-size:var(--fs-body);margin-bottom:4px;font-weight:600}
/* 3.2.25 · رموزُ ICONS في الصفّ والإجراء السريع والفارغ — بلونِ حاويتها · ICONS drawn in a row, a quick action and an empty state, in their container's colour */
.nrow .ni svg,.qbtn .qi svg,.empty .ico svg{width:58%;height:58%;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* list rows (mobile-friendly alternative to tables) */
.lrow{display:flex;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid var(--line-2);width:100%;text-align:start}
.lrow:first-of-type{border-top:none}
.lrow:active{background:var(--line-2)}
.lrow-m{flex:1;min-width:0}
.lrow-t{font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow-s{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lrow-v{text-align:end;flex:none}
.lrow-v .a{font-size:var(--fs-md);font-weight:600;letter-spacing:-.3px}
.lrow-v .b{font-size:var(--fs-sm);color:var(--text-3);margin-top:1px}
/* أزرار الصفّ في سطرها · a row's buttons on a line of their own, under it */
.lrow-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;padding:0 15px 10px;margin-top:-4px}

/* ═══ BITS ═══ */
.code{display:inline-flex;align-items:center;background:var(--ink);color:#fff;padding:2px 8px;
  border-radius:var(--rad-s);font-size:var(--fs-sm);font-weight:600;font-family:var(--font-num);letter-spacing:0}
.code.d{background:var(--line-2);color:var(--text-2)}
.tag{display:inline-block;padding:2.5px 9px;border-radius:20px;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.t-ok{background:var(--ok-bg);color:var(--ok)} .t-warn{background:var(--warn-bg);color:var(--warn)}
.t-bad{background:var(--bad-bg);color:var(--bad)} .t-mut{background:var(--line-2);color:var(--text-2)}
.t-info{background:#E9EFF9;color:var(--ink-3)}

/* ═══ شبكة الإسناد الشهرية · monthly imputation grid ═══ */
.gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);box-shadow:var(--sh)}
table.ts{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
table.ts th,table.ts td{padding:2px;border-bottom:1px solid var(--line-2);white-space:nowrap;
  font-size:var(--fs-sm);text-align:center}
table.ts thead th{background:var(--line-2);font-weight:600;font-size:var(--fs-xs);color:var(--text-2);
  position:sticky;top:0;z-index:2;font-family:var(--font-num)}
table.ts .c0{position:sticky;inset-inline-start:0;z-index:3;background:var(--card);text-align:start;
  min-width:136px;max-width:170px;box-shadow:1px 0 0 var(--line)}
html[dir=rtl] table.ts .c0{box-shadow:-1px 0 0 var(--line)}
table.ts thead .c0{background:var(--line-2);z-index:4}
table.ts .rw-t{font-weight:600;font-size:var(--fs-base);white-space:normal;line-height:1.3}
table.ts .rw-s{font-size:var(--fs-2xs);color:var(--text-3);font-family:var(--font-num);margin-top:1px}
table.ts td.we,table.ts th.we{background:var(--line-2)}
table.ts td.tot,table.ts th.tot{background:#EDF2FB;font-family:var(--font-num);font-weight:600}
table.ts input{width:42px;padding:3px 1px;text-align:center;font-size:var(--fs-lg);border-radius:var(--rad-s);
  border:1px solid var(--line);background:var(--card);font-family:var(--font-num);
  direction:ltr}
/* أخفِ أسهم الزيادة/النقصان لتوفير عرض الخانة · hide spinners to reclaim cell width */
table.ts input::-webkit-outer-spin-button,table.ts input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
table.ts input[type=number]{-moz-appearance:textfield;appearance:textfield}
table.ts input:focus{outline:2px solid var(--ink-3);outline-offset:-1px}
table.ts tr.sub td,table.ts tr.grand td{background:var(--gold-soft);font-weight:600}
table.ts tr.grand td{background:var(--ink);color:#fff}
table.ts tr.grand .c0{background:var(--ink);color:#fff}
table.ts tr.lv .c0{color:var(--text-2)}
.ts-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--rad-m);overflow:hidden}
.ts-seg button{padding:7px 14px;font-size:var(--fs-base);font-weight:600;color:var(--text-2);background:var(--card)}
.ts-seg button.on{background:var(--ink);color:#fff}
/* شريطٌ مجزّأ يفيض · a segmented strip with more buttons than the phone is wide.
   overflow-x:auto وحده لا يفعل شيئاً هنا: العنصر ابنُ flex، وابن flex لا ينكمش
   دون محتواه إلا بـ min-width:0 — فيدفع الصفحةَ عرضاً بدل أن ينزلق في مكانه،
   والتمرير الأفقي للصفحة على الهاتف عيبٌ بنصّ المواصفة. نفس نمط .ptabs.
   overflow-x:auto alone does nothing here: this is a flex child, and a flex child
   will not shrink below its content without min-width:0 — so it pushed the page
   wider instead of scrolling in place, and a page that scrolls sideways on a
   phone is a defect by our own rule. Same pattern as .ptabs. */
.ts-seg.scrolls{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;max-width:100%}
.ts-seg.scrolls::-webkit-scrollbar{display:none}
.ts-seg.scrolls button{flex:0 0 auto}
.grade{font-family:var(--font-num);font-size:var(--fs-2xs);font-weight:600;width:18px;height:18px;
  display:inline-grid;place-items:center;border-radius:var(--rad-s)}
.g-A{background:var(--ok-bg);color:var(--ok)} .g-B{background:#E9EFF9;color:var(--ink-3)}
.g-C{background:var(--warn-bg);color:var(--warn)} .g-D{background:var(--bad-bg);color:var(--bad)}

/* ═══ FORMS ═══ */
label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--rad-m);
  background:#fff;transition:var(--tr-ui);font-size:var(--fs-lg)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235B6577' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 13px center;padding-inline-start:13px;padding-inline-end:34px}
/* ⚠ 2.2.48: السهمُ في نهاية السطر (يساراً بالعربيّة)، والحشوةُ المنطقيّة تنقلب وحدها مع
   الاتجاه — كانت معكوسةً فجرى النصُّ الطويل تحت السهم · the chevron sits at the inline END
   (the left in Arabic) and logical padding flips by itself — it was inverted, so long text
   ran under the chevron */
html[dir=ltr] select{background-position:right 13px center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink-3);box-shadow:0 0 0 3.5px rgba(44,68,113,.11)}
input:disabled,select:disabled{background:var(--line-2);color:var(--text-3)}
.fields{display:grid;grid-template-columns:1fr;gap:14px}
.fgrp{display:contents}
/* الاختيار المتعدّد: رقائق تُلمس، ٤٤ بكسل على الأقلّ · multi-pick chips, 44px tall */
.multi{display:flex;flex-wrap:wrap;gap:6px}
.multi .mopt{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer;font-size:var(--fs-md)}
.multi .mopt input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.multi .mopt:has(input:checked){border-color:var(--gold);background:var(--warn-bg)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{padding:0 16px;border-radius:var(--rad-m);font-weight:600;font-size:var(--t-su);transition:var(--tr-ui);
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-m)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--ink);color:#fff}
/* 3.2.19 · أربعة أنواع: ممتلئ (الحبر، واحدٌ في كلّ منطقة) · مُلوَّن · نصّ · أحمر. ⚠ الذهب لا يملأ
   خلف نصّ أبيض (٢٫٥:١ — القاعدة ٣٨)، فصار الذهبيّ حبراً · four kinds: filled (ink, one per
   region) · tinted · plain · red. Gold no longer fills behind white text (2.5:1, rule 38). */
.btn-g{background:var(--ink);color:#fff}
.btn-o{background:var(--fill);color:var(--ink);border:0}
.btn-t{background:transparent;color:var(--ink);padding-inline:8px}
.btn-t.gold{color:var(--gold-ink)}
.btn-ok{background:var(--ok);color:#fff}
.btn-bad{background:var(--bad-bg);color:var(--bad);border:0}
.btn-sm{padding:0 12px;font-size:var(--fs-sm);min-height:var(--h-s);border-radius:var(--rad-m)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-full{width:100%;min-height:var(--h-l)}
.fab{position:fixed;inset-inline-end:16px;bottom:calc(var(--nav-h) + 14px);z-index:45;
  width:54px;height:54px;border-radius:18px;background:var(--ink);color:#fff;font-size:26px;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(15,32,59,.32);font-weight:300}
.fab:active{transform:scale(.92)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters select{width:auto;min-width:150px;padding:8px 12px;padding-inline-end:32px;font-size:var(--fs-lg);
  border-radius:var(--rad-m);background-color:var(--card)}

/* ═══ SHEET / MODAL ═══ */
.ov{position:fixed;inset:0;background:rgba(15,32,59,.45);z-index:70;backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:22px 22px 0 0;
  max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
.sheet-grab{width:38px;height:4px;background:var(--line);border-radius:3px;margin:9px auto 0;flex:none}
.sheet-h{padding:12px 20px 13px;border-bottom:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:space-between;gap:10px;flex:none}
.sheet-h h3{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.3px}
/* 2.2.48 · العنوانُ يأخذ ما بقي، والأزرارُ لا تنكمش · the title takes what is left, the controls never shrink */
.sheet-h{flex-wrap:wrap}
.sh-tt{flex:1 1 180px;min-width:0}
.sh-tt h3{overflow-wrap:anywhere}
.sh-ctl{display:flex;align-items:center;gap:6px;flex:none;margin-inline-start:auto}
.sheet-b{padding:18px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet-f{padding:14px 20px 18px;border-top:1px solid var(--line-2);display:flex;gap:9px;flex:none}
.sheet-f .btn{flex:1}
/* ── لوحةُ الإفلات · the drop panel ────────────────────────────────────────
   ⚠⚠ زرٌّ اسمُه «أسقِطْ ملفّاً» وتحته منتقي ملفّاتٍ فقط يَعِد بما لا ينفّذه:
   صاحبُه يسحب ويُفلت فلا يقع شيء، فيستنتج أنّ الميزة معطوبة لا أنّه أخطأ
   الطريق. فالمظهر نفسُه يجب أن يقول «هنا يُفلَت»: إطارٌ متقطّع لا زرّ ممتلئ.
   ⚠ والضغط يبقى الطريق الأوّل — بل الوحيد على الهاتف، فلا سحبَ هناك أصلاً —
   ولذلك اللوحة كلُّها <label> يفتح المنتقي، ونصُّها يذكر الاثنين.
   ⚠⚠ A button called "drop a file" with nothing but a picker under it promises
   what it does not do: its owner drags, drops, nothing happens, and they
   conclude the feature is broken rather than that they took the wrong route. The
   look itself must say "drop here": a dashed outline, not a filled button.
   ⚠ Pressing stays the first road — the only one on a phone, where there is no
   dragging at all — so the whole panel is a <label> that opens the picker, and
   its text names both. */
.fdrop,.pagedrop{display:flex;align-items:center;gap:11px;width:100%;
  padding:14px 15px;border:1.5px dashed var(--line);border-radius:var(--r-sm);
  background:transparent;cursor:pointer;text-align:start;
  min-height:56px;color:var(--text-2);font-size:var(--fs-base);line-height:1.45;
  transition:border-color var(--m-1) var(--ease),background var(--m-1) var(--ease)}
.fdrop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fdrop{position:relative;margin-top:2px}
.fdrop-i,.pagedrop-i{font-size:var(--fs-2xl);color:var(--gold);flex:none;line-height:1}
.fdrop-t{min-width:0;overflow-wrap:anywhere}
/* ⚠ حالةُ «فوقها الآن» ذهبيةٌ صريحة: الإفلات فعلٌ أعمى — الإصبع أو المؤشّر
   يحجب ما تحته — فإن لم تتغيّر اللوحة تغيّراً لا يُخطأ لم يعرف صاحبُه أنّه
   في المكان الصحيح، فيُفلت في الفراغ.
   ⚠ The "over it now" state is unmistakably gold: dropping is a blind act — the
   cursor or finger covers what is beneath — so unless the panel changes in a way
   that cannot be missed, nobody knows they are in the right place, and they let
   go over nothing. */
.fdrop.over,.pagedrop.dragging{border-color:var(--gold);border-style:solid;
  background:rgba(207,156,81,.10)}
.fdrop.has{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.fdrop.has .fdrop-i{color:var(--ok)}
.pagedrop{margin-bottom:12px}

/* ── زرّ الحذف · the delete control ────────────────────────────────────────
   هادئٌ لا مخفيّ: بلون الشرح، بلا خلفيةٍ ولا إطار، مدفوعٌ إلى طرف الصفّ بعيداً
   عن «إلغاء» — فالضغطة الخاطئة تقع بين زرَّين متجاورين متساويَي الحجم. ويحمرّ
   تحت الإصبع وحده، حين يكون القصد قد تحدّد.
   ⚠ ولمسُه ٤٤ بكسل كاملة كما تشترط قاعدة الهاتف: الهدوء في اللون لا في
   المساحة، وزرٌّ صغيرٌ على الشاشة يُخطئه الإصبع فيُضغط ما جاوره.
   Quiet, not hidden: the annotation colour, no fill and no border, pushed to the
   far end of the row away from Cancel — a mistap happens between two adjacent
   buttons of equal size. It reddens under a finger alone, once the intent is
   settled.
   ⚠ Its touch target is the full 44px the mobile rule demands: the quietness is
   in the colour, never in the area — a small target on a phone is missed, and
   what gets pressed is whatever sits next to it. */
.btn-del{flex:0 0 auto;margin-inline-start:auto;background:none;border:0;
  color:var(--text-3);font-size:var(--fs-base);font-weight:600;letter-spacing:.01em;
  padding:0 12px;min-height:44px;border-radius:var(--r-sm);cursor:pointer;
  transition:color var(--m-1) var(--ease),background var(--m-1) var(--ease)}
.btn-del:hover,.btn-del:focus-visible{color:var(--bad);background:var(--bad-bg)}
.btn-del:active{color:var(--bad);background:var(--bad-bg);transform:scale(.96)}
.x{width:34px;height:34px;border-radius:var(--rad-m);color:var(--text-3);font-size:var(--fs-3xl);display:grid;
  place-items:center;background:var(--line-2);flex:none}
/* الصفحة تثبت خلف النافذة · the page holds still behind a sheet.
   sheet.js يضع `sheet-open` على <html> ما دامت نافذةٌ أو سؤالُ تأكيد قائماً.
   overflow:hidden وحده لا يُرجع الصفحة إلى أعلاها — فلا position:fixed هنا،
   وهي الحيلة التي تفقد موضع التمرير. و overscroll-behavior على .sheet-b يمنع
   iOS من تمرير الصفحة حين يبلغ جسم النافذة طرفه.
   sheet.js keeps `sheet-open` on <html> while a sheet or a confirm question
   is up. overflow:hidden alone does not scroll the page to the top — so no
   position:fixed trick, which is what loses the scroll position — and
   overscroll-behavior on .sheet-b stops iOS scrolling the page through when
   the sheet body reaches its end. */
html.sheet-open,html.sheet-open body{overflow:hidden}
/* أهداف اللمس · touch targets: 44px where a finger does the pressing, and
   the desktop keeps its density. The glyph stays the same size; the box grows.
   ⚠ table.ts .x sits in a 2px-padded grid cell, and a 44px box there would
   stretch every row — its hit area grows through a pseudo-element instead. */
@media (hover:none) and (pointer:coarse){
  .x{width:44px;height:44px}
  /* ⚠ ‎.icon-btn كان 40px هنا أيضاً — أزرار الشريط العلوي (الجرس، اللغة،
     الأمر) وهي أكثر ما تُلمس في اليوم، وقد فاتت هذه الكتلة وحدها.
     ⚠ .icon-btn was 40px here too — the top-bar buttons (bell, language,
     palette), the most-pressed controls of the day, and the only ones this
     block missed. */
  .icon-btn{width:44px;height:44px}
  table.ts .x{width:34px;height:34px;position:relative}
  table.ts .x::after{content:"";position:absolute;inset:-5px}
  .btn-sm{min-height:44px;padding-top:9px;padding-bottom:9px}
  /* a tag used as a button: its rows wrap with a 5–6px gap, so ±6px is the most
     the hit area can grow before a later pill's zone covers the row above */
  button.tag{position:relative}
  button.tag::after{content:"";position:absolute;inset:-6px -3px}
}

/* ═══ سؤال التأكيد · the confirm question ═══
   يعلو النافذة المفتوحة (٧٠) ويبقى تحت التنبيه (٩٩) وشريط انتهاء الجلسة (١٢٠)
   Stacks above an open sheet (70) and stays under the toast (99) and the idle bar (120). */
#confirm-root .ov{z-index:90}
#confirm-root .sheet{max-width:420px}
.cfm-t{font-size:var(--fs-md);line-height:1.7;color:var(--text-2)}
/* السطور التي تعيد ذكر ما يُعتمد: العدد والمبلغ قبل الزرّ لا بعده
   The lines that restate what is being approved — the count and the figure
   before the button, not after it. */
.cfm-l{margin-top:14px;border:1px solid var(--line);border-radius:var(--rad-m);overflow:hidden}
.cfm-r{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;font-size:var(--fs-base)}
.cfm-r+.cfm-r{border-top:1px solid var(--line-2)}
.cfm-r .k{color:var(--text-3)}
.cfm-r .v{font-weight:600;text-align:end}
.cfm-l.bad{border-color:#EFD5D5;background:var(--bad-bg)}
.cfm-l.bad .cfm-r+.cfm-r{border-top-color:#EFD5D5}

.note{background:var(--gold-soft);border:1px solid #EFE0BA;border-radius:var(--rad-m);padding:12px 14px;
  font-size:var(--fs-base);color:var(--warn);line-height:1.6}
.note.b{background:#EDF2FB;border-color:#D3E0F2;color:var(--ink-3)}
.note.r{background:var(--bad-bg);border-color:#EFD5D5;color:var(--bad)}
/* 2.5.2 · كان ‎.note.w‎ مستعملاً بلا قاعدة فخرج ذهبيّاً كالعاديّ · .note.w was used with no rule and came out gold like a plain note */
.note.w{background:var(--warn-bg);border-color:#EBD3A2;color:var(--warn)}
/* 3.2.30 · الجرس يقول إنّ الإشعارات مطفأة على هذا الجهاز · the bell says notifications are off here */
.nb-push{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.nb-push span{flex:1;min-width:180px}
#toast{position:fixed;bottom:calc(var(--nav-h) + 16px);inset-inline:16px;z-index:99;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--rad-m);font-size:var(--fs-md);
  font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.28);max-width:420px}
.toast.err{background:var(--bad)} .toast.ok{background:var(--ok)}
/* 2.5.2 · التحذيرُ كان يُرسم كالرسالة المحايدة · a warning drew like a neutral message */
.toast.warn{background:var(--warn)}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:sp var(--m-spin) linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
/* ═══ إنذار انتهاء الجلسة · session-expiry warning ═══
   شريطٌ فوق كلّ شيء لأنّه ينذر بفقد ما يُكتب الآن؛ فوق الشريط السفلي في
   الهاتف لا تحته. A bar above everything, and above the bottom nav on a
   phone — it warns that what is being typed is about to be lost. */
#idlebar{position:fixed;bottom:calc(var(--nav-h) + 16px);inset-inline:16px;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  max-width:460px;margin-inline:auto;padding:12px 16px;border-radius:var(--rad-m);
  background:var(--bad);color:#fff;font-size:var(--fs-md);font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  animation:blockIn var(--m-2) var(--ease) both}
#idlebar b{font-family:var(--font-num);font-variant-numeric:tabular-nums}
#idlebar .btn{min-height:44px;padding-inline:18px;background:#fff;color:var(--bad);border:0}
@media(min-width:900px){#idlebar{bottom:24px}}

#review-flag{position:fixed;top:0;inset-inline-start:0;z-index:80;background:var(--gold);color:#fff;
  font-size:var(--fs-2xs);font-weight:600;padding:2px 10px;border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;letter-spacing:.02em}
html[dir=rtl] #review-flag{border-bottom-right-radius:8px;border-bottom-left-radius:8px}

/* ═══ DESKTOP ═══ */
@media(min-width:900px){
  body{font-size:var(--fs-md)}
  #app{display:grid;grid-template-columns:230px 1fr;padding-bottom:0}
  #bnav{display:none}
  #snav{display:flex;flex-direction:column;background:var(--ink);position:sticky;top:0;height:100vh;
    padding:0 0 12px}
  .snav-top{padding:22px 18px 18px}
  .snav-top .mark{width:38px;height:38px;border-radius:var(--rad-m);background:linear-gradient(145deg,var(--gold-2),var(--gold));
    display:grid;place-items:center;font-size:var(--fs-2xl);color:var(--ink);font-weight:600;margin-bottom:11px}
  .snav-top h1{font-size:var(--fs-xl);color:#fff;font-weight:600}
  .snav-top .wm-desc{font-size:var(--fs-2xs)}
  #snav .items{flex:1;overflow-y:auto;padding:6px 9px}
  #snav .items button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
    border-radius:var(--rad-m);color:rgba(255,255,255,.66);font-size:var(--fs-md);text-align:start;margin-bottom:1px;transition:var(--tr-ui)}
  #snav .items button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
  #snav .items button:hover{background:rgba(255,255,255,.07);color:#fff}
  #snav .items button.on{background:#fff;color:var(--ink);font-weight:600}
  #snav .items .grp{font-size:var(--fs-2xs);letter-spacing:.16em;color:rgba(255,255,255,.32);
    padding:15px 12px 6px;font-weight:600}
  #snav .items .badge{margin-inline-start:auto;background:var(--bad);color:#fff;font-size:var(--fs-2xs);
    font-weight:600;min-width:19px;height:19px;border-radius:var(--rad-m);display:grid;place-items:center;
    padding:0 5px;font-family:var(--font-num)}
  .snav-btm{padding:12px 14px 0;border-top:1px solid rgba(255,255,255,.1);margin:0 9px}
  .snav-btm .nm{color:#fff;font-weight:600;font-size:var(--fs-md)}
  .snav-btm .rl{color:var(--gold-2);font-size:var(--fs-xs);font-family:var(--font-num)}
  .snav-btm .row{display:flex;gap:7px;margin-top:10px}
  .snav-btm .row button{flex:1;padding:7px;border-radius:var(--rad-m);background:rgba(255,255,255,.09);
    color:rgba(255,255,255,.75);font-size:var(--fs-sm);font-weight:600}
  .topbar{padding:16px 26px 14px;background:transparent;border-bottom:1px solid var(--line);position:sticky}
  .topbar h2{font-size:var(--fs-3xl)}
  main{padding:20px 26px 50px}
  .fab{display:none}
  .hero{padding:26px 28px}
  .hero .big{font-size:var(--t-lt)}
  .hero-split{grid-template-columns:repeat(3,1fr)}
  .hero-wide{grid-column:auto}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
  .fields{grid-template-columns:1fr 1fr}
  .fields .full{grid-column:1/-1}
  .ov{align-items:center;padding:24px}
  .sheet{border-radius:var(--rad-l);max-height:88vh;max-height:88dvh}
  .sheet-grab{display:none}
  .sheet-f{justify-content:flex-start}
  .sheet-f .btn{flex:none;min-width:110px}
  #toast{bottom:24px;inset-inline-start:26px;inset-inline-end:auto;align-items:flex-start}
}

/* ═══ ربط الاعتماد ببند الميزانية · approval → budget line block ═══ */
.ap-bud{display:block;width:100%;text-align:start;margin-top:11px;padding:11px 12px;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.ap-bud-t{font-size:var(--fs-base);font-weight:600;color:var(--ink-3);margin-bottom:8px;line-height:1.35}
.ap-bud-g{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:var(--fs-sm);color:var(--text-2)}
.ap-bud-g b{color:var(--text)}
.ap-after{margin-top:7px;font-size:var(--fs-base);font-weight:600;color:var(--ok)}
.ap-after.bad{color:var(--bad)}
.ap-warn{margin-top:7px;background:var(--bad-bg);color:var(--bad);border-radius:var(--r-sm);
  padding:7px 10px;font-size:var(--fs-sm);font-weight:600}

/* ═══ جرس الإشعارات · notification bell ═══ */
.bell{position:relative;display:inline-grid;place-items:center}
.bell .dot{position:absolute;top:-3px;inset-inline-end:-3px;background:var(--bad);color:#fff;
  font-size:var(--fs-2xs);font-weight:600;min-width:17px;height:17px;border-radius:var(--rad-m);display:grid;
  place-items:center;padding:0 4px;font-family:var(--font-num)}
.nrow{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-bottom:1px solid var(--line-2);
  width:100%;text-align:start}
.nrow:last-child{border-bottom:0}
.nrow .ni{width:30px;height:30px;border-radius:var(--rad-m);display:grid;place-items:center;flex:none;
  background:var(--line-2);font-size:var(--fs-md)}
.nrow .nt{font-size:var(--fs-md);font-weight:600;line-height:1.35}
.nrow .ns{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}

/* ═══ الهوية والانتقالات · brand + transitions ═══ */
.brand-logo{display:block;height:44px;width:auto;margin:0 auto 8px;
  filter:drop-shadow(0 2px 10px rgba(207,156,81,.18))}
/* الهامش على الغلاف لا على الصورة: القناع يغطّي صندوق الغلاف، وهامشٌ داخله
   يزيح القناع عن الشعار بنصفه. The margin belongs to the wrapper, not the
   image: the mask covers the wrapper's box, and a margin inside it offsets the
   mask from the logo by half its height. */
#snav .snav-top .brand-logo{height:34px;margin:0 0 7px}
html[dir=rtl] #snav .snav-top .brand-logo{margin-inline-end:auto}

/* شاشة الإقلاع — تمنع وميض شاشة الدخول قبل أن يُعرف المستخدم
   splash holds until auth resolves, so the login form never flashes for a signed-in user */
/* 2.3.2 · بتصميم «SIRA Loading»: العمقُ الكحليّ، والعلامةُ بلمعتها، والقفل، والخطواتُ
   الحقيقيّة على ‎data-step‎ (session.js) — الشريطُ والأيقوناتُ تُرسم من الرقم وحده ·
   from the "SIRA Loading" design: navy depth, the mark with its sheen, the lockup, and
   the real steps on data-step (session.js) — the bar and the icons drawn from the number */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  background:#0F1B33;color:#fff;transition:opacity .32s ease .14s, visibility 0s linear .46s}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
@keyframes sp-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
.sp-wm{position:absolute;inset-inline-end:-140px;bottom:-120px;width:620px;max-width:none;opacity:.05;pointer-events:none}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:36px;width:min(360px,calc(100vw - 48px))}
#splash .logo-sheen{animation:sp-rise 1.6s cubic-bezier(.2,.7,.2,1) both}
#splash .logo-sheen img{width:84px;height:auto;display:block}
.sp-name{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:-12px}
.sp-name b{font-size:var(--fs-2xl);font-weight:600;letter-spacing:.14em;color:#E6BC7E}
.sp-name small{font-size:var(--fs-xs);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:#97A0AE}
.sp-steps{width:100%;display:flex;flex-direction:column;gap:14px;animation:fade-in .3s ease both}
.sp-bar{height:2px;border-radius:1px;background:#22395C;overflow:hidden}
/* ⚠ بالـtransform لا بالعرض (قاعدةُ الحركة) · by transform, never width (the motion rule) */
.sp-bar i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .5s var(--ease,ease)}
html[dir=rtl] .sp-bar i{transform-origin:100% 50%}
#splash[data-step="1"] .sp-bar i{transform:scaleX(.334)}
#splash[data-step="2"] .sp-bar i{transform:scaleX(.667)}
#splash[data-step="3"] .sp-bar i{transform:none}
.sp-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sp-steps li{display:flex;align-items:center;gap:10px;font-size:var(--fs-base);color:#7D8AA0}
.sp-ic{width:14px;height:14px;display:grid;place-items:center;flex:none}
/* ما لم يبدأ: معيّنٌ أجوف · not begun: a hollow diamond */
.sp-ic::before{content:"";width:6px;height:6px;transform:rotate(45deg);border:1px solid #4C5B72}
/* ما تمّ: معيّنٌ ذهبيّ · done: a gold diamond */
#splash[data-step="1"] li[data-s="0"],#splash[data-step="2"] li[data-s="0"],#splash[data-step="2"] li[data-s="1"],
#splash[data-step="3"] li{color:#DCDEE3}
#splash[data-step="1"] li[data-s="0"] .sp-ic::before,#splash[data-step="2"] li[data-s="0"] .sp-ic::before,
#splash[data-step="2"] li[data-s="1"] .sp-ic::before,#splash[data-step="3"] li .sp-ic::before{width:7px;height:7px;border:0;background:var(--gold)}
/* الجارية: دائرةٌ تدور · under way: a turning ring */
#splash[data-step="0"] li[data-s="0"],#splash[data-step="1"] li[data-s="1"],#splash[data-step="2"] li[data-s="2"]{color:#fff}
#splash[data-step="0"] li[data-s="0"] .sp-ic::before,#splash[data-step="1"] li[data-s="1"] .sp-ic::before,
#splash[data-step="2"] li[data-s="2"] .sp-ic::before{width:12px;height:12px;box-sizing:border-box;transform:none;border-radius:50%;
  border:1.5px solid #22395C;border-top-color:#E6BC7E;animation:sp .8s linear infinite}
.sp-ver{position:absolute;inset-inline:0;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:var(--fs-sm);color:#4C5B72}

/* لمعةٌ ذهبية تعبر الشعار · a gold sheen crosses the logo
   ─────────────────────────────────────────────────────────────────────────
   القناع هو الشعار نفسه، فلا يخرج الضوء عن حدوده. والصورة تبقى <img> بنصّها
   البديل تحته: متصفّحٌ لا يعرف mask يُظهر الشعار ساكناً كما كان تماماً، لا
   مستطيلاً ذهبياً مكانه. والطبقة اللامعة عنصرٌ مستقلّ لا الغلاف، حتى يبقى
   ظلّ الشعار الذهبي خارج القناع بدل أن يُقتطع معه.
   الشريط يتحرّك بـ transform وحده؛ القناع نفسه لا يتحرّك أبداً.

   The mask is the logo's own alpha, so the light never leaves the shape, and
   the <img> stays underneath with its alt text: a browser without mask support
   shows exactly the static logo it showed before, not a gold slab in its place.
   The shine is its own layer rather than the wrapper, so the logo's gold
   drop-shadow lives outside the mask instead of being clipped away with it.
   The band moves by transform alone; the mask itself never moves.
   الشعار في الشريط الجانبي لا يلمع: ذلك الشريط يُعاد بناؤه مع كل لقطة من
   Firestore، فتومض الحركة تحت يد المستخدم. The sidebar logo is deliberately
   left out: that nav is rebuilt on every snapshot, so it would flicker. */
.logo-sheen{position:relative;display:inline-block;line-height:0}
.logo-sheen>i{display:none}
@supports ((-webkit-mask-image:url(logo.png)) or (mask-image:url(logo.png))){
  .logo-sheen>i{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;
    -webkit-mask:url(logo.png) center/contain no-repeat;
            mask:url(logo.png) center/contain no-repeat}
  .logo-sheen>i::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:38%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
    animation:sheen 2.2s ease-in-out infinite forwards}
  /* الشريط يبدأ من حافة البداية، وهي في العربية اليمين — فيسير في الاتجاه
     المعاكس. in RTL the band starts at the right edge and must travel the
     other way. */
  html[dir=rtl] .logo-sheen>i::after{animation-name:sheenR}
}
/* العبور يشغل أوّل ٦٠٪ ثم سكون — لمعةٌ متّصلة بلا انقطاع تصير زخرفة دوّارة.
   The pass takes the first 60%, then rests: an unbroken shimmer becomes a
   spinning ornament. */
@keyframes sheen{0%{transform:translateX(-160%)}60%,100%{transform:translateX(400%)}}
/* 2.3.2 · على شاشة الإقلاع العلامةُ لا الشعارُ الكامل، فالقناعُ قناعُها · on the loading
   screen it is the mark, not the full logo, so the mask is the mark's */
@supports ((-webkit-mask-image:url(logo-mark.png)) or (mask-image:url(logo-mark.png))){
  #splash .logo-sheen>i{-webkit-mask-image:url(logo-mark.png);mask-image:url(logo-mark.png)}}
@keyframes sheenR{0%{transform:translateX(160%)}60%,100%{transform:translateX(-400%)}}

/* على شاشة الدخول تمرّ مرّةً واحدة: تلك الشاشة تنتظر المستخدم لا الشبكة،
   واللمعة الدائمة هناك زينةٌ لا تشرح شيئاً. أما شاشة الإقلاع فتنتظر فعلاً،
   فتبقى اللمعة دائرةً مكان الشريط الذي كان يقول «ما زلت أعمل».
   On the gate it passes once — that screen waits for the user, not for the
   network, and a looping shine there would be decoration explaining nothing.
   The splash genuinely is waiting, so there the loop stays, in place of the
   bar that used to say "still working". */

/* دخول وخروج أنعم · softer gate ↔ app transition */
#gate,#app{animation:fade-in var(--m-3) var(--ease) both}
@keyframes fade-in{from{opacity:0}}
.btn,.lrow,.pcard,[data-nav]{transition:var(--tr-ui)}
.btn:active{transform:scale(.985)}

/* ═══ 3.0.19 · العلامةُ ترسم نفسها · the mark draws itself ═══════════════════
   ثلاثُ طبقاتٍ فوق الصورة نفسها: خطٌّ ذهبيٌّ رفيع يخطّ حدود كلّ ضلعٍ من المركز إلى
   الخارج · ثمّ قناعٌ يجري في مسار الضلع فيكشف الصورةَ الحقيقيّة (فالنهايةُ هي العلامةُ
   بعينها لا رسمٌ يشبهها) · ثمّ الخطُّ يذوب واللمعةُ تبدأ، والاسمُ يصعد تحت خطٍّ ذهبيّ.
   ⚠ كلُّ حركةٍ هنا مسافةُ خطٍّ (stroke-dashoffset) أو transform أو opacity — لا عرضَ
   ولا ارتفاع (قاعدةُ الحركة). ⚠ الحالُ الأساسيّ هو المرسوم كاملاً، والحركةُ «from»
   وحدها: متصفّحٌ لا يحرّك ما داخل القناع يُظهر العلامةَ كاملةً لا فراغاً.
   Three layers over the real image: a gold hairline traces each limb's outline from
   the centre outwards · then a mask runs along the limb's path and reveals the actual
   image (so the end IS the mark, not a drawing resembling it) · then the hairline melts,
   the sheen starts, and the name rises under a gold rule. ⚠ Every motion here is a
   stroke offset, a transform or an opacity — never a width (the motion rule). ⚠ The
   base state is fully drawn and only the "from" is animated: a browser that does not
   animate inside a mask shows the whole mark, never a blank. */
#splash .sp-mark{isolation:isolate}
#splash .sp-mark>img{animation:sp-show .45s ease 1.25s both}
/* هالةٌ ذهبيّة تتنفّس خلف العلامة · a gold halo breathes in behind the mark */
#splash .sp-mark::before{content:"";position:absolute;inset:-80%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(207,156,81,.20),rgba(207,156,81,.06) 55%,transparent);
  animation:sp-glow 1.8s ease both}
.sp-draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sp-mk{fill:none;stroke:#fff;stroke-width:25;stroke-linejoin:miter;stroke-dasharray:1 1;stroke-dashoffset:0}
.sp-mk.sp-a{animation:sp-trace .75s cubic-bezier(.65,0,.35,1) .35s both}
.sp-mk.sp-b{animation:sp-trace .85s cubic-bezier(.65,0,.35,1) .55s both}
.sp-ol{animation:sp-ol-out .5s ease 1.3s both}
.sp-ol path{fill:none;stroke:#F0CF94;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:miter;
  stroke-dasharray:1 1;stroke-dashoffset:0;filter:drop-shadow(0 0 2px rgba(240,207,148,.7))}
.sp-ol .sp-a{animation:sp-trace .9s cubic-bezier(.45,0,.2,1) both}
.sp-ol .sp-b{animation:sp-trace 1.05s cubic-bezier(.45,0,.2,1) .15s both}
/* اللمعةُ بعد الرسم لا فوقه · the sheen after the drawing, never across it */
#splash .logo-sheen>i::after{animation-delay:1.6s;animation-fill-mode:both}
.sp-wm{animation:sp-wm 2.4s cubic-bezier(.2,.7,.2,1) both}
.sp-name b{animation:sp-up .7s cubic-bezier(.2,.7,.2,1) 1s both}
.sp-rule{display:block;width:132px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:sp-rule .8s cubic-bezier(.65,0,.35,1) .95s both}
.sp-name small{animation:sp-up .6s ease 1.25s both}
/* الخروج: المساحةُ تقترب ثمّ تنفتح على التطبيق · the exit: the stage leans in, then opens onto the app */
#splash .sp-in{transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .18s ease}
#splash.out .sp-in{transform:scale(1.06);opacity:0}
@keyframes sp-trace{from{stroke-dashoffset:1}}
@keyframes sp-ol-out{to{opacity:0}}
@keyframes sp-show{from{opacity:0}}
@keyframes sp-glow{from{opacity:0;transform:scale(.6)}}
@keyframes sp-rise{from{transform:scale(.9)}}
@keyframes sp-wm{from{opacity:0;transform:scale(1.08) rotate(-3deg)}}
@keyframes sp-up{from{opacity:0;transform:translateY(6px)}}
@keyframes sp-rule{from{transform:scaleX(0)}}
/* 3.0.20 · في التطبيق المثبَّت يرسم الهاتفُ شاشته أوّلاً — الأيقونةُ على كحليّها — قبل أيّ
   سطرٍ منّا. فلا تُمحى العلامةُ لتُرسم من جديد: تبدأ مرسومةً حيث تركها الهاتف وبحجمها
   (‎--sp-dx/dy/s‎ يقيسها السكربتُ في index.html)، ثمّ تستقرّ في مكانها والخطُّ الذهبيّ يجري
   على حدودها. والكحليُّ واحد: ‎#0F1B33‎، كحليُّ الأيقونة نفسها، في الشاشتين وفي البيان.
   In the installed app the phone draws its own screen first — the icon on its navy —
   before a line of ours runs. So the mark is not wiped to be drawn again: it starts
   drawn, where and as large as the phone left it (--sp-dx/dy/s, measured by the script
   in index.html), then settles into place while the gold hairline runs along its edges.
   And the navy is one: #0F1B33, the icon's own, on both screens and in the manifest. */
#splash.sp-pwa .logo-sheen{animation:sp-hand 1.1s cubic-bezier(.55,0,.2,1) .2s both}
#splash.sp-pwa .sp-mk,#splash.sp-pwa .sp-mark>img{animation:none}
#splash.sp-pwa .sp-mark::before{animation-delay:.3s}
#splash.sp-pwa .sp-ol .sp-a{animation-delay:.35s}
#splash.sp-pwa .sp-ol .sp-b{animation-delay:.5s}
#splash.sp-pwa .sp-wm{animation-delay:.3s}
@keyframes sp-hand{from{transform:translate(var(--sp-dx,0px),var(--sp-dy,0px)) scale(var(--sp-s,1))}}
@media(prefers-reduced-motion:reduce){#splash *,#splash *::before,#splash *::after{animation-delay:0s!important}}

/* حارس الإقلاع: تعثّرٌ أو انقطاع · boot watchdog: stuck, or offline (2.3.2) */
#sp-stuck,#sp-off{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  animation:sp-in .3s ease both}
#sp-stuck[hidden],#sp-off[hidden]{display:none}
#sp-stuck b{font-size:var(--fs-xl);font-weight:600}
#sp-stuck p,#sp-off p{margin:0;font-size:var(--fs-md);line-height:1.55;color:#DCDEE3;text-wrap:pretty}
#sp-stuck button{margin-top:8px;height:44px;padding:0 20px;border-radius:var(--rad-m);background:var(--gold);color:#0A1729;
  font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:10px}
#sp-stuck button:hover{background:#E6BC7E}
#sp-stuck button:disabled{cursor:default}
#sp-stuck small{font-size:var(--fs-sm);color:#97A0AE}
#sp-off b{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:600}
#sp-off b i{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.sp-spin{width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(10,23,41,.25);
  border-top-color:#0A1729;animation:sp .8s linear infinite}

/* ═══ سجل التغييرات · audit log ═══ */
.hist{margin-top:11px;border-top:1px solid var(--line-2);padding-top:9px}
.hist>summary{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:6px}
.hist>summary::-webkit-details-marker{display:none}
.hist>summary::before{content:"›";display:inline-block;transition:transform var(--m-1) var(--ease);font-size:var(--fs-body)}
.hist[open]>summary::before{transform:rotate(90deg)}
html[dir=rtl] .hist>summary::before{content:"‹"}
html[dir=rtl] .hist[open]>summary::before{transform:rotate(-90deg)}
.hist-b{margin-top:9px;margin-inline-start:5px;border-inline-start:2px solid var(--line);padding-inline-start:11px;
  display:grid;gap:11px}
.hist-i{position:relative}
.hist-i::before{content:"";position:absolute;inset-inline-start:-15px;top:5px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--card)}
.hist-t{font-size:var(--fs-base);line-height:1.35}
.hist-d{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.hist-c{font-size:var(--fs-sm);color:var(--text-2);margin-top:3px;line-height:1.5}
.hist-c s{color:var(--text-3)}

/* عمود المحتوى في تخطيط سطح المكتب لا يجوز أن يتمدّد بعرض محتواه
   A CSS grid item defaults to min-width:auto, so a wide table (the timesheet) would
   stretch the content column and push the whole page sideways. Pin it to 0 and let
   .gwrap do the scrolling it was built for. */
#app>div{min-width:0}
main{min-width:0}

/* ═══ الشعار زرّ للعودة للرئيسية · logo returns home ═══ */
#snav .snav-top{display:block;width:100%;text-align:start;background:none;cursor:pointer}
#snav .snav-top:hover .brand-logo{filter:drop-shadow(0 2px 14px rgba(207,156,81,.4))}

/* ═══ إظهار كلمة المرور · password reveal ═══ */
.pw-wrap{position:relative}
.pw-wrap input{padding-inline-end:51px}
/* ٤٤ نقطة هو الحدّ الأدنى لهدف اللمس، وكان ٣٦ — والأيقونة تبقى بحجمها لأن
   الزرّ يتّسع حولها، والحقل ٤٩ نقطة فيسع الزرّ داخله بلا أثر بصري.
   44px is the minimum touch target and this was 36. The icon keeps its size —
   the button grows around it — and the 49px field swallows the extra height,
   so nothing moves visually. */
.pw-wrap button{position:absolute;inset-inline-end:3px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--rad-m);
  color:rgba(255,255,255,.5)}
.pw-wrap button:hover{color:rgba(255,255,255,.85)}
.pw-wrap button.on{color:var(--gold)}

/* ═══ الرئيسية الشخصية · the personal home ═══ */
/* 3.2.28 · التحيّة: بطاقةٌ بأبواب على الهاتف (C)، وحرفٌ هادئ على المكتب (B) ·
   the greeting: a card with doors on the phone (C), quiet type on the desk (B) */
.hello-c{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:var(--s4) var(--s4) var(--s4) var(--s4);padding-inline-start:calc(var(--s4) + 4px);margin-bottom:var(--s4)}
.hello-c::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--gold)}
.hello-c .hc-hi{font-size:var(--t-ti);font-weight:600;color:var(--text)}
.hello-c .hc-d{font-size:var(--t-ca);color:var(--text-3)}
.hello-c .hc-none{font-size:var(--t-su);color:var(--text-2);margin-top:var(--s2)}
.hc-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.hc-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s3);border:0;border-radius:99px;
  background:var(--bg);color:var(--text-2);font:inherit;font-size:var(--t-su);cursor:pointer}
.hc-chip .num{font-weight:600;color:var(--text)}
.hc-chip.hot{background:rgba(207,156,81,.16);color:var(--gold-ink)}
.hc-chip.hot .num{color:var(--gold-ink)}
.hc-chip:active{transform:scale(.97)}
.hello-q{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s4);
  padding:var(--s1) 0 var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.hello-q .hq-d{font-size:var(--t-ca);font-weight:500;color:var(--gold-ink)}
.hello-q .hq-hi{font-size:var(--t-lt);font-weight:600;color:var(--text);line-height:1.2}
.hello-q .hq-s{font-size:var(--t-su);color:var(--text-2)}
.hello-q .hq-s .num{font-weight:600;color:var(--text)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.qbtn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px;font-size:var(--fs-base);font-weight:600;text-align:start;
  box-shadow:var(--sh);min-height:52px;color:var(--text)}
.qbtn:hover{border-color:var(--gold);transform:translateY(-1px)}
.qbtn .qi{width:28px;height:28px;border-radius:var(--rad-m);background:var(--gold-soft);color:var(--warn);
  display:grid;place-items:center;font-size:var(--fs-md);flex:none}
@media(min-width:900px){ .qgrid{grid-template-columns:repeat(4,1fr)} }

/* ═══ PAGE TABS · تبويبات الصفحة ═══
   تظهر أعلى الصفحة حين تضمّ المجموعة أكثر من صفحة. تنزلق أفقياً على الهاتف
   ولا تُخرج الصفحة عن عرضها. Scrolls inside itself; never widens the page. */
.ptabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  margin:0 0 18px;padding-bottom:2px;border-bottom:1px solid var(--line);max-width:100%}
.ptabs::-webkit-scrollbar{display:none}
/* الانتقال بين التبويبات: الخطّ الذهبي ينزلق ولا يقفز، والصفحة تظهر بلا ارتجاج.
   prefers-reduced-motion يُطفئ ذلك كلّه — الحركة تفضيل لا شرط.
   Tab transitions: the gold rule slides rather than jumping, and the page fades
   in without a jolt. prefers-reduced-motion turns all of it off — motion is a
   preference, not a requirement. */
.ptabs button{flex:0 0 auto;padding:9px 14px;font-size:var(--fs-md);font-weight:600;
  transition:color var(--m-1) var(--ease),border-bottom-color var(--m-2) var(--ease);
  color:var(--text-2);background:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:44px}
.ptabs button:hover{color:var(--text)}
.ptabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.ptabs .tb{background:var(--gold);color:var(--ink);font-size:var(--fs-2xs);font-weight:600;
  min-width:16px;height:16px;border-radius:var(--rad-m);display:inline-grid;place-items:center;padding:0 4px}
@media(max-width:900px){.ptabs{margin-bottom:14px}}

/* ═══ المُرشِّح داخل الصفحة · the in-page selector ═══════════════════════
   ⚠⚠ كان `.ptabs` يؤدّي معنيين: التنقّل بين صفحات المجموعة (يرسمه الهيكل)،
   واختيار شيءٍ داخل الصفحة (ترسمه الشاشة نفسها). فيقف الشريطان أحدهما فوق
   الآخر بالمظهر ذاته — وفي «المهامّ» ثلاثةٌ متطابقة — ولا شيء يقول للقارئ
   أيُّها يغيّر الصفحة وأيُّها يُرشّح ما فيها. فيضغط ليُرشّح فيغادر الصفحة.
   والفرق ليس تجميلاً: الأوّل تنقّلٌ والثاني حالةُ عرض، وهما فعلان مختلفان.

   ⚠⚠ `.ptabs` carried two meanings: navigating between the group's pages (drawn
   by the shell) and choosing something inside the page (drawn by the view). So
   the two strips sat one above the other looking identical — three of them on
   Tasks — with nothing telling the reader which one changes the page and which
   filters it. You press to filter and you leave the page instead.
   The distinction is not decoration: one is navigation and the other is view
   state, and they are different acts.

   الشكل يقول ذلك: أقراصٌ ممتلئة لا خطٌّ سفليّ، وأصغر، وبلا حدٍّ يفصل الصفحة.
   The form says so: filled pills rather than an underline, smaller, and with no
   rule beneath separating the page. */
.pfilter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:0 0 14px;padding:1px 1px 2px;max-width:100%;align-items:center}
.pfilter::-webkit-scrollbar{display:none}
.pfilter > .pf-l{flex:0 0 auto;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  color:var(--text-3);margin-inline-end:2px;white-space:nowrap}
.pfilter button{flex:0 0 auto;padding:6px 12px;font-size:var(--fs-base);font-weight:600;
  color:var(--text-2);background:var(--line-2);border:1px solid transparent;border-radius:20px;
  white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:34px;
  transition:background var(--m-1,.12s) var(--ease,ease),color var(--m-1,.12s) var(--ease,ease)}
.pfilter button:hover{color:var(--text)}
.pfilter button.on{background:var(--ink);color:#fff}
.pfilter .tb{background:var(--gold);color:var(--ink);font-size:var(--fs-2xs);font-weight:600;
  min-width:16px;height:16px;border-radius:var(--rad-m);display:inline-grid;place-items:center;padding:0 4px}
.pfilter button.on .tb{background:#fff;color:var(--ink)}
@media(max-width:900px){.pfilter{margin-bottom:12px}}

/* ═══ TIMESHEET HEAD · رأس الجدول الزمني ═══ */
table.ts thead th .dw{display:block;font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);
  line-height:1.15;letter-spacing:.04em}
table.ts thead th .dn{display:block;font-size:var(--fs-xs);font-weight:600;line-height:1.2;
  font-family:var(--font-num)}
table.ts thead th.we .dw,table.ts thead th.we .dn{color:var(--text-3)}
table.ts thead .c0 .hd-m{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.25}
table.ts thead .c0 .hd-s{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);
  letter-spacing:.04em;margin-top:1px}

/* ═══ MONTH PICKER · اختيار الشهر ═══ */
.mpick{display:flex;align-items:center;gap:6px;margin-bottom:14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad-m);padding:6px 8px}
.mpick .mp-a{width:44px;height:44px;border-radius:var(--rad-m);font-size:var(--fs-2xl);line-height:1;
  color:var(--ink);background:var(--line-2);font-weight:600;flex:0 0 auto}
.mpick .mp-a:hover{background:var(--gold-soft)}
/* 2.2.36 · هدفٌ ٤٤ بكسل لعلامة × الصغيرة (فريق المشروع): الهامشُ السالب يُبقي الرقاقةَ
   ضيّقةً والهدفَ كاملاً · a 44px target for the small × (project team): the negative
   margin keeps the chip tight and the target whole */
.xbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  margin:-12px -10px -12px -2px;color:var(--bad);font-weight:600;font-size:var(--fs-xl);border-radius:var(--rad-m)}
.xbtn:hover{background:var(--bad-soft,rgba(163,34,31,.08))}
.fknown.sim{color:var(--warn)}
/* 2.2.38 · العهدةُ أمام العناصر: لوحتان متجاورتان من ٧٠٠ بكسل، فوق بعضهما على الهاتف
   the custody beside the elements: two panels side by side from 700px, stacked on a phone */
.dc{margin-top:10px;border:1px solid var(--line);border-radius:var(--rad-m);padding:10px 12px;background:var(--card)}
.dc-h{font-weight:600;font-size:var(--fs-base);margin-bottom:8px}
.cmp2{display:grid;gap:10px}
@media(min-width:700px){.cmp2{grid-template-columns:1fr 1fr}}
.dc-c{border:1px solid var(--line-2);border-radius:var(--rad-m);padding:8px 10px;min-width:0}
.dc-t{font-size:var(--fs-sm);color:var(--text-2);font-weight:600;margin-bottom:4px}
.dc-r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-2);width:100%;text-align:start;font-size:var(--fs-base);background:none}
.dc-r small{display:block;color:var(--text-3);font-size:var(--fs-sm);margin-top:2px}
.dc-b{min-height:44px;cursor:pointer}.dc-b:hover{background:var(--gold-soft)}
.dc-f{margin-top:8px}.dc-e{color:var(--text-3);font-size:var(--fs-base);padding:6px 0}
/* 2.2.48 · شريطُ التخليص · the clearance bar */
.dcl-bar{display:flex;height:10px;border-radius:var(--rad-s);overflow:hidden;background:var(--line-2);margin:4px 0 8px}
.dcl-bar i{display:block;height:100%}
.dcl-bar .dcl-r,.dcl-f.dcl-r i{background:var(--ink)} .dcl-bar .dcl-m,.dcl-f.dcl-m i{background:var(--gold)}
.dcl-bar .dcl-c,.dcl-f.dcl-c i{background:var(--ok)} .dcl-bar .dcl-x,.dcl-f.dcl-x i{background:var(--text-3)} .dcl-f.dcl-l i{background:var(--line);border:1px solid var(--text-3)}
.dcl-fs{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:6px}
.dcl-f{display:flex;align-items:center;gap:6px;font-size:var(--fs-base);color:var(--text-2)}
.dcl-f i{width:9px;height:9px;border-radius:3px;flex:none;box-sizing:border-box}
.dcl-f b{color:var(--ink)}
.dcl-f.dcl-l b{color:var(--warn)}
.dcl-bar .dcl-p,.dcl-f.dcl-p i{background:var(--ink-2);opacity:.75}
.dc-r small{display:block;color:var(--text-3);font-size:var(--fs-sm);margin-top:2px}
.dcl-next{margin-top:8px;font-size:var(--fs-base);color:var(--warn);font-weight:600}
.dcl-next.ok{color:var(--ok)}
.mpick .mp-l{flex:1;text-align:center;font-size:var(--fs-md);font-weight:600;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpick .mp-now{flex:0 0 auto;font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);
  padding:8px 11px;border-radius:var(--rad-m);background:var(--line-2);min-height:38px}
.mpick .mp-now:hover{background:var(--gold-soft)}
button.tag{cursor:pointer}
button.tag:hover{filter:brightness(.96)}

/* ═══ PROFILE · ملفي ═══ */
.me-top{display:flex;align-items:center;gap:13px;padding:13px 15px;border-bottom:1px solid var(--line-2)}
.me-top .av{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--gold-soft)}
.me-top .av-i{display:grid;place-items:center;background:var(--ink);color:var(--gold);
  font-size:var(--fs-3xl);font-weight:600;font-family:var(--font-num)}
.me-top .me-n{font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.3}
.me-top .me-e{font-size:var(--fs-base);color:var(--text-3);margin-top:2px;word-break:break-all}

/* ═══ ADD BUTTON (desktop top bar) · زر الإضافة على الحاسوب ═══
   العائم يختفي فوق ٩٠٠ بكسل، فهذا بديله — ولا يظهر الاثنان معاً أبداً.
   The floating button is hidden above 900px; this replaces it. Never both at once. */
#tb-add{display:none}
@media(min-width:900px){
  #tb-add{display:inline-flex;align-items:center;gap:7px;width:auto;padding:0 15px;
    background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;font-size:var(--fs-base)}
  #tb-add:hover{background:var(--ink-3);border-color:var(--ink-3)}
  #tb-add svg{stroke:currentColor}
}

/* ═══ ORG TREE · الهيكل الإداري ═══
   الإزاحة منطقية لتنقلب مع اتجاه الكتابة · logical inset so it flips with direction */
.tree-row{padding-inline-start:calc(15px + var(--d,0) * 20px);position:relative}
.tree-row .tw{display:inline-block;width:12px;height:1px;background:var(--line);
  vertical-align:middle;margin-inline-end:7px}
.tree-row[style*="--d:0"]{padding-inline-start:15px}

/* ═══ EXECUTIVE REPORT & PRINT VIEW · تقرير المستثمرين ═══ */
.rep-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
/* ⚠ كانت تستعمل ‎--bg-card‎ و‎--sh-sm‎ وهما غير معرَّفين، فخرج المستند بلا
   خلفيةٍ ولا ظلّ — نفس عطل لوحة الأوامر أعلاه، وثالث مرّة يتكرّر فيها الصنف.
   والمتغيّر غير المعرَّف لا يُخطئ: يُهمَل بصمت، فلا يُرى إلّا على الشاشة.
   ⚠ These were --bg-card and --sh-sm, neither of which exists, so the document
   rendered with no background and no shadow — the same fault as the command
   palette above, and the third time this class has appeared. An undefined
   custom property does not error: it is silently dropped, so only the screen
   ever says so. */
.report-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:24px;box-shadow:var(--sh)}
/* ═══ المستندات المولَّدة تتبع نظام هوية المجموعة ══════════════════════
   الذهب يرسم الخطوط ولا يملأ خلف نصٍّ جارٍ. ومسطرة الترويسة ذهبية كما في
   ورق المراسلات والفاتورة في نظام الهوية؛ أمّا خطوط الجداول والأقسام فتبقى
   كحلية لأنّها بناءٌ لا هوية.
   ⚠ ولا تباعد بين حروفٍ عربية أبداً: التتبّع يفكّ الوصل فتخرج الكلمة حروفاً
   منفصلة. قواعد «العين» في نظام الهوية لاتينية بطبعها، فتُقيَّد بـ dir=ltr.
   ═══ Generated documents follow the group identity ════════════════════
   Gold draws the lines and never fills behind running text. The letterhead
   rule is gold, as it is on the letterhead and the invoice in the identity
   system; table and section rules stay navy, because those are structure
   rather than identity.
   ⚠ Never letter-space Arabic: tracking breaks the joining and the word comes
   apart into separate letters. The identity's eyebrow rules are Latin by
   nature, so they are bound to dir=ltr. */
.rep-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:2px solid var(--gold);margin-bottom:20px;gap:16px;flex-wrap:wrap}
.rep-brand{display:flex;align-items:center;gap:14px}
.rep-logo{height:42px;width:auto;object-fit:contain}
.rep-title{font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
html[dir=ltr] .rep-title{letter-spacing:.03em}
.rep-sub{font-size:var(--fs-base);color:var(--text-2);margin-top:2px}
.rep-meta{font-size:var(--fs-base);color:var(--text-2);text-align:end;line-height:1.6}
.rep-sec{margin-bottom:24px;page-break-inside:avoid}
.rep-sec-h{font-size:var(--fs-md);font-weight:600;color:var(--ink);padding-bottom:6px;border-bottom:1.5px solid var(--ink);margin-bottom:12px}
.rep-tiles{margin-bottom:0}
/* overflow-x وحده لا يكفي: العنصر بلا حدّ عرض يتمدّد ليسع المحتوى بدل أن ينزلق،
   فيدفع الصفحة أفقياً — نفس فخّ min-width:auto الذي أصاب جدول الدوام.
   overflow-x alone is not enough: with no width bound the element grows to fit its
   content instead of scrolling, pushing the page sideways — the same min-width:auto
   trap that hit the timesheet grid. */
.rep-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.rep-tbl{min-width:max-content}
.rep-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.rep-tbl th{text-align:start;padding:8px 10px;font-weight:600;color:var(--text-2);border-bottom:1px solid var(--line);font-size:var(--fs-sm);background:var(--bg)}
.rep-tbl td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.rep-tbl th.num,.rep-tbl td.num{text-align:end;font-variant-numeric:tabular-nums}
.rep-tbl tr:hover td{background:rgba(15,32,59,.02)}
.rep-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.rep-card-t{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:10px}
.rep-stat{font-size:var(--fs-base);background:var(--bg);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-sm)}
.rep-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;padding-top:20px;border-top:1px dashed var(--line);page-break-inside:avoid}
.rep-sign-box{text-align:center}
.rep-sign-box .l{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:36px}
.rep-sign-box .line{height:1px;background:var(--ink);width:80%;margin:0 auto}

/* ═══ SIMULATOR · محاكاة هبوط العملات ═══ */
.sim-box{background:linear-gradient(180deg,rgba(207,156,81,.06),rgba(207,156,81,.01));border:1px solid rgba(207,156,81,.35);border-radius:var(--r);padding:16px;margin-bottom:16px}
.sim-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sim-title{font-size:var(--fs-md);font-weight:600;color:var(--ink)}
/* ثلاث عملات وحقلُ نسبةٍ لكلٍّ منها لا يتّسع لها صفٌّ واحد على هاتف:
   المجموعة تأخذ سطرها، والأزرار تلتفّ داخلها، فلا تفيض الصفحة أفقياً.
   Three currencies each with a percentage field do not fit one row on a phone:
   each group takes its own line and its buttons wrap inside it, so the page
   never scrolls sideways. */
.sim-ctrls{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;align-items:stretch}
.sim-grp{display:flex;align-items:center;gap:6px;font-size:var(--fs-base);flex-wrap:wrap;min-width:0}
.sim-grp>b{flex:0 0 auto}
.sim-btns{display:flex;gap:4px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.sim-btn{border:1px solid var(--line);background:var(--card);padding:4px 9px;border-radius:var(--rad-s);font-size:var(--fs-sm);cursor:pointer;transition:var(--tr-ui)}
.sim-btn:hover{border-color:var(--gold)}
.sim-btn.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}

/* ═══ الطباعة · print ═══════════════════════════════════════════════════
   ⚠ الطباعة هنا ليست «الشاشة على ورق»: هي المخرَج الذي يُسلَّم إلى بنكٍ أو
   مستثمر، والمستند المُسلَّم يلزمه ما لا تلزمه الشاشة — ترويسةٌ على كل صفحة،
   وقطعٌ بين الأقسام، وألوانٌ تصمد.

   ⚠ والمولّد هو المتصفّح نفسه لا مكتبةَ PDF مضافة، وذلك قرارٌ لا تقصير:
   التطبيق عربيّ أوّلاً، ومكتبات PDF في الجافاسكربت تكسر تشكيل الحروف العربية
   ووصلَها وتخرجها معكوسةً أو مفكّكة. ومحرّك المتصفّح يُشكّل العربية تشكيلاً
   صحيحاً، ويحمل خطّ IBM Plex Arabic نفسه، ويُخرج نصّاً قابلاً للتحديد والبحث.
   فمخرجُه أفضل، وبلا مئتَي كيلوبايت ولا خطوة بناء.

   ⚠ Printing here is not "the screen on paper": it is the artefact handed to a
   bank or an investor, and a handed document needs what a screen does not — a
   header on every page, breaks between sections, and colours that survive.

   ⚠ And the generator is the browser itself rather than an added PDF library —
   a decision, not a shortcut. This application is Arabic-first, and JavaScript
   PDF libraries break Arabic shaping and joining, emitting letters reversed or
   disconnected. The browser's engine shapes Arabic correctly, already has IBM
   Plex Arabic, and produces selectable, searchable text. Its output is better,
   with no 200KB and no build step. */
@media print {
  /* الهوامش العلوية والسفلية تترك مكاناً للترويسة والتذييل الجاريين */
  @page{margin:2.1cm 1.2cm 1.5cm;size:A4 portrait}
  body{background:#fff!important;color:#000!important}
  /* ⚠ وشريط التبويبات من التنقّل لا من المستند. لم يكن في هذه القائمة، فكان
     يُطبع على رأس التقرير المُسلَّم — أزرارُ تنقّلٍ على ورقةٍ تذهب إلى بنك.
     ⚠ The tab strip is navigation, not document. It was missing from this list,
     so it printed at the head of the delivered report — navigation buttons on a
     sheet of paper going to a bank. */
  #snav,#bnav,.topbar,.fab,#toast,#modal-root,#palette-root,.no-print,#review-flag,#idlebar,
  .rep-bar,.ptabs,.pdials,.fhelp,#ask-dock,#file-root,#confirm-root,.dtools,.selbar{display:none!important}
  /* مستند طلب الدفع: البند لا يُقطع، والصورة تسع الصفحة · the payment request:
     an item is never cut across pages, and an image fits the sheet */
  .pq-item{page-break-inside:avoid;border:1px solid #ccc!important;background:#fff!important}
  .pq-img{max-height:16cm!important}
  .pq-sig{page-break-inside:avoid}
  #app{display:block!important;padding:0!important;margin:0!important}
  #view{padding:0!important;margin:0!important;max-width:100%!important}
  .report-doc{box-shadow:none!important;border:none!important;padding:0!important;margin:0!important}
  /* على الورق: مقاس النقطة الحقيقي من سلّم الهوية — ١٧ نصّاً و١٣ تعليقاً
     و١١ عيناً — والمسطرة الذهبية تبقى ذهبية (print-color-adjust أعلاه).
     On paper: real point sizes from the identity scale — 17 body, 13 caption,
     11 eyebrow — and the gold rule stays gold (print-color-adjust above). */
  .rep-header{border-bottom:2pt solid var(--gold)!important}
  .report-doc{font-size:11pt}
  .rep-title{font-size:13pt}
  .rep-sub,.rep-meta{font-size:9pt}
  .rep-sec-h{font-size:11pt}
  .print-run{font-size:8pt}
  .rep-sec-h{border-bottom:1.5px solid #000!important;color:#000!important}
  .tile,.rep-card,.rep-stat{border:1px solid #ccc!important;box-shadow:none!important;background:#fff!important}
  .rep-tbl th{background:#f5f5f5!important;color:#000!important;border-bottom:1px solid #000!important}
  .rep-tbl td{border-bottom:1px solid #e0e0e0!important}
  /* ── الجدول يسع الورقة · the table fits the sheet ──────────────────────
     جداول التقرير مبنيّة لشاشةٍ عريضة، وصندوق صفحة A4 بعد الهوامش أضيق —
     فتُقطع الأعمدة من الحافة. تصغيرٌ طفيف وتفافٌ للكلمات يُبقيها كلّها.
     The report's tables are built for a wide screen, and an A4 page box after
     its margins is narrower — so columns fall off the edge. A slight reduction
     and word wrapping keep all of them on the sheet. */
  .rep-tbl{width:100%!important;table-layout:auto!important;font-size:8.5pt!important}
  .rep-tbl th,.rep-tbl td{padding:4pt 5pt!important;word-break:break-word!important}
  .tiles{gap:8pt!important}
  .report-doc,#view,.rep-sec{overflow:visible!important}
  .dossier-signatures{page-break-inside:avoid!important;border-top:1.5px solid #000!important}
  .ts{font-size:var(--fs-2xs)!important}

  /* ── الأقسام تبدأ صفحاتها · sections start their own page ──────────────
     قسمٌ يبدأ على بُعد سنتيمترين من أسفل الورقة ويكمل في التالية يُقرأ مقطوعاً.
     والأول لا يُقطع قبله، وإلا خرجت صفحةٌ أولى فارغة.
     A section starting two centimetres from the foot of a page and continuing
     overleaf reads as interrupted. The first takes no break before it, or the
     document opens on a blank page. */
  .rep-sec{page-break-inside:auto!important;break-inside:auto!important;
    page-break-before:always!important;break-before:page!important}
  /* ⚠ الأول لا يُقطع قبله، وإلا فُتح المستند على صفحةٍ بيضاء.
     وكان الشرط ‎.rep-sec:first-of-type‎ ولا يعمل: ‎:first-of-type‎ تقارن باسم
     الوسم لا بالصنف، وأولُ ‎div‎ بين الإخوة هو الترويسة لا القسم — فلم تنطبق
     القاعدة قطّ وخرجت الصفحة الأولى فارغة. والأخُ المجاور للترويسة هو المقصود.
     ⚠ The first takes no break before it, or the document opens on a blank page.
     The rule was .rep-sec:first-of-type, which does not work: :first-of-type
     compares TAG names, not classes, and the first div among the siblings is the
     letterhead rather than the section — so it never matched and page one came
     out empty. The adjacent sibling of the header is what was meant. */
  .rep-header + .rep-sec{page-break-before:auto!important;break-before:auto!important}
  .rep-sec-h{page-break-after:avoid!important;break-after:avoid!important}
  .rep-tbl thead{display:table-header-group!important}   /* الرؤوس تتكرّر */
  .rep-tbl tr,.lrow,.rep-card,.tile{page-break-inside:avoid!important;break-inside:avoid!important}

  /* ── الألوان تصمد · the colours survive ───────────────────────────────
     ⚠ المتصفّح يُسقط ألوان الخلفية في الطباعة افتراضاً، فتخرج أشرطة الإنفاق
     والإنجاز مستطيلاتٍ بيضاء فارغة — أي أنّ الرسم الوحيد في التقرير يختفي،
     ويبقى إطارُه يوحي بأنّ القيمة صفر. وهذه أسوأ من غيابه.
     ⚠ A browser drops background colours when printing, so the spend and
     progress bars come out as empty white rectangles — the only chart in the
     report vanishes and its frame implies a value of zero, which is worse than
     omitting it. */
  /* ⚠ تنطبق على المستندات التي فيها أشرطة فعلاً — موجز الفرع وحافظة الدوام
     وبطاقات المشاريع. أمّا تقرير المجلس فجداول وأرقام بلا رسم.
     ⚠ These apply to the documents that actually have bars — the branch brief,
     the attendance dossier, the project cards. The board report itself is tables
     and figures, with no chart in it. */
  .track,.track i,.tag,.code,.chip,.grade{
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .track{background:#e8eaf0!important}
  .track i{background:var(--ink)!important}
  .track i.built{background:var(--gold)!important}
  .track i.over{background:#A63A2E!important}

  /* ── ترويسةٌ وتذييلٌ على كل صفحة · a running head and foot ─────────────
     مستندٌ يُسلَّم إلى بنك، وصفحته الثالثة بلا اسمٍ ولا فترة ورقةٌ مجهولة.
     A document handed to a bank whose third page carries no name and no period
     is an anonymous sheet of paper. */
  .print-run{display:block!important}
  .print-run-h{position:fixed;top:-1.55cm;inset-inline:0;
    display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
    font-size:8.5pt;color:#000;border-bottom:.5pt solid #999;padding-bottom:3pt}
  .print-run-f{position:fixed;bottom:-1.05cm;inset-inline:0;
    display:flex;justify-content:space-between;gap:12px;
    font-size:7.5pt;color:#555;border-top:.5pt solid #ccc;padding-top:3pt}
  .print-run b{font-weight:600}
}
/* لا تظهر الترويسة الجارية على الشاشة إطلاقاً · never on screen */
.print-run{display:none}

/* ═══ لوحة الأوامر العامة · Command Palette ═════════════════════════ */
.pal-mask{position:fixed;inset:0;background:rgba(15,32,59,.48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:9999;display:flex;justify-content:center;align-items:flex-start;padding:65px 16px}
/* كانت تستعمل --bg-card و --line-3 و --r-md وهي غير معرّفة، فخرجت اللوحة
   بلا خلفية ولا حدّ فبان محتوى الصفحة خلفها.
   These used --bg-card / --line-3 / --r-md, none of which exist, so the panel had no
   background or border and the page showed straight through it. */
.pal-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 48px rgba(0,0,0,.26);width:100%;max-width:560px;overflow:hidden;animation:palIn var(--m-2) var(--ease)}
@keyframes palIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.pal-header{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);gap:10px}
.pal-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--fs-lg);color:var(--text);font-family:inherit}
.pal-esc{font-size:var(--fs-xs);font-family:inherit;font-weight:600;border:1px solid var(--line);
  padding:2px 6px;border-radius:var(--rad-s);color:var(--text-3);background:var(--bg);cursor:pointer}
.pal-list{max-height:330px;overflow-y:auto;padding:6px}
.pal-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  cursor:pointer;transition:var(--tr-ui);border-inline-start:3px solid transparent}
.pal-item:hover,.pal-item.active{background:var(--gold-soft);border-inline-start-color:var(--gold)}
.pal-i{font-size:var(--fs-lg);width:22px;text-align:center;flex-shrink:0}
.pal-m{flex:1;min-width:0}
.pal-t{font-size:var(--fs-base);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-s{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .pal-s[dir=ltr]{text-align:right}
.pal-c{font-size:var(--fs-xs);padding:2px 6px;border-radius:var(--rad-s);background:var(--bg);border:1px solid var(--line);color:var(--text-2);flex-shrink:0}
.pal-empty{padding:26px;text-align:center;color:var(--text-3);font-size:var(--fs-base)}
.pal-footer{display:flex;justify-content:space-between;padding:9px 14px;background:var(--bg);
  border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-3)}

/* ═══ بطاقةُ الدفع (2.2.30) · the payment card ═══════════════════════════
   بطاقةٌ واحدة لكلّ ما صُرف: رأسٌ (النوع · المرجع · الاكتمال)، البيان، المبلغ،
   ثمّ الوقائع صفّاً صفّاً، ثمّ المسار. على الهاتف عمودٌ واحد، وفوق ٩٠٠ عمودان.
   One card for everything paid: a head (kind · ref · completeness), the
   description, the amount, then the facts row by row, then the life-cycle. One
   column on a phone, two above 900px. */
.pc-h{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.pc-ref{font-size:var(--fs-sm);color:var(--text-3)}
.pc-t{font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.35}
.pc-a{font-size:24px;font-weight:600;color:var(--ink);margin-top:4px}
.pc-s{font-size:var(--fs-base);color:var(--text-2);margin-bottom:12px}
.pc-g{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-2)}
.pc-k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-base)}
.pc-k span{color:var(--text-3);flex:0 0 auto}
.pc-k b{font-weight:600;color:var(--ink);text-align:end;min-width:0;overflow-wrap:anywhere}
.pc-l{margin-top:12px}
.pc-lh{font-size:var(--fs-xs);letter-spacing:.06em;color:var(--text-3);font-weight:600;margin-bottom:2px}
.pc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pc-btns .btn{flex:1 1 auto;min-height:44px}
/* بلاطةٌ زرّ: «للإكمال» تفتح عدستها · a tile that is a button: "to complete" opens its lens */
button.tile{cursor:pointer;text-align:start;font:inherit;color:inherit}
button.tile.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
@media(min-width:900px){.pc-g{grid-template-columns:1fr 1fr;column-gap:18px}}

/* ═══ الحركات · motion — انظر القسم الموحّد في آخر الملف · see the one
   consolidated section at the end of this file ═══════════════════════ */

/* ═══ أداة اختيار الموظفين الحديثة · Modern Staff Picker Carousel ═══ */
.staff-picker-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.staff-picker-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.staff-pill-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition:var(--tr-ui);
  scroll-snap-align: start;
}
.staff-pill-btn:hover {
  border-color: var(--gold);
  background: var(--bg);
}
.staff-pill-btn.active {
  background: var(--gold-soft);
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.18);
}
.staff-pill-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.staff-pill-info {
  text-align: start;
}
.staff-pill-name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.staff-pill-role {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

/* ═══ SVG CHARTS · الرسوم البيانية ═══
   height:auto صالح في CSS لا كخاصية على <svg> — كانت تُكتب كخاصية فيرفضها
   المتصفّح ويسجّل خطأ لكل رسم. الارتفاع يتبع viewBox عبر نسبة العرض.
   `height:auto` is valid in CSS but not as an <svg> attribute; it was written as an
   attribute, so every chart logged a parse error. Here the height follows the
   viewBox aspect ratio instead. */
.svg-chart{display:block;width:100%;height:auto}

/* ═══ FORECAST BAR · شريط الاحتياج ═══
   جزآن مرئيان: بنود الميزانية والرواتب. كانت الرواتب تُذكر في سطر صغير باسم
   «ثابت» فلا يُدرك المرء أنها الرواتب ولا حجمها من الاحتياج.
   Two visible segments: budget lines and payroll. Payroll used to be a small
   caption labelled "Fixed", so neither its identity nor its share was legible. */
.fbar{display:flex;height:7px;border-radius:var(--rad-s);overflow:hidden;background:var(--line-2)}
.fbar i{display:block;height:100%}
.fbar .fb-l{background:var(--ink-3)}
.fbar .fb-p{background:var(--gold)}
.fk{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:4px;
  vertical-align:middle}
.fk-l{background:var(--ink-3)} .fk-p{background:var(--gold)}


/* بطاقة «شهرك» صارت زراً — تبقى كالبطاقة شكلاً وتتصرّف كالزر لمساً
   The "your month" tiles are buttons now: they still look like tiles and behave
   like buttons, with a target that is comfortably past 44px. */
.tile-go{display:block;width:100%;text-align:inherit;cursor:pointer;
  transition:var(--tr-ui)}
.tile-go:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.tile-go:active{transform:translateY(0)}

/* حقل النسبة الدقيقة بجوار الأزرار الجاهزة · the exact-% field beside the presets */
.sim-exact{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 6px;background:var(--card);min-height:44px}
.sim-exact.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.sim-exact input{width:52px;max-width:52px;border:0;background:transparent;font-size:var(--fs-lg);
  font-family:var(--font-num);text-align:center;padding:0}
.sim-exact input:focus{outline:none}
.sim-exact .sim-pct{font-size:var(--fs-sm);color:var(--text-3);font-family:var(--font-num)}

/* ═══ صفحة العُهد · the custody page ═══════════════════════════════
   الجدول المضغوط والأكورديون: شهرٌ من الحركات على شاشة هاتف بلا تمرير أفقي
   للصفحة نفسها — الجدول وحده هو الذي ينزلق داخل بطاقته.
   The condensed table and the accordion: a month of movements on a phone with
   no horizontal scroll on the page itself — only the table slides, inside its
   own card. */
table.ctab{width:100%;border-collapse:collapse;font-size:var(--fs-base);min-width:330px}
table.ctab th{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;text-align:start;padding:9px 7px;background:var(--line-2);white-space:nowrap}
table.ctab td{padding:10px 7px;border-top:1px solid var(--line-2);vertical-align:middle}
table.ctab td:first-child{white-space:nowrap;font-size:var(--fs-sm);color:var(--text-2)}
table.ctab .tag{font-size:var(--fs-2xs);padding:2px 6px}
@media(min-width:600px){ table.ctab{font-size:var(--fs-base)}
  table.ctab th,table.ctab td{padding:11px 12px} }
table.ctab tbody tr{cursor:pointer}
table.ctab tbody tr:active{background:var(--line-2)}
table.ctab tbody tr:hover{background:var(--bg)}
table.ctab tfoot td{padding:11px 12px;border-top:1.5px solid var(--gold);background:var(--gold-soft);font-weight:600}
table.ctab td:first-child,table.ctab th:first-child{padding-inline-start:13px}
table.ctab td:last-child,table.ctab th:last-child{padding-inline-end:13px}

.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:10px;overflow:hidden}
.acc>summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 15px;
  cursor:pointer;list-style:none;min-height:52px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"›";color:var(--text-3);font-size:var(--fs-2xl);line-height:1;
  transition:transform var(--m-1) var(--ease);margin-inline-start:4px}
.acc[open]>summary::after{transform:rotate(90deg)}
html[dir=rtl] .acc>summary::after{content:"‹"}
html[dir=rtl] .acc[open]>summary::after{transform:rotate(-90deg)}
.acc .acc-n{font-weight:600;font-size:var(--fs-md)}
.acc .acc-v{margin-inline-start:auto;font-weight:600;font-size:var(--fs-md)}
.acc-b{padding:0 13px 14px;border-top:1px solid var(--line-2)}
.acc-b .tiles{margin-top:12px}

/* ═══ مسار الأمر · بنود الطلب · المعاينة في مكانها
   the order's trail · the request's items · the in-place file viewer ═══════
   ⚠ العارض طبقةٌ فوق النوافذ (#file-root) لا نافذةٌ منها: يُفتح من داخل نموذجٍ
   نصفَ مكتوب ولا يمحوه. والإطار ٧٠٪ من الشاشة فيبقى للزرّين مكان.
   ⚠ The viewer is a layer above the sheets (#file-root), not one of them: it
   opens from inside a half-typed form without wiping it. The frame takes 70% of
   the screen so the two buttons keep their place. */
.rql{margin-top:9px;border-top:1px solid var(--line-2);padding-top:6px}
.rql-h{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--text-3);font-weight:600;margin-bottom:4px}
.rql-r{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-base);padding:2px 0;line-height:1.45}
.rql-d{min-width:0}
.rql-n{color:var(--text-3)}
.rql-a{white-space:nowrap;flex:none}
.trail{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:9px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.trail-i b{color:var(--ink);font-weight:600}
.trail-i .mono{color:var(--text-3)}
#file-root .ov{z-index:96}
.sheet.fv .sheet-b{padding-top:12px}
.fv-wrap{display:flex;flex-direction:column;gap:12px;min-height:160px}
.fv-load{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-2);padding:28px 0}
.fv-load .spin{border-color:var(--line);border-top-color:var(--ink)}
.fv-img{max-width:100%;max-height:70vh;object-fit:contain;display:block;margin:0 auto;border-radius:var(--r-sm);background:var(--bg)}
.fv-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.fv-acts{display:flex;gap:8px;flex-wrap:wrap}
.fv-acts .btn{flex:1;min-width:130px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* ═══ التحديد على صفحة المدفوعات ومستند طلب الدفع
   selection on the Money page · the payment-request document ═══════════════
   ⚠ صندوقُ التأشير هدفٌ بعرض ٤٤ بكسل: الشريط العائم للمنضدة (.selbar) مخفيٌّ
   دون ١١٠٠ بكسل، وهذه الميزة تُستعمل من الهاتف، فلها شريطها الخاصّ في مجرى
   الصفحة (.mbar) لا شريطٌ ثابت.
   ⚠ The tick is a 44px target: the desk's floating bar (.selbar) is hidden
   below 1100px and this feature is used from a phone, so it has its own
   in-flow bar (.mbar), never a fixed one. */
.mck{flex:none;display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;
  margin-inline-start:-8px;cursor:pointer}
.mck input{width:20px;height:20px;accent-color:var(--ink);cursor:pointer;margin:0}
.rowopen.msel{background:rgba(207,156,81,.08)}
.mbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px}
.mbar .mck{margin-inline-start:0}
.mbar-t{font-size:var(--fs-base);color:var(--text-2);flex:1;min-width:120px}
.mbar-n{font-weight:600;color:var(--ink)}
.rql-att{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
/* ⚠ ورقةُ المستند في src/pqdoc.js (PQ_CSS) لا هنا: تُرسل إلى الخادم للـPDF وتُحقن على
   الشاشة، فتبقى واحدة · the document's own stylesheet lives in src/pqdoc.js
   (PQ_CSS), sent to the server for the PDF and injected on screen — one copy */

/* ═══ 2.2.43 · صفحةُ بطاقة الدفع · the payment card page ════════════════
   هاتفاً عمودٌ واحد، ومن ٩٠٠ بكسل عمودان: الوقائعُ وما ينقص وأرقامُ البند في
   الأوّل، والمسارُ والمرفقاتُ والسجلّ في الثاني · one column on a phone, two from
   900px: facts, gaps and the line's figures first; trail, files, history second */
.ent{display:flex;flex-direction:column;gap:12px}
.ent-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ent-sp{flex:1}
.ent-step{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:var(--fs-2xl);line-height:1;cursor:pointer}
.ent-step:disabled{opacity:.35;cursor:default}
.ent-pos{font-size:var(--fs-base);color:var(--text-3);min-width:56px;text-align:center}
.ent-h{padding:18px 18px 16px}
.ent-c{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ent-ref{font-size:var(--fs-sm);color:var(--text-3)}
.ent-t{font-size:var(--fs-2xl);line-height:1.35;margin:10px 0 4px;color:var(--ink);font-weight:600}
.ent-a{font-size:30px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.ent-s{font-size:var(--fs-base);color:var(--text-3);margin-top:4px}
.ent-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ent-btns .btn{min-height:44px}
.ent-g{display:grid;grid-template-columns:1fr;gap:12px}
.ent-m,.ent-x{display:flex;flex-direction:column;gap:12px;min-width:0}
.ent-card{padding:14px 16px}
/* 3.0.16 · حسابُ الفرع المختار: بطاقةٌ بمحتوىً حرّ، حشوُها ١٦ كما يقول DESIGN.md §7 · the picked
   branch account: a card of free content, padded 16 as DESIGN.md §7 says */
#view .bk-pane{margin-top:var(--s3);padding:var(--s4)}
/* 3.0.17 · حسابٌ بعدّة عملات: رصيدٌ لكلّ عملة، و«عملاتٌ أخرى» في نموذجه · an account with several
   currencies: a balance per currency, and "other currencies" on its form */
#view .bk-nw{white-space:nowrap}
#view .bk-bals{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:flex-end;text-align:end}
.bkc{border:1px solid var(--line);border-radius:var(--rad-m);padding:var(--s3)}
.bkc-h{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.bkc-s{font-size:var(--fs-xs);color:var(--text-3);margin:var(--s1) 0 var(--s2)}
.bkc-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:var(--s2)}
.bkc-r{display:flex;align-items:center;gap:var(--s2);min-width:0;margin:0}
.bkc-r input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;margin:0}
.bkc-r[hidden]{display:none}
.bkc-c{min-width:3em}
.bkc-o{flex:1 1 auto;width:auto;min-width:0;font-size:var(--fs-lg);padding:6px 8px;border:1px solid var(--line);border-radius:var(--rad-s);background:var(--card);color:var(--text)}
.ent-card h3{font-size:var(--fs-base);margin:0 0 8px;color:var(--ink);display:flex;gap:6px;align-items:center}
.ent-kv>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;
  border-bottom:1px solid var(--line-2);font-size:var(--fs-base)}
.ent-kv>div:last-child{border-bottom:0}
.ent-kv>div>span{color:var(--text-3);flex:0 0 auto}
.ent-kv>div>b{font-weight:600;color:var(--ink);text-align:end;min-width:0;overflow-wrap:anywhere}
.ent-life{display:flex;flex-direction:column;gap:11px;padding:2px 0}
.ent-li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-base);color:var(--text-2)}
.ent-li>i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:5px}
.ent-w{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.ent-files{display:flex;gap:6px;flex-wrap:wrap}
.ent-files .tag{cursor:pointer;border:0;font:inherit;font-size:var(--fs-sm);padding:6px 11px}
@media(min-width:900px){.ent-g{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
/* الصفُّ الذي رُجع إليه — لونٌ ثابتٌ لا حركة (الحركةُ تحويلٌ وشفافيّةٌ فقط)، يزول مع
   الرسمة التالية · the row returned to — a still tint, not motion (motion is
   transform and opacity alone), gone with the next render */
.ent-back,.ent-back>td{background:var(--gold-soft)}

/* ═══ 2.2.43 · ما ينقص، في خانته · what is missing, in its own cell ════════
   حدٌّ ذهبيٌّ متقطّع: زرٌّ لمن يُكمل، يفتح محرّرَ الخليّة أو نموذجَ الإكمال · a dashed
   gold outline: a button for whoever completes, opening the cell editor or the
   completion form */
.miss{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;border:1px dashed var(--gold);
  background:var(--gold-soft);color:var(--gold-ink);font:inherit;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;cursor:pointer}
span.miss{cursor:default}
button.miss:hover{border-style:solid}

/* ═══ 2.2.43 · لوحةُ الفحوص · the checks panel ═══════════════════════════
   ما يرفضه الحفظ يُقال قبل الضغط، في مكانٍ واحد · what Save refuses is said
   before the press, in one place */
.fchk{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:10px 12px;margin-top:12px}
.fchk-h{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin-bottom:6px}
.fchk-l{display:grid;grid-template-columns:1fr;gap:6px}
.fchk-i{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-base);line-height:1.35}
.fchk-i>i{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:var(--fs-xs);font-weight:600;background:var(--line-2);color:var(--text-3);margin-top:1px}
.fchk-i.ok>i{background:var(--ok-bg);color:var(--ok)}
.fchk-i.warn>i{background:var(--warn-bg);color:var(--warn)}
.fchk-i.bad>i{background:var(--bad-bg);color:var(--bad)}
.fchk-i b{color:var(--ink);font-weight:600}
.fchk-i.bad b{color:var(--bad)}
.fchk-s{color:var(--text-3);font-size:var(--fs-sm)}
@media(min-width:700px){.fchk-l{grid-template-columns:1fr 1fr;column-gap:16px}}

/* ═══ 2.2.44 · الإعدادات أقساماً · Settings as sections ════════════════════
   هاتفاً: شريطُ أقسامٍ يُمرَّر جانباً فوق اللوحة؛ ومن ٩٠٠ بكسل: عمودُ أقسامٍ ثابتٌ
   بجانبها (نموذج «سجلّات صيره») · on a phone a strip of sections scrolling sideways
   over the panel; from 900px a sticky column of sections beside it */
.st{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.st-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.st-nav::-webkit-scrollbar{display:none}
.st-nav>button{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;
  padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:var(--fs-base);font-weight:600;white-space:nowrap;cursor:pointer}
.st-nav>button b{font-size:var(--fs-xs);color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:1px 7px}
.st-nav>button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.st-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.st-body>.card{margin:0}
.st-p{padding:0;overflow:hidden}
.st-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px 12px}
.st-ph h3{font-size:var(--fs-body);margin:0;color:var(--ink)}
.st-ph p{margin:4px 0 0;font-size:var(--fs-sm);color:var(--text-3);line-height:1.6}
.st-pa{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.st-pf{padding:12px 16px 14px;border-top:1px solid var(--line-2);font-size:var(--fs-sm);color:var(--text-2);line-height:1.7}
.st-meta{padding:0 16px 10px;font-size:var(--fs-sm);color:var(--text-3)}
.st-tw{overflow-x:auto}
.st-t{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.st-t th{background:var(--bg);color:var(--text-3);font-size:var(--fs-xs);font-weight:600;text-align:start;padding:8px 16px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
.st-t td{padding:11px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink)}
.st-t tbody tr:last-child td{border-bottom:0}
.st-t td b{font-weight:600}
.st-t .st-v{text-align:end;white-space:nowrap}
.st-t tr.st-go{cursor:pointer}
.st-t tr.st-go:hover td{background:var(--bg)}
.st-chev{width:28px;color:var(--text-3);font-size:var(--fs-lg);text-align:end}
.st-s{font-size:var(--fs-sm);color:var(--text-3);font-weight:400;margin-top:2px;line-height:1.5}
.st-num{font-weight:600;font-variant-numeric:tabular-nums}
.st-chips{display:flex;gap:5px;flex-wrap:wrap}
.st-empty{padding:4px 16px 18px;font-size:var(--fs-base);color:var(--text-3)}
.st-counts{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-3);margin-bottom:12px}
.st-guide{width:100%;text-align:start;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
/* المفتاح · the switch — 44px of target, 40×24 of drawing */
.st-sw{position:relative;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;flex:none;vertical-align:middle}
.st-sw>i{position:absolute;inset-inline-start:2px;top:10px;width:40px;height:24px;border-radius:999px;background:var(--line)}
.st-sw>i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--m-1) var(--ease)}
.st-sw.on>i{background:var(--ink)}
.st-sw.on>i::after{transform:translateX(16px)}
html[dir=rtl] .st-sw.on>i::after{transform:translateX(-16px)}
@media(max-width:699px){.st-t .st-h{display:none}.st-t td,.st-t th{padding-inline:12px}}
@media(min-width:900px){
  .st{grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
  .st-nav{flex-direction:column;overflow:visible;position:sticky;top:12px;gap:2px}
  .st-nav>button{border:0;background:none;border-radius:var(--r-sm);min-height:38px;justify-content:space-between}
  .st-nav>button:hover{background:var(--card)}
  .st-nav>button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
}

/* ═══ 2.2.44 · صفحةُ «اسأل» · the Ask page ═════════════════════════════════
   مِنشأٌ كحليّ (الجسمُ نفسُه)، ثمّ «جرّب»، وفي الجانب ما سُئل وما تقرؤه صيره ·
   a navy composer (the same body), then "Try", and at the side what was asked
   and what SIRA reads */
.ak{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.ak-main,.ak-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ak-comp{padding:16px 18px 18px}
.ak-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.ak-top .ai-mark{width:22px;height:22px}
.ak-top b{font-size:var(--fs-body);color:#fff}
.ak-top span{font-size:var(--fs-sm);color:rgba(255,255,255,.62)}
.ak-row{align-items:center;flex-wrap:wrap}
.ak-row .ai-chips{margin:0;flex-wrap:wrap;overflow:visible}
.ak-row .ak-sp{flex:1}
.ak-row .ai-send{flex:none;padding:0 26px}
.ak-ch{display:flex;flex-direction:column;gap:3px;padding:14px 16px 10px}
.ak-ch h3{margin:0;font-size:var(--fs-md);color:var(--ink)}
.ak-ch span{font-size:var(--fs-sm);color:var(--text-3);line-height:1.5}
.ak-try{padding:0;overflow:hidden}
.ak-ex{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;width:100%;min-height:52px;
  padding:10px 16px;border:0;border-top:1px solid var(--line-2);background:none;text-align:start;font:inherit;cursor:pointer;color:var(--ink)}
.ak-ex:hover{background:var(--bg)}
.ak-q{font-size:var(--fs-base);font-weight:600;line-height:1.5}
.ak-to{grid-column:2;font-size:var(--fs-sm);color:var(--text-3)}
.ak-tag{font-size:var(--fs-xs);font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap;background:var(--line-2);color:var(--text-2)}
.ak-t-money{background:var(--gold-soft);color:var(--gold-ink)}
.ak-t-ask{background:var(--ok-bg);color:var(--ok)}
.ak-t-task{background:var(--warn-bg);color:var(--warn)}
.ak-side-c{padding:0 0 6px;overflow:hidden}
.ak-h{display:flex;align-items:flex-start;gap:4px;padding:0 10px 0 16px}
.ak-h>button:first-child{flex:1;display:flex;gap:9px;align-items:flex-start;text-align:start;border:0;background:none;padding:8px 0;
  font:inherit;cursor:pointer;color:var(--ink);min-height:44px}
.ak-h>button:first-child>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:7px}
.ak-hq{display:block;font-size:var(--fs-base);line-height:1.5}
.ak-hm{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.ak-x{flex:none;width:36px;height:36px;border:0;background:none;color:var(--text-3);cursor:pointer;border-radius:var(--rad-m);margin-top:4px}
.ak-x:hover{background:var(--bg);color:var(--bad)}
.ak-none{padding:2px 16px 14px;font-size:var(--fs-sm);color:var(--text-3)}
.ak-n{padding:0 16px 12px;font-size:var(--fs-base);color:var(--text-2)}
.ak-n b{font-size:var(--fs-xl);color:var(--ink)}
@media(min-width:1000px){.ak{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.ak-side{position:sticky;top:12px}}

/* ═══ صفحةُ السجلّ · the record page (2.2.47) ═══════════════════════════
   الرابطُ يفتح صفحة؛ تحمل علامةَ اللوحة (.ins) نفسَها، فتُرسم هنا لكلّ شاشة —
   قواعدُ «أتيليه» تغلبها على الحاسوب. A link opens a page carrying the panel's own
   markup (.ins), drawn here for every screen — Atelier's rules win on the desk. */
.rc-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rc-sp{flex:1}
.card.rc{padding:0;overflow:hidden;max-width:820px}
.rc .ins-top{padding:16px 18px;border-bottom:1px solid var(--line)}
.rc .ins-c{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.rc .ins-sp{flex:1}
.rc .ins-t{font-size:var(--fs-xl);font-weight:600;color:var(--ink);line-height:1.35}
.rc .ins-a{font-size:24px;font-weight:600;color:var(--ink);margin-top:6px}
.rc .ins-s{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.rc .ik{padding:4px 18px}
.rc .ik>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;border-bottom:1px solid var(--line-2);font-size:var(--fs-base)}
.rc .ik>div>span{color:var(--text-3);flex:0 0 auto}
.rc .ik>div>b{font-weight:600;color:var(--ink);text-align:end;min-width:0;overflow-wrap:anywhere}
.rc .is{padding:10px 18px 4px}
.rc .is-h{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin-bottom:6px}
.rc .il{display:flex;flex-direction:column;gap:10px;padding:4px 0 6px}
.rc .il-i{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-base);color:var(--text-2)}
.rc .il-i>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:6px}
.rc .il-i.ok>i{background:var(--ok)} .rc .il-i.bad>i{background:var(--bad)} .rc .il-i.next>i{background:var(--gold)}
.rc .il-w{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.rc .ins-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.rc .ins-f .ins-sp{flex:1}
.rc .ins-tab{display:none}
/* ⚠ وأرقامُ البند (lineInspector) — قواعدُها في «أتيليه» وحده، فكانت على الهاتف سطراً ملتصقاً
   the line's figures — their rules live in Atelier alone, so on a phone they ran together */
.rc .insp{margin:10px 18px;padding:12px;border-radius:var(--rad-m);background:var(--bg)}
.rc .insp-h,.rc .insp-sub{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin:0 0 6px}
.rc .insp-sub{margin-top:10px}
.rc .insp-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px}
.rc .insp-kv>div{display:flex;flex-direction:column;min-width:0}
.rc .insp-kv span{font-size:var(--fs-xs);color:var(--text-3)}
.rc .insp-kv b{font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.rc .insp-kv .bad b{color:var(--bad)}
.rc .insp-list>div{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-base);padding:5px 0;border-bottom:1px solid var(--line-2)}
.rc .insp-list>div>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════
   الحركة · MOTION
   ───────────────────────────────────────────────────────────────────────
   قاعدتان تحكمان كل ما تحت هذا السطر:

     ١ · الحركة تشرح ولا تزيّن. الصفحة تدخل من حيث أتت، والنافذة تخرج من حيث
         دخلت، والشريط يمتلئ ليُرى امتلاؤه. ما لا يشرح شيئاً لا يتحرّك.
     ٢ · التحويل والشفافية فقط (transform · opacity). هما اللذان يرسمهما
         المتصفّح على بطاقة الرسوم؛ وتحريك العرض أو الارتفاع يعيد تخطيط
         الصفحة في كل إطار، وعلى هاتف يظهر ذلك تقطيعاً لا نعومة.

   وثلاثة أزمنة لا رابع لها، فلا تتفاوت السرعات بلا سبب:
     --m-1 لمسة (١٢٠ms) · --m-2 انتقال (٢٢٠ms) · --m-3 دخول نافذة (٣٠٠ms)

   Two rules govern everything below this line:

     1 · Motion explains, it does not decorate. A page enters from where it came,
         a sheet leaves the way it arrived, a bar fills so the filling is seen.
         Anything that explains nothing does not move.
     2 · transform and opacity only. Those two the browser can hand to the
         compositor; animating width or height re-lays-out the page every frame,
         which on a phone reads as stutter rather than smoothness.

   Three durations and no more, so nothing differs in speed without a reason:
     --m-1 a touch (120ms) · --m-2 a transition (220ms) · --m-3 a sheet (300ms)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* 3.4.2 · السلّمُ كلُّه هنا، مرّةً واحدة — كان يُعرَّف مرّتين فيغلب الثاني الأوّلَ بصمت · the whole scale here, once — it
     was defined twice and the second silently overrode the first */
  --m-1:.12s; --m-2:.26s; --m-page:.38s; --m-3:.42s;
  /* 3.4.2 · سلّمٌ واحد للحركة كلّها — لا مدّةَ مكتوبةً بيدٍ خارجه (إلّا شاشةُ التحميل، وهي مشهدٌ واحد) · one scale for all
     motion — no duration written by hand outside it (but the loading screen, a single scene) */
  --m-out:.17s;   /* ما يغادر: أسرعُ ممّا يدخل · what leaves: quicker than what enters */
  --m-bar:.5s;    /* شريطٌ يمتلئ برقمه · a bar filling to its figure */
  --m-spring:.44s; --m-spin:.8s; --m-loop:1.1s; --m-pulse:2.4s;
  /* انتقالُ كلّ عنصرٍ يُضغط: اللون والخلفية والإطار والظلّ والحركة — بمدّةٍ واحدة ومنحنى واحد · every pressable element's
     transition: colour, background, border, shadow and movement — one duration, one curve */
  --tr-ui:background-color var(--m-1) var(--ease),color var(--m-1) var(--ease),border-color var(--m-1) var(--ease),
    box-shadow var(--m-1) var(--ease),opacity var(--m-1) var(--ease),transform var(--m-1) var(--ease);
  /* منحنى واحد: يبدأ سريعاً ويستقرّ — كالشيء الذي له وزن
     One curve: quick to leave, slow to settle — like something with weight. */
  /* منحنى أوراق iOS: ينطلق سريعاً ويحطّ بلا ارتداد · iOS's sheet curve: leaves fast, lands without a bounce (3.2.20) */
  --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.34,1.36,.64,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ── ١ · دخول الصفحة · the page entering ────────────────────────────────
   الصنف يُضاف من render() عند الانتقال وحده، لا مع كل رسم — انظر playViewAnim.
   The class is added by render() on navigation only, never on every repaint. */
/* الصنف نفسه لا يتحرّك — أبناؤه هم الذين يدخلون. تحريك الاثنين معاً يضاعف
   التلاشي فتبدو الصفحة باهتةً لحظةَ وصولها.
   The class itself does not animate — its children do. Animating both doubles
   the fade and the page looks washed out at the moment it arrives. */
.v-in{animation:none}

/* أبناء الصفحة يتتابعون قليلاً — ثمانية فقط، ثم يدخل الباقي معاً.
   والتتابع قصير عمداً: آخر كتلة تكتمل بعد ٢٩٠ جزءاً من الثانية. صفحةٌ تُفتح
   عشرين مرّة في اليوم لا تحتمل انتظاراً، والحركة التي تُنتظر صارت عائقاً.
   The top-level blocks stagger — eight of them, then the rest arrive together.
   The steps are deliberately short: the last block lands at 290ms. A page opened
   twenty times a day cannot afford a wait, and motion you wait for has become an
   obstacle. Only direct children move: rows inside a card are one block. */
.v-in>*{animation:blockIn var(--m-2) var(--ease) both}
/* 2.2.70 · تغييرٌ داخل الصفحة يومض فقط — شفافيةٌ وحدها، بلا تتابعٍ ولا إزاحة · an in-page
   change only blinks — opacity alone, no stagger, no shift */
.v-soft{animation:vSoft var(--m-1) var(--ease)}
@keyframes vSoft{from{opacity:.6}}
@keyframes blockIn{from{opacity:0;transform:translateY(7px)}}
.v-in>*:nth-child(2){animation-delay:.02s}
.v-in>*:nth-child(3){animation-delay:.035s}
.v-in>*:nth-child(4){animation-delay:.05s}
.v-in>*:nth-child(5){animation-delay:.06s}
.v-in>*:nth-child(6){animation-delay:.07s}
.v-in>*:nth-child(7){animation-delay:.08s}
.v-in>*:nth-child(n+8){animation-delay:.09s}

/* ── ٢ · النوافذ · sheets ───────────────────────────────────────────────
   الظلّ يعتم والبطاقة تصعد؛ وعند الإغلاق يعكسان الحركة بدل أن يختفيا.
   The backdrop darkens and the card rises; on close both reverse rather than
   blinking out. `.out` is set by closeSheet() just before the node is removed. */
.ov{animation:ovIn var(--m-2) var(--ease) both}
@keyframes ovIn{from{opacity:0}}
.sheet{animation:sheetIn var(--m-3) var(--ease) both}
@keyframes sheetIn{from{transform:translateY(100%)}}
.ov.out{animation:ovOut var(--m-out) var(--ease-out) both;pointer-events:none}
@keyframes ovOut{to{opacity:0}}
.ov.out .sheet{animation:sheetOut var(--m-out) var(--ease-out) both}
@keyframes sheetOut{to{transform:translateY(100%)}}
@media(min-width:900px){
  .sheet{animation:sheetPop var(--m-2) var(--ease) both}
  @keyframes sheetPop{from{opacity:0;transform:scale(.97) translateY(8px)}}
  .ov.out .sheet{animation:sheetPopOut var(--m-out) var(--ease-out) both}
  @keyframes sheetPopOut{to{opacity:0;transform:scale(.98)}}
}
/* اللوحة الجانبية تنزلق من حافّتها، وحين تحلّ محلّ لوحةٍ قائمة لا تنزلق —
   صفٌّ يُنقر بعد صفٍّ لا يستحقّ حركةً كلَّ مرّة. The side pane slides in from
   its edge, and when it replaces a pane already up it does not move — a row
   clicked after a row does not deserve a motion every time. */
@media(min-width:1280px){
  .ov.dock{animation:none}
  .ov.dock .sheet{animation:paneIn var(--m-2) var(--ease) both}
  @keyframes paneIn{from{opacity:0;transform:translateX(var(--pane-dx))}}
  .ov.dock.swap .sheet{animation:none}
  .ov.dock.out{animation:none}
  .ov.dock.out .sheet{animation:paneOut var(--m-out) var(--ease-out) both}
  @keyframes paneOut{to{opacity:0;transform:translateX(var(--pane-dx))}}
}
/* المقبض والرأس يثبتان، والجسم وحده هو الذي يمرّر · the grab handle and header
   stay put while only the body scrolls, so the card never feels like it slides */
.sheet-h,.sheet-f{will-change:auto}

/* ── ٣ · اللمس · touch feedback ─────────────────────────────────────────
   كل ما يُضغط يهبط قليلاً تحت الإصبع ثم يعود. بلا ذلك لا يُعرف أوقع اللمس
   أم أخطأ الهدف — وهو أهمّ ما في الحركة على الهاتف، لا أجملها.
   Everything pressable dips under the finger and comes back. Without it there
   is no telling whether the tap landed or missed the target — the most useful
   motion on a phone, not the prettiest. */
.btn,.lrow,.pcard,.tile-go,.nrow,.qbtn,.more,.x,.mp-a,[data-nav],
.acc>summary,table.ctab tbody tr,.staff-pill-btn{
  transition:transform var(--m-1) var(--ease),background-color var(--m-1) ease,
             box-shadow var(--m-1) ease,color var(--m-1) ease,border-color var(--m-1) ease}
.btn:active,.qbtn:active,.staff-pill-btn:active{transform:scale(.97)}
.lrow:active,.nrow:active,.pcard:active,.acc>summary:active{transform:scale(.992)}
.tile-go:active{transform:scale(.985)}
.x:active,.mp-a:active{transform:scale(.9)}
.btn:disabled{transform:none}

/* البطاقات ترتفع قليلاً بالمؤشّر — على الحاسوب وحده، فلا مؤشّر على الهاتف */
@media(hover:hover){
  .card,.pcard,.appr,.tile{transition:transform var(--m-1) var(--ease),box-shadow var(--m-1) ease}
  .pcard:hover,.appr:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
  .tile-go:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}

/* ── ٤ · الأرقام والأشرطة · figures and bars ────────────────────────────
   شريط الميزانية يمتلئ إلى موضعه بدل أن يظهر ممتلئاً: الامتلاء هو المعلومة.
   A budget bar fills to its position rather than appearing full: the filling is
   the information. Width here is deliberate — these are a few pixels tall and
   they animate once, on a card that is not scrolling. */
.track>i{transition:width var(--m-bar) var(--ease)}
.fbar i{transition:width var(--m-bar) var(--ease)}
.spark div{transition:height var(--m-bar) var(--ease)}
/* المنشأ يتبع اتجاه الكتابة: الشريط ينمو من حيث يبدأ القراءة لا من اليسار
   دائماً. و transform-origin لا يقبل الخصائص المنطقية، فيُكتب صراحةً.
   The origin follows the writing direction: a bar grows from where reading
   starts, not always from the left. transform-origin takes no logical values,
   so it is spelled out for each direction. */
.v-in .track>i,.v-in .fbar i{animation:barGrow var(--m-bar) var(--ease) both;
  transform-origin:left center}
html[dir=rtl] .v-in .track>i,html[dir=rtl] .v-in .fbar i{transform-origin:right center}
@keyframes barGrow{from{transform:scaleX(0)}}

/* ── ٥ · الأكورديون · the accordion ─────────────────────────────────────
   الفتح ينزلق ولا يقفز. الإغلاق فوريّ: <details> يطوي محتواه في إطار واحد
   ولا سبيل لتأخيره بلا JS، وحركةُ فتحٍ بلا حركة إغلاقٍ أفضل من لا شيء.
   Opening slides. Closing is immediate: <details> collapses its content in one
   frame and nothing but JS can delay that — and an opening animation without a
   closing one still beats neither. */
.acc[open]>.acc-b{animation:accIn var(--m-2) var(--ease) both}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}}
.acc>summary::after{transition:transform var(--m-2) var(--ease)}
.hist>summary::before{transition:transform var(--m-2) var(--ease)}

/* ── ٦ · التنقّل · navigation ───────────────────────────────────────────
   الشارة تظهر بنبضة: عدد ينتظر إجراءً يستحقّ أن يُرى وهو يصل.
   The badge arrives with a beat — a count waiting on you deserves to be seen
   landing rather than found. */
/* ⚠ الشارة في الشريط السفلي لا تتحرّك: buildNav() تعيد بناء الشريط مع كل
   رسم — أي مع كل لقطة من قاعدة البيانات — فتنبض الشارة بلا سبب كل بضع ثوانٍ.
   تتحرّك شارة التبويبات وحدها، ومع دخول الصفحة لا غير.
   ⚠ The bottom-bar badge does not animate: buildNav() rebuilds the bar on every
   repaint — that is, on every database snapshot — so the badge would pulse for
   no reason every few seconds. Only the tab-strip badge animates, and only as
   part of a page entering. */
.v-in .tb{animation:badgeIn var(--m-3) var(--ease) both}
@keyframes badgeIn{from{opacity:0;transform:scale(.4)}60%{transform:scale(1.12)}}
#bnav button.on svg,#snav-items button.on svg{transition:transform var(--m-2) var(--ease)}
#bnav button.on svg{transform:translateY(-1px) scale(1.06)}
.ptabs button{transition:color var(--m-2) ease,border-bottom-color var(--m-2) ease}

/* عنوان الصفحة يتبع محتواها: العنوان خارج ‎#view‎، فلو ثبت وحده بدا كأن
   الصفحة لم تتغيّر إلا نصفها.
   The page title follows its content. It lives outside #view, so leaving it
   still made a navigation look half-finished. */
.v-in-h #pg-title,.v-in-h #pg-sub{animation:blockIn var(--m-2) var(--ease) both}

/* زرّ الإضافة يظهر بقفزة صغيرة — إظهاره يزيل [hidden]، وإزالة display:none
   تعيد تشغيل الحركة من نفسها.
   The add button pops in: showing it removes [hidden], and lifting display:none
   restarts the animation on its own. */
.fab{animation:fabIn var(--m-2) var(--ease) both}
@keyframes fabIn{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.06)}}

/* ── ٧ · الرسائل · toasts ───────────────────────────────────────────────
   تدخل من الأسفل وتخرج إلى الأسفل — نفس الاتجاه، فلا تبدو قفزتين مختلفتين. */
.toast{animation:toastIn var(--m-2) var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}}

/* ── ٨ · الحالات · state changes ────────────────────────────────────────
   الشارة التي تتغيّر حالتها (معلّق ← معتمد) تُبرز نفسها لحظةً واحدة. */
.tag,.grade,.code{transition:background-color var(--m-2) ease,color var(--m-2) ease}
input,select,textarea{transition:border-color var(--m-1) ease,box-shadow var(--m-1) ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--gold-soft)}

/* ── ٩ · التفضيل يعلو على كل ما سبق · the preference wins ───────────────
   من أطفأ الحركة في نظامه أطفأها هنا. لا استثناء: الحركة تفضيل لا شرط،
   وكلُّ ما فوق يعمل بدونها تماماً كما يعمل بها.
   Whoever turned motion off at the system level has turned it off here. No
   exceptions: motion is a preference, not a requirement, and everything above
   works identically without it. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .v-in,.v-in>*,.v-in-h #pg-title,.v-in-h #pg-sub,.fab{
    animation:none!important;opacity:1!important;transform:none!important}
  /* اللمعة تُطفأ لا تُسرَّع: تسريعها إلى ٠.٠١ms يوقف الشريط حيث انتهى، وقد
     يكون فوق الشعار. The sheen is switched off rather than sped up — at .01ms
     the band simply stops wherever it landed, possibly across the logo. */
  .logo-sheen>i{display:none!important}
}

/* ── سبب القرار على البطاقة · the reason, on the card ── */
.why{margin-top:10px;padding:9px 11px;border-radius:var(--r-sm);background:var(--bg);
  border-inline-start:3px solid var(--ink-3)}
.why.bad{background:var(--bad-bg);border-inline-start-color:var(--bad)}
.why-t{font-size:var(--fs-base);line-height:1.5;white-space:pre-wrap}
.why-b{font-size:var(--fs-xs);color:var(--text-3);margin-top:4px}

/* ── اختيار المشروع بالبطاقات · picking a project by its card ──────────
   شريطٌ ينزلق أفقياً داخل نفسه — لا الصفحة — فيبقى عرض الصفحة ثابتاً مهما
   كثرت المشاريع. والحلقة تملأ بنسبة المصروف من الميزانية المعتمدة.
   A strip that scrolls inside itself rather than widening the page, however many
   projects there are. The ring fills with spent against approved budget. */
.pdials{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  padding:2px 2px 10px;margin-bottom:6px;scroll-snap-type:x proximity}
.pdials::-webkit-scrollbar{display:none}
.pdial{flex:0 0 auto;width:88px;background:none;border:0;padding:4px 2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;scroll-snap-align:start}
.pdial-ring{position:relative;width:54px;height:54px;display:grid;place-items:center;
  border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform var(--m-1) var(--ease),border-color var(--m-1) ease,box-shadow var(--m-1) ease}
.pdial-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
html[dir=rtl] .pdial-ring svg{transform:rotate(-90deg) scaleY(-1)}
.pd-bg{fill:none;stroke:var(--line-2);stroke-width:3.5}
.pd-fg{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;
  transition:stroke-dasharray var(--m-bar) var(--ease)}
.pd-fg.full{stroke:var(--bad)}
.pdial-n{font-family:var(--font-num);font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.pdial-t{font-size:var(--fs-xs);line-height:1.3;color:var(--text-3);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pdial.on .pdial-ring{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft),var(--sh)}
.pdial.on .pdial-t{color:var(--ink);font-weight:600}
.pdial:active .pdial-ring{transform:scale(.94)}
@media(hover:hover){.pdial:hover .pdial-ring{transform:translateY(-2px)}}

/* ── أرقام البطاقة الرئيسية تُضغط · the hero figures are buttons ──
   الزرّ داخل البطاقة الداكنة يرث لونها ولا يبدو زرّاً منفصلاً: المعلومة تبقى
   معلومة، ويكشف اللمس أنها تُفتح.
   A button inside the dark hero inherits its colours rather than looking like a
   separate control: it stays information, and the touch reveals that it opens. */
.hero-go{background:none;border:0;padding:0;color:inherit;text-align:inherit;
  cursor:pointer;font:inherit;display:block;width:100%;
  transition:opacity var(--m-1) ease,transform var(--m-1) var(--ease)}
.hero-go:active{opacity:.75;transform:scale(.985)}
.hero-split .hero-go{padding:2px 0}
@media(hover:hover){.hero-go:hover{opacity:.88}}

/* ── رسم المسار · a route, drawn ────────────────────────────────────────
   خطوات في شريط ينزلق أفقياً داخل بطاقته — لا الصفحة. كل خطوة تحمل رقمها
   ومن يقوم بها، والسهم بينها يتبع اتجاه القراءة.
   Steps in a strip that scrolls inside its own card, never the page. Each step
   carries its number and whose step it is, and the arrow between them follows
   the reading direction. */
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;
  padding:4px 0 10px;margin:0 -2px}
.flow::-webkit-scrollbar{display:none}
.flow-s{flex:0 0 auto;width:132px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 11px;display:flex;flex-direction:column;gap:4px}
.flow-s.end{background:var(--gold-soft);border-color:var(--gold)}
.flow-n{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:var(--fs-xs);font-weight:600;display:grid;place-items:center;font-family:var(--font-num)}
.flow-s.end .flow-n{background:var(--gold)}
.flow-t{font-size:var(--fs-base);font-weight:600;line-height:1.4}
.flow-w{font-size:var(--fs-xs);color:var(--text-3);margin-top:auto}
.flow-a{flex:0 0 auto;width:18px;align-self:center;height:2px;background:var(--line);position:relative}
.flow-a::after{content:"";position:absolute;inset-inline-end:0;top:-3px;
  border:4px solid transparent;border-inline-start-color:var(--line)}
html[dir=rtl] .flow-a::after{border-inline-start-color:transparent;border-inline-end-color:var(--line);
  inset-inline-end:auto;inset-inline-start:0}
.fhelp{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--bg);
  color:var(--text-3);font-size:var(--fs-xs);font-weight:600;line-height:1;margin-inline-start:6px;
  cursor:pointer;display:inline-grid;place-items:center;vertical-align:middle;padding:0}
.fhelp:active{transform:scale(.9);background:var(--gold-soft);border-color:var(--gold)}

/* رقم العمود فوقه · the bar's figure, above it.
   حجمٌ صغير جداً لأن ستة أعمدة على شاشة ٣٧٥ لا تحتمل أكثر — والرقم مقروء
   لأنه أحادي المسافة ومختصر ($48K لا $48,120).
   Very small, because six bars on a 375px screen will not take more — and it
   stays readable because it is monospaced and abbreviated. */
.spark div>i{position:absolute;inset-inline:0;top:-12px;text-align:center;font-style:normal;
  font-size:var(--fs-2xs);font-family:var(--font-num);color:rgba(255,255,255,.75);
  white-space:nowrap;letter-spacing:-.02em}
.spark div.hot>i{color:var(--gold-2);font-weight:600}
.spark{height:46px;margin-top:24px}

/* السهم يقول إن الصفّ يُفتح · the chevron says the row opens.
   الصفّ كان زرّاً ولا يبدو زرّاً، فلم يُضغط. Rows were already buttons and did
   not look like buttons, so nobody pressed them. */
.lrow-go{align-self:center;color:var(--text-3);font-size:var(--fs-xl);line-height:1;
  margin-inline-start:6px;flex:none}

/* ═══ AUDIT LOG EXPLORER ═══ */
.aud-timeline{display:flex;flex-direction:column;position:relative;padding:8px 0}
.aud-item{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line-2);position:relative;transition:var(--tr-ui)}
.aud-item:last-child{border-bottom:none}
.aud-item:hover{background:rgba(15,32,59,.015)}
.aud-high{background:rgba(207,156,81,.035);border-inline-start:3px solid var(--gold)}
.aud-point{width:10px;height:10px;border-radius:50%;background:var(--ink-3);margin-top:5px;flex:none}
.aud-point.pt-bad{background:var(--bad)}
.aud-point.pt-gold{background:var(--gold);box-shadow:0 0 0 3px rgba(207,156,81,.2)}
.aud-body{flex:1;min-width:0}
.aud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.aud-time{font-size:var(--fs-sm);color:var(--text-3)}
.aud-main{margin-bottom:6px}
.aud-title{font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.35}
.aud-sub{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}
.aud-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.aud-by{font-size:var(--fs-base);color:var(--text)}
.aud-amt{font-size:var(--fs-md);color:var(--ink)}

/* ═══ شرح الحقل، داخل النموذج · the field's explanation, inside the form ═══
   يُفتح تحت الحقل نفسه ولا يغطّي الاستمارة: من يسأل «ما هذا؟» يريد أن يقرأ
   ثمّ يكمل الكتابة، لا أن يفقد ما كتبه. */
.fhelp-body{margin-top:8px;padding:11px 13px;background:var(--gold-soft);
  border-inline-start:2px solid var(--gold);border-radius:var(--r-sm);
  animation:fhIn var(--m-2) var(--ease)}
@keyframes fhIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fhelp-t{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:4px}
/* ⚠ نصوص الشرح صارت فقرات: من دون pre-line تنهار أسطرها فتصير كتلةً واحدة
   Help bodies carry paragraphs now: without pre-line they collapse into one block */
.fhelp-p{font-size:var(--fs-base);line-height:1.7;color:var(--text-2);white-space:pre-line}
/* سطر تنبيه النشر: حاوية كتلة ليقع الشرح تحته لا بجانبه
   The publish notice: a block container so the body lands under it, not beside it */
.pub-note{font-size:var(--fs-sm);line-height:1.6;color:var(--text-3);
  margin:-4px 2px 10px;padding:0}
.pub-note .fhelp{margin-inline-start:7px;vertical-align:-4px}

/* ── التذييل · the ownership footer ──────────────────────────────────────
   هادئ عمداً: إشعارُ ملكيّةٍ ورقمُ إصدار، يُقرآن عند البحث عنهما ولا ينافسان
   شيئاً على الشاشة. وعلى الهاتف يرتفع فوق الشريط السفلي وإلا اختفى تحته.
   Deliberately quiet: an ownership notice and a version number, read when they
   are looked for and competing with nothing on screen. On a phone it clears the
   bottom bar, or it would sit underneath it and never be seen. */
#appfoot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:8px;padding:26px 18px 22px;margin-top:14px;
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--text-3);line-height:1.6}
#appfoot .af-sep{color:var(--line-2)}
#appfoot #af-ver{letter-spacing:.04em}
#appfoot button{background:none;border:0;padding:2px 4px;margin:0;cursor:pointer;
  font:inherit;color:var(--text-3);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--line-2);
  border-radius:3px;min-height:0}
#appfoot button:hover{color:var(--ink);text-decoration-color:var(--gold)}
#appfoot button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:900px){#appfoot{padding-bottom:calc(22px + env(safe-area-inset-bottom));
  margin-bottom:74px}}

/* ── صندوق السؤال · the question box ──────────────────────────────────────
   الزرّ في صفّ الحقل: السؤال جملةٌ واحدة في الغالب، والزرُّ تحت صندوقٍ بطول
   فقرةٍ يقع خارج الشاشة على الهاتف. و`stretch` يجعل ارتفاع الزرّ ارتفاعَ الحقل
   بلا رقمٍ مكتوب.
   ⚠ و‎16px‎ على الحقل لازمة: أقلُّ منها يُكبِّر iOS الصفحةَ عند التركيز.
   The button sits in the field's row: a question is usually one sentence, and a
   button under a paragraph-tall box falls off a phone screen. `stretch` makes
   its height the field's without a written number.
   ⚠ 16px on the field is mandatory: below it iOS zooms the page on focus. */
.ask-row{display:flex;gap:9px;align-items:stretch}
.ask-in{flex:1;min-width:0;font-size:var(--fs-lg);resize:vertical}
.ask-go{flex:none;align-self:stretch;min-width:82px}
/* المقترحات تلتفّ ولا تجرّ الصفحة · the suggestions wrap, never drag the page */
.ask-sugs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ask-sugs .tag{cursor:pointer}
.ask-meta{display:flex;gap:8px;align-items:center;margin-top:9px}
.ask-meta .tag:last-child{margin-inline-start:auto}

/* ثلاثُ نقاطٍ تتنفّس · three breathing dots.
   ⚠ opacity وحدها: أيُّ خاصيةٍ أخرى تُعيد التخطيط في كل إطار (قسم الحركة).
   ⚠ opacity alone: anything else re-lays-out every frame (the motion section). */
.ask-dots{display:inline-flex;gap:5px;flex:none}
.ask-dots i{width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:askdot var(--m-loop) var(--ease) infinite}
.ask-dots i:nth-child(2){animation-delay:.18s}
.ask-dots i:nth-child(3){animation-delay:.36s}
@keyframes askdot{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ask-dots i{animation:none;opacity:.6}}

/* ── «اسأل صيره» · the Ask button on Home ─────────────────────────────────
   لقطةُ الهويّة مصغَّرة: أرضٌ كحليّة، وخيطٌ ذهبيّ رأسيّ كخيط الترويسة، ونصٌّ
   على الحبر الفاتح. والذهبُ يرسم خطّاً ولا يملأ خلف نصٍّ جارٍ (قاعدة ٣٨).
   ⚠ ثابتٌ فوق شريط الهاتف: 74px + المساحة الآمنة، وإلا جلس تحت أزرار التنقّل
   على الآيفون فلا يُلمس أصلاً.
   ⚠ وبالخصائص المنطقية: inset-inline-end — فينتقل من اليسار إلى اليمين مع
   اتّجاه المستند بلا سطرٍ ثانٍ.
   ⚠ والحركةُ transform و opacity وحدهما، ومدّةً واحدة (--m-1): ما عداهما
   يُعيد التخطيط في كل إطار فيُقرأ تلعثماً على الهاتف.
   The identity in miniature: a navy ground, a vertical gold thread like the
   letterhead's rule, and text in the light ink. Gold draws a line; it never
   fills behind running text (rule 38).
   ⚠ Fixed ABOVE the phone bar — 74px plus the safe area — or it sits under the
   nav buttons on an iPhone and cannot be touched at all.
   ⚠ Logical properties throughout: inset-inline-end moves it from left to right
   with the document direction, with no second rule.
   ⚠ transform and opacity only, on the one touch duration: anything else
   re-lays-out every frame and reads as stutter on a phone. */
.ask-fab{position:fixed;inset-inline-end:18px;
  bottom:calc(74px + 18px + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:9px;
  min-height:46px;padding:0 18px;border:0;border-radius:23px;
  background:var(--ink);color:#fff;cursor:pointer;
  box-shadow:0 6px 20px rgba(15,32,59,.28);
  transition:transform var(--m-1) var(--ease),opacity var(--m-1) var(--ease)}
.ask-fab:active{transform:scale(.97)}
.ask-fab-l{display:flex;align-items:center;gap:9px}
.ask-fab-m{width:21px;height:21px;object-fit:contain;flex:none}
.ask-fab-t{font-size:var(--fs-base);font-weight:600;line-height:1;white-space:nowrap;
  letter-spacing:.14em}

/* ── جسم الجواب · the answer body ─────────────────────────────────────────
   الغامق حبرٌ كحليّ، والمبلغ رقمُه الثابت وخيطٌ ذهبيّ تحته — الذهب يرسم
   خطّاً ولا يصبغ نصّاً جارياً على أبيض (لا يُقرأ تباينُه).
   Bold is navy ink; an amount wears its tabular face over a gold thread — gold
   draws a line, it never colours running text on white. */
.ask-ans{font-size:var(--fs-md);line-height:1.9}
.ask-p{margin:0 0 7px}
.ask-ans b{color:var(--ink);font-weight:600}
.ask-num{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink);white-space:nowrap;
  border-bottom:2px solid var(--gold);padding-bottom:1px}
.ask-li{display:flex;gap:9px;align-items:flex-start;margin:0 0 6px}
.ask-li>i{flex:none;width:7px;height:2px;border-radius:1px;background:var(--gold);
  margin-top:12px}
.ask-li>div{flex:1;min-width:0}
@media(min-width:900px){.ask-fab{bottom:24px;inset-inline-end:24px}}
@media(prefers-reduced-motion:reduce){.ask-fab{transition:none}
  .ask-fab:active{transform:none}}

/* ── علامةُ صفٍّ في المعاينة · the per-row tick in the import preview ──────
   ⚠ ٢٦ بكسل مربّعاً لكنّ مساحةَ اللمس ٤٤ بالحشو الشفّاف: الصفوفُ متقاربة،
   وعلامةٌ صغيرةٌ بلا هامشِ لمسٍ تُصيب جارتها على الهاتف.
   ⚠ 26px square, with a 44px touch area made of transparent padding: the rows
   sit close together, and a small tick with no touch margin hits its neighbour
   on a phone. */
.imp-ck{position:relative;flex:none;width:26px;height:26px;border-radius:var(--rad-s);
  border:1.5px solid var(--line);background:var(--card);
  color:var(--card);font-size:var(--fs-md);font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;margin-inline-end:10px;cursor:pointer;
  transition:background var(--m-1) var(--ease),border-color var(--m-1) var(--ease)}
/* ⚠ ومنطقةُ اللمس محسوبةٌ من مركز المربّع: بلا position:relative على الزرّ
   يتعلّق هذا الصندوقُ بأقرب سلفٍ موضوعٍ — أي بالبطاقة — فيصير مستطيلاً شفّافاً
   في مكانٍ آخر من الشاشة يلتقط لمساتٍ ليست له. وذلك أسوأ من غيابه.
   ⚠ The touch area is measured from the square's own centre: without
   position:relative on the button this box hangs off the nearest positioned
   ancestor — the card — becoming a transparent rectangle elsewhere on the
   screen that catches touches meant for something else. Worse than not having
   it at all. */
.imp-ck::after{content:"";position:absolute;inset:50% auto auto 50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.imp-ck.on{background:var(--gold);border-color:var(--gold);color:#fff}
.imp-ck.off{opacity:.3;cursor:default}

/* ── مرئيّات الجواب · the answer's visual blocks ──────────────────────────
   بطاقاتٌ كبطاقات الرئيسية، وبطاقةُ التقدير بحدٍّ ذهبيٍّ مقطّعٍ وشارةٍ — النوع
   هو العلامة لا اللون وحده. والأعمدةُ أفقيةٌ (أسلمُ على الهاتف وفي RTL)،
   أطولُها ذهبيٌّ كقمّة منحنى الرئيسية، والسالبُ أحمر.
   Cards like the home tiles; the estimate card wears a dashed gold border and a
   chip — the TYPE is the mark, not a colour alone. Bars run horizontal (safer
   on a phone and in RTL), the largest goes gold like the home curve's peak, a
   negative goes red. */
.ask-cards{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.ask-card{flex:1 1 130px;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--rad-m);padding:10px 12px;position:relative}
.ask-card .l{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:3px}
.ask-card .v{font-size:var(--fs-lg);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ask-card .v .ask-num{border-bottom:0}
.ask-card .s{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;line-height:1.5}
.ask-card.est{border:1.5px dashed var(--gold);background:var(--card)}
.ask-est{display:inline-block;font-size:var(--fs-2xs);font-weight:600;color:var(--ink);
  background:color-mix(in srgb,var(--gold) 18%,transparent);
  border-radius:var(--rad-s);padding:2px 7px;margin-bottom:5px}
.ask-trk{margin:6px 0 12px}
.ask-trk .tl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:var(--fs-sm);color:var(--text-2);margin-bottom:5px}
.ask-trk .tl .mono{font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.ask-trk .ts{font-size:var(--fs-xs);color:var(--text-3);margin-top:4px;line-height:1.5}
.ask-bars{margin:6px 0 12px}
.ask-bars .bt{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:7px}
.ask-bars .br{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.ask-bars .bl{flex:0 0 32%;min-width:0;font-size:var(--fs-sm);color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-bars .bb{flex:1;height:9px;background:var(--line);border-radius:var(--rad-s);overflow:hidden}
.ask-bars .bb i{display:block;height:100%;background:var(--ink);border-radius:var(--rad-s)}
.ask-bars .bv{flex:0 0 auto;font-size:var(--fs-sm);font-weight:600;
  font-variant-numeric:tabular-nums}

/* شروط الاستخدام · the terms sheet */
.tos-lead{font-size:var(--fs-base);line-height:1.75;color:var(--text-2);
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.tos-c{display:flex;gap:12px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid var(--line)}
.tos-n{flex:none;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center;
  margin-top:1px}
/* عنوانُ المجموعة: ذهبيٌّ صغير، بلا تكبيرٍ ولا تباعدِ أحرف — تلك قواعدُ
   لاتينيةٌ بطبعها، والعربيةُ تتفكّك بها (القاعدة ٣٨).
   A part heading: small and gold, with no uppercasing and no letter-spacing —
   those are Latin rules by nature, and Arabic comes apart under them. */
.tos-g{font-size:var(--fs-xs);font-weight:600;color:var(--gold);
  padding-top:15px;padding-bottom:1px}
.tos-c + .tos-g{padding-top:17px}
.tos-h{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:3px}
.tos-p{font-size:var(--fs-base);line-height:1.75;color:var(--text-2)}
.tos-foot{font-size:var(--fs-sm);line-height:1.7;color:var(--text-3);
  padding-top:14px;font-style:italic}

/* ── جدول: ماذا يرى كل دور في كل تبويب · the by-page access matrix ────────
   ⚠ العمود الأول لاصق: بتسعة أدوار يجرّ الجدول أفقيّاً، ومن يفقد اسم الصفحة
   وهو يقرأ الخانات يقرأ نقاطاً بلا معنى.
   ⚠ The first column sticks: with nine roles the table drags sideways, and
   whoever loses the page name while reading the cells is reading dots. */
/* ⚠⚠ الارتفاع محدود عمداً، وهو ما يجعل رأس الجدول يلتصق أصلاً. كان
   `position:sticky;top:0` على thead بلا أثر: العنصر يلتصق بأقرب حاوية تمرير،
   وهي `.gwrap` — تمرّر أفقيّاً ولا تمرّر رأسيّاً — بينما الرأسيّ للصفحة نفسها.
   فمن نزل عشرين صفاً في جدولٍ من تسعة أدوار صار يقرأ نقاطاً في أعمدةٍ بلا
   أسماء، ولا يدري أيّها «مدير مشروع» وأيّها «موظّف». والقياس أثبته: رأس
   الجدول عند ‎-636 بكسل من أعلى الشاشة.
   ⚠⚠ The height is bounded on purpose, and that is what makes the head stick at
   all. `position:sticky;top:0` on thead had no effect: an element sticks to its
   nearest scrollport, which is `.gwrap` — it scrolls sideways and not
   vertically — while the vertical scroll belongs to the page. Twenty rows into
   a nine-role table the reader was looking at dots in unnamed columns with no
   way to tell Project Manager from Employee. Measured: the head at -636px. */
/* ⚠ ولا `overscroll-behavior:contain` هنا: من يبلغ آخر الجدول بحركةٍ واحدة
   يتوقّع أن تُكمل الصفحةُ حركته، لا أن يرفع إصبعه ويعيدها. المنع يخدم نافذةً
   فوق الصفحة، لا قسماً داخلها.
   ⚠ And no `overscroll-behavior:contain`: whoever reaches the end of the table
   in one flick expects the page to carry the movement on, not to lift a finger
   and start again. Containment serves a panel over the page, not a section
   inside it. */
.mx-wrap{margin-bottom:16px;max-height:min(66vh,560px);overflow:auto}
table.mx-t{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
  font-size:var(--fs-base)}
table.mx-t th,table.mx-t td{padding:5px 8px;border-bottom:1px solid var(--line);
  white-space:nowrap;text-align:center}
table.mx-t thead th{position:sticky;top:0;z-index:2;background:var(--line-2);
  font-size:var(--fs-xs);letter-spacing:.05em;font-weight:600;color:var(--text-2);padding:8px}
table.mx-t th:first-child,table.mx-t td:first-child{text-align:start;
  position:sticky;inset-inline-start:0;z-index:1;background:var(--card);
  font-weight:600;min-width:132px;
  /* حدٌّ على الحافّة الداخلية يفصل العمود اللاصق عمّا ينزلق تحته
     An edge on the inner side separates the sticky column from what slides under it */
  box-shadow:1px 0 0 var(--line)}
[dir="rtl"] table.mx-t th:first-child,[dir="rtl"] table.mx-t td:first-child{
  box-shadow:-1px 0 0 var(--line)}
table.mx-t thead th:first-child{z-index:3;background:var(--line-2)}
table.mx-t tr.sep td{background:var(--bg);text-align:start;
  position:static;box-shadow:none;padding:6px 8px}
/* الاسم وحده يلتصق بحافّة البداية، لا الخليّة: الخليّة تمتدّ بعرض الجدول كلّه
   فلا معنى لإلصاقها، والنصّ فيها هو ما كان يهرب خارج الشاشة.
   The name alone sticks to the inline-start edge, never the cell: the cell spans
   the whole table so pinning it means nothing, and it was the text inside that
   escaped off screen. */
table.mx-t tr.sep td>span{position:sticky;inset-inline-start:8px;display:inline-block;
  font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--text-3)}
.mx-c{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--rad-s);border:1px solid transparent;
  background:none;font-size:var(--fs-body);font-weight:600;line-height:1;cursor:pointer;
  padding:0;font-family:inherit}
button.mx-c:hover{border-color:var(--gold);background:var(--gold-soft)}
button.mx-c:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.mx-c.f{color:var(--ok)}
.mx-c.o{color:var(--warn)}
.mx-c.n{color:var(--line-2)}
.mx-k{font-size:var(--fs-md);font-weight:600;margin-inline-end:5px}
.mx-k.f{color:var(--ok)}
.mx-k.o{color:var(--warn)}
.mx-k.n{color:var(--line-2)}
.mx-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-size:var(--fs-sm);color:var(--text-3);margin:0 2px 9px}
.mx-legend span{display:flex;align-items:center}
.mx-legend .mx-hint{color:var(--text-3);font-style:italic;margin-inline-start:auto}

/* نافذة الخانة · the cell sheet */
.ac-state{display:flex;align-items:center;gap:8px;font-size:var(--fs-base);
  padding:10px 12px;background:var(--bg);border-radius:var(--rad-m)}
.ac-state span{color:var(--text-3)}
.ac-pl{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-top:1px solid var(--line);font-size:var(--fs-base);cursor:pointer}
.ac-pl input{width:17px;height:17px;margin:2px 0 0;flex:none}
.ac-also{display:block;font-size:var(--fs-sm);color:var(--warn);margin-top:3px;
  line-height:1.5;white-space:normal}

/* ── صفّ الصلاحية في محرّر الدور · a permission row in the role editor ──────
   الاسم فعلٌ مجرّد يتكرّر ثلاثين مرّة، والسطر تحته هو ما يقول ماذا يقع.
   The name is a bare verb repeated thirty times; the line beneath it is what
   says what happens. */
.rp{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;
  border-top:1px solid var(--line);cursor:pointer}
.rp:first-child{border-top:0}
.rp input{width:18px;height:18px;margin:1px 0 0;flex:none}
.rp-m{min-width:0}
.rp-t{display:block;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.rp-h{display:block;font-size:var(--fs-sm);color:var(--text-2);margin-top:3px;
  line-height:1.55;white-space:normal}
/* ⚠ وسمٌ على ما يحرّك المال وحده. الوسم على كل صفٍّ ورقُ حائط، ويأخذ معه
   الوسمَ الذي يعني شيئاً — منطق شارات السرّية في القاعدة ٢٩ نفسه.
   ⚠ A mark on what moves money and nothing else. A mark on every row is
   wallpaper, and takes the one that means something down with it — the same
   reasoning as the confidentiality chips in rule 29. */
.rp-tag{display:inline-block;margin-inline-start:6px;vertical-align:1px;
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;padding:1px 6px;
  border-radius:var(--rad-s);background:var(--bad-bg);color:var(--bad)}
.rp.m .rp-t{color:var(--bad)}
.rp-sum{display:flex;flex-wrap:wrap;gap:5px;align-items:baseline;
  font-size:var(--fs-base);color:var(--text-2);background:var(--bg);
  padding:10px 12px;border-radius:var(--r-sm);margin-bottom:12px}
.rp-sum .d{color:var(--text-3)}
.rp-sum .hot{color:var(--bad);font-weight:600}
.rp-note{font-size:var(--fs-sm);color:var(--text-3);line-height:1.55;margin-bottom:14px}
/* المجموعة المطويّة داخل النافذة: هامشٌ أضيق من هامش البطاقات في الصفحة */
details.acc.rg{margin-bottom:6px}

/* ── سجل التدقيق مطويّاً · the audit log, folded ──────────────────────────
   صفٌّ مضغوط يُقرأ بالمسح، وتفصيلٌ يُفتح عند الطلب. والصفوف متلاصقة بلا فجوة:
   قائمةٌ لا كتالوجُ بطاقات.
   A compact row that reads by sweeping, and detail that opens on demand. The
   rows sit flush with no gap between them: a list, not a catalogue of cards. */
.aud-timeline .acc.aud-row,.aud-timeline .acc.aud-flat{
  margin-bottom:0;border-radius:0;border-inline:0;border-top:0;box-shadow:none}
.aud-timeline .acc:first-child{border-top:1px solid var(--line)}
.aud-timeline .acc>summary,.aud-timeline .acc.aud-flat{
  padding:10px 15px;min-height:44px;gap:8px}
.aud-timeline .acc.aud-flat{display:flex;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.aud-timeline .aud-t{font-size:var(--fs-md);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.aud-timeline .aud-time{font-size:var(--fs-xs);color:var(--text-3);margin-inline-start:auto}
.aud-timeline .aud-amt{font-size:var(--fs-base);font-weight:600}
/* الشارة على الحافّة تصنّف الصفّ بلا كلمة · an edge stripe classifies the row
   without spending a word on it */
.aud-timeline .aud-high{box-shadow:inset 3px 0 0 var(--gold)}
.aud-timeline .aud-cx{box-shadow:inset 3px 0 0 var(--bad)}
[dir="rtl"] .aud-timeline .aud-high{box-shadow:inset -3px 0 0 var(--gold)}
[dir="rtl"] .aud-timeline .aud-cx{box-shadow:inset -3px 0 0 var(--bad)}
.aud-timeline .acc-b{padding:0 15px 13px}
@media(max-width:560px){
  .aud-timeline .aud-time{margin-inline-start:0;order:3;width:100%}
  .aud-timeline .aud-amt{margin-inline-start:auto}}

/* ── أثر الترجمة الآلية · the machine-translation mark ────────────────────
   صغيرٌ وهادئ لأنّه يظهر على كل سطرٍ مترجَم، وواضحٌ لأنّه يقول شيئاً يجب أن
   يُعرف. ومساحةُ اللمس ٤٤ نقطة عبر الحشو الشفّاف لا عبر تكبيره.
   Small and quiet because it appears on every translated line, and legible
   because it says something that must be known. The 44pt touch target comes
   from transparent padding, not from making the glyph bigger. */
/* ⚠ `<span>` لا `<button>` (انظر trCell): فيلزمها ما كان الزرّ يعطيه مجّاناً */
.tr-mark{display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0 6px;margin:0 1px;cursor:pointer;
  -webkit-user-select:none;user-select:none;
  font-size:var(--fs-xs);line-height:1;color:var(--gold);vertical-align:1px;
  min-height:0;position:relative;font-family:inherit}
.tr-mark::after{content:"";position:absolute;inset:-14px -8px}
.tr-mark:hover{color:var(--ink)}
.tr-mark:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.tr-orig-t{font-size:var(--fs-body);line-height:1.6;color:var(--ink);font-weight:600;
  padding-bottom:12px;border-bottom:1px solid var(--line);text-align:start}
.tr-orig-h{font-size:var(--fs-sm);line-height:1.7;color:var(--text-3);padding-top:12px}
.fhelp-r{display:flex;gap:8px;align-items:flex-start;margin-top:7px;
  font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.fhelp-r .code{flex-shrink:0}
.fhelp.on{background:var(--gold);color:#fff;border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){.fhelp-body{animation:none}}


/* ═══ بنية الأسبوع في حافظة الدوام · week structure in the timesheet ═══
   ⚠ خطٌّ واحد وشريطٌ واحد، لا لونٌ ثالث: الشبكة تحمل أصلاً تمييزَ العطلة
   وتمييزَ الخليّة النشطة، وثالثٌ يجعل الثلاثة كلَّها غير مقروءة.
   ⚠ One rule and one band, never a third colour: the grid already distinguishes
   the weekend and the focused cell, and a third makes all three unreadable. */
.ts th.wk{font-size:var(--fs-2xs);letter-spacing:.06em;font-weight:600;color:var(--text-3);
  text-align:center;padding:5px 4px 4px;background:var(--bg-2, transparent);
  border-bottom:1px solid var(--line-2);white-space:nowrap}
.ts th.wk .wkt{display:block;font-size:var(--fs-xs);color:var(--text-2);font-weight:600;margin-top:1px}
.ts tr.wkband th.c0{background:transparent;border:0}
/* بداية الأسبوع: حدٌّ منطقيّ ليصحّ في الاتّجاهين · a logical border so it is
   correct in both directions */
.ts th.w0, .ts td.w0{border-inline-start:2px solid var(--line-1, var(--line-2))}


/* ═══════════════════════════════════════════════════════════════════════
   اسأل صيرة · ASK SIRA — سطحٌ واحد لملاحظةٍ أو مهمّةٍ أو مالٍ أو سؤال
   One surface for a note, a task, money, or a question
   ─────────────────────────────────────────────────────────────────────────
   ⚠⚠ وهذا السطح كحليٌّ وحده في تطبيقٍ فاتحٍ كلِّه، وذلك مقصود: النوافذ
   الأخرى استمارات، وهذه واحدةٌ تُملى بالكلام ثمّ تُراجَع — فاختلافُها في
   اللون يقول إنّها ليست الاستمارة، وأنّ ما فيها لم يُكتب بعد. والبطاقةُ
   البيضاء داخلها هي السجلُّ المقترَح: بيضاءُ لأنّها ستصير سجلّاً.
   ⚠⚠ This surface is navy alone in an app that is light throughout, and that is
   the point: the other sheets are forms, and this one is dictated and then
   reviewed — so its colour says it is not the form, and that what is in it is
   not written yet. The white card inside IS the proposed record: white because
   it is about to become one.

   ⚠ والألوان من نظام الهويّة (‎--ink‎/‎--gold‎) لا من أرقامٍ مكتوبة هنا، إلا
   درجتين ليس لهما رمزٌ بعد. ⚠ Colours come from the identity tokens, except two
   steps that have no token yet.

   ⚠⚠ ونصُّ البطاقة البيضاء بـ ‎--text-2/-3‎ لا بالرمادي البارد ‎#97A0AE‎: هذا
   الأخير يعطي ٢٫٩:١ على الأبيض — دون حدّ WCAG AA — وقد رُفع مرّةً في هذا
   الملفّ لهذا السبب بعينه، فلا يُعاد إنزاله.
   ⚠⚠ The white card's labels use --text-2/-3, never the cool grey #97A0AE: that
   reads 2.9:1 on white, under the WCAG AA floor, and was raised once in this
   very file for exactly that reason. It is not lowered again. */
:root{ --ai-sheet-1:#22406E; --ai-scrim:11,20,36; }

/* ── الرصيف: الحبّة المرسّاة فوق الشريط · the docked pill above the nav ──
   ⚠ عرضٌ كامل لا زرٌّ صغير في الزاوية: هذا هو المدخل الوحيد للذكاء في
   التطبيق، ونصُّه التابع يقول ماذا يفعل قبل أن يُضغط — «ملاحظة · مهمّة · مال
   · سؤال». زرٌّ دائريٌّ بأيقونةٍ لا يقول شيئاً من ذلك.
   ⚠ Full width rather than a small corner button: this is the app's only door
   onto the AI, and its trailing line says what it does before it is pressed. A
   round icon button says none of that. */
.ask-fab{position:fixed;inset-inline:16px;
  bottom:calc(var(--nav-h) + 14px);
  z-index:45;display:flex;align-items:center;gap:11px;
  width:auto;min-height:52px;padding:0 18px;border:0;border-radius:26px;
  background:linear-gradient(160deg,var(--ink-2),var(--ink));color:#fff;cursor:pointer;
  box-shadow:0 10px 28px rgba(15,32,59,.34);
  transition:transform var(--m-1) var(--ease),opacity var(--m-1) var(--ease)}
.ask-fab:active{transform:scale(.99)}
.ask-fab-l{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.ask-fab-t{font-size:var(--fs-md);font-weight:600;line-height:1;white-space:nowrap;
  letter-spacing:.02em}
.ask-fab-s{font-size:var(--fs-sm);color:rgba(255,255,255,.5);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* ⚠ فوق ٩٠٠ لا شريطَ سفليّاً، والحبّةُ لا تمتدّ عبر الشاشة كلِّها: تُقصر إلى
   عرضٍ معقول في الزاوية. ⚠ Above 900px there is no bottom bar, and the pill does
   not stretch across a desktop: it shortens into the corner. */
/* ⚠ وتختفي الحبّة والنافذةُ قائمة: تحت الحجاب لا تُضغط أصلاً، وبقاؤها ظاهرةً
   تحته يجعل الحافّةَ السفلى مزدحمةً بزرٍّ لا يستجيب. و`sheet-open` يضعه
   syncLock على ‎<html>‎ ما دامت نافذةٌ أو سؤالُ تأكيدٍ مفتوحاً.
   ⚠ The pill hides while a sheet is up: under the scrim it cannot be pressed
   anyway, and leaving it showing crowds the bottom edge with a button that does
   not answer. `sheet-open` is what syncLock puts on <html> while any sheet or
   confirm question stands. */
html.sheet-open .ask-fab{display:none}
/* ⚠ وزرُّ الإضافة في الزاوية نفسها وبالارتفاع نفسه: يُترك له موضعُه.
   ⚠ The + button sits in the same corner at the same height: room is left. */
.ask-fab.with-fab{inset-inline-end:calc(16px + 54px + 10px)}
@media(min-width:900px){.ask-fab{inset-inline:auto 24px;bottom:24px;max-width:340px}}
@media(prefers-reduced-motion:reduce){.ask-fab{transition:none}
  .ask-fab:active{transform:none}}

/* ── 3.0.26 · الكرة · the orb (docs/PROPOSAL-ai-next.md §6) ─────────────────
   ⚠ الحبّةُ بعرض الشاشة صارت كرةً في الزاوية المقابلة لزرّ الإضافة — بقرار المالك على
   لوحة التصميم. ولا تفقد كلامها: اسمُها في aria-label وفي النصّ المخفيّ بصريّاً.
   ⚠ الدورانُ transform وحده على عنصرٍ زائف (قاعدة الحركة)، ولا دورانَ مع تقليل الحركة.
   The full-width pill became an orb in the corner opposite the + — the owner's call on
   the design canvas. It loses none of its words: the name is in aria-label and in the
   visually hidden text. ⚠ The turn is transform alone on a pseudo-element (the motion
   rule), and none under reduced motion. */
.ask-fab.ask-orb{inset-inline-start:16px;inset-inline-end:auto;
  bottom:calc(var(--nav-h) + 14px);width:60px;height:60px;min-height:60px;max-width:none;
  padding:0;border-radius:50%;justify-content:center;gap:0;background:var(--ink);
  box-shadow:0 0 0 3px var(--gold),0 10px 24px rgba(15,32,59,.3)}
.ask-fab.ask-orb .ai-mark{width:30px;height:30px}
.ask-fab.ask-orb .ask-fab-l{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* 3.1.2 · قوسٌ ذهبيّ على حلقةٍ باهتة (لوحة «Orb»)، قناعٌ يترك الحلقةَ وحدها، فيدور حول مركزه بلا
   تمايل · a gold arc on a faint ring (the "Orb" board), masked to the ring alone, so it turns on
   its own centre without wobbling */
.ask-fab.ask-orb::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(var(--gold) 0 30%,rgba(207,156,81,.2) 30% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  opacity:0;pointer-events:none}
.ask-fab.ask-orb .orb-mic{display:none;color:var(--ink)}
.ask-fab.ask-orb.is-listening{background:var(--gold);box-shadow:0 0 0 8px rgba(207,156,81,.22),0 10px 24px rgba(15,32,59,.3)}
.ask-fab.ask-orb.is-listening .ai-mark{display:none}
.ask-fab.ask-orb.is-listening .orb-mic{display:block}
.ask-fab.ask-orb.is-busy{box-shadow:0 0 0 3px rgba(207,156,81,.28),0 10px 24px rgba(15,32,59,.3)}
.ask-fab.ask-orb.is-busy::before{opacity:1;animation:orb-turn var(--m-loop) linear infinite}
@keyframes orb-turn{to{transform:rotate(360deg)}}
.ask-fab.ask-orb.is-ready::after{content:"";position:absolute;top:1px;inset-inline-end:1px;
  width:15px;height:15px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--bg)}
.ask-fab.ask-orb.with-fab{inset-inline-end:auto}
@media(min-width:900px){.ask-fab.ask-orb{inset-inline:auto 24px;bottom:24px;width:56px;height:56px;min-height:56px}
  .ask-fab.ask-orb.with-fab{inset-inline-end:calc(24px + 56px + 12px)}}
@media(prefers-reduced-motion:reduce){.ask-fab.ask-orb.is-busy::before{animation:none}}

/* ── 3.1.2 · الفقاعة · the hint beside the orb (Home, phone; views/ask.js orbHint) ── */
.ask-hint{position:fixed;z-index:59;inset-inline-start:calc(16px + 60px + 12px);
  bottom:calc(var(--nav-h) + 14px + 12px);max-width:calc(100vw - 16px - 60px - 12px - 16px - 64px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);padding:8px 12px;
  font-size:var(--fs-sm);color:var(--ink);box-shadow:0 4px 12px rgba(15,32,59,.08);line-height:1.4;
  animation:aipop-in var(--m-3) var(--ease)}
.ask-hint b{font-weight:600}
html.sheet-open .ask-hint{display:none}
@media(min-width:900px){.ask-hint{display:none}}
@media(prefers-reduced-motion:reduce){.ask-hint{animation:none}}

/* ── 3.1.2 · نافذةُ الاستماع (لوحة «Voice») · the listening sheet. ⚠ Its own root above the
   sheets (#ai-listen, z 94), never a sheet(): it holds no field. The meter bars move by
   transform alone (voice.js writes scaleY). ── */
#ai-listen:empty{display:none}
.ai-lsn{position:fixed;inset:0;z-index:94;background:rgba(11,24,48,.55);display:flex;align-items:flex-end;
  justify-content:center;animation:ovIn var(--m-2) var(--ease) both}
.ai-lsn-card{width:100%;max-width:520px;height:min(640px,86vh);box-sizing:border-box;background:var(--ink);color:#fff;
  border-radius:24px 24px 0 0;padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--s4);animation:aipop-up var(--m-3) var(--ease) both}
@keyframes aipop-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ai-lsn-h{display:flex;align-items:center;gap:10px}
.ai-lsn-h .ai-mark{width:24px;height:24px}
.ai-lsn-tt{display:flex;flex-direction:column;flex:1;min-width:0}
.ai-lsn-tt b{font-size:var(--fs-md);font-weight:600}
.ai-lsn-tt span{font-size:var(--fs-sm);color:rgba(255,255,255,.68)}
.ai-lsn-x{width:44px;height:44px;border-radius:var(--rad-m);border:0;background:rgba(255,255,255,.1);color:#fff;
  font-size:var(--fs-xl);cursor:pointer}
.ai-lsn-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);min-height:0}
.ai-lsn-said{margin:0;font-size:var(--fs-2xl);line-height:1.7;font-weight:500;overflow:auto}
.ai-lsn-say{margin:0;font-size:var(--fs-xl);line-height:1.7;color:rgba(255,255,255,.72)}
.ai-lsn-chip{align-self:flex-start;font-size:var(--fs-sm);padding:6px 12px;border-radius:16px;
  background:rgba(207,156,81,.16);color:#E9C68F}
.ai-lsn-n{font-size:var(--fs-sm);color:rgba(255,255,255,.6);line-height:1.6}
.ai-lsn-ctl{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.ai-lv{display:flex;align-items:center;gap:5px;height:44px}
.ai-lv i{display:block;width:4px;height:44px;border-radius:2px;background:var(--gold);transform:scaleY(.12);
  transition:transform 80ms linear}
.ai-lsn-orb{width:88px;height:88px;border-radius:50%;border:0;background:var(--gold);color:var(--ink);
  box-shadow:0 0 0 10px rgba(207,156,81,.18),0 0 0 22px rgba(207,156,81,.08);display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.ai-lsn-orb svg{width:34px;height:34px}
.ai-lsn-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--s3)}
.ai-lsn-row .ai-rec-t{font-size:var(--fs-sm);color:rgba(255,255,255,.72)}
.ai-lsn-c{min-height:44px;padding:0 18px;border-radius:var(--rad-m);border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;font:inherit;cursor:pointer}
.ai-lsn-d{min-height:44px;padding:0 22px;border-radius:var(--rad-m);border:0;background:#fff;color:var(--ink);
  font:inherit;font-weight:600;cursor:pointer}
.ai-lsn-f{font-size:var(--fs-sm);color:rgba(255,255,255,.6);text-align:center;line-height:1.5}
/* على المكتب: بطاقةٌ في الوسط لا ورقةٌ من الأسفل · on the desk: a centred card, not a sheet from the foot */
@media(min-width:900px){.ai-lsn{align-items:center}
  .ai-lsn-card{max-width:480px;height:auto;min-height:520px;border-radius:var(--rad-l);
    box-shadow:0 0 0 1px rgba(207,156,81,.5),0 24px 60px rgba(11,24,48,.45)}}
@media(prefers-reduced-motion:reduce){.ai-lsn,.ai-lsn-card{animation:none}.ai-lv i{transition:none}}
@media print{#ai-listen{display:none}}

/* ── 3.1.2 · ما قيل، والكلفة (لوحة «Confirm») · what was said, and the cost ── */
.ai-said{display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.06);border-radius:var(--rad-m);
  padding:10px 12px;margin-bottom:14px;font-size:var(--fs-base);line-height:1.6;color:rgba(255,255,255,.82)}
.ai-said svg{flex:none;margin-top:3px;color:var(--gold)}
.ai-said>span{flex:1;min-width:0}
.ai-said-ed{flex:none;min-height:32px;padding:0 10px;border-radius:var(--rad-m);border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.ai-costl{margin-top:10px;font-size:var(--fs-xs);color:rgba(255,255,255,.58);text-align:center;line-height:1.6}

/* ── 3.0.27 · النافذةُ المنبثقة: من الأعلى، كحليّة بحافّةٍ ذهبيّة، زرّان ·
   the popup: from the top, navy with a gold edge, two buttons. ⚠ It slides by transform
   alone and holds no field, so it may close by itself (8s) — what it does not open stays
   on the orb and in the bell. ── */
#ai-pop:empty{display:none}
#ai-pop{position:fixed;top:calc(12px + env(safe-area-inset-top));inset-inline:12px;z-index:98;
  display:flex;justify-content:center;pointer-events:none}
.aipop{pointer-events:auto;width:100%;max-width:420px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s3) var(--s3);align-items:start;padding:var(--s4);border-radius:var(--rad-l);
  background:var(--ink);color:#fff;box-shadow:0 0 0 1px var(--gold),0 14px 30px rgba(15,32,59,.35);
  animation:aipop-in var(--m-3) var(--ease)}
.aipop-m{width:36px;height:36px;border-radius:50%;background:#16294A;box-shadow:0 0 0 2px var(--gold);
  display:flex;align-items:center;justify-content:center}
.aipop .ai-mark{width:18px;height:18px}
.aipop-bar{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.aipop-bar i{display:block;height:3px;background:var(--gold);transform-origin:var(--bar-o,right);
  animation:aipop-bar linear forwards}
html[dir=ltr] .aipop-bar i{--bar-o:left}
@keyframes aipop-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.aipop-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.aipop-t b{font-size:var(--fs-sm);font-weight:600;color:#E9C68F}
.aipop-t span{font-size:var(--fs-base);line-height:1.55}
.aipop-b{grid-column:1/-1;display:flex;gap:var(--s2)}
.aipop-go{flex:1;min-height:44px;border:0;border-radius:var(--rad-l);background:var(--gold);color:var(--ink);
  font:inherit;font-weight:600;cursor:pointer}
.aipop-later{min-height:44px;padding:0 var(--s4);border-radius:var(--rad-l);background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.28);font:inherit;cursor:pointer}
@keyframes aipop-in{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.aipop{animation:none}.aipop-bar{display:none}}
@media print{#ai-pop{display:none}}

/* ── 3.0.26 · المؤلِّف: الصندوقُ وأزرارُه في إطارٍ واحد · the composer: the box and its
   buttons in one frame ── */
.ai-comp{border:1px solid rgba(255,255,255,.16);border-radius:var(--rad-l);
  background:rgba(255,255,255,.07);transition:border-color var(--m-1) var(--ease)}
.ai-comp:focus-within{border-color:rgba(207,156,81,.7);box-shadow:0 0 0 2px rgba(207,156,81,.3)}
.ai-comp .ai-box{border:0;background:transparent;min-height:64px;border-radius:var(--rad-l)}
/* ⚠ الحلقةُ العامّة للتركيز تُرسم على الإطار كلّه لا على الصندوق داخله — وإلّا ظهر إطاران ·
   the global focus ring is drawn on the whole frame, not the box inside it — or two frames show */
.ai-comp .ai-box:focus,.ai-comp .ai-box:focus-visible{border:0;outline:none;box-shadow:none}
.ai-comp .ai-row{margin-top:0;padding:0 8px 8px;justify-content:flex-end;align-items:center}
.ai-comp .ai-send{flex:none;min-height:40px;padding:0 22px;border-radius:var(--rad-l)}
.ai-comp .ak-row .ai-send{flex:none}

/* ── العلامة · the mark ──
   ⚠ العلامةُ نفسها لا شكلٌ يشبهها: متاهةٌ ذهبيّةٌ داخل معيّن، ومربّعٌ مُدارٌ
   يقارب صورتَها الظلّية ويُسقط ما يجعلها هي. ولا فقاعةَ حوارٍ ولا بريقٌ ولا
   إنسانٌ آليّ — تلك تجعل هذا زرَّ روبوتٍ في نظامٍ ماليّ.
   ⚠ The mark itself, never a shape that resembles it: a gold labyrinth inside a
   diamond, where a plain rotated square approximates the silhouette and drops
   what makes it the mark. And never a chat bubble, a sparkle or a robot — those
   would make this a robot button inside a financial system. */
.ai-mark{width:24px;height:24px;object-fit:contain;flex:none;display:block}

/* ── النافذة الكحليّة · the navy sheet ── */
.sheet.ai{background:linear-gradient(170deg,var(--ai-sheet-1),var(--ink) 60%);
  color:#fff;box-shadow:0 -14px 40px rgba(0,0,0,.35)}
/* ⚠⚠ صفحةُ «اسأل» تحمل النافذةَ الكحليّة نفسها. جسمُ «اسأل» واحدٌ للنافذة
   وللصفحة (askBody)، وألوانُه بيضاء لأنّه وُلد في النافذة — فرُسم على أرضيّة
   الصفحة الفاتحة أبيضَ على أبيض (تباين ١٫٢ من ٤٫٥) وبدت الصفحةُ فارغة.
   ⚠⚠ The Ask PAGE wears the navy sheet too. Ask's body is one for the sheet and
   the page (askBody), and its colours are white because it was born in the
   sheet — so on the page's light ground it drew white on white (contrast 1.2
   against 4.5) and the page read as empty. */
.ai-page{background:linear-gradient(170deg,var(--ai-sheet-1),var(--ink) 60%);
  color:#fff;border-radius:var(--r);padding:18px 18px 22px;
  box-shadow:0 10px 30px rgba(15,32,59,.18)}
.sheet.ai .sheet-h{border-bottom:1px solid rgba(255,255,255,.1);padding:14px 20px 12px}
.sheet.ai .sheet-h h3{color:#fff;font-size:var(--fs-body);font-weight:600}
/* العلامة في رأس النافذة كما هي على الحبّة: الشيء نفسه في الموضعين، فيُعرف أنّ
   هذه هي تلك. ورأسُ النافذة يرسمه sheet() فتأتي العلامة صورةً خلفيّة — لا
   مفتاحَ ثالثاً في التوقيع من أجل أيقونة.
   The mark in the sheet header as on the pill: the same thing in both places, so
   it is recognisably the one opened. sheet() draws the header, so the mark
   arrives as a background image rather than a third option in the signature
   just for an icon. */
.sheet.ai .sheet-h::before{content:"";width:24px;height:24px;flex:none;
  background:url(logo-mark.png) center/contain no-repeat;
  margin-inline-end:13px;margin-inline-start:4px}
.sheet.ai .sheet-grab{background:rgba(255,255,255,.25)}
.sheet.ai .x{background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:var(--rad-m);
  width:34px;height:34px}
.ai-sub{font-size:var(--fs-xs);color:rgba(255,255,255,.68);margin-top:1px}

/* ── شرائح النيّة · the intent chips ── */
.ai-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;margin-bottom:13px;
  scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chips>button{min-height:36px;padding:7px 14px;border-radius:20px;
  font-size:var(--fs-base);font-weight:600;white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16)}
.ai-chips>button.on{background:var(--gold);color:var(--ink);border-color:transparent}

/* ── صندوق الكلام · the utterance box ── */
.ai-box{width:100%;min-height:76px;padding:13px 15px;border-radius:var(--rad-m);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:var(--fs-md);line-height:1.6;resize:none;outline:none}
.ai-box::placeholder{color:rgba(255,255,255,.4)}
.ai-box:focus{border-color:rgba(207,156,81,.55)}
.ai-row{display:flex;gap:9px;margin-top:11px}
.ai-send{flex:1;min-height:44px;border:0;border-radius:var(--rad-m);background:var(--gold);
  color:var(--ink);font-size:var(--fs-body);font-weight:600;cursor:pointer}
.ai-send[disabled]{opacity:.55;cursor:default}
/* 3.0.28 · ما ظنّه صيره، وأزرارٌ تعيده نوعاً آخر · what SIRA guessed, and buttons to redo it as another kind */
/* حالةُ المستفيد داخل البطاقة البيضاء — بحبر البطاقة لا بأبيض النافذة · the payee's state inside
   the white card — in the card's ink, never the sheet's white */
.ai-pq{margin-top:5px;font-size:var(--fs-sm);color:var(--text-3)}
.ai-pq.ok{color:var(--ok)}
/* ═══ 3.0.30 · البطاقةُ هي السجلّ — بطاقةُ صيره لأمر الدفع ومصروف العهدة والحركة البنكيّة (لوحة
   «ASK SIRA — next generation»، اللوح ٣). ⚠ للبطاقة المقترَحة في صيره وحدها: بطاقةُ الدفع في
   الدفتر وصفحة المال لا تُمسّ · the SIRA proposal card alone: the payment card in the ledger and
   on Money is untouched */
.ai-rc{display:flex;flex-direction:column}
.ai-rc-h{padding:14px 16px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ai-rc-cap{font-size:var(--fs-sm);font-weight:600;color:var(--gold-ink)}
.ai-rc-chip{font-size:var(--fs-sm);padding:3px 10px;border-radius:var(--rad-pill);background:var(--warn-bg);color:var(--warn);white-space:nowrap}
.ai-rc-amt{padding:0 16px 10px;display:flex;flex-direction:column;gap:2px}
.ai-rc-big{font-size:var(--fs-3xl);font-weight:600;line-height:1.15;color:var(--ink);unicode-bidi:isolate}
.ai-rc-sub{font-size:var(--fs-base);color:var(--text-3)}
.ai-rc-rows{padding:0 16px;font-size:var(--fs-md)}
.ai-rc-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.ai-rc-r>span{color:var(--text-3);flex:0 0 auto}
.ai-rc-r>b{font-weight:500;text-align:end;min-width:0;overflow-wrap:anywhere}
.ai-rc-r small{color:var(--text-3);font-weight:400}
.ai-rc-add{border:0;background:transparent;color:var(--gold-ink);font:inherit;font-weight:600;padding:0;min-height:32px;cursor:pointer}
.ai-rc-ck{margin-top:6px;background:var(--bg);padding:10px 16px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-base);color:var(--text-2)}
.ai-rc-c{display:flex;gap:8px;align-items:baseline;line-height:1.5}
.ai-rc-c>i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--text-3);transform:translateY(-1px)}
.ai-rc-c.ok>i{background:var(--ok)}.ai-rc-c.warn>i{background:var(--warn)}.ai-rc-c.bad>i{background:var(--bad)}
.ai-rc-c.bad{color:var(--bad)}
.ai-rc-c b{font-weight:600;color:var(--ink)}.ai-rc-c.bad b{color:var(--bad)}

/* ═══ 3.0.30 · «مسوّداتي» على الرئيسية · "My drafts" on the home page ═══ */
.dr-h{padding:10px 14px 4px;font-size:var(--fs-sm);color:var(--text-3)}
.dr-r{display:flex;align-items:center;min-width:0}
.dr-r>.dr-go{flex:1;min-width:0}
.dr-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-ni{color:var(--gold-ink)}
.dr-a{flex:0 0 auto;font-size:var(--fs-md);font-weight:600;color:var(--ink);margin-inline-start:8px}
.dr-x{flex:0 0 44px;width:44px;min-height:44px;border:0;background:transparent;color:var(--text-3);font-size:var(--fs-md);cursor:pointer;border-radius:var(--rad-s)}
.dr-x:hover{color:var(--bad);background:var(--bad-bg)}
.dr-more{padding:8px 14px 12px;font-size:var(--fs-sm);color:var(--text-3)}
.cmd-sub{font-size:var(--fs-sm);color:var(--text-3);padding:0 0 4px}
/* ═══ 3.0.31 · مسوّدةُ ملفّ · a file draft ═══ */
.dr-add{border:0;background:transparent;color:var(--gold-ink);font:inherit;font-size:var(--fs-base);font-weight:600;min-height:44px;padding:0 var(--s2);cursor:pointer}
.dr-dh{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.dr-dh .dr-add{min-height:32px}
.dr-th{flex:0 0 40px;width:40px;height:40px;border-radius:var(--rad-s);object-fit:cover;background:var(--bg);margin-inline-end:var(--s2)}
.dr-th-pdf{display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;color:var(--bad)}
.drf{display:flex;flex-direction:column;gap:var(--s3)}
.drf-img{display:block;width:100%;max-height:300px;object-fit:contain;border-radius:var(--rad-m);background:var(--bg)}
.drf-pdf{min-height:56px;border:1px dashed var(--line-2);border-radius:var(--rad-m);background:var(--bg);font:inherit;font-weight:500;color:var(--ink);cursor:pointer}
.drf-q{font-size:var(--fs-sm);font-weight:600;color:var(--text-3)}
.drf-ks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--s2)}
.drf-k{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--rad-m);background:#fff;font:inherit;text-align:start;cursor:pointer}
.drf-k b{font-weight:600;color:var(--ink)}.drf-k small{font-size:var(--fs-sm);color:var(--text-3)}
.drf-k.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.drf-doors{display:flex;flex-direction:column;gap:var(--s2)}
.drf-doors .btn{min-height:44px}
.drf-h{margin:0;font-size:var(--fs-sm);color:var(--text-3);line-height:1.6}
.drf-foot{display:flex;justify-content:flex-end}
/* 3.1.1 · لا معاينة: اسمُ الملفّ زرٌّ يفتحه · no preview: the file's name is a button that opens it */
/* 3.2.6 · the mail a draft came from: sender, subject, and Outlook on the press */
.drf-mail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--rad-m);background:var(--bg);margin-bottom:var(--s3)}
.drf-ml-t{font-weight:600;color:var(--text)}
.drf-ml-s{flex:1 1 100%;color:var(--text-2);font-size:var(--fs-sm);min-width:0;overflow-wrap:anywhere}
.drf-file{min-height:44px;padding:0 var(--s3);border:1px solid var(--line-2);border-radius:var(--rad-m);background:var(--bg);
  font:inherit;font-weight:500;color:var(--ink);text-align:start;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* صيره دائرةٌ صغيرة في سطر «هو…» · SIRA a small circle on the "It is…" line */
.drf-qr{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.drf-aib{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:0;background:var(--ink);color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);font-size:var(--fs-base);cursor:pointer;display:grid;place-items:center}
.drf-aib:hover{background:var(--ink-2)}
/* 3.1.0 · الصفحة: المرشّحُ والإضافةُ في سطرٍ واحد · the page: the filter and the add on one line */
.dr-pg-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.dr-pg-h .pfilter{margin:0;min-width:0}
.dr-pg{padding:var(--s2) var(--s4)}
/* 3.1.1 · استيرادُ كشفٍ بنكيّ: سطرٌ لكلّ حركة بحكمه، والرصيدان فوقها · importing a bank statement: one line
   per movement with its verdict, the two balances above */
.stm{display:flex;flex-direction:column;gap:var(--s3)}
.stm-bal{padding:var(--s2) var(--s3);border-radius:var(--rad-m);font-size:var(--fs-sm);background:var(--bg);line-height:1.7}
.stm-bal.ok{background:var(--ok-bg);color:var(--ok)}
.stm-bal.bad{background:var(--warn-bg);color:var(--warn)}
.stm-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--rad-m);background:#fff}
.stm-r{display:grid;grid-template-columns:24px 86px minmax(0,1fr) auto;grid-template-areas:"c d t a" "c d v v";gap:2px var(--s2);
  align-items:center;padding:var(--s2) var(--s3);border-top:1px solid var(--line);cursor:pointer;min-height:44px}
.stm-r:first-child{border-top:0}
.stm-r input{grid-area:c;width:18px;height:18px}
.stm-d{grid-area:d;font-size:var(--fs-sm);color:var(--text-3)}
.stm-t{grid-area:t;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stm-a{grid-area:a;font-weight:600}
.stm-a.stm-in{color:var(--ok)}
.stm-v{grid-area:v;font-size:var(--fs-sm);color:var(--text-3)}
.stm-have .stm-v,.stm-twice .stm-v{color:var(--warn)}
.stm-before,.stm-bad{opacity:.55;cursor:default}



/* 3.0.29 · الصوت: زرّ الميكروفون، شريط التسجيل، و«هذا ما سمعتُ» · voice: the mic, the recording bar,
   and "this is what I heard" */
.ai-mic{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--gold);border:1px solid rgba(207,156,81,.55)}
.ai-mic:hover{background:rgba(207,156,81,.16)}
.ai-mic:disabled{opacity:.45;cursor:default}
.ai-rec{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.ai-rec-t{direction:ltr;unicode-bidi:isolate}
.ai-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:ai-rec-p var(--m-loop) var(--ease) infinite}
@keyframes ai-rec-p{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.ai-comp.ai-recording{border-color:var(--bad)}
.ai-comp.ai-recording .ai-box:disabled{background:transparent;color:rgba(255,255,255,.55)}
.ai-rec-x{min-height:40px;border-radius:var(--rad-l)}
.ai-heard{padding:8px 12px 0;font-size:var(--fs-sm);color:var(--gold)}
@media (prefers-reduced-motion:reduce){.ai-rec-dot{animation:none}}
.ai-guess{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px;
  font-size:var(--fs-sm);color:rgba(255,255,255,.78)}
.ai-guess b{color:var(--gold);font-weight:600}
.ai-guess-n{margin-inline-start:4px;color:rgba(255,255,255,.6)}
.ai-guess>button{min-height:32px;padding:5px 12px;border-radius:16px;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.ai-guess>button:hover{border-color:var(--gold)}
@media(max-width:899px){.ai-guess>button{min-height:40px}}
.ai-hint{margin-top:16px;font-size:var(--fs-sm);color:rgba(255,255,255,.68);line-height:1.75}

/* ── عنوان القسم · the section label ── */
.ai-lab{font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.5);margin-bottom:9px}

/* ── البطاقة البيضاء: السجلّ المقترَح · the white card, the proposed record ── */
.ai-card{background:#fff;color:var(--ink);border-radius:16px;overflow:hidden}
.ai-card-h{padding:14px 15px 12px;font-size:var(--fs-body);font-weight:600;line-height:1.4}
.ai-card-b{padding:14px 15px 12px;font-size:var(--fs-md);line-height:1.6}
.ai-fr{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:11px 15px;font-size:var(--fs-base);border-top:1px solid var(--line-2)}
.ai-fr>span{color:var(--text-2);flex:none}
.ai-fr>b{text-align:end;min-width:0}
.ai-cap{font-size:var(--fs-sm);color:var(--text-2)}
.ai-amt{font-size:30px;font-weight:600;letter-spacing:-1.1px}
.ai-ans{font-size:34px;font-weight:600;letter-spacing:-1.3px}
.ai-ans.neg{color:var(--bad)}
/* ⚠ حكمُ السلّم شريطٌ داخل البطاقة لا خارجها: هو صفةٌ من صفات هذا الطلب
   بعينه، لا تنبيهٌ عامّ. ⚠ The ladder's verdict is a band INSIDE the card, not
   beside it: it is a property of this request, not a general warning. */
.ai-verd{padding:11px 15px;font-size:var(--fs-base);line-height:1.6;
  border-top:1px solid var(--line-2);background:var(--warn-bg);color:var(--warn)}
.ai-verd.bad{background:var(--bad-bg);color:var(--bad)}
/* ── شريط الاقتراح الذهبيّ على الكحليّ · the gold suggestion strip on navy ── */
.ai-sug{margin-top:11px;background:rgba(207,156,81,.14);
  border:1px solid rgba(207,156,81,.32);border-radius:var(--rad-m);padding:11px 13px;
  font-size:var(--fs-base);color:var(--gold-2);line-height:1.6}
/* ── مصادر الجواب · where the answer came from ── */
.ai-src{margin-top:13px;padding-top:12px;border-top:1px solid var(--line-2);
  display:grid;gap:7px}
.ai-src>button{display:flex;justify-content:space-between;gap:10px;width:100%;
  align-items:baseline;font-size:var(--fs-sm);background:none;border:0;padding:0;
  text-align:inherit;cursor:pointer}
.ai-src>button>span:first-child{color:var(--ink-3);font-weight:600}
/* ── الأفعال · the actions ── */
.ai-acts{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.ai-ok{min-height:48px;border:0;border-radius:var(--rad-m);background:var(--gold);
  color:var(--ink);font-size:var(--fs-body);font-weight:600;cursor:pointer}
.ai-ok[disabled]{opacity:.5;cursor:default}
.ai-ghost{min-height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--rad-m);background:rgba(255,255,255,.08);color:#fff;
  font-size:var(--fs-md);font-weight:600;cursor:pointer}
.ai-follow{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.ai-follow>button{min-height:44px;padding:0 14px;border-radius:var(--rad-m);font-size:var(--fs-base)}
/* ── الحقول القابلة للتعديل داخل البطاقة · the editable fields in the card ──
   ⚠ البطاقة هي الاستمارة: نافذةٌ ثانية فوق هذه تمحو بقيّة المقترحات، وما
   يُصحَّح قبل الكتابة لا يُكتب خطأً ثمّ يُصحَّح.
   ⚠ The card IS the form: a second sheet over this one would wipe the rest, and
   what is corrected before the write is never written wrong and corrected. */
.ai-ed{display:flex;gap:7px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--line-2)}
.ai-ed>div{flex:1 1 148px;min-width:0}
.ai-ed label{display:block;font-size:var(--fs-xs);color:var(--text-2);margin-bottom:3px}
.ai-ed select,.ai-ed input{width:100%}
/* ⚠⚠ ومكوّنات التطبيق الفاتحة تعمل داخل الكحليّ بلا إعادة كتابة: البطاقة
   بيضاءُ أصلاً وكلُّ ما ينقصها أن تستعيد حبرها. ولولا هذا السطر لرُسم جوابُ
   «اسأل» كلُّه — بأرقامه وشرائحه ومساراته — أبيضَ على أبيض، أو لوجب نسخُ
   answerBlock بنسخةٍ كحليّة تفترق عن الأصل عند أوّل تعديل.
   ⚠⚠ The app's light components work inside the navy sheet with nothing
   rewritten: the card is already white and all it needs is its ink back.
   Without this line Ask's whole answer — its figures, chips and flows — would
   draw white on white, or answerBlock would have to be copied into a navy
   twin that parts company with the original at the first change. */
.sheet.ai .card,.ai-page .card{color:var(--text)}
.sheet.ai .empty,.ai-page .empty{color:var(--text-2)}
.sheet.ai .sec-h,.sheet.ai .sec-h h3,.ai-page .sec-h,.ai-page .sec-h h3{color:rgba(255,255,255,.62)}

/* ── الخطّ الزمنيّ · the timeline (components.js › timeline) ─────────────
   عمودُ أسماءٍ بنصٍّ عاديّ، ومسارٌ تُوضع فيه الأشرطةُ بالنسبة المئوية — لا
   رسمٌ يُمطّ فيكبر خطُّه مع الصفحة. A label column in ordinary text and a track
   where bars sit by percentage — never a drawing stretched until its type grows. */
.tl{display:grid;gap:2px;font-size:var(--fs-base)}
.tl-row{display:grid;grid-template-columns:minmax(96px,30%) 1fr auto;align-items:center;
  gap:10px;min-height:32px;border-radius:var(--rad-m);padding:0 6px}
.tl-go{cursor:pointer}
.tl-go:hover,.tl-go:focus-visible{background:var(--bg);outline:0}
.tl-lab{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:start;min-width:0}
.tl-track{position:relative;height:30px;min-width:0}
.tl-head{min-height:22px}
.tl-head .tl-track{height:20px}
.tl-tick{position:absolute;top:3px;transform:translateX(3px);font-size:var(--fs-xs);
  color:var(--text-3);white-space:nowrap}
.tl-g{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2)}
.tl-g.faint{opacity:.45}
.tl-now{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--gold)}
.tl-bar{position:absolute;top:10px;height:10px;border-radius:var(--rad-s);background:var(--line-2);
  overflow:hidden;min-width:4px}
.tl-bar.tl-hollow{background:transparent;border:1.4px solid}
/* عمودُ الطرف بعرضٍ واحد في كلّ صفّ، فتتطابق المسارات · one width for the end column in every row, so the tracks match */
.tl.tl-hasr .tl-row{grid-template-columns:minmax(96px,30%) 1fr 78px}
.tl-bar b{display:block;height:100%;border-radius:var(--rad-s)}
.tl-pt{position:absolute;top:9px;width:11px;height:11px;transform:translateX(-50%) rotate(45deg);
  border-radius:2px}
.tl-r{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
/* مفتاحُ مهامّ المرحلة (2.2.51) · the phase's task toggle */
.tl.tl-hasr.tl-hask .tl-row{grid-template-columns:minmax(96px,30%) 1fr 132px}
.tl.tl-hask .tl-r{display:flex;align-items:center;justify-content:space-between;gap:6px}
@media(max-width:600px){.tl.tl-hasr.tl-hask .tl-row{grid-template-columns:minmax(80px,34%) 1fr 104px}}
.tl-tg{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border:1px solid var(--line);
  border-radius:var(--rad-m);background:var(--card);color:var(--text-2);font:600 var(--fs-xs)/1.6 inherit;cursor:pointer;vertical-align:middle}
.tl-tg i{font-style:normal;font-size:var(--fs-2xs)}
.tl-tg b{color:var(--bad);font-weight:600}
.tl-tg.late{border-color:var(--bad)}
.tl-tg:hover,.tl-tg:focus-visible{border-color:var(--ink);color:var(--ink);outline:0}
.tl-tg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tl-tg.on b{color:#fff}
/* ⚠ على الهاتف: سبعةُ أشهرٍ كاملة على مسارٍ بعرض ١٩٠ بكسل تراكبت حروفُها
   («2026-022026-05…»)؛ فهناك شهرٌ من شهرين، بصيغةٍ قصيرة (2.2.51) · on a phone
   seven full month labels on a 190px track ran into one another; there, every
   other month, in a short form (2.2.51) */
.tl-ts{display:none}
@media(max-width:600px){.tl-tick.tl-odd{display:none}.tl-tick .tl-tf{display:none}.tl-tick .tl-ts{display:inline}}
@media(max-width:600px){.tl-row{grid-template-columns:minmax(80px,34%) 1fr auto;gap:6px}.tl.tl-hasr .tl-row{grid-template-columns:minmax(80px,34%) 1fr 70px}}

/* ═══ سطرٌ واحد لكلّ صفّ · ONE LINE PER ROW (2.2.50) ═══════════════════════
   كان الصفُّ يرتفع حين يطول نصُّه أو يحمل سطراً ثانياً (‎.dt-sub‎)، فجدولٌ
   واحد تتفاوت صفوفه بين ٣٣ و٤٤ بكسل. الآن: العمودُ على قدر نصّه حتى سقفٍ،
   والنصُّ سطرٌ واحد لا يلتفّ، وما جاوز السقفَ يُقطع بـ«…» ويُقرأ كاملاً تحت
   المؤشّر (‎celltip.js‎). والسطرُ الثاني يُكمل الأوّل بعد «·».
   A row grew when its text was long or carried a second line (.dt-sub), so one
   table ran 33 to 44px. Now a column takes its text's width up to a cap, the
   text is one line that never wraps, what passes the cap ends in "…" and is read
   whole under the pointer (celltip.js), and the second line follows the first
   after a "·".
   ⚠ حيث المؤشّرُ وحده: بلا تمرير فوق الخلية (لمسٌ) يبقى النصُّ ملتفّاً، فقطعُه
   هناك إخفاءٌ لا رجعة منه. ⚠ Only where there is a pointer to hover with: on a
   touch screen the text keeps wrapping, since cutting it there hides it for good.
   ⚠ لا تُقطع خليّةٌ تحمل زرّاً أو حقلاً (عمود الأفعال، المحرّر داخل الخليّة، مربّع
   التأشير) ولا صفُّ مجموعة: القطعُ هناك يخفي باباً لا نصّاً. ⚠ A cell holding a
   button or a field (the action column, the in-cell editor, the tick) and a group
   row are never cut: there the cut would hide a door, not text.
   ⚠ ودليلُ الاستخدام خارج هذا (‎.ctab-doc‎): جملٌ تُقرأ، لا قيمٌ تُمسح.
   ⚠ The guide's table stays out (.ctab-doc): sentences to read, not values. */
@media (hover:hover) and (min-width:900px){
  /* سقفٌ للقراءة؛ و‎tablefit.js‎ ينزل به عموداً عموداً حين يضيق الإطار ·
     a ceiling for reading; tablefit.js lowers it column by column when the
     frame is narrow (2.2.51) */
  :root{--cell-max:420px}
  /* ⚠ قلمُ التحرير في مكانه زرٌّ عائمٌ فوق الخليّة لا محتوى فيها، فلا يُعفيها من
     القطع · the in-place pencil floats over its cell, it is not content, so it
     does not exempt the cell from the cut */
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) :is(tbody,tfoot) tr:not(.dt-grp):not(.dt-gap)>td:not(.dt-actc):not(.dt-tick):not(:has(button:not(.ie-pen),input,select,textarea,.btn)),
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) thead th:not(.dt-actc):not(.dt-tick):not(:has(button,input,select)){
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--cell-max);vertical-align:middle}
  /* ما كان كتلةً في الخلية يصير سطراً واحداً — ولو حمل ‎display:flex‎ في سطره ·
     what was a block in the cell runs on one line — even one carrying an inline
     display:flex */
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td>div:not([style*="flex"]):not([hidden]){display:inline!important;margin-top:0!important}
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td>div[style*="flex"]:not([hidden]){display:inline-flex!important;flex-wrap:nowrap!important;
    margin-top:0!important;vertical-align:middle}
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td>div+div{margin-inline-start:6px}
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) .dt-sub{display:inline;margin-top:0}
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) .dt-sub::before{content:"· "}
  table.st-t tbody td>div.st-s:not([hidden]){margin-inline-start:6px}
  table.st-t tbody td>div.st-s::before{content:"· "}
  /* خليّةٌ تحمل أزراراً لا تُقطع ولا تلتفّ، وأزرارُها على قدر السطر ·
     a cell holding buttons is neither cut nor wrapped, and its buttons fit the line */
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td:has(button:not(.ie-pen),.btn){white-space:nowrap;padding-block:2px!important}
  /* ⚠ ‎!important‎ لأنّ «أتيليه» يرسم ‎.dt-verb‎ بثمانيةٍ وعشرين، وقاعدتُه أخصّ ·
     !important because Atelier draws .dt-verb at 28px with a more specific rule */
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td :is(.btn,.btn-sm,.dt-verb){height:24px!important;
    min-height:24px!important;padding-block:0!important;line-height:22px;font-size:var(--fs-sm);white-space:nowrap}
  /* ارتفاعٌ ثابت لا يتبع خطَّ الحرف: نصٌّ عربيّ ولاتينيّ في صفٍّ واحد كانا يختلفان
     بنصف بكسل · a fixed height that does not follow the glyphs: Arabic and Latin
     in one row differed by half a pixel. Atelier keeps its own 33 / 30. */
  table.dt tbody td{height:36px}
  /* والجداولُ الأخرى على الارتفاع نفسه · and the other tables at the same height */
  :is(table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td{height:36px;padding-block:5px}
  /* مفتاحُ الإعدادات بحجم المؤشّر هنا — واللمسُ يبقى على ٤٤ · the Settings switch
     at pointer size here — touch keeps its 44 */
  table.st-t .st-sw{height:26px}
  table.st-t .st-sw>i{top:1px}
  :is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td .dt-acts{flex-wrap:nowrap}
}
/* رأسٌ يرتّب (2.2.51): سهمٌ حين يُرتَّب به، وخافتٌ تحت المؤشّر · a head that
   sorts (2.2.51): an arrow when the table is sorted on it, a faint one under the pointer */
thead th.th-sort{cursor:pointer;user-select:none}
thead th.th-sort::after{content:"";display:inline-block;width:0;height:0;margin-inline-start:5px;vertical-align:middle;
  border-inline:4px solid transparent;opacity:0}
thead th.th-sort:hover::after{opacity:.35;border-top:5px solid currentColor}
thead th.th-asc::after,thead th.th-asc:hover::after{opacity:1;border-top:0;border-bottom:5px solid var(--gold-ink)}
thead th.th-desc::after,thead th.th-desc:hover::after{opacity:1;border-bottom:0;border-top:5px solid var(--gold-ink)}
thead th.th-asc,thead th.th-desc{color:var(--ink)}
/* ‹ رجوع في رأس البطاقة (2.2.51) · Back in the card's head — 44px on touch, the
   chevron turned with the language */
.sh-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--rad-m);background:var(--card);color:var(--ink);font:600 var(--fs-base) inherit;cursor:pointer}
.sh-back:hover,.sh-back:focus-visible{border-color:var(--ink);outline:0}
html[dir=rtl] .sh-back svg{transform:scaleX(-1)}
@media (hover:hover) and (min-width:900px){.sh-back{min-height:32px}}
/* أزرارُ دفعةٍ في خطّة الدفعات: سطرٌ واحد إلى آخر الخليّة (2.2.51) · an
   instalment's buttons: one line at the cell's end */
.pl-acts{gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
table.pl-tab{min-width:0}
table.pl-tab td,table.pl-tab th{padding-inline:8px}
@media(max-width:600px){table.pl-tab td,table.pl-tab th{padding-inline:5px}.pl-acts .btn{padding:0 7px}}
.pl-n{display:inline-block;min-width:16px;margin-inline-end:6px;color:var(--text-3)}
.pl-acts .btn{min-height:32px;padding:0 9px;font-size:var(--fs-sm);white-space:nowrap}
/* ⚠ في لوحةٍ ضيّقة تلتفّ الأزرارُ مصطفّةً بدل أن تُعرّض الجدول — زرٌّ لا يُقصّ ·
   in a narrow panel the buttons wrap, aligned, rather than widen the table — a
   button is never cut */
:is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td:has(> .pl-acts){white-space:normal!important}
:is(table.dt,table.st-t,table.tbl,table.ctab:not(.ctab-doc)) tbody td>div.pl-acts[style*="flex"]:not([hidden]){flex-wrap:wrap!important;display:flex!important;row-gap:4px}
/* ═══ محرّرُ خطّة الدفعات (2.2.51) · the payment plan editor ═══════════════
   عريضٌ على الحاسوب وأعمدةٌ مصطفّة؛ وفي الإطار الضيّق أو الهاتف يصير كلُّ دفعةٍ
   بطاقةً من سطرين — بحسب عرض المحرّر لا الشاشة (container query).
   Wide on a desktop with aligned columns; in a narrow frame or on a phone each
   instalment becomes a two-line card — by the editor's width, not the screen's. */
@media(min-width:1100px){.sheet.ps-sheet{max-width:min(1080px,94vw)!important}}
.ps-sheet .sheet-b{container-type:inline-size;container-name:ps}
.pl-lab{font-size:var(--fs-xs);color:var(--text-3);font-weight:500}
.ps-gen{border:1px solid var(--line);border-radius:var(--rad-m);background:var(--bg);margin-bottom:14px}
.ps-gen>summary{cursor:pointer;padding:10px 14px;font-weight:600;color:var(--ink);font-size:var(--fs-base);list-style:none}
.ps-gen>summary::before{content:"▸";display:inline-block;margin-inline-end:6px;transition:transform var(--m-1) var(--ease)}
html[dir=rtl] .ps-gen>summary::before{transform:scaleX(-1)}
.ps-gen[open]>summary::before{transform:rotate(90deg)}
.ps-gen-b{padding:0 14px 14px;display:grid;gap:10px}
.ps-gen-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ps-gen-f label{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.ps-gen-f input{width:100%}
.ps-gen-x{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-sm);color:var(--text-3);flex-wrap:wrap}
.ps-grid{display:grid;gap:6px}
.ps-row{display:grid;grid-template-columns:44px minmax(130px,1.5fr) minmax(110px,.9fr) minmax(150px,1fr) minmax(190px,1.3fr) 96px 40px;
  gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card)}
.ps-head{border:0;background:none;padding:0 8px;font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.ps-row input,.ps-row select{width:100%;min-width:0;height:36px;padding:0 9px;font-size:var(--fs-base)}
.ps-n{color:var(--text-3);text-align:center}
input.ps-n{padding:0 2px!important;text-align:center;color:var(--text)}
.ps-val,.ps-when{display:flex;gap:6px;align-items:center;min-width:0}
.ps-basis{display:inline-flex;border:1px solid var(--line);border-radius:var(--rad-m);overflow:hidden;flex:none}
.ps-basis button{width:30px;height:34px;border:0;background:var(--card);color:var(--text-2);font-weight:600;cursor:pointer}
.ps-basis button.on{background:var(--ink);color:#fff}
.ps-basis button:disabled{cursor:default;opacity:.6}
.ps-when select{flex:1.2}.ps-when input{flex:1}
.ps-usd{text-align:end;font-size:var(--fs-base)}
.ps-del{width:36px;height:36px;border:1px solid transparent;border-radius:var(--rad-m);background:none;color:var(--text-3);cursor:pointer}
.ps-del:hover,.ps-del:focus-visible{border-color:var(--bad);color:var(--bad);outline:0}
.ps-lock{background:var(--bg)}
.ps-lk{font-size:var(--fs-2xs);padding:2px 6px;justify-self:center}
.ps-add{margin-top:8px}
.ps-sum{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:flex-end;margin-top:12px;padding:10px 12px;
  border-top:1px solid var(--line);font-size:var(--fs-base);color:var(--text-2)}
.ps-sum b{color:var(--ink);font-size:var(--fs-md)}
@container ps (max-width:820px){
  .ps-head{display:none}
  .ps-row{grid-template-columns:44px 1fr 1fr auto;grid-template-areas:"n lab lab del" "n kind usd usd" "n val val val" "n when when when";row-gap:6px}
  .ps-n{grid-area:n;align-self:start;padding-top:9px}.ps-label{grid-area:lab}.ps-kind{grid-area:kind}
  .ps-val{grid-area:val}.ps-when{grid-area:when}.ps-usd{grid-area:usd;align-self:center}
  .ps-del,.ps-lk{grid-area:del}
  .ps-when select{flex:1;min-width:0}.ps-when input{flex:1.4;min-width:132px}
}
@media(max-width:600px){.ps-row input,.ps-row select{height:44px;font-size:var(--fs-lg)}.ps-basis button{height:42px;width:38px}.ps-del{width:44px;height:44px}}
#cell-tip{position:fixed;z-index:120;max-width:min(440px,calc(100vw - 24px));padding:7px 10px;border-radius:var(--rad-m);
  background:var(--ink);color:#fff;font-size:var(--fs-base);line-height:1.45;box-shadow:0 6px 20px rgba(15,32,59,.22);
  pointer-events:none;white-space:normal;overflow-wrap:anywhere;unicode-bidi:plaintext;opacity:0;transition:opacity var(--m-1) var(--ease)}
#cell-tip.on{opacity:1}

/* ═══ منضدة الحاسوب · THE DESKTOP WORKBENCH ═══════════════════════════════
   كلُّ ما تحت هذا العنوان محبوسٌ في min-width:1100 — الهاتف واللوح لا يريان
   منه شيئاً، ولا يتغيّر عندهما بكسل. Everything below is sealed inside
   min-width:1100: the phone and the tablet see none of it and not one pixel
   of theirs moves. */
.dt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;padding:0}
.dt-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
table.dt tbody tr.dt-flat{cursor:default}
table.dt tbody tr.dt-flat:hover{background:transparent}
/* ⚠⚠ ولا ‎position:sticky‎ على ‎thead‎ هنا. العنصر يلتصق بأقرب حاوية تمرير،
   وهي ‎.dt-wrap‎ التي تنزلق أفقياً ولا ترتفع — وهو بالضبط العطل الموثَّق في
   مصفوفة الصلاحيات: عشرون صفّاً ثمّ نقاطٌ في أعمدةٍ بلا أسماء. من أراد رأساً
   لاصقاً فليحدّد ارتفاع الحاوية أوّلاً، كما فُعل في ‎.mx-wrap‎.
   ⚠⚠ No position:sticky on thead here. An element sticks to its nearest
   scrollport, and that is .dt-wrap, which scrolls sideways and has no bounded
   height — the exact failure documented for the permissions matrix. Anyone
   wanting a stuck header must height-bound the wrapper first, as .mx-wrap does. */

@media(min-width:1100px){
  /* الكثافة: الصفُّ ٣٤ بكسل بدل ٥٩، فخمسةٌ وعشرون سجلّاً في الشاشة بدل ثمانية
     Density: 34px a row instead of 59, so 25 records on screen instead of 8 */
  table.dt{font-size:var(--fs-base)}
  table.dt th{padding:7px 10px;position:relative}
  table.dt td{padding:6px 10px}
  table.dt td:first-child,table.dt th:first-child{padding-inline-start:14px}
  table.dt td:last-child,table.dt th:last-child{padding-inline-end:14px}
  /* مؤشّر لوحة المفاتيح: خطٌّ ذهبيّ على الحافّة الأمامية، لا خلفيةٌ ملوّنة —
     الخلفية تتنازع مع صفّ المؤشّر تحت الفأرة، والخطُّ لا يتنازع مع شيء.
     The keyboard cursor: a gold rule on the leading edge, never a fill — a fill
     competes with the hover row, a rule competes with nothing. */
  table.dt tbody tr.dt-cur{background:var(--gold-soft)}
  table.dt tbody tr.dt-cur td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
  html[dir=rtl] table.dt tbody tr.dt-cur td:first-child{box-shadow:inset -3px 0 0 var(--gold)}
  /* القوائم وحدها تتّسع؛ النصّ المقروء يبقى محدوداً — سطرٌ بعرض ١٦٠٠ بكسل
     لا يُقرأ. Lists alone widen; running text stays bounded — a 1600px line
     of prose is not readable. */
  /* الاعتمادات في عمودين: اثنتا عشرة بطاقةً كانت ستّ شاشاتٍ فصارت ثلاثاً،
     ولم تفقد بطاقةٌ سطراً. Two columns for approvals: twelve cards were six
     screens and are now three, with no card losing a line. */
  .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  body.desk main{max-width:1600px}
  body.desk .hero,body.desk .rep-sec,body.desk .gd-sec{max-width:1180px}
}
/* مفتاح المنضدة في الشريط العلوي · the workbench switch in the top bar */
#tb-desk{display:none}
@media(min-width:1100px){
  #tb-desk{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 12px;
    font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
  /* مفتاحٌ مُشعَل لا زرُّ فعل: الكحليُّ المملوء للإضافة وحدها
     a switch that is on, not an action: filled navy belongs to Add alone */
  #tb-desk.on{background:var(--gold-soft);color:var(--ink);border-color:var(--gold)}
  #tb-desk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
}
/* شريط التنقّل بين السجلّات في رأس النافذة · the record pager in the sheet header */
.sh-nav{display:none}
@media(min-width:1100px){
  .sh-nav{display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;
    margin-inline-end:6px;flex:none}
  .sh-nav b{font-family:var(--font-num);font-variant-numeric:tabular-nums;
    font-size:var(--fs-sm);color:var(--text-3);font-weight:600;padding:0 6px;white-space:nowrap}
  .sh-nav button{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--rad-m);
    font-size:var(--fs-xl);line-height:1;color:var(--text-2);background:var(--line-2)}
  .sh-nav button:hover:not(:disabled){background:var(--ink);color:#fff}
  .sh-nav button:disabled{opacity:.32;cursor:default}
}
/* لوحة الاختصارات · the shortcut sheet */
.kbd-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line-2)}
.kbd-row:last-child{border-bottom:0}
.kbd-row .k{display:flex;gap:4px;flex:none;min-width:104px}
kbd{font-family:var(--font-num);font-size:var(--fs-sm);font-weight:600;
  background:var(--line-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:var(--rad-s);padding:2px 7px;color:var(--ink);white-space:nowrap}
.kbd-row .d{font-size:var(--fs-base);color:var(--text-2);line-height:1.4}
/* أزرار داخل خليّة · buttons inside a cell */
.dt-acts{display:inline-flex;gap:5px;flex-wrap:nowrap;align-items:center}
.dt-acts .btn-sm{white-space:nowrap}
/* الجدول داخل بطاقةٍ قائمة: بلا إطارٍ ثانٍ · a table inside an existing card */
.dt-wrap:not(.card){border:0;box-shadow:none;background:transparent;border-radius:0}

/* ═══ صفّ الإدخال السريع · THE QUICK-ENTRY ROW ═══════════════════════════
   على المنضدة وحدها — سبعةُ حقولٍ في سطرٍ لا تُقرأ على هاتف. Workbench only:
   seven fields on one line cannot be read on a phone. */
.qadd{display:none}
@media(min-width:1100px){
  .qadd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:9px 12px;margin-bottom:12px;box-shadow:var(--sh)}
  .qadd-l{font-size:var(--fs-2xs);letter-spacing:.1em;font-weight:600;color:var(--text-3);
    text-transform:uppercase;flex:none;margin-inline-end:2px}
  /* ⚠ ‎16px‎ ثابتةٌ هنا كما في كلّ حقل: iOS يقرّب الصفحة على أيّ حقلٍ أصغر —
     والمنضدة لا تصل الهاتف، لكنّ القاعدة واحدة ولا يُستثنى منها موضع.
     ⚠ 16px as everywhere: iOS zooms into any smaller field. The workbench never
     reaches a phone, but the rule is one rule and no place is exempt from it. */
  .qadd input,.qadd select{font-size:var(--fs-lg);padding:7px 9px;border:1px solid var(--line);
    border-radius:var(--rad-m);background:var(--bg);min-height:38px;color:var(--text)}
  .qadd input:focus,.qadd select:focus{outline:2px solid var(--gold);outline-offset:-1px;
    background:var(--card)}
  .qadd #qa_date{width:140px;flex:none}
  .qadd #qa_projectId{max-width:150px}
  .qadd #qa_lineCode{max-width:190px}
  .qadd #qa_desc{flex:1 1 180px;min-width:130px}
  .qadd #qa_supplier{flex:1 1 130px;min-width:110px}
  .qadd #qa_currency{width:82px;flex:none}
  .qadd #qa_amount{width:120px;flex:none;text-align:end;
    font-family:var(--font-num);font-variant-numeric:tabular-nums}
  .qadd .btn{flex:none;min-height:38px}
  .qadd-h{flex:1 1 100%;font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
}
/* ═══ شريط المحدَّد وعمود التأشير · SELECTION BAR AND TICK COLUMN ═════════ */
.dt-tick{display:none}
.selbar{display:none}
@media(min-width:1100px){
  /* ⚠⚠ الخليّةُ كلُّها هي الهدف، والصندوقُ المرسوم ١٧ بكسل. كان المربّعُ
     الأصليَّ نفسَه بـ ‎::before‎ يوسّعه — و‎::before‎ على ‎<input>‎ لا يُرسم
     في أيّ متصفّح، فكان الهدفُ سبعةَ عشر بكسلاً فعلاً ومن أخطأها فتح نموذجَ
     الصفّ. الآن ‎<input>‎ شفّافٌ يملأ الخليّة، و‎.dt-box‎ أخوه يرسم الصندوق.
     ⚠⚠ The whole cell is the target; the drawn box is 17px. It used to be the
     native box with a ::before to enlarge it — and ::before on an <input> is
     rendered by no browser, so the target really was seventeen pixels and a
     miss opened the row's form. Now a transparent <input> fills the cell and
     its sibling .dt-box draws the box. */
  table.dt th.dt-tick,table.dt td.dt-tick{display:table-cell;width:40px;padding:0;
    text-align:center;vertical-align:middle;position:relative}
  table.dt .dt-tick input{position:absolute;inset:0;width:100%;height:100%;margin:0;
    opacity:0;cursor:pointer;z-index:1;appearance:none;-webkit-appearance:none}
  table.dt .dt-tick .dt-box{display:block;width:17px;height:17px;margin:0 auto;
    border:1.5px solid var(--text-3);border-radius:var(--rad-s);background:var(--card);
    position:relative;transition:background var(--m-1) ease,border-color var(--m-1) ease}
  table.dt .dt-tick input:hover+.dt-box{border-color:var(--ink)}
  table.dt .dt-tick input:checked+.dt-box,
  table.dt .dt-tick input[data-some]+.dt-box{background:var(--ink);border-color:var(--ink)}
  table.dt .dt-tick input:checked+.dt-box::after{content:"";position:absolute;
    left:5px;top:1px;width:4.5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg)}
  /* الحالةُ الوسطى شَرطة · the half state is a dash */
  table.dt .dt-tick input[data-some]+.dt-box::after{content:"";position:absolute;
    left:3px;right:3px;top:6.5px;width:auto;height:2px;background:#fff;border:0;transform:none}
  table.dt .dt-tick input:focus-visible+.dt-box{outline:2px solid var(--gold);outline-offset:1px}
  /* الصفُّ المحدَّد يُقرأ من لونه · a selected row is read by colour */
  table.dt tbody tr.dt-sel{background:var(--gold-soft)}
  table.dt tbody tr.dt-sel td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
  html[dir=rtl] table.dt tbody tr.dt-sel td:first-child{box-shadow:inset -3px 0 0 var(--gold)}
  /* ⚠⚠ والصفحةُ تفسح للشريط العائم. عائمٌ في الأسفل يعني أنّ الصفوفَ الأخيرة
     تحته — ومن أشّر الأوّلَ ثمّ نزل يؤشّر الأخيرَ وجد الشريطَ يأخذ النقرة. الحشوةُ
     أسفل ‎main‎ تجعل كلَّ صفٍّ قابلاً للتمرير فوقه. والرصيفُ كذلك.
     ⚠⚠ And the page makes room for the floating bar. Floating at the bottom
     means the last rows sit UNDER it — whoever ticked the first and scrolled
     down to tick the last found the bar taking the click. Bottom padding on main
     lets every row scroll above it. The Ask dock likewise. */
  body.desk main{padding-bottom:110px}
  body.selecting main{padding-bottom:160px}
  /* ⚠⚠ عائمٌ لا في مجرى الصفحة، وهذا هو العطب الذي أُصلح لا زينة.
     كان في المجرى، فظهورُه عند أوّل تأشيرة يدفع الجدولَ كلَّه ٦٦ بكسل — أكثر من
     ارتفاع صفّ (٤٩) — فالنقرة التالية تقع على الصفّ الخطأ. من يؤشّر اثني عشر
     صفّاً يؤشّر نصفَها خطأً ثمّ يُلغي، فيقرأ التحديدَ «لا يعمل».
     وعائمٌ يكسب شيئاً ثانياً: يبقى مرئيّاً وأنت تمرّر قائمةً طويلة لتؤشّر
     أسفلها — وهو بالضبط وقت الحاجة إليه.
     ⚠⚠ Floating, not in flow, and that IS the bug this fixes rather than a
     flourish. In flow, its appearance on the first tick pushed the whole table
     down 66px — more than a row (49) — so the next click landed on the wrong
     row. Ticking twelve rows meant mis-ticking half of them and undoing, which
     reads as "selection does not work".
     Floating wins a second thing: it stays visible while you scroll a long list
     to tick further down — exactly when it is needed. */
  .selbar{position:fixed;z-index:60;bottom:20px;
    inset-inline-start:calc(230px + 26px);inset-inline-end:26px;
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;
    background:var(--ink);color:#fff;border-radius:var(--r-sm);
    padding:11px 16px;margin:0;box-shadow:0 10px 34px rgba(0,0,0,.3)}
  .selbar-n{background:var(--gold);color:var(--ink);font-weight:600;font-size:var(--fs-base);
    border-radius:var(--rad-s);padding:2px 9px;font-variant-numeric:tabular-nums}
  .selbar-t{font-size:var(--fs-base);color:rgba(255,255,255,.8)}
  .selbar-v{font-size:var(--fs-md);font-weight:600;color:var(--gold-2);
    font-variant-numeric:tabular-nums}
  .selbar-sp{flex:1}
  .selbar .btn-o{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
  .selbar .btn-o:hover{background:rgba(255,255,255,.2)}
}
/* الكثافة: ثلاثة بكسلات على أربعين صفّاً شاشةٌ كاملة · density: three pixels
   over forty rows is a whole screen. ولا أضيقُ من ذلك — الإصبع يُخطئ الجار. */
@media(min-width:1100px){
  body.dense table.dt td{padding:3px 10px}
  body.dense table.dt th{padding:5px 10px}
  body.dense table.dt .dt-sub{display:none}
  body.dense .dgrid{gap:0 12px}
}
/* ═══ شريط أدوات المنضدة · THE WORKBENCH TOOLBAR ═════════════════════════ */
.dtools{display:none}
@media(min-width:1100px){
  .dtools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
  .dtools-sp{flex:1}
  .vchip{display:inline-flex;align-items:center;background:var(--card);
    border:1px solid var(--line);border-radius:999px;overflow:hidden}
  .vchip>button:first-child{padding:6px 12px;font-size:var(--fs-base);font-weight:600;
    color:var(--ink);min-height:32px}
  .vchip:hover{border-color:var(--gold)}
  /* ⚠ الحذفُ هادئٌ بلونه لا صغيرٌ بمساحته — الهدف ٣٢ بكسل، والهدوء في اللون.
     ⚠ Delete is quiet in colour, not small in area: a 32px target, and the
     quietness is the colour. */
  .vchip-x{padding:0 9px;align-self:stretch;color:var(--text-3);font-size:var(--fs-body);
    border-inline-start:1px solid var(--line)}
  .vchip-x:hover{color:var(--bad);background:var(--bad-bg)}
  /* العرضُ المطبَّق (2.2.52) · the view applied */
  .vchip.on{border-color:var(--ink);background:var(--ink)}
  .vchip.on>button:first-child{color:#fff}
  .vchip.on .vchip-x{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.2)}
}

/* رصيف «اسأل» يرتفع فوق شريط المحدَّد ولا يختفي تحته · the Ask dock rises above
   the selection bar rather than hiding under it — nothing is taken away while
   somebody is selecting; it comes back down the moment they clear. */
@media(min-width:1100px){
  body.selecting .ask-fab{bottom:96px}
}

/* ═══ المستوى الرابع · LEVEL FOUR: the workbench is entered on, not only read ═══
   sealed above DESK_MIN like the rest — the phone renders exactly what it did. */
@media(min-width:1100px){
  /* ── النافذة الأعرض بثلاثة أعمدة · the wider sheet, three columns ─────────
     نموذجُ البند اثنا عشر حقلاً في ٥٦٠ بكسل يُمرَّر قبل أن يظهر «حفظ»؛ في ٧٦٠
     بثلاثة أعمدةٍ للحقول القصيرة يظهر كلُّه. والعريض (‎.full‎) كما هو.
     ⚠ لا نافذةُ «اسأل» (‎.ai‎) ولا التأكيد (‎#confirm-root‎): لكلٍّ عرضُه.
     The line form is twelve fields in 560px and scrolls before Save appears; at
     760 with three columns for the short fields all of it shows. Full-width
     fields (.full) unchanged. ⚠ Not the Ask sheet (.ai) nor confirmations. */
  .sheet:not(.ai){max-width:760px}
  .sheet:not(.ai) .fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
  .sheet:not(.ai) .sheet-b{padding:20px 24px}
  .sheet:not(.ai) .sheet-h,.sheet:not(.ai) .sheet-f{padding-inline:24px}
  /* 3.0.1 · النموذجُ على المنضدة منضدةٌ لا هاتفٌ مكبَّر: ١٠٤٠ بكسل بأربعة أعمدة، والحقلُ
     العريضُ من سطرٍ واحد عمودان (‎.wide‎) — كان الوصفُ والمشروع يأخذان سطراً كاملاً من ٧٦٠
     A desk form is a desk, not a phone widened: 1040px, four columns, a single-line
     wide field two of them — the description and the project each took a whole 760px row */
  .sheet.is-form:not(.ai){max-width:1040px}
  .sheet.is-form:not(.ai) .fields{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sheet.is-form:not(.ai) .fields .full.wide{grid-column:span 2}
  .sheet.is-form:not(.ai) .fgrp{display:grid;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 16px;grid-auto-flow:row dense}
  /* ── قائمة «جديد» · the New menu ─────────────────────────────────────────
     جزءٌ ثانٍ من زرّ الإضافة: الزرُّ يضيف ما تخصّه الصفحة، والسهمُ يفتح كلَّ ما
     يُضاف من أيّ مكان — بطاقاتٌ صغيرةٌ بأيقونة، مجموعةً كما في الشريط الجانبيّ،
     في لوحةٍ تُمرَّر. كانت قائمةً مسطّحة بسبعة عشر سطراً تخرج من الشاشة.
     A split of the add button: the button adds what the page owns, the caret
     opens everything addable from anywhere — small icon cards grouped as the
     sidebar groups them, in a panel that scrolls. It was a flat seventeen-line
     list running off the screen. */
  .tb-actions{position:relative}
  #tb-new{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:34px;
    border-radius:var(--rad-m);background:var(--ink);color:#fff;border-color:var(--ink)}
  /* ⚠ زرٌّ واحدٌ بجزأين، لا زرّان متجاوران: الإضافةُ والسهمُ ملتصقان بخطٍّ
     رفيع بينهما — وكانا قطعتين منفصلتين بلونين حين يُفتح السهم.
     ⚠ One button in two parts, never two buttons side by side: the add and the
     caret are joined by a hairline — they were two separate pieces, in two
     colours once the caret opened. */
  #tb-add:not([hidden]):has(+ #tb-new:not([hidden])){border-start-end-radius:0;border-end-end-radius:0}
  #tb-add:not([hidden]) + #tb-new:not(.solo){margin-inline-start:-7px;border-start-start-radius:0;
    border-end-start-radius:0;border-inline-start:1px solid rgba(255,255,255,.2)}
  #tb-add svg{color:var(--gold)}
  #tb-new:hover,#tb-new[aria-expanded=true]{background:var(--ink-3);border-color:var(--ink-3)}
  #tb-add:not([hidden]) + #tb-new:not(.solo):hover,
  #tb-add:not([hidden]) + #tb-new:not(.solo)[aria-expanded=true]{border-inline-start-color:rgba(255,255,255,.2)}
  #tb-new svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform var(--m-1) ease;flex:none}
  #tb-new[aria-expanded=true] svg{transform:rotate(180deg)}
  #tb-new span{display:none;font-size:var(--fs-base);font-weight:600;white-space:nowrap}
  /* وحيداً — على صفحةٍ بلا زرّ إضافة — يحمل اسمَه · alone, on a page with no add
     button, it carries its name */
  #tb-new.solo{width:auto;padding:0 12px 0 14px;margin-inline-start:0}
  #tb-new.solo::before{content:"+";font-size:var(--fs-xl);font-weight:600;line-height:1;color:var(--gold);
    margin-inline-end:1px}
  #tb-new.solo span{display:inline}
  /* ⚠⚠ مثبَّتةٌ إلى نهاية شريط الأدوات لا إلى بدايته: كانت تبدأ من طرف الأزرار
     وتمتدّ نحو حافّة الشاشة، فيقصّ الإطارُ ثلثها في اللغتين — والقائمةُ التي
     وُجدت لتُري كلَّ ما يُضاف لم تكن تُري إلّا عمودين.
     ⚠⚠ Anchored to the END of the toolbar, never its start: it began at the
     buttons' edge and ran toward the screen's edge, so the frame cut a third of
     it off in both languages — a menu built to show everything addable showed
     two columns. */
  .newmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;z-index:70;
    width:min(720px,calc(100vw - 320px));max-height:calc(100vh - 120px);overflow:auto;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:0 18px 48px rgba(15,32,59,.18);animation:sheetPop var(--m-2) var(--ease) both}
  .newmenu .nm-h{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;
    align-items:baseline;gap:12px;padding:12px 16px;background:var(--card);
    border-bottom:1px solid var(--line-2)}
  .newmenu .nm-h b{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
  .newmenu .nm-h span{font-size:var(--fs-sm);color:var(--text-3)}
  .newmenu .nm-body{padding:4px 12px 12px}
  .newmenu .nm-gh{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-3);font-weight:600;padding:12px 4px 6px}
  .newmenu .nm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
  .newmenu button[data-page]{position:relative;display:grid;grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:start;
    padding:9px 10px;min-height:56px;border:1px solid var(--line-2);border-radius:var(--rad-m);
    background:var(--card);color:var(--text);
    transition:border-color var(--m-1) ease,background var(--m-1) ease}
  .newmenu button[data-page]:hover,.newmenu button[data-page]:focus-visible{
    border-color:var(--ink);outline:0}
  .newmenu button.here{border-color:var(--gold);background:var(--gold-soft)}
  .newmenu .nm-i{grid-row:1/3;width:34px;height:34px;border-radius:var(--rad-m);background:var(--bg);
    display:grid;place-items:center}
  .newmenu button.here .nm-i{background:var(--gold);}
  .newmenu .nm-i svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .newmenu button.here .nm-i svg{stroke:#fff}
  .newmenu .nm-t{font-size:var(--fs-base);font-weight:600;line-height:1.25}
  .newmenu .nm-s{font-size:var(--fs-xs);color:var(--text-3);line-height:1.25;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .newmenu kbd{position:absolute;top:7px;inset-inline-end:7px}
  /* ── عروضُ حقول الصفوف السريعة · quick-row field widths ─────────────────── */
  .qadd .q-code{width:92px;flex:none;text-align:start}
  .qadd .q-grow{flex:1 1 200px;min-width:140px}
  .qadd .q-amt{width:130px;flex:none;text-align:end;
    font-family:var(--font-num);font-variant-numeric:tabular-nums}
  .qadd .q-month,.qadd input[type=date],.qadd input[type=month]{width:150px;flex:none}
  .qadd .q-short{width:92px;flex:none}
  .qadd .q-pool{width:128px;flex:none}
  .qadd input.q-month{width:136px}
  /* 2.3 · شهرٌ فارغ يُرسم بحبرٍ خافت كالنصّ المقترَح، لا «---- ----» بحبر القيمة · an empty
     month is drawn in muted ink like a placeholder, not "---- ----" in the ink of a value */
  .qadd input[type=month]:invalid:not(:focus){color:var(--text-3)}
  .qadd .q-owner{flex:0 1 150px;min-width:110px}
  .qadd .q-who{max-width:190px}
  .qadd .q-proj{max-width:190px}
}

/* ═══ النماذجُ المصقولة · THE POLISHED FORMS ═══════════════════════════════
   قسمٌ وشرائحُ وعلامةُ مطلوبٍ وخطأٌ يقف عند حقله ورقاقةُ «موجود/جديد». كلُّها في
   الشاكلة الواحدة التي ترسمها sheet()، فتصل إلى كلّ نموذجٍ في التطبيق مرّةً.
   Sections, segmented chips, a required mark, an error at its field, a
   known/new chip. All in the one markup sheet() draws, so every form gets them. */
.fsec{display:flex;align-items:center;gap:10px;margin-top:8px}
.fsec:first-child{margin-top:0}
.fsec span{font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.fsec::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.55}
label .req{color:var(--bad);font-style:normal;font-weight:600;margin-inline-start:3px}
.fhint{font-size:var(--fs-sm);color:var(--text-3);margin-top:4px;line-height:1.5}
.fhint.warn{color:var(--warn)}
.fhint.warn:empty{display:none}
.f-err input,.f-err select,.f-err textarea{border-color:var(--bad);
  box-shadow:0 0 0 3px var(--bad-bg)}
.ferr{font-size:var(--fs-sm);font-weight:600;color:var(--bad);margin-top:5px;line-height:1.4}
/* الشرائح · the chips. الهدف ٤٤ بكسل على الهاتف كأيّ زرّ · 44px on a phone as any button */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.segi{position:relative;flex:1 1 auto}
.segi input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
  appearance:none;-webkit-appearance:none}
.segi span{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 14px;border:1.5px solid var(--line);border-radius:var(--rad-m);font-weight:600;font-size:var(--fs-md);
  background:var(--card);color:var(--text-2);white-space:nowrap;
  transition:background var(--m-1) ease,border-color var(--m-1) ease,color var(--m-1) ease}
.segi input:hover+span{border-color:var(--ink)}
.segi input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.segi input:focus-visible+span{outline:2px solid var(--gold);outline-offset:1px}
.segi input:disabled+span{opacity:.5}
.fknown{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;margin-top:6px;
  padding:2px 9px;border-radius:999px;background:var(--line-2);color:var(--text-2)}
.fknown.ok{background:var(--ok-bg);color:var(--ok)}
.fknown.new{background:var(--gold-soft);color:var(--ink-3)}
/* السطرُ تحت العنوان يُقرأ على الأبيض · the subtitle reads on a white sheet —
   كان مصمَّماً للنافذة الكحليّة وحدها، أبيضَ على أبيض هنا · it was styled for the
   navy sheet alone, white on white here */
.sheet:not(.ai) .ai-sub{color:var(--text-3);font-size:var(--fs-sm);margin-top:2px}
@media(min-width:1100px){
  /* على المنضدة: حقولٌ أقصر وعناوينُ أوضح — ستّةُ حقولٍ في ٧٦٠ بكسل لا تحتاج
     ٤٦ بكسل لكلٍّ. On the workbench: shorter fields, sharper labels — six fields
     across 760px do not need 46px each. */
  .sheet:not(.ai) label{font-size:var(--fs-base);color:var(--ink)}
  .sheet:not(.ai) input:not([type=file]),.sheet:not(.ai) select,.sheet:not(.ai) textarea{
    padding:9px 12px;min-height:40px;border-radius:var(--rad-m);line-height:1.25}
  .sheet:not(.ai) select{padding-inline-end:32px}
  .sheet:not(.ai) .segi span{min-height:40px;min-width:40px;padding:0 12px;border-radius:var(--rad-m)}
  .sheet:not(.ai) .fields{gap:13px 16px}
}

/* ═══ المنتقي · the picker (pickSheet) ═══════════════════════════════════
   بطاقةٌ لكلّ أداة: أيقونةٌ في مربّعٍ حجريّ، اسمٌ، وسطرٌ يقول ما تفعله. عمودان
   على الهاتف وثلاثةٌ في الطاولة. الهدف ≥ 44px، والحدُّ يتذهّب تحت الإصبع.
   A card per instrument: an icon on a stone tile, a name, a line saying what it
   does. Two columns on a phone, three on the workbench. Targets ≥ 44px; the
   border turns gold under a finger. */
.pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pick-c{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:11px;row-gap:2px;align-items:center;text-align:start;min-height:64px;
  padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--rad-m);background:var(--card);
  color:var(--text);font:inherit;cursor:pointer;
  transition:border-color var(--m-1) var(--ease),background var(--m-1) var(--ease),transform var(--m-1) var(--ease)}
.pick-c:hover,.pick-c:focus-visible{border-color:var(--gold);background:var(--gold-soft);outline:0}
.pick-c:active{transform:scale(.985)}
.pick-i{grid-row:1/3;width:40px;height:40px;border-radius:var(--rad-m);background:var(--bg);
  display:grid;place-items:center}
.pick-c:hover .pick-i,.pick-c:focus-visible .pick-i{background:var(--gold);}
.pick-i svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pick-c:hover .pick-i svg,.pick-c:focus-visible .pick-i svg{stroke:#fff}
.pick-t{font-size:var(--fs-md);font-weight:600;line-height:1.25}
.pick-s{font-size:var(--fs-sm);color:var(--text-3);line-height:1.3}
.pick-foot{display:block;width:100%;margin-top:12px;padding:12px;min-height:44px;
  border:1px dashed var(--line);border-radius:var(--rad-m);background:transparent;color:var(--text-2);
  font:inherit;font-size:var(--fs-base);cursor:pointer}
.pick-foot:hover,.pick-foot:focus-visible{border-color:var(--ink);color:var(--ink);outline:0}
/* زرّ الفتح: علامة + تسبق الاسم · the opener: a + before its name */
.pick-open{display:inline-flex;align-items:center;gap:8px}
.pick-open svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
@media(min-width:700px){.pick-grid{grid-template-columns:repeat(3,1fr)}}

/* ═══ سجلّ الإصدارات · the release log ═══════════════════════════════════ */
.rl{margin-bottom:12px}
.rl-h{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;cursor:pointer;list-style:none}
.rl-h::-webkit-details-marker{display:none}
.rl-v{font-size:var(--fs-xl);font-weight:600;color:var(--ink);flex:none;min-width:52px}
.rl-t{flex:1;min-width:0;font-size:var(--fs-md)}
.rl-m{font-size:var(--fs-sm);color:var(--text-3);margin-top:3px}
.rl-b{border-top:1px solid var(--line-2)}
.rl-it{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-top:1px solid var(--line-2);font-size:var(--fs-md);line-height:1.55}
.rl-it:first-child{border-top:0}
.rl-it .tag{flex:none;margin-top:2px;min-width:52px;text-align:center}
.rl-it-b{flex:1;min-width:0}
.rl-it-m{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}

/* رابطُ السجلّ في رأس النافذة · the record link in the sheet header */
.x.lnk{font-size:var(--fs-body);margin-inline-start:auto}
.sh-nav+.x.lnk{margin-inline-start:6px}
.x.lnk svg{display:block}
#tb-share svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* الملتزَم على البند · commitments on the line */
.cm-btn{background:none;border:0;padding:0;color:var(--ink-3);font-size:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.cm-btn:hover{color:var(--ink)}
.cm-lab{margin-top:3px}
.cm-sub{color:var(--text-3);font-weight:400}

/* إقفال الشهر · the month close */
.mc-check{margin-bottom:8px}
/* الشرح: الخطواتُ مرقّمةٌ في نصّها، فالقائمةُ بلا رقمٍ ثانٍ، وللبطاقة هامشٌ
   تحتها — كانت تلتصق بشريط الأشهر فيعلو آخرُ سطرٍ فيها عليه.
   The explainer: the steps carry their number in the text, so the list draws
   no second one, and the card keeps a margin — it sat flush on the month strip
   and its last line rode over it. */
.mc-how{margin-bottom:14px}
.mc-blk{margin-bottom:16px}
/* على الهاتف كان زرُّ «تجاوز بسبب» يقصّ اسمَ البند («Drawdowns …») — والاسمُ
   هو ما يُقرأ. يلتفّ الآن. · On a phone the waive button cut the item's name
   ("Drawdowns …") — and the name is what is read. It wraps now. */
.mc-check .lrow-t,.mc-how .lrow-t,.mc-how .lrow-s{white-space:normal;overflow:visible;text-overflow:clip}
.mc-how summary{list-style:none}
.mc-how summary::-webkit-details-marker{display:none}
.mc-steps{list-style:none;margin:0;padding:4px 18px 16px;display:grid;gap:8px;font-size:var(--fs-base);line-height:1.65;color:var(--text-2)}
.mc-steps b{color:var(--text)}
.mc-check summary{list-style:none}
.mc-check summary::-webkit-details-marker{display:none}
.mc-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--line-2)}
.mc-dot.ok{background:var(--ok)} .mc-dot.open{background:var(--bad)} .mc-dot.waived{background:var(--warn)}

/* ═══ المستوى الخامس · LEVEL FIVE — the real desktop mode (2.2.3) ═════════════
   اللوحة الجانبية، والتحرير في الخليّة، والقائمة بالزرّ الأيمن، واللصق من Excel.
   كلّها فوق ١١٠٠ بكسل، واللوحة فوق ١٢٨٠ — الهاتف واللوح يرسمان ما رسماه.
   The side pane, editing in a cell, the right-click menu, pasting from Excel.
   All above 1100px, the pane above 1280 — the phone and tablet draw what they drew. */
:root{--pane-w:clamp(380px,32vw,600px);--pane-dx:28px}
html[dir=rtl]{--pane-dx:-28px}
.pane-grip{display:none}
#tb-split{display:none}
@media(min-width:1280px){
  /* ── مفتاح اللوحة · the pane switch ── */
  #tb-split:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
  #tb-split.on{background:var(--gold-soft);color:var(--ink);border-color:var(--gold)}
  #tb-split svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  /* ── اللوحة · the pane ──────────────────────────────────────────────────
     ⚠ لا ظلَّ خلفها ولا ضبابيّة: القائمةُ بجانبها تُقرأ وتُنقر. والصفحةُ تضيق
     بعرضها (‎body.docked‎) فلا يقع تحتها شيء — لا الشريط العلويّ ولا آخرُ عمود.
     ⚠ No backdrop and no blur: the list beside it is read and clicked. The page
     narrows by its width (body.docked), so nothing sits under it — neither the
     top bar nor the last column. */
  .ov.dock{inset-block:0;inset-inline-start:auto;inset-inline-end:0;width:var(--pane-w);
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;
    align-items:stretch;justify-content:stretch;z-index:65;pointer-events:none}
  .ov.dock .sheet{pointer-events:auto;position:relative;width:100%;max-width:none!important;
    height:100vh;height:100dvh;max-height:none;border-radius:0;
    border-inline-start:1px solid var(--line);box-shadow:0 0 36px rgba(15,32,59,.12)}
  /* 2.2.48 · عمودٌ واحد في اللوحة الضيّقة، وعمودان حين تتّسع لهما — كان عمودين دائماً، فانكمشت
     القوائمُ إلى «—» والتفّت الإرشاداتُ ثلاثةَ أسطر وفاض الشبكُ جانبياً. ‎minmax(0,…)‎ لا ‎1fr‎ وحده:
     ‎1fr‎ يعني ‎minmax(auto,1fr)‎ فيفيض حقلٌ عريضُ المحتوى. One column in a narrow pane, two
     when it is wide enough — it was always two, so selects shrank to "—", hints wrapped to
     three lines and the grid overflowed sideways. minmax(0,…), never a bare 1fr: 1fr is
     minmax(auto,1fr), and a wide-content field overflows. */
  .ov.dock .sheet .fields{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
  .ov.dock .sheet .fields>*{min-width:0}
  .ov.dock .sheet-h{padding-top:12px;row-gap:6px}
  /* في اللوحة: الأزرارُ سطرٌ أوّل، والعنوانُ تحته بعرضه · in the pane: the controls first, the title under them at full width */
  .ov.dock .sh-ctl{order:1;width:100%;justify-content:flex-end}
  .ov.dock .sh-tt{order:2;flex-basis:100%}
  .ov.dock .pane-grip{display:block;position:absolute;top:0;bottom:0;inset-inline-start:-4px;
    width:8px;cursor:col-resize;z-index:2}
  .ov.dock .pane-grip:hover,body.pane-drag .ov.dock .pane-grip{background:linear-gradient(
    to right,transparent 3px,var(--gold) 3px,var(--gold) 5px,transparent 5px)}
  body.pane-drag{cursor:col-resize;user-select:none}
  body.docked #app>div{padding-inline-end:var(--pane-w)}
  body.docked .selbar{inset-inline-end:calc(var(--pane-w) + 26px)}
  body.docked .ask-fab{inset-inline-end:calc(var(--pane-w) + 24px)}
}
@media(min-width:1100px){
  /* ── التحرير في الخليّة · editing in a cell ─────────────────────────────
     ⚠ القلمُ يظهر عند المرور وحده: قلمٌ على كلّ خليّةٍ دائماً ورقُ جدران
     يُخفي ما يعني. والخليّةُ نفسُها هدفُ النقر المزدوج.
     ⚠ The pencil shows on hover alone: a pencil on every cell all the time is
     wallpaper hiding what matters. The cell itself is the double-click target. */
  table.dt td.dt-ed{position:relative}
  table.dt td.dt-ed .ie-pen{position:absolute;top:50%;inset-inline-end:3px;transform:translateY(-50%);
    width:24px;height:24px;display:grid;place-items:center;border-radius:var(--rad-s);
    background:var(--card);border:1px solid var(--line);color:var(--text-3);opacity:0;
    transition:opacity var(--m-1) ease}
  table.dt td.dt-ed .ie-pen svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  table.dt tr:hover td.dt-ed .ie-pen,table.dt td.dt-ed .ie-pen:focus-visible{opacity:1}
  table.dt td.dt-ed .ie-pen:hover{color:var(--ink);border-color:var(--ink)}
  table.dt td.dt-ed:hover{box-shadow:inset 0 0 0 1px var(--line)}
  table.dt td.ie-on .ie-pen{display:none}
  .ie-box{position:absolute;inset:1px;z-index:3;display:flex;align-items:center}
  .ie-box .ie-in{width:100%;height:100%;min-height:30px;font-size:var(--fs-lg);padding:3px 8px;
    border:2px solid var(--gold);border-radius:var(--rad-s);background:var(--card);color:var(--text)}
  .ie-box.err .ie-in{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
  .ie-box.busy .ie-in{opacity:.6}
  /* ── القائمة بالزرّ الأيمن · the right-click menu ── */
  .ctxmenu{position:fixed;z-index:95;min-width:200px;max-width:320px;padding:5px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);
    box-shadow:0 14px 40px rgba(15,32,59,.2);animation:sheetPop var(--m-1) var(--ease) both}
  .ctxmenu button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
    min-height:34px;padding:6px 10px;border-radius:var(--rad-m);text-align:start;font-size:var(--fs-base);color:var(--text)}
  .ctxmenu button:hover,.ctxmenu button:focus-visible{background:var(--gold-soft);outline:0}
  .ctxmenu kbd{font-size:var(--fs-xs);padding:1px 6px}
}
/* ── معاينة اللصق · the paste preview ── */
.px-box{width:100%;font-size:var(--fs-lg);font-family:var(--font-num);resize:vertical;
  min-height:64px;margin-bottom:10px}
.px-empty{font-size:var(--fs-base);color:var(--text-3);padding:10px 2px}
.px-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.px-tot{font-weight:600;color:var(--ink)}
.px-where{font-size:var(--fs-sm);color:var(--text-3);margin-inline-start:auto}
.px-hdr{display:flex;align-items:center;gap:8px;font-size:var(--fs-base);margin-bottom:8px;cursor:pointer}
.px-hdr input{width:17px;height:17px;accent-color:var(--ink)}
.px-wrap{overflow:auto;max-height:52vh;border:1px solid var(--line-2);border-radius:var(--rad-m)}
.px-t{font-size:var(--fs-sm);min-width:100%}
.px-t th{position:sticky;top:0;background:var(--card);z-index:1;vertical-align:top}
.px-t th select{font-size:var(--fs-sm);padding:4px 6px;min-height:30px;min-width:110px}
.px-h0{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;font-weight:600}
.px-t td{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.px-t td.px-off{color:var(--text-3);text-decoration:line-through}
.px-t tr.px-bad td{background:var(--bad-bg)}
@media(min-width:1100px){ .sheet.px-sheet{max-width:980px!important} }

/* ═══ حافظة الدوام · the attendance dossier (2.2.5) ═══════════════════════════
   السجلّ مطويّ، والشهرُ المقفل يُقرأ ولا يُكتب · the log folded, a locked month
   read and not written */
.dos-log{font-size:var(--fs-base);color:var(--text-2)}
.dos-log summary{cursor:pointer;font-weight:600;color:var(--ink-3);padding:2px 0}
.dos-ev{padding:6px 0;border-top:1px solid var(--line-2)}
.dos-ev:first-of-type{border-top:0}
.dos-note{color:var(--text-3);margin-top:2px;white-space:pre-wrap}
table.ts input:disabled{background:transparent;color:var(--text-2);cursor:not-allowed;opacity:1}

/* ═══ أتيليه · ATELIER — the desktop look (2.2.8) ═════════════════════════
   ورقٌ دافئ، بطاقاتٌ بيضاء بلا إطار بظلٍّ خفيف، شعيراتٌ بدل الخطوط، أرقامٌ
   مصفوفة بحرفٍ عاديّ لا بحرفٍ ثابت العرض، وشريطٌ جانبيّ فاتح. مرجعُه نموذج
   «SIRA Desk — Atelier» (design_handoff_desk_atelier/).
   Warm paper, white borderless cards on a soft shadow, hairlines instead of
   rules, figures in a tabular sans rather than a monospace, and a light rail.
   Its reference is the "SIRA Desk — Atelier" prototype.

   ⚠⚠ محبوسٌ مرّتين: في min-width:1100 وخلف `body.desk.atelier`. الصنفُ لا
   يُضاف إلّا مع isDesk() وتفضيل «أتيليه» (users/{uid}.display)، فمن اختار
   «كلاسيكي» يرى العرضَ السابق حرفاً بحرف، والهاتف واللوح لا يريان منه شيئاً.
   [DS] في tests/validate.mjs يرفض أيّ قاعدةٍ لـ .atelier خارج هذا الحبس.
   ⚠⚠ Sealed twice: inside min-width:1100 and behind `body.desk.atelier`. The
   class is set only with isDesk() and the "Atelier" preference, so whoever
   chose "Classic" sees the previous display to the letter, and phone and tablet
   see none of it. [DS] refuses any .atelier rule outside this seal.

   ⚠ Tokens first: most of the look is the existing components reading softer
   values (--line, --line-2, --r, the status pairs), so nothing is restyled
   twice and a component added tomorrow inherits the look for free. */
@media(min-width:1100px){
  body.desk.atelier{
    --dk-bg:#EFEDE7; --dk-surf:#FFFFFF; --dk-rail:#E7E4DC;
    --dk-rail-ink:#6B778A; --dk-rail-on:#0F203B;
    --dk-line:#E1DED6; --dk-soft:#F2F0EB; --dk-on:#F4F1EA; --dk-sel:#FBF4E8;
    --dk-r:var(--rad-m); --dk-rb:var(--rad-s); --dk-rm:var(--rad-l);
    --dk-shadow:0 0 0 .5px var(--hair),0 1px 3px rgba(15,32,59,.04);
    --dk-num:var(--font-num);
    /* ما تقرؤه المكوّناتُ القائمة · what the existing components read */
    --line:#E1DED6; --line-2:#F2F0EB;
    --r:var(--rad-l); --r-sm:var(--rad-m); --sh:var(--dk-shadow);
    --gold-soft:#FBF4E8;
    --ok:#2F6B45; --ok-bg:#E3EDE6; --warn:#8A5A17; --warn-bg:#F6EAD6;
    --bad:#A63A2E; --bad-bg:#F5E1DE;
    background:var(--dk-bg);
  }
  /* ── الأرقام: حرفٌ عاديّ مصفوف · figures: a tabular sans ──────────────
     ⚠ لا تباعد حروف: .mono قد تحمل نصّاً عربيّاً في مكانٍ ما، والتباعدُ يفكّ
     وصلَ العربية (القاعدة ٣٨). No letter-spacing: .mono may carry Arabic
     somewhere, and spacing breaks Arabic joining (rule 38). */
  body.desk.atelier .mono,body.desk.atelier .num,body.desk.atelier .fig{
    font-family:var(--dk-num);font-variant-numeric:tabular-nums;letter-spacing:0}

  /* ── الشريط الجانبيّ الفاتح · the light rail ─────────────────────────── */
  body.desk.atelier #snav{background:var(--dk-rail);border-inline-end:1px solid var(--dk-line)}
  body.desk.atelier #snav .snav-top .brand-logo{content:url("logo-navy.png");height:50px;
    margin:0 0 4px;filter:none}
  body.desk.atelier #snav .snav-top:hover .brand-logo{filter:none;opacity:.85}
  body.desk.atelier .snav-top .wm-desc{color:var(--gold-ink)}
  body.desk.atelier #snav .items button{color:#4C5B72}
  body.desk.atelier #snav .items button:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  body.desk.atelier #snav .items button.on{background:var(--dk-surf);color:var(--dk-rail-on);
    box-shadow:0 1px 2px rgba(15,32,59,.06)}
  body.desk.atelier #snav .items .grp{color:var(--dk-rail-ink)}
  body.desk.atelier #snav .items .badge{background:var(--gold);color:var(--ink)}
  body.desk.atelier .snav-btm{border-top-color:var(--dk-line)}
  body.desk.atelier .snav-btm .nm{color:var(--ink)}
  body.desk.atelier .snav-btm .rl{color:var(--gold-ink);font-family:var(--dk-num)}
  body.desk.atelier .snav-btm .row button{background:var(--dk-surf);color:var(--ink);
    border:1px solid var(--dk-line)}
  body.desk.atelier .snav-btm .row button:hover{border-color:var(--gold)}

  /* ── الشريط العلويّ أنحف · a slimmer top bar ─────────────────────────── */
  body.desk.atelier .topbar{padding:12px 24px 11px;border-bottom-color:var(--dk-line)}
  body.desk.atelier .topbar h2{font-size:var(--fs-2xl);letter-spacing:-.2px}
  body.desk.atelier .topbar .who{font-size:var(--fs-sm);color:#4C5B72;margin-top:1px}
  body.desk.atelier .icon-btn{width:36px;height:36px;border-radius:var(--dk-rb);
    border-color:var(--dk-line);box-shadow:none}
  body.desk.atelier #tb-add,body.desk.atelier #tb-new,body.desk.atelier #tb-desk{height:36px}
  body.desk.atelier main{padding-top:16px}

  /* ── البطاقات: بلا إطار، بظلٍّ خفيف · cards: no border, a soft shadow ─── */
  body.desk.atelier .card,body.desk.atelier .tile{border-color:transparent;
    border-radius:var(--dk-r);box-shadow:var(--dk-shadow)}
  body.desk.atelier .card-h{border-bottom-color:var(--dk-soft)}
  body.desk.atelier .lrow{border-top-color:var(--dk-soft)}
  /* شريطُ المؤشّرات: كلُّها في صفّ متى اتّسعت · the KPI strip: all in one row
     whenever they fit, rather than four and an orphan beneath */
  body.desk.atelier .tiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
  body.desk.atelier .tile{padding:14px 16px}
  /* ⚠ 2.2.48: في اللوحة الجانبيّة (≈340px) لا يتّسع عمودان من 170px فتكدّست البطاقاتُ واحدةً
     واحدة · in the side pane two 170px columns do not fit and the tiles stacked one per row */
  body.desk.atelier .sheet .tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px}
  body.desk.atelier .sheet .tile{padding:10px 12px}
  body.desk.atelier .tile .l{font-size:var(--fs-sm);font-weight:600;color:#4C5B72}
  body.desk.atelier .tile .v{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.2px}
  body.desk.atelier .tile .n{font-size:var(--fs-xs)}

  /* ── الجداول · tables ──────────────────────────────────────────────────
     رأسٌ أبيض بحبرٍ خافت، وشعيراتٌ بين الصفوف، وصفٌّ مريح ٤٤ بكسل أو مضغوط
     ٣٢ (زرّ «مضغوط» في شريط الأدوات). A white head in faint ink, hairlines
     between rows, and a row of 44px comfortable or 32px compact. */
  body.desk.atelier table.ctab th{background:var(--dk-surf);color:var(--dk-rail-ink);
    font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none;
    border-bottom:1px solid var(--dk-line)}
  body.desk.atelier table.ctab td{border-top:1px solid var(--dk-soft)}
  body.desk.atelier table.dt{font-size:var(--fs-base)}
  body.desk.atelier table.dt td{padding:10px 12px;height:44px}
  body.desk.atelier table.dt th{padding:9px 12px}
  body.desk.atelier.dense table.dt{font-size:var(--fs-base)}
  body.desk.atelier.dense table.dt td{padding:5px 12px;height:32px}
  body.desk.atelier.dense table.dt th{padding:7px 12px}
  body.desk.atelier table.ctab tbody tr:hover{background:var(--dk-on)}
  body.desk.atelier table.dt tbody tr.dt-flat:hover{background:transparent}
  body.desk.atelier table.dt tbody tr.dt-cur{background:var(--dk-on)}
  body.desk.atelier table.dt tbody tr.dt-sel{background:var(--dk-sel)}
  body.desk.atelier table.ctab tfoot td{background:var(--dk-surf);border-top:1px solid var(--dk-line)}
  body.desk.atelier table.dt .dt-tick .dt-box{border-color:#97A0AE;border-radius:var(--rad-s)}

  /* ── الأزرار والشرائح · buttons and chips ─────────────────────────────── */
  body.desk.atelier .btn{border-radius:var(--dk-rb)}
  body.desk.atelier .btn-sm{border-radius:var(--dk-rb)}
  body.desk.atelier .btn-o{border-width:1px;border-color:var(--dk-line)}
  body.desk.atelier .btn-o:hover{border-color:var(--gold)}
  body.desk.atelier .t-info{background:#E8EDF5;color:#2C4979}
  body.desk.atelier .t-mut{background:var(--dk-soft)}
  body.desk.atelier .ptabs{border-bottom-color:var(--dk-line)}
  body.desk.atelier .vchip{border-color:var(--dk-line)}
  body.desk.atelier .qadd{border-color:transparent;border-radius:var(--dk-r);box-shadow:var(--dk-shadow)}
  body.desk.atelier .qadd input,body.desk.atelier .qadd select{border-radius:var(--dk-rb);
    background:var(--dk-bg);border-color:var(--dk-line)}

  /* ── النوافذ · sheets ───────────────────────────────────────────────── */
  body.desk.atelier .sheet{border-radius:var(--dk-rm)}
  body.desk.atelier .selbar{border-radius:var(--dk-r)}
}

/* ═══ أتيليه · المال على المنضدة · ATELIER — Money on the desk (2.2.9) ═══════
   مؤشّراتُ الحسابات، وتدفّقُ الطلب بأربع خطوات، وشريطُ المرحلة في الجدول،
   ومسارُ السجلّ في المفتِّش. محبوسٌ كالسابق ([DS]).
   The account KPIs, the four-step request flow, the stage bar in the table and
   the record's path in the inspector. Sealed like the rest ([DS]). */
@media(min-width:1100px){
  body.desk.atelier .mdk{margin-bottom:14px}
  body.desk.atelier .mk-strip,body.desk.atelier .mk-flow{display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:12px}
  body.desk.atelier .mk-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.desk.atelier .mk{display:block;width:100%;text-align:start;background:var(--dk-surf);
    border:1px solid transparent;border-radius:var(--dk-r);box-shadow:var(--dk-shadow);
    padding:13px 16px;min-width:0;color:var(--ink)}
  body.desk.atelier button.mk{cursor:pointer;transition:border-color var(--m-1,.12s) ease}
  body.desk.atelier button.mk:hover,body.desk.atelier button.mk:focus-visible{border-color:var(--gold);outline:0}
  body.desk.atelier .mk-l{font-size:var(--fs-sm);font-weight:600;color:#4C5B72;display:flex;
    align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .mk-v{font-size:var(--fs-2xl);font-weight:600;margin-top:3px;text-align:start;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .mk-s{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .mk-n{margin-inline-start:auto;color:var(--text-3);font-weight:600}
  body.desk.atelier .mk-dot{width:8px;height:8px;transform:rotate(45deg);flex:none;
    background:var(--mk-c,var(--gold))}
  body.desk.atelier .mk-f1{--mk-c:#E6BC7E}
  body.desk.atelier .mk-f2{--mk-c:#2C4979}
  body.desk.atelier .mk-f3{--mk-c:#4C6A99}
  body.desk.atelier .mk-f4{--mk-c:#2F6B45}
  body.desk.atelier .mk-f.on{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--gold),var(--dk-shadow)}
  /* شريطُ المرحلة: أربعُ قطع · the stage bar: four segments */
  body.desk.atelier .mpip{display:inline-flex;gap:3px;vertical-align:middle;margin-inline-end:7px}
  body.desk.atelier .mpip i{display:block;width:11px;height:4px;border-radius:2px;background:var(--dk-line)}
  body.desk.atelier .mpip i.on{background:#2C4979}
  body.desk.atelier .mpip.bad i.on{background:var(--bad)}
  /* مسارُ السجلّ في المفتِّش · the record's path in the inspector */
  body.desk.atelier .mins{margin-top:14px;border-top:1px solid var(--dk-soft);padding-top:4px}
  body.desk.atelier .mins-h{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);
    margin:12px 0 6px}
  body.desk.atelier .mlife{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  body.desk.atelier .mlife-s{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);
    color:var(--text-3);min-width:0}
  body.desk.atelier .mlife-s i{display:block;height:4px;border-radius:2px;background:var(--dk-line);margin-bottom:4px}
  body.desk.atelier .mlife-s.on i{background:#2C4979}
  body.desk.atelier .mlife-s.bad i{background:var(--bad)}
  body.desk.atelier .mlife-s b{color:var(--ink);font-size:var(--fs-sm)}
  body.desk.atelier .mlife-s span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* المرجع · the reference tag (2.2.10) — 260930-PR-001-SF، على الهاتف والحاسوب */
.ref{font-size:var(--fs-xs);color:var(--text-2);letter-spacing:0;white-space:nowrap}

/* ═══ أتيليه · الفيشات المُثراة · ATELIER — the enriched sheets (2.2.12) ════
   كتلُ قراءةٍ فوق حقول النافذة وعلى بطاقات الفواتير والمشتريات (inspect.js).
   Read-only blocks above a sheet's fields and on invoice and purchase cards. */
@media(min-width:1100px){
  body.desk.atelier .insp{background:var(--dk-soft);border-radius:var(--dk-rb);
    padding:10px 14px 12px;margin-bottom:14px}
  body.desk.atelier .insp-h{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);margin-bottom:6px}
  body.desk.atelier .insp-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px}
  body.desk.atelier .insp-kv>div{display:flex;flex-direction:column;min-width:0}
  body.desk.atelier .insp-kv span{font-size:var(--fs-xs);color:var(--text-3)}
  body.desk.atelier .insp-kv b{font-size:var(--fs-base);font-weight:600;color:var(--ink);
    font-family:var(--dk-num);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .insp-kv b small{color:var(--text-3);font-weight:500}
  body.desk.atelier .insp-kv .bad b{color:var(--bad)}
  body.desk.atelier .insp-sub{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);margin:10px 0 4px}
  body.desk.atelier .insp-list>div{display:flex;justify-content:space-between;gap:10px;
    padding:5px 0;border-top:1px solid var(--dk-line);font-size:var(--fs-base)}
  body.desk.atelier .insp-list>div>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.desk.atelier .insp-facts{font-size:var(--fs-sm);color:var(--text-2);margin-top:5px}
  body.desk.atelier .insp-facts .bad{color:var(--bad);font-weight:600}
}

/* ═══ أتيليه · الجداول · ATELIER — tables: totals, pin, groups (2.2.13) ═════
   ⚠⚠ الرأسُ والمجموعُ يلتصقان داخل ‎.dt-bound‎ وحدها: حاويةٌ محدودةُ الارتفاع
   تُمرَّر عمودياً، وهو شرطُ الالتصاق الذي كتبه ‎.mx-wrap‎. وبلا الحدّ لا يلتصق
   شيء — كما وقع لمصفوفة الصلاحيات.
   ⚠⚠ The head and the totals stick inside .dt-bound alone: a height-bound
   container that scrolls vertically, the condition .mx-wrap spelled out. Without
   the bound nothing sticks — as happened to the permissions matrix. */
@media(min-width:1100px){
  body.desk.atelier .dt-bound{max-height:calc(100vh - 190px);overflow:auto}
  body.desk.atelier .dt-bound table.dt thead th{position:sticky;top:0;z-index:3;background:var(--dk-surf)}
  body.desk.atelier .dt-bound table.dt tfoot td{position:sticky;bottom:0;z-index:3}
  body.desk.atelier table.dt tfoot td{font-weight:600;background:var(--dk-surf);
    box-shadow:inset 0 1px 0 var(--dk-line)}
  /* العمودُ المثبَّت · the pinned column */
  body.desk.atelier table.dt [data-pin]{position:sticky;inset-inline-start:0;z-index:2;
    background:var(--dk-surf);border-inline-end:1px solid var(--dk-line)}
  body.desk.atelier table.dt.dt-hastick [data-pin]{inset-inline-start:40px}
  body.desk.atelier table.dt.dt-hastick .dt-tick{position:sticky;inset-inline-start:0;z-index:2;background:var(--dk-surf)}
  body.desk.atelier .dt-bound table.dt thead [data-pin],
  body.desk.atelier .dt-bound table.dt.dt-hastick thead .dt-tick,
  body.desk.atelier .dt-bound table.dt tfoot [data-pin]{z-index:4}
  body.desk.atelier table.dt tbody tr:hover [data-pin],
  body.desk.atelier table.dt tbody tr.dt-cur [data-pin],
  body.desk.atelier table.dt.dt-hastick tbody tr:hover .dt-tick,
  body.desk.atelier table.dt.dt-hastick tbody tr.dt-cur .dt-tick{background:var(--dk-on)}
  body.desk.atelier table.dt tbody tr.dt-sel [data-pin],
  body.desk.atelier table.dt.dt-hastick tbody tr.dt-sel .dt-tick{background:var(--dk-sel)}
  /* صفُّ المجموعة · the group row */
  body.desk.atelier table.dt tbody tr.dt-grp{cursor:default}
  body.desk.atelier table.dt tbody tr.dt-grp:hover{background:transparent}
  body.desk.atelier table.dt tbody tr.dt-grp td{background:var(--dk-soft);padding:7px 12px;
    font-size:var(--fs-sm);height:auto;border-top:1px solid var(--dk-line)}
  body.desk.atelier .dt-grp-l{font-weight:600;color:var(--ink)}
  body.desk.atelier .dt-grp-n{display:inline-block;margin-inline-start:8px;padding:0 7px;border-radius:var(--rad-m);
    background:var(--dk-surf);color:var(--text-2);font-size:var(--fs-xs);font-weight:600}
  body.desk.atelier .dt-grp-s{margin-inline-start:16px;color:var(--text-2)}
  body.desk.atelier .dt-grp-s b{color:var(--ink);font-weight:600}
  /* شرائحُ التجميع في شريط الأدوات · the grouping chips in the toolbar */
  body.desk.atelier .dgrp{display:inline-flex;align-items:center;gap:4px;margin-inline-end:6px}
  body.desk.atelier .dgrp-l{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);margin-inline-end:2px}
  body.desk.atelier .dgrp button{padding:5px 10px;font-size:var(--fs-sm);font-weight:600;border-radius:999px;
    background:var(--dk-surf);border:1px solid var(--dk-line);color:var(--text-2);min-height:30px}
  body.desk.atelier .dgrp button.on{background:var(--ink);border-color:var(--ink);color:#fff}
}
/* الشريطُ العلويّ اللاصق يحمل أرضيته في أتيليه، فلا يُقرأ ما يمرّ تحته
   The sticky top bar carries its ground in Atelier, so what scrolls under it
   is not read through it (2.2.13) */
@media(min-width:1100px){
  body.desk.atelier .topbar{background:rgba(239,237,231,.94);backdrop-filter:blur(10px);z-index:40}
}

/* ═══ ذيكل المنضدة · THE DESK SHELL (2.2.14, SIRA Desk step 5) ═════════════
   شريطُ أيقوناتٍ من ٥٦ بكسل بالمجموعات الستّ، ولوحةُ قسمٍ من ١٢٨٠ بكسل،
   وأوراقُ السجلّات في الشريط العلويّ، وشريطُ حالٍ من ٢٦ بكسل.
   ⚠ العناصرُ الجديدة مخفيّةٌ خارج «أتيليه» (أوّلُ سطرٍ أدناه)، فلا تأخذ خانةً
   في شبكة ‎#app‎ ولا مساحةً على الهاتف ولا في «كلاسيكي».
   A 56px icon rail of the six groups, a section pane from 1280px, the record
   tabs in the top bar, and a 26px status bar.
   ⚠ The new elements are hidden outside Atelier (the first line below), so they
   take no cell in #app's grid and no room on the phone or in Classic. */
#lpane,#rtabs,#sbar,.rail-me{display:none}
@media(min-width:1100px){
  /* ── شريطُ الأيقونات · the icon rail ── */
  body.desk.atelier #app{grid-template-columns:56px minmax(0,1fr)}
  body.desk.atelier #snav{width:56px;padding:0 0 36px}
  body.desk.atelier .snav-top{padding:14px 0 10px;display:grid;place-items:center}
  body.desk.atelier #snav .snav-top .brand-logo{content:url("logo-mark.png");height:30px;margin:0}
  body.desk.atelier .snav-top .wm-desc{display:none}
  body.desk.atelier #snav .items{padding:6px 8px}
  body.desk.atelier #snav .items button{justify-content:center;padding:10px 0;position:relative;margin-bottom:4px}
  body.desk.atelier #snav .items button>span:not(.badge){display:none}
  body.desk.atelier #snav .items .badge{position:absolute;top:2px;inset-inline-end:2px;margin:0;
    min-width:16px;height:16px;font-size:var(--fs-2xs);padding:0 4px}
  body.desk.atelier #snav .items .grp{display:none}
  body.desk.atelier .snav-btm{border-top:0;margin:0;padding:8px 0 0;display:grid;place-items:center}
  body.desk.atelier .snav-btm .nm,body.desk.atelier .snav-btm .rl,
  body.desk.atelier .snav-btm .row,body.desk.atelier #s-roleswap-wrap{display:none!important}
  body.desk.atelier .rail-me{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
    background:var(--gold);color:var(--ink);font-weight:600;font-size:var(--fs-base);cursor:pointer}
  body.desk.atelier .rail-me:hover{box-shadow:0 0 0 3px var(--dk-sel)}
  /* ── لوحةُ القسم (‎.paned‎ لا يُضاف إلّا من ١٢٨٠) · the section pane ── */
  body.desk.atelier.paned #app{grid-template-columns:56px 232px minmax(0,1fr)}
  body.desk.atelier.paned #lpane{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
    overflow:auto;background:var(--dk-bg);border-inline-end:1px solid var(--dk-line);padding:14px 10px 40px}
  body.desk.atelier.paned .ptabs{display:none}
  body.desk.atelier .lp-h{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
  body.desk.atelier .lp-h b{font-size:var(--fs-body);color:var(--ink)}
  body.desk.atelier .lp-x{width:28px;height:28px;border-radius:var(--dk-rb);color:var(--text-3);font-size:var(--fs-base)}
  body.desk.atelier .lp-x:hover{background:var(--dk-surf);color:var(--ink)}
  body.desk.atelier .lp-t{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);padding:14px 8px 6px}
  body.desk.atelier .lp-sec{display:flex;flex-direction:column;gap:2px}
  body.desk.atelier .lp-i{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    text-align:start;padding:8px 10px;border-radius:var(--dk-rb);font-size:var(--fs-base);color:#4C5B72;min-height:36px}
  body.desk.atelier .lp-i:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  body.desk.atelier .lp-i.on{background:var(--dk-surf);color:var(--ink);font-weight:600;
    box-shadow:inset 3px 0 0 var(--gold),0 1px 2px rgba(15,32,59,.06)}
  html[dir=rtl] body.desk.atelier .lp-i.on{box-shadow:inset -3px 0 0 var(--gold),0 1px 2px rgba(15,32,59,.06)}
  body.desk.atelier .lp-n{background:var(--gold);color:var(--ink);font-size:var(--fs-2xs);font-weight:600;
    border-radius:var(--rad-m);padding:1px 6px}
  body.desk.atelier .lp-v{display:flex;align-items:center}
  body.desk.atelier .lp-v .lp-i{flex:1;min-width:0}
  body.desk.atelier .lp-vx{width:28px;height:28px;color:var(--text-3);border-radius:var(--dk-rb)}
  body.desk.atelier .lp-vx:hover{color:var(--bad);background:var(--bad-bg)}
  body.desk.atelier .lp-add{margin-top:4px;padding:8px 10px;border:1px dashed var(--dk-line);border-radius:var(--dk-rb);
    font-size:var(--fs-sm);color:var(--text-3);text-align:start}
  body.desk.atelier .lp-add:hover{border-color:var(--gold);color:var(--ink)}
  /* ── أوراقُ السجلّات · the record tabs ── */
  body.desk.atelier .topbar>div:first-child{flex:0 1 auto}
  body.desk.atelier #rtabs{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow:hidden;margin:0 12px;align-items:center}
  body.desk.atelier .rt{display:inline-flex;align-items:center;background:var(--dk-surf);border:1px solid var(--dk-line);
    border-radius:var(--dk-rb);max-width:200px;min-width:0;flex:0 1 auto}
  body.desk.atelier .rt-o{padding:5px 9px;font-size:var(--fs-sm);color:var(--ink);min-width:0;min-height:30px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.desk.atelier .rt-o>span{overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .rt-x{padding:0 7px;color:var(--text-3);font-size:var(--fs-md);min-height:30px}
  body.desk.atelier .rt-x:hover{color:var(--bad)}
  /* ── شريطُ الحال · the status bar ── */
  body.desk.atelier #sbar{display:flex;position:fixed;bottom:0;inset-inline:0;height:26px;z-index:45;
    align-items:center;gap:8px;padding:0 14px;font-size:var(--fs-xs);color:var(--text-3);
    background:var(--dk-rail);border-top:1px solid var(--dk-line);white-space:nowrap;overflow:hidden}
  body.desk.atelier .sb-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
  body.desk.atelier .sb-sep{opacity:.5}
  body.desk.atelier .sb-sp{flex:1}
  body.desk.atelier .sb-k{display:inline-flex;align-items:center;gap:3px;color:var(--text-3);font-size:var(--fs-xs)}
  body.desk.atelier .sb-k kbd{font-size:var(--fs-2xs);padding:0 4px;border-bottom-width:1px}
  body.desk.atelier button.sb-k:hover{color:var(--ink)}
  /* ما يعوم فوق الأسفل يرتفع فوق شريط الحال · what floats at the foot rises above the status bar */
  body.desk.atelier .ask-fab{bottom:40px}
  body.desk.atelier.selecting .ask-fab{bottom:112px}
  body.desk.atelier .selbar{bottom:40px;inset-inline-start:calc(56px + 26px)}
  body.desk.atelier.paned .selbar{inset-inline-start:calc(56px + 232px + 26px)}
  body.desk.atelier #toast{bottom:40px}
  body.desk.atelier #appfoot{padding-bottom:30px}
}

/* 3.2.17 · سطرُ المسوّدة على الهاتف: العنوانُ الطويل على سطرين لا يُقطع أوّلُه · a draft's line on the phone: a long
   title on two lines, its start never cut */
.dr-r .dr-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ 3.2.17 · SIRA 2.0 · A · المسوّدات طابوراً · ATELIER — the drafts queue ═══
   شكلُ طابور الاعتمادات (‎.apx · .apq · .apd‎): القائمةُ 400px، والوثيقةُ لا تتجاوز 880px (DESIGN.md §11) ·
   the approvals queue's shape: the list 400px, the document never wider than 880px */
@media(min-width:1100px){
  body.desk.atelier .apx.drx{grid-template-columns:400px minmax(0,880px)}
  body.desk.atelier .drd .apd-sec{padding:var(--s4)}
  body.desk.atelier .drd .apd-sec .drf{padding:0}
  body.desk.atelier .drq-navonly{padding:var(--s2) var(--s4);margin-bottom:var(--s3)}
  body.desk.atelier .drq-drp{max-width:none}
  body.desk.atelier .drq-act{margin-top:var(--s3)}
  body.desk.atelier .drq-why{margin-top:var(--s3)}
  body.desk.atelier .dr-pg-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
  body.desk.atelier .dr-pg-h+.dra-add{margin:var(--s2) 0 var(--s3)}
}

/* ═══ أتيليه · الاعتمادات: الطابور والوثيقة · ATELIER — approvals (2.2.15) ═══ */
@media(min-width:1100px){
  body.desk.atelier .apx{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
  body.desk.atelier .apq{position:sticky;top:84px;max-height:calc(100vh - 130px);overflow:auto;
    background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);padding:6px}
  body.desk.atelier .apq-h{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);padding:10px 10px 6px;
    display:flex;justify-content:space-between}
  body.desk.atelier .apq-i{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;text-align:start;
    padding:9px 10px;border-radius:var(--dk-rb);border-top:1px solid var(--dk-soft)}
  body.desk.atelier .apq-i:hover{background:var(--dk-on)}
  body.desk.atelier .apq-i.on{background:var(--dk-sel);box-shadow:inset 3px 0 0 var(--gold)}
  html[dir=rtl] body.desk.atelier .apq-i.on{box-shadow:inset -3px 0 0 var(--gold)}
  body.desk.atelier .apd{min-width:0}
  body.desk.atelier .apd-top{padding:16px 18px;margin-bottom:12px}
  body.desk.atelier .apd-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  body.desk.atelier .apd-sp{flex:1}
  body.desk.atelier .apd-pos{font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .apd-nav{width:30px;height:30px;border-radius:var(--dk-rb);background:var(--dk-soft);font-size:var(--fs-lg);color:var(--ink)}
  body.desk.atelier .apd-nav:hover{background:var(--ink);color:#fff}
  body.desk.atelier .apd-title{font-size:var(--fs-xl);font-weight:600;color:var(--ink);margin-top:10px}
  body.desk.atelier .apd-meta{font-size:var(--fs-base);color:var(--text-3);margin-top:3px}
  body.desk.atelier .apd-sec{background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);
    padding:12px 16px 14px;margin-bottom:12px}
  body.desk.atelier .apd-card>.appr,body.desk.atelier .apd-card>.card{margin:0}
}

/* ═══ أتيليه · لوحة القيادة والمقارنة · ATELIER — Command, Compare (2.2.16) ═══ */
@media(min-width:1100px){
  body.desk.atelier .cmd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}
  body.desk.atelier .cmd-k{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;
    background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);padding:14px 16px}
  body.desk.atelier .cmd-k:hover{box-shadow:var(--dk-shadow),inset 0 0 0 1px var(--dk-line)}
  body.desk.atelier .cmd-kl{font-size:var(--fs-sm);font-weight:600;color:var(--dk-rail-ink)}
  body.desk.atelier .cmd-kv{font-size:24px;font-weight:600;color:var(--ink)}
  body.desk.atelier .cmd-k.bad .cmd-kv{color:var(--bad)}
  body.desk.atelier .cmd-ks{font-size:var(--fs-sm);color:var(--text-3)}
  /* 2.2.57 · عمودان تُوزَّع عليهما البطاقاتُ إلى الأقصر، لا بطاقةٌ في عمودٍ ثابت · two
     columns the cards are dealt into, shorter first — never a card pinned to a column */
  body.desk.atelier .cmd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px;align-items:start}
  body.desk.atelier .cmd-grid.one{grid-template-columns:minmax(0,1fr)}
  body.desk.atelier .cmd-grid.c1{grid-template-columns:minmax(0,1fr)}
  body.desk.atelier .cmd-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.desk.atelier .cmd-col{display:flex;flex-direction:column;gap:12px;min-width:0}
  body.desk.atelier .cmd-more{font-size:var(--fs-sm);color:var(--text-3);padding:8px 8px 2px}
  body.desk.atelier .cmd-c{background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);padding:12px 14px 14px;min-width:0}
  body.desk.atelier .cmd-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-size:var(--fs-sm);font-weight:600;color:var(--dk-rail-ink);margin-bottom:8px}
  body.desk.atelier .cmd-list{display:flex;flex-direction:column}
  body.desk.atelier .cmd-r{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:8px 6px;
    border-top:1px solid var(--dk-soft);border-radius:var(--dk-rb);font-size:var(--fs-base)}
  body.desk.atelier .cmd-r:first-child{border-top:0}
  body.desk.atelier .cmd-r:hover{background:var(--dk-on)}
  body.desk.atelier .cmd-rm{flex:1;min-width:0;display:flex;flex-direction:column}
  body.desk.atelier .cmd-rm b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.desk.atelier .cmd-rm small{font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .cmd-pj{flex-wrap:wrap}
  body.desk.atelier .cmd-pj .track{flex:0 0 100%;margin:2px 0 0}
  body.desk.atelier .cmd-plan{display:block;width:100%;text-align:start}
  body.desk.atelier .cmd-bars{position:relative;display:flex;align-items:flex-end;gap:10px;height:150px;
    padding-top:18px;border-bottom:1px solid var(--dk-line)}
  body.desk.atelier .cmd-bar{flex:1;position:relative;background:var(--ink);border-radius:var(--rad-s) var(--rad-s) 0 0;min-width:0}
  body.desk.atelier .cmd-bar.over{background:var(--bad)}
  body.desk.atelier .cmd-bar i{position:absolute;bottom:100%;inset-inline:0;text-align:center;font-style:normal;
    font-size:var(--fs-xs);color:var(--text-2);padding-bottom:2px;white-space:nowrap}
  body.desk.atelier .cmd-cash{position:absolute;inset-inline:0;border-top:1.5px dashed var(--gold);pointer-events:none}
  body.desk.atelier .cmd-cash em{position:absolute;inset-inline-end:0;bottom:2px;font-style:normal;font-size:var(--fs-xs);
    color:var(--gold-ink);background:var(--dk-surf);padding:0 4px}
  body.desk.atelier .cmd-bx{display:flex;gap:10px;margin-top:4px}
  body.desk.atelier .cmd-bx span{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--text-3)}
  body.desk.atelier .cmd-ag{display:grid;grid-template-columns:minmax(90px,auto) 1fr auto 28px;align-items:center;gap:10px;
    padding:6px 2px;font-size:var(--fs-base);color:var(--text-2)}
  body.desk.atelier .cmd-ag small{color:var(--text-3);text-align:end}
  body.desk.atelier .cmd-agb{height:8px;border-radius:var(--rad-s);background:var(--dk-soft);overflow:hidden}
  body.desk.atelier .cmd-agb i{display:block;height:100%;background:var(--ink)}
  body.desk.atelier .cmd-ag.bad{color:var(--bad);font-weight:600}
  body.desk.atelier .cmd-ag.bad .cmd-agb i{background:var(--bad)}
  body.desk.atelier .cmd-act .lrow{padding-inline:4px}
  /* المقارنة · the comparison */
  body.desk.atelier .sheet.cmp-sheet{max-width:min(1000px,94vw);width:min(1000px,94vw)}
  body.desk.atelier .cmp-wrap{overflow:auto;max-height:66vh}
  body.desk.atelier table.cmp{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
  body.desk.atelier table.cmp th,body.desk.atelier table.cmp td{padding:8px 10px;border-bottom:1px solid var(--dk-soft);
    text-align:start;vertical-align:top}
  body.desk.atelier table.cmp thead th{position:sticky;top:0;background:var(--dk-surf);color:var(--ink);font-weight:600;
    border-bottom:1px solid var(--dk-line)}
  body.desk.atelier table.cmp tbody th{color:var(--text-3);font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
  body.desk.atelier table.cmp td span{display:block;color:var(--ink)}
  body.desk.atelier table.cmp td small{display:block;font-size:var(--fs-xs);color:var(--text-3)}
  body.desk.atelier table.cmp td small:not(:empty){color:var(--text-2);font-weight:600}
  body.desk.atelier table.cmp tr.same td span{color:var(--text-3)}
  body.desk.atelier .dt tr.dt-cmp>td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
  html[dir=rtl] body.desk.atelier .dt tr.dt-cmp>td:first-child{box-shadow:inset -3px 0 0 var(--gold)}
}

/* ═══ أتيليه ٢ · الرأسُ الواحد والكثافة · ATELIER 2 — one header, density (2.2.17) ═══
   شريطٌ علويٌّ بارتفاع ٤٦: الأوراق، والبحث، والكثافة، واللغة، والجرس. والعنوانُ
   ينزل إلى رأس الصفحة مع أدواتها. والجداولُ بصفٍّ من ٣٣ بكسل، والأرقامُ الرئيسة
   شريطٌ واحد. A 46px top bar: tabs, search, density, language, bell. The title
   comes down into the page head with its tools. Tables at 33px a row, and the
   headline figures one strip. */
@media(min-width:1100px){
  body.desk.atelier .topbar{min-height:46px;height:46px;padding:0 12px;gap:8px;align-items:stretch}
  body.desk.atelier .topbar>div:first-child{display:none}
  body.desk.atelier #tb-desk,body.desk.atelier #tb-split,body.desk.atelier #tb-share,
  body.desk.atelier #s-search,body.desk.atelier #s-lang{display:none!important}
  body.desk.atelier .tb-actions{align-self:center;gap:6px}
  body.desk.atelier .tb-actions .icon-btn{width:32px;height:32px;min-width:32px;min-height:32px}
  body.desk.atelier #tb-add{width:auto;height:32px;min-height:32px;padding:0 12px;font-size:var(--fs-base)}
  body.desk.atelier #tb-new{height:32px;min-height:32px}
  body.desk.atelier .tb-find:not([hidden]){display:flex;align-items:center;gap:8px;height:32px;width:260px;padding:0 10px;
    border-radius:var(--rad-m);background:var(--dk-soft);border:1px solid var(--dk-line);color:var(--text-3);font-size:var(--fs-base);text-align:start}
  body.desk.atelier .tb-find:hover{border-color:var(--text-3)}
  body.desk.atelier .tb-find span{flex:1}
  body.desk.atelier .tb-find kbd{font-family:var(--dk-num);font-size:var(--fs-xs);border:1px solid var(--dk-line);border-radius:var(--rad-s);
    padding:0 5px;background:var(--dk-surf);color:var(--text-3)}
  body.desk.atelier .tb-seg:not([hidden]){display:flex;gap:6px;align-items:center}
  body.desk.atelier .seg{display:inline-flex;border:1px solid var(--dk-line);border-radius:var(--rad-m);overflow:hidden;background:var(--dk-surf)}
  body.desk.atelier .seg button{height:30px;min-width:32px;padding:0 9px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
    display:inline-flex;align-items:center;justify-content:center}
  body.desk.atelier .seg button+button{border-inline-start:1px solid var(--dk-line)}
  body.desk.atelier .seg button.on{background:var(--ink);color:#fff}
  /* الأوراق ملتصقةٌ بحافّة الشريط السفلى · tabs sit on the bar's lower edge */
  body.desk.atelier #rtabs{align-self:stretch;align-items:flex-end;margin:0;gap:3px;flex:1 1 auto;min-width:0;overflow:hidden}
  body.desk.atelier .rt{height:36px;border:1px solid var(--dk-line);border-bottom:0;border-radius:var(--rad-m) var(--rad-m) 0 0;
    background:transparent;max-width:230px;flex:0 1 auto;min-width:0}
  body.desk.atelier .rt.on{background:var(--dk-surf);box-shadow:0 1px 0 var(--dk-surf)}
  body.desk.atelier .rt.pin .rt-o{padding-inline-start:12px}
  body.desk.atelier .rt-o{min-height:34px;padding:0 10px;font-size:var(--fs-base);font-weight:600;color:var(--text-2)}
  body.desk.atelier .rt.on .rt-o{color:var(--ink)}
  body.desk.atelier .rt-x{min-height:34px;padding:0 6px;opacity:.55}
  body.desk.atelier .rt:hover .rt-x{opacity:1}
  body.desk.atelier .rt-p{opacity:0}
  body.desk.atelier .rt:hover .rt-p{opacity:.7}
  /* الصفحة · the page */
  body.desk.atelier main{padding:14px 20px 90px;max-width:none}
  body.desk.atelier .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 12px}
  body.desk.atelier .ph-t{min-width:0}
  body.desk.atelier .ph-t h1{font-size:var(--fs-2xl);font-weight:600;color:var(--ink);margin:0;line-height:1.25}
  body.desk.atelier .ph-s{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
  body.desk.atelier .ph-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
  body.desk.atelier .ph-b{height:30px;padding:0 10px;border:1px solid var(--dk-line);border-radius:var(--rad-m);background:var(--dk-surf);
    font-size:var(--fs-base);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  body.desk.atelier .ph-b:hover{border-color:var(--text-3)}
  body.desk.atelier .ph-b kbd{font-family:var(--dk-num);font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);
    border:1px solid var(--dk-line);border-radius:var(--rad-s);padding:0 4px}
  body.desk.atelier .ph-b b{background:var(--gold);color:#fff;border-radius:var(--rad-m);padding:0 6px;font-size:var(--fs-xs)}
  body.desk.atelier .ph-i{width:30px;padding:0;justify-content:center}
  body.desk.atelier .ph-a .dgrp{margin:0}
  body.desk.atelier .lp-g .dgrp{display:flex;flex-wrap:wrap;gap:6px}
  body.desk.atelier .lp-g .dgrp-l{display:none}
  /* شريطُ الأرقام الواحد · the one figures strip */
  body.desk.atelier #view .tiles{gap:0;background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);
    overflow:hidden;margin-bottom:12px}
  body.desk.atelier #view .tiles>.tile{border-radius:0;box-shadow:none;border:0;border-inline-start:1px solid var(--dk-soft);
    padding:var(--s3) var(--s4);min-height:0}
  body.desk.atelier #view .tiles>.tile:first-child{border-inline-start:0}
  body.desk.atelier #view .tiles>.tile .v{font-size:var(--fs-2xl)}
  /* الجداول: ٣٣ بكسل للصفّ · tables: 33px a row */
  body.desk.atelier table.dt{font-size:var(--fs-base)}
  body.desk.atelier table.dt th{font-size:var(--fs-xs);padding:6px 10px;height:28px}
  body.desk.atelier table.dt td{padding:5px 10px;height:33px;line-height:1.3}
  body.desk.atelier.dense table.dt td{padding:3px 10px;height:30px}
  body.desk.atelier table.dt td .btn,body.desk.atelier table.dt td .more{min-height:var(--h-s);height:var(--h-s);padding:0 9px;
    font-size:var(--fs-sm);border-radius:var(--rad-s)}
  body.desk.atelier table.dt td .tag{font-size:var(--fs-sm);padding:1px 7px}
  body.desk.atelier table.dt .dt-sub{font-size:var(--fs-xs);margin-top:0}
  body.desk.atelier .dt-grp td{padding:6px 10px;height:30px;font-size:var(--fs-sm)}
  /* صفُّ الإدخال السريع سطرٌ واحد · the quick-entry row on one line */
  body.desk.atelier .qadd{padding:8px 10px;gap:6px;margin-bottom:12px}
  body.desk.atelier .qadd input,body.desk.atelier .qadd select{height:32px;min-height:32px;font-size:var(--fs-base);padding:0 9px}
  body.desk.atelier .qadd .btn{height:32px;min-height:32px;padding:0 12px;font-size:var(--fs-base)}
  body.desk.atelier .qadd-h{display:none}
  body.desk.atelier .qadd-l{font-size:var(--fs-xs)}
}
@media(min-width:1100px){
  /* «اسأل صيره» على شريط الأيقونات: العنصرُ نفسه وفعلُه نفسه، مربّعاً كحليّاً فوق حرف
     صاحب الحساب — فلا يغطّي القائمة · ASK SIRA on the icon rail: the same element and
     action, a navy square above the account initial — so it covers no list */
  body.desk.atelier .ask-fab{inset-inline-end:auto;inset-inline-start:8px;bottom:92px;width:40px;height:40px;
    min-height:40px;padding:0;border-radius:var(--rad-m);justify-content:center;box-shadow:0 3px 10px rgba(15,32,59,.22)}
  body.desk.atelier .ask-fab .ask-fab-l{display:none}
  body.desk.atelier .ask-fab .ai-mark{width:22px;height:22px;margin:0}
  /* 3.0.26 · على الشريط: المربّعُ نفسه، بحلقةٍ تدور حين يعمل ونقطةٍ حين تنتظر نتيجة ·
     on the rail: the same square, a ring that turns while it works and a dot when a
     result waits */
  /* 3.1.2 · دائرةٌ على الشريط أيضاً: الحلقةُ حول مربّعٍ تتمايل حين تدور — كانت تُرى منحرفة ·
     a circle on the rail too: a ring round a square wobbles as it turns — it read as off-centre */
  body.desk.atelier .ask-fab.ask-orb{width:40px;height:40px;min-height:40px;border-radius:50%;
    box-shadow:0 0 0 2px var(--gold),0 3px 10px rgba(15,32,59,.22)}
  body.desk.atelier .ask-fab.ask-orb::before{inset:-5px;border-radius:50%}
  body.desk.atelier .ask-fab.ask-orb.is-listening{box-shadow:0 0 0 5px rgba(207,156,81,.25),0 3px 10px rgba(15,32,59,.22)}
  body.desk.atelier .ask-fab.ask-orb .orb-mic{width:20px;height:20px}
  body.desk.atelier .ask-fab.ask-orb.is-ready::after{width:11px;height:11px;top:-3px;inset-inline-end:-3px}
  body.desk.atelier .qadd{flex-wrap:nowrap}
  body.desk.atelier .qadd>*{min-width:0}
  body.desk.atelier .qadd .q-grow{flex:1 1 160px}
}

/* ═══ أتيليه ٢ · المفتِّش · ATELIER 2 — the inspector (2.2.18) ═══ */
@media(min-width:1100px){
  /* الأزرار تنتقل إلى اللوحة؛ العمودُ في الشجرة كما هو · buttons move into the panel; the column stays in the tree */
  body.desk.atelier table.dt-insp:not(.dt-keep) .dt-actc{display:none}
  body.desk.atelier table.dt-insp tbody tr[data-row]{cursor:pointer}
  body.desk.atelier table.dt-insp tbody tr.dt-rd:hover{background:var(--dk-on)}
  body.desk.atelier .sheet.insp .sheet-b{padding:0}
  body.desk.atelier .ins{padding:0 0 8px}
  body.desk.atelier .ins-top{padding:14px 18px 14px;border-bottom:1px solid var(--dk-line)}
  body.desk.atelier .ins-c{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
  body.desk.atelier .ins-t{font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.35}
  body.desk.atelier .ins-a{font-size:26px;font-weight:600;color:var(--ink);margin-top:6px;text-align:start}
  body.desk.atelier .ins-s{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
  body.desk.atelier .ik{padding:4px 18px}
  body.desk.atelier .ik>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:31px;
    border-bottom:1px solid var(--dk-soft);font-size:var(--fs-base)}
  body.desk.atelier .ik>div>span{color:var(--text-3);flex:0 0 auto}
  body.desk.atelier .ik>div>b{font-weight:600;color:var(--ink);text-align:end;min-width:0;overflow-wrap:anywhere}
  body.desk.atelier .ik .bad,body.desk.atelier .ik>div.bad>b{color:var(--bad)}
  body.desk.atelier .ins .insp{margin:10px 18px}
  body.desk.atelier .ins>.reql,body.desk.atelier .ins>.ptrail{margin:8px 18px}
  body.desk.atelier .is{padding:10px 18px 4px}
  body.desk.atelier .is-h{font-size:var(--fs-xs);font-weight:600;color:var(--dk-rail-ink);margin-bottom:6px}
  body.desk.atelier .is-p{font-size:var(--fs-base);color:var(--text-2);line-height:1.6;white-space:pre-wrap}
  body.desk.atelier .il-list>div{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-base);padding:5px 0;
    border-bottom:1px solid var(--dk-soft)}
  body.desk.atelier .il-list>div>span{color:var(--text-2);min-width:0}
  /* المسار · the lifecycle */
  body.desk.atelier .il{display:flex;flex-direction:column;gap:10px;padding:4px 0 6px}
  body.desk.atelier .il-i{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-base);color:var(--text-2)}
  body.desk.atelier .il-i>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:6px}
  body.desk.atelier .il-i.ok>i{background:var(--ok)}
  body.desk.atelier .il-i.bad>i{background:var(--bad)}
  body.desk.atelier .il-i.next>i{background:var(--gold)}
  body.desk.atelier .il-i b{color:var(--ink);font-weight:600}
  body.desk.atelier .il-w{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
  /* أسفلُ اللوحة · the panel's foot */
  body.desk.atelier .ins-f{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
    padding:10px 18px;background:var(--dk-surf);border-top:1px solid var(--dk-line)}
  body.desk.atelier .ins-f .btn{min-height:var(--h-m);height:var(--h-m);padding:0 12px;font-size:var(--fs-base);width:auto;flex:0 0 auto}
  body.desk.atelier .ins-f .ins-sp{flex:1}
  body.desk.atelier .ins-f .tag{height:34px;display:inline-flex;align-items:center}
}
@media(min-width:1100px){
  /* لوحةٌ أضيق في «أتيليه»، والسحبُ (نمطٌ على html) يغلبها · a narrower pane in Atelier; dragging (a style on html) overrides it */
  html:has(body.desk.atelier){--pane-w:clamp(340px,27vw,540px)}
}
@media(min-width:1100px){
  body.desk.atelier .sheet.insp{display:flex;flex-direction:column;background:var(--dk-surf)}
  body.desk.atelier .sheet.insp .sheet-b{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;background:var(--dk-surf)}
  body.desk.atelier .sheet.insp .ins{flex:1 0 auto}
  body.desk.atelier .ins-c .ins-sp{flex:1}
  body.desk.atelier .ins-tab{height:24px;padding:0 9px;border:1px solid var(--dk-line);border-radius:var(--rad-s);font-size:var(--fs-sm);
    font-weight:600;color:var(--text-2);background:var(--dk-surf)}
  body.desk.atelier .ins-tab:hover{border-color:var(--text-3);color:var(--ink)}
  /* 2.2.47 · «افتح الصفحة» زرٌّ يُرى، لا حاشية · "Open page" a button that is seen, not a footnote */
  body.desk.atelier .ins-tab.ins-go{height:28px;padding:0 12px;border-color:var(--gold);color:var(--gold-ink);font-weight:600;font-size:var(--fs-sm);background:var(--gold-soft)}
  body.desk.atelier .ins-tab.ins-go:hover{background:var(--gold);color:var(--ink)}
  body.desk.atelier .il-i.off{opacity:.45}
}

/* ═══ أتيليه ٢ · الميزانيات · ATELIER 2 — Budgets (2.2.19) ═══ */
@media(min-width:1100px){
  body.desk.atelier .bd-ch{padding:12px 16px 10px;margin-bottom:12px}
  body.desk.atelier .bd-ch-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  body.desk.atelier .bd-ch-h b{font-size:var(--fs-base);color:var(--ink)}
  body.desk.atelier .bd-ch-h>span{font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .bd-lg{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px}
  body.desk.atelier .bd-lg i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--ink)}
  body.desk.atelier .bd-lg i.c{height:2px;background:var(--gold);margin-inline-start:8px}
  body.desk.atelier .bd-ch-b{position:relative;display:flex;align-items:flex-end;gap:14px;height:120px;
    border-bottom:1px solid var(--dk-line);padding-top:16px}
  body.desk.atelier .bd-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
  body.desk.atelier .bd-bar{position:relative;display:block;width:46%;min-width:18px;background:var(--ink);border-radius:3px 3px 0 0}
  body.desk.atelier .bd-bar i{position:absolute;bottom:100%;inset-inline:-30px;text-align:center;font-style:normal;
    font-size:var(--fs-xs);color:var(--text-2);padding-bottom:2px}
  body.desk.atelier .bd-cum{position:absolute;inset:16px 0 0 0;width:100%;height:calc(100% - 16px);overflow:visible;pointer-events:none}
  html[dir=rtl] body.desk.atelier .bd-cum{transform:scaleX(-1)}
  body.desk.atelier .bd-cum polyline{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
  body.desk.atelier .bd-ch-x{display:flex;gap:14px;margin-top:4px}
  body.desk.atelier .bd-ch-x span{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--text-3)}
  body.desk.atelier .bd-lens{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
  body.desk.atelier .bd-lens button{height:28px;padding:0 10px;border:1px solid var(--dk-line);border-radius:var(--rad-m);
    background:var(--dk-surf);font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
  body.desk.atelier .bd-lens button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  body.desk.atelier .bd-lens b{font-weight:600;opacity:.75;margin-inline-start:4px}
  body.desk.atelier .bd-use{display:inline-block;vertical-align:middle;width:64px;height:6px;border-radius:3px;
    background:var(--dk-soft);overflow:hidden}
  body.desk.atelier .bd-use i{display:block;height:100%;background:var(--ink)}
  body.desk.atelier .bd-use.warn i{background:var(--gold)}
  body.desk.atelier .bd-use.over i{background:var(--bad)}
  /* 3.1.12 · المصروفُ داكنٌ فوق الاستهلاك الفاتح · the spend dark over the lighter consumption */
  body.desk.atelier .bd-use{position:relative}
  body.desk.atelier .bd-use i{opacity:.35}
  body.desk.atelier .bd-use b{position:absolute;inset-block:0;inset-inline-start:0;background:var(--ink)}
  body.desk.atelier .bd-use.over b{background:var(--bad)}
  body.desk.atelier .bd-pc{font-size:var(--fs-sm);margin-inline-start:6px;color:var(--text-2)}
  body.desk.atelier .dt-card{padding:0;overflow:hidden}
  body.desk.atelier .lp-c{background:transparent;color:var(--text-3);font-family:var(--dk-num)}
  body.desk.atelier #view .tiles>.tile .n{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
}
@media(min-width:1100px){
  body.desk.atelier .sheet.insp .insp{background:transparent;border:0;padding:4px 18px;margin:0}
  body.desk.atelier .sheet.insp .insp-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
}

/* ═══ أتيليه ٢ · المال · ATELIER 2 — Money (2.2.20) ═══
   الحساباتُ شريطٌ واحد كشريط الأرقام، والتدفّقُ أربعُ بطاقاتٍ أقصر، والزرُّ الكبير
   أصغر · the accounts one strip like the figures strip, the flow four shorter
   cards, and the big button smaller */
@media(min-width:1100px){
  body.desk.atelier .mk-strip{gap:0;background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);overflow:hidden}
  body.desk.atelier .mk-strip>.mk{border-radius:0;box-shadow:none;border:0;border-inline-start:1px solid var(--dk-soft);padding:10px 14px}
  body.desk.atelier .mk-strip>.mk:first-child{border-inline-start:0}
  body.desk.atelier .mk-strip>button.mk:hover{background:var(--dk-on)}
  body.desk.atelier .mk-flow>.mk{padding:10px 14px}
  body.desk.atelier .mk-v{font-size:var(--fs-xl)}
  body.desk.atelier .pick-open{min-height:32px;height:32px;padding:0 12px;font-size:var(--fs-base)}
  body.desk.atelier .pfilter{margin-bottom:10px}
  body.desk.atelier .sheet.insp .mins{margin-top:0;border-top:0;padding-top:0}
  body.desk.atelier .sheet.insp .hist{margin-top:4px}
}
@media(min-width:1100px){
  body.desk.atelier .sheet.insp .mlife{display:flex;flex-direction:column;gap:9px;margin:4px 0 8px}
  body.desk.atelier .sheet.insp .mlife-s{display:grid;grid-template-columns:10px auto 1fr auto;align-items:center;gap:8px;
    border:0;padding:0;font-size:var(--fs-base);opacity:.5}
  body.desk.atelier .sheet.insp .mlife-s.on,body.desk.atelier .sheet.insp .mlife-s.bad{opacity:1}
  body.desk.atelier .sheet.insp .mlife-s>i{width:8px;height:8px;border-radius:50%;background:var(--ink);margin:0;display:block}
  body.desk.atelier .sheet.insp .mlife-s.on>i{background:var(--ok)}
  body.desk.atelier .sheet.insp .mlife-s.bad>i{background:var(--bad)}
  body.desk.atelier .sheet.insp .mlife-s>b{color:var(--ink);font-weight:600}
  body.desk.atelier .sheet.insp .mlife-s>span{color:var(--text-3);font-size:var(--fs-sm)}
  body.desk.atelier .sheet.insp .mlife-s>span.mono{text-align:end}
}

/* ═══ أتيليه ٢ · «التشغيل» والفواتير والمشتريات والإقفال · ATELIER 2 — Operate, Invoices, Purchases, Close (2.2.21) ═══ */
@media(min-width:1100px){
  /* البطاقةُ في المفتِّش: الوثيقةُ بلا إطارٍ ثانٍ · the card in the inspector: the document, no second frame */
  body.desk.atelier .sheet.insp .ins-card{padding:6px 12px 12px}
  body.desk.atelier .sheet.insp .ins-card>.appr,body.desk.atelier .sheet.insp .ins-card>.card{margin:0;box-shadow:none;
    border:1px solid var(--dk-soft);border-inline-start-width:1px;opacity:1}
  body.desk.atelier .sheet.insp .ins-card .mc-check>summary{pointer-events:none}
  body.desk.atelier .sheet.insp .ins-card .mc-check>summary button{pointer-events:auto}
  body.desk.atelier .lp-h2{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);padding:8px 10px 2px}
  /* البطاقاتُ الكبيرة في «التشغيل» تُضغط · the large cards of Operate, tightened */
  body.desk.atelier #view .appr{padding:12px 14px}
  body.desk.atelier #view .appr .btn{min-height:32px;height:32px;padding:0 12px;font-size:var(--fs-base)}
  body.desk.atelier #view .btn:not(.btn-sm):not(.ins-f .btn){min-height:var(--h-m);padding-block:0}
  body.desk.atelier #view .card{border-radius:var(--dk-r)}
  body.desk.atelier #view .tbl td,body.desk.atelier #view .tbl th{padding:6px 10px;font-size:var(--fs-base)}
  body.desk.atelier #view .tbl td .btn{min-height:var(--h-s);height:var(--h-s);padding:0 10px;font-size:var(--fs-sm)}
  body.desk.atelier #view .pdials{gap:6px}
  body.desk.atelier #view .pfilter button{min-height:calc(var(--h-m) - 4px);height:calc(var(--h-m) - 4px);padding:0 12px;font-size:var(--fs-base)}
  body.desk.atelier #view .secH,body.desk.atelier #view .sec-h{margin-top:10px}
  /* ساعات العمل: بطاقاتُ الفريق شريحةٌ واحدة · timesheet: the team cards one slim strip */
  body.desk.atelier .gwrap input{height:28px;min-height:28px}
  body.desk.atelier .mc-how{margin-bottom:10px}
}
@media(min-width:1100px){
  body.desk.atelier .sheet.insp .ins{flex:0 0 auto}
  body.desk.atelier .sheet.insp .ins-f{margin-top:auto}
}
@media(min-width:1100px){
  body.desk.atelier #view .btn:not(.btn-sm){min-height:var(--h-m);height:auto;padding-block:6px;font-size:var(--fs-base)}
  body.desk.atelier #view table td .btn,body.desk.atelier #view table td .btn-sm{min-height:var(--h-s);height:var(--h-s);padding:0 10px;font-size:var(--fs-sm)}
  body.desk.atelier #view .appr-purpose{font-size:var(--fs-md)}
}

/* ═══ أتيليه ٢ · صفحةٌ واحدة النسق · ATELIER 2 — one grammar on every page (2.2.22) ═══
   ما تشترك فيه الصفحاتُ يُضغط مرّةً هنا فتقرؤه كلُّها: صفُّ القائمة، منتقي
   الشهر، الملاحظة، الأكورديون، رأسُ البطاقة، أزرارُ المحاكاة، فريقُ ساعات العمل،
   الإصدارات، والحقول. What the pages share is tightened once here and every one
   of them reads it: the list row, the month picker, the note, the accordion, the
   card head, the simulator chips, the timesheet team, releases, and the fields. */
@media(min-width:1100px){
  body.desk.atelier #view .lrow{padding-block:7px;gap:10px;min-height:0}
  body.desk.atelier #view button.lrow:hover,body.desk.atelier #view summary.lrow:hover{background:var(--dk-on)}
  body.desk.atelier #view .lrow-t{font-size:var(--fs-base)}
  body.desk.atelier #view .lrow-s{font-size:var(--fs-xs)}
  body.desk.atelier #view .lrow-v .a{font-size:var(--fs-base)}
  body.desk.atelier #view .lrow-acts{padding-bottom:8px}
  body.desk.atelier #view .mpick{display:inline-flex;width:auto;padding:3px;gap:4px;margin-bottom:10px;border-radius:var(--dk-r)}
  body.desk.atelier #view .mpick .mp-a{width:28px;height:28px;font-size:var(--fs-lg);border-radius:var(--rad-s)}
  body.desk.atelier #view .mpick .mp-l{flex:0 0 auto;min-width:110px;font-size:var(--fs-base)}
  body.desk.atelier #view .mpick .mp-now{padding:4px 9px}
  body.desk.atelier #view .note{padding:var(--s3) var(--s4);font-size:var(--fs-base);border-radius:var(--dk-r)}
  body.desk.atelier #view .note+.note{margin-top:6px}
  body.desk.atelier #view .acc{margin-bottom:6px;border-radius:var(--dk-r)}
  body.desk.atelier #view .acc>summary{padding:8px 14px;min-height:0}
  body.desk.atelier #view .acc .acc-n,body.desk.atelier #view .acc .acc-v{font-size:var(--fs-md)}
  body.desk.atelier #view .card-h{padding:9px 14px}
  body.desk.atelier #view .card-h h3{font-size:var(--fs-md)}
  body.desk.atelier #view .pcard{padding:11px 13px}
  body.desk.atelier #view .card+.card{margin-top:10px}
  body.desk.atelier #view .card select,
  body.desk.atelier #view .card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){min-height:34px;height:34px;font-size:var(--fs-base);padding-block:0}
  body.desk.atelier #view .card textarea{font-size:var(--fs-base)}
  body.desk.atelier #view .gwrap input{height:28px;min-height:28px}
  body.desk.atelier #view .sim-box{padding:10px 14px;margin-bottom:10px;border-radius:var(--dk-r)}
  body.desk.atelier #view .sim-ctrls{flex-direction:row;flex-wrap:wrap;gap:6px 18px;margin-bottom:8px}
  body.desk.atelier #view .sim-btn{min-height:26px;height:26px;padding:0 8px}
  body.desk.atelier #view .sim-exact input{min-height:24px;height:24px}
  body.desk.atelier #view .staff-pill-btn{padding:4px 10px;min-height:0}
  body.desk.atelier #view .staff-pill-avatar{width:24px;height:24px;font-size:var(--fs-2xs)}
  body.desk.atelier #view .rl-h{padding:9px 14px}
  body.desk.atelier #view .rl-it{padding-block:6px}
  body.desk.atelier #view details.card{margin-bottom:6px!important}
  body.desk.atelier #view h3,body.desk.atelier #view .rep-sec-h,body.desk.atelier #view .rl-h{scroll-margin-top:64px}
  body.desk.atelier .lp-o .lp-i span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .bd-lg i.k{height:0;border-top:2px dashed var(--ok);background:none;margin-inline-start:8px}
  body.desk.atelier .bd-cum .bd-cash{stroke:var(--ok);stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
  body.desk.atelier .bd-bar.over{background:var(--bad)}
}
@media(min-width:1100px){
  body.desk.atelier #view .dt-tree{padding-inline-start:calc(var(--d,0) * 18px);position:relative}
  body.desk.atelier #view .dt-tree .tw{display:inline-block;width:10px;height:1px;background:var(--line);vertical-align:middle;margin-inline-end:5px}
  body.desk.atelier #view .dt-chips{display:inline-flex;flex-wrap:wrap;gap:3px}
  body.desk.atelier #view .sim-exact{min-height:26px;height:26px}
  body.desk.atelier #view .sim-exact input{font-size:var(--fs-base);width:48px}
}
@media(min-width:1100px){
  /* الأفعالُ الجماعيّة زرّان بقدرهما في طرف السطر، لا شريطان بعرض الصفحة
     batch actions: two buttons their own size at the line's end, not two page-wide bars */
  body.desk.atelier #view .bulk{justify-content:flex-end}
  body.desk.atelier #view .bulk>.btn{flex:0 0 auto!important;min-width:0!important}
}

/* ═══ أتيليه ٢ · ساعات العمل · ATELIER 2 — the timesheet (2.2.23) ═══
   شريطٌ واحد، وشبكةٌ بخاناتٍ ٢٦ بكسل، والتوزيعان عمودان
   one bar, a grid of 26px cells, the two breakdowns as two columns */
@media(min-width:1100px){
  body.desk.atelier #view .ts-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;
    background:var(--dk-surf);border:1px solid var(--dk-line);border-radius:var(--dk-r);padding:6px 8px}
  body.desk.atelier #view .ts-bar .mpick{margin:0;border:0;box-shadow:none;padding:0}
  body.desk.atelier #view .ts-who{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);color:var(--ink);
    padding-inline:8px;border-inline-start:1px solid var(--dk-line)}
  body.desk.atelier #view .ts-bar .ts-seg{margin:0}
  body.desk.atelier #view .ts-wd{font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier #view .ts-sp{flex:1}
  body.desk.atelier #view .ts-bar .btn-sm{min-height:var(--h-s);height:var(--h-s);padding:0 10px;font-size:var(--fs-sm)}
  body.desk.atelier #view .ts-notes{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  body.desk.atelier #view .ts-notes .dos-log{font-size:var(--fs-sm)}
  body.desk.atelier #view .tiles+.sec-h{margin-top:12px}
  body.desk.atelier #view table.ts th,body.desk.atelier #view table.ts td{padding:1px 1px;font-size:var(--fs-sm)}
  body.desk.atelier #view table.ts td input{height:26px;min-height:26px;width:32px;padding:0 1px;font-size:var(--fs-sm);border-radius:var(--rad-s)}
  body.desk.atelier #view table.ts td{text-align:center}
  body.desk.atelier #view table.ts .c0{min-width:150px;max-width:180px;padding:3px 8px}
  body.desk.atelier #view table.ts .rw-t{font-size:var(--fs-sm)}
  body.desk.atelier #view table.ts .rw-s{font-size:var(--fs-xs)}
  body.desk.atelier #view table.ts .dw{font-size:var(--fs-2xs)}
  body.desk.atelier #view table.ts .dn{font-size:var(--fs-sm)}
  body.desk.atelier #view table.ts .wkband th{padding:3px 4px;font-size:var(--fs-xs)}
  body.desk.atelier #view .ts-brk{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-auto-flow:column;gap:0 14px;align-items:start}
  body.desk.atelier #view .ts-brk>.card{margin:0!important}
  body.desk.atelier #view .ts-brk>.sec-h{margin-top:4px}
}

/* ═══ أتيليه ٢ · مركز الفرع · ATELIER 2 — the branch hub (2.2.23) ═══ */
@media(min-width:1100px){
  body.desk.atelier #view .bh-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;
    background:var(--dk-surf);border:1px solid var(--dk-line);border-radius:var(--dk-r);padding:6px 8px}
  body.desk.atelier #view .bh-bar .mpick{margin:0;border:0;box-shadow:none;padding:0}
  body.desk.atelier #view .bh-bar .pstrip,body.desk.atelier #view .bh-bar .pfilter{margin:0!important}
  body.desk.atelier #view .bh-bar .btn-sm{min-height:var(--h-s);height:var(--h-s);padding:0 10px;font-size:var(--fs-sm)}
  body.desk.atelier #view .bh-mgr{font-size:var(--fs-sm);color:var(--text-2);padding-inline:8px;border-inline-start:1px solid var(--dk-line)}
  body.desk.atelier #view .bh-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start;margin:12px 0}
  body.desk.atelier #view .bh-side{margin-bottom:12px}
  body.desk.atelier #view .bh-side .card-h .hint{margin-inline-start:auto}
}

/* ═══ أتيليه ٢ · الأوراقُ تُمرَّر ولا تُعصر · ATELIER 2 — tabs scroll, never crush (2.2.23) ═══ */
@media(min-width:1100px){
  body.desk.atelier #rtabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto}
  body.desk.atelier #rtabs::-webkit-scrollbar{display:none}
  body.desk.atelier #rtabs .rt{flex:0 0 auto;max-width:190px}
  body.desk.atelier #rtabs .rt-o{min-width:0;max-width:150px}
  body.desk.atelier #rtabs .rt-o>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.desk.atelier #rtabs.ovf-e{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 28px);mask-image:linear-gradient(to left,transparent 0,#000 28px)}
  html[dir=rtl] body.desk.atelier #rtabs.ovf-e{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);mask-image:linear-gradient(to right,transparent 0,#000 28px)}
  body.desk.atelier #rtabs.ovf-s.ovf-e{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
  body.desk.atelier #rtabs.ovf-s:not(.ovf-e){-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);mask-image:linear-gradient(to right,transparent 0,#000 28px)}
  html[dir=rtl] body.desk.atelier #rtabs.ovf-s:not(.ovf-e){-webkit-mask-image:linear-gradient(to left,transparent 0,#000 28px);mask-image:linear-gradient(to left,transparent 0,#000 28px)}
  /* السجلُّ المعروض: خطٌّ ذهبيّ أعلى الورقة · the record on show: a gold line along the tab's top */
  body.desk.atelier #rtabs .rt.cur{background:var(--dk-surf);box-shadow:inset 0 2px 0 var(--gold)}
  body.desk.atelier #rtabs .rt.cur .rt-o{color:var(--ink)}
  /* البحثُ ينكمش قبل الأوراق · the search gives way before the tabs */
  body.desk.atelier .tb-find:not([hidden]){flex:0 1 240px;width:auto;min-width:130px}
  body.desk.atelier .tb-find span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}

/* ═══ أتيليه ٢ · الجرس قائمةٌ منسدلة · ATELIER 2 — the bell as a dropdown (2.2.23) ═══
   تنزل من الجرس في طرف الشريط، لا تلتصق باللوحة ولا تحجب الصفحة
   drops from the bell at the bar's end: never docked, never covering the page */
@media(min-width:1100px){
  body.desk.atelier .ov:has(>.sheet.nb-sheet){align-items:flex-start;justify-content:flex-end;padding:48px 12px 40px;
    background:rgba(15,32,59,.10);backdrop-filter:none}
  body.desk.atelier .sheet.nb-sheet{width:400px;max-width:400px;max-height:calc(100vh - 96px);border-radius:var(--dk-r);
    box-shadow:0 12px 40px rgba(15,32,59,.22)}
  body.desk.atelier .sheet.nb-sheet .sheet-h{padding:10px 14px}
  body.desk.atelier .sheet.nb-sheet .sheet-h h3{font-size:var(--fs-md)}
  body.desk.atelier .sheet.nb-sheet .sheet-b{padding:4px 12px 12px}
  body.desk.atelier .sheet.nb-sheet .sec-h{margin:10px 2px 6px}
  body.desk.atelier .sheet.nb-sheet .sec-h h3{font-size:var(--fs-sm);color:var(--text-2)}
  body.desk.atelier .sheet.nb-sheet .nrow{padding:7px 10px;align-items:center}
  body.desk.atelier .sheet.nb-sheet .nrow .ni{width:24px;height:24px;border-radius:var(--rad-s);font-size:var(--fs-sm)}
  body.desk.atelier .sheet.nb-sheet .nrow .nt{font-size:var(--fs-base)}
  body.desk.atelier .sheet.nb-sheet .nrow .ns{font-size:var(--fs-xs)}
  body.desk.atelier .sheet.nb-sheet .nrow:hover{background:var(--dk-on)}
}
@media(min-width:1100px){
  /* الأزرارُ لا تنكسر أسطراً؛ واللوحةُ مفتوحةً يصير البحثُ أيقونة فيبقى للأوراق مكان
     the controls never wrap; with the pane open search becomes an icon so the tabs keep room */
  body.desk.atelier .tb-actions{flex:none;flex-wrap:nowrap}
  body.desk.atelier .tb-seg:not([hidden]),body.desk.atelier .tb-seg .seg{flex-wrap:nowrap;flex:none}
  body.desk.atelier.docked .tb-find:not([hidden]){flex:none;width:32px;min-width:32px;padding:0;justify-content:center}
  body.desk.atelier.docked .tb-find span,body.desk.atelier.docked .tb-find kbd{display:none}
  body.desk.atelier #view .dt-chips{flex-wrap:nowrap}
}
@media(min-width:1100px){
  /* الفراغُ يُقال في سطرين لا في لوحة · an empty state said in two lines, not a panel */
  body.desk.atelier #view .empty{padding:16px 14px}
  body.desk.atelier #view .empty .ico{width:30px;height:30px;font-size:var(--fs-md);margin-bottom:6px}
  body.desk.atelier .sheet.insp .ins-card .empty{padding:12px}
  body.desk.atelier .sheet.insp .ins-card .empty .ico{width:26px;height:26px;font-size:var(--fs-base);margin-bottom:4px}
  /* أرقامُ الشخص في المفتِّش شريطٌ صغير · a person's figures in the inspector as a small strip */
  body.desk.atelier .sheet.insp .ins-card .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px!important}
  body.desk.atelier .sheet.insp .ins-card .tile{padding:7px 10px;box-shadow:none}
  body.desk.atelier .sheet.insp .ins-card .tile .v{font-size:var(--fs-body)}
}

/* ═══ 2.2.25 — الشريطان الجانبيّان والرأسُ الواحد · two lateral levels, one header ═══
   المستوى الأوّل شريطُ الأيقونات، والثاني لوحةُ القسم (صفحاتٌ بعدّاداتها، مرشّح
   القائمة، العروض، التجميع، بطاقة السياق)، تُطوى فتطفو عند المرور. وحيث تعيش
   اللوحة (‎body.wide‎، من ١٢٨٠) يصعد العنوانُ وأدواتُ الصفحة إلى الشريط العلويّ،
   فلا سطرَ رأسٍ ثانٍ. ولوحةُ السجلّ تُطوى إلى شريطٍ رفيع باسمها.
   Level one is the icon rail, level two the section pane (pages with counts,
   the list filter, views, grouping, a context card), which folds and then
   flies out on hover. Where the pane lives (body.wide, from 1280px) the title
   and the page's tools rise into the top bar, so there is no second header row.
   And the record panel folds to a thin strip carrying its name. */
#tb-tools,.rail-pane,.dock-strip,.sh-fold{display:none}
@media(min-width:1100px){
  /* ── الرأسُ الواحد · the single header ── */
  body.desk.atelier.wide .topbar>div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0;
    flex:0 1 auto;max-width:42%;align-self:center;padding-inline-end:4px}
  body.desk.atelier.wide #pg-title{font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin:0;white-space:nowrap;letter-spacing:-.1px}
  body.desk.atelier.wide #pg-sub{font-size:var(--fs-sm);color:var(--text-3);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.desk.atelier.wide #tb-tools{display:flex;align-items:center;gap:2px;align-self:center;flex:none}
  body.desk.atelier .tb-t{position:relative;width:30px;height:30px;border-radius:var(--rad-s);display:grid;place-items:center;color:var(--text-3)}
  body.desk.atelier .tb-t:hover{background:var(--dk-surf);color:var(--ink)}
  body.desk.atelier .tb-t b{position:absolute;top:-2px;inset-inline-end:-2px;background:var(--gold);color:var(--ink);
    border-radius:var(--rad-m);padding:0 4px;font-size:var(--fs-2xs);line-height:14px}
  /* ورقةُ الصفحة الجارية يقولها العنوانُ الآن · the current page's tab: the title says it now */
  body.desk.atelier.wide #rtabs .rt.rt-pg.on:not(.pin){display:none}
  body.desk.atelier.wide #view{padding-top:14px}
  /* ── زرُّ المستوى الثاني على الشريط · the level-two button on the rail ── */
  body.desk.atelier.wide .rail-pane:not([hidden]){display:grid;place-items:center;width:34px;height:30px;margin:0 auto 6px;
    border-radius:var(--rad-m);color:var(--dk-rail-ink)}
  body.desk.atelier.wide .rail-pane:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  body.desk.atelier.wide .rail-pane.on{color:var(--ink);background:var(--dk-surf)}
  /* ── اللوحةُ طافيةً وهي مطويّة · the pane flying out while folded ── */
  body.desk.atelier.wide.pane-fly:not(.paned) #lpane{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;
    inset-inline-start:56px;width:240px;z-index:70;overflow:auto;background:var(--dk-bg);
    border-inline-end:1px solid var(--dk-line);padding:14px 10px 40px;box-shadow:12px 0 32px rgba(15,32,59,.14)}
  html[dir=rtl] body.desk.atelier.wide.pane-fly:not(.paned) #lpane{box-shadow:-12px 0 32px rgba(15,32,59,.14)}
  /* ── مرشّحُ القائمة · the list filter ── */
  body.desk.atelier .lp-f{display:flex;align-items:center;gap:7px;height:32px;margin:2px 2px 4px;padding:0 9px;
    border:1px solid var(--dk-line);border-radius:var(--rad-m);background:var(--dk-surf);color:var(--text-3)}
  body.desk.atelier .lp-f:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--dk-sel)}
  body.desk.atelier .lp-f input{flex:1;min-width:0;border:0;background:transparent;height:30px;padding:0;
    font-size:var(--fs-base);color:var(--ink);outline:none;box-shadow:none}
  body.desk.atelier .lp-fn{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
  body.desk.atelier .pf-hide{display:none!important}
  /* ⚠ مجموعٌ لكلّ الصفوف فوق صفٍّ واحدٍ ظاهر كذبة: يُخفى ما دام المرشّح
     a total of every row under one visible row is a lie: hidden while filtering */
  body.desk.atelier.pf-on #view .dt tfoot{display:none}
  /* ── العدّادُ على صفحات المجموعة · the count on the group's pages ── */
  body.desk.atelier .lp-i .lp-n{background:var(--ink);color:#fff;min-width:18px;height:18px;line-height:18px;
    border-radius:var(--rad-m);padding:0 5px;text-align:center}
  body.desk.atelier .lp-i .lp-n.lp-c{background:transparent;color:var(--text-3);min-width:0;padding:0}
  /* ── بطاقةُ السياق · the context card ── */
  body.desk.atelier .lp-ctx{margin:0 2px;padding:10px 12px;border-radius:var(--rad-m);background:var(--dk-surf);
    border:1px solid var(--dk-line);display:grid;gap:5px}
  body.desk.atelier .lp-ctx-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}
  body.desk.atelier .lp-ctx-h b{font-size:var(--fs-base);color:var(--ink)}
  body.desk.atelier .lp-ctx-h b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--gold);
    transform:rotate(45deg);margin-inline-end:7px;vertical-align:1px}
  body.desk.atelier .lp-ctx-h span{font-size:var(--fs-xs);color:var(--text-3)}
  body.desk.atelier .lp-ctx-r{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-sm)}
  body.desk.atelier .lp-ctx-r span{color:var(--text-3)}
  body.desk.atelier .lp-ctx-r b{color:var(--ink);font-weight:600;text-align:end}
  /* ── لوحةُ السجلّ مطويّة · the record panel folded ── */
  body.desk.atelier .ov.dock .sh-fold{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--rad-m);color:var(--text-3);flex:none}
  body.desk.atelier .ov.dock .sh-fold:hover{background:var(--dk-soft);color:var(--ink)}
  body.desk.atelier.dock-min{--pane-w:44px}
  body.desk.atelier.dock-min .ov.dock .sheet>*:not(.dock-strip){display:none!important}
  body.desk.atelier.dock-min .ov.dock .dock-strip{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;
    padding:16px 0;gap:10px;background:var(--dk-surf);color:var(--ink);cursor:pointer}
  body.desk.atelier.dock-min .ov.dock .dock-strip:hover{background:var(--dk-soft)}
  body.desk.atelier.dock-min .ov.dock .dock-strip::before{content:"‹";font-size:var(--fs-lg);color:var(--gold-ink)}
  html[dir=rtl] body.desk.atelier.dock-min .ov.dock .dock-strip::before{content:"›"}
  body.desk.atelier.dock-min .ov.dock .dock-strip span{writing-mode:vertical-rl;font-size:var(--fs-base);font-weight:600;
    max-height:70vh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.desk.atelier.dock-min .ov.dock .sheet{overflow:hidden;padding:0}
}
@media(min-width:1100px){
  /* ── مجموعاتٌ مفصولة كبطاقات · groups set apart like cards (dtable sep) ── */
  body.desk.atelier .dt-wrap.dt-sep{background:transparent;box-shadow:none;border:0;overflow:visible}
  body.desk.atelier .dt-sep>table{border-collapse:separate;border-spacing:0}
  body.desk.atelier .dt-sep thead{display:none}
  body.desk.atelier .dt-sep tbody tr[data-row]>td{background:var(--dk-surf);border-bottom:1px solid var(--dk-line)}
  body.desk.atelier .dt-sep tbody tr[data-row]>td:first-child{border-inline-start:1px solid var(--dk-line)}
  body.desk.atelier .dt-sep tbody tr[data-row]>td:last-child{border-inline-end:1px solid var(--dk-line)}
  body.desk.atelier .dt-sep tbody tr[data-row]:hover>td{background:#FBFAF7}
  body.desk.atelier .dt-sep tbody tr.dt-sel>td{background:var(--dk-sel)}
  body.desk.atelier .dt-sep tr.dt-grp>td{background:var(--dk-surf);border:1px solid var(--dk-line);border-radius:var(--rad-m) var(--rad-m) 0 0;
    padding:11px 16px;font-size:var(--fs-base)}
  body.desk.atelier .dt-sep tr.dt-gap>td{height:14px;padding:0;border:0;background:transparent}
  body.desk.atelier .dt-sep td[data-pin]{position:static;box-shadow:none;border-inline-end-color:transparent}
  /* المربّعُ الجماعيّ يظهر تحت الإصبع أو ما دام تحديد؛ الدائرةُ هي الفعلُ الفرديّ
     the batch tick shows under the pointer or while a selection stands; the circle is the single action */
  body.desk.atelier:not(.selecting) .dt-sep tr[data-row]:not(:hover) .dt-tick .dt-box{opacity:0}
  body.desk.atelier.wide #pg-title{flex:none;overflow:visible;text-overflow:clip;max-width:none}
  body.desk.atelier .dt-sep tr.dt-grp .dt-grp-l{font-weight:600;color:var(--ink);font-size:var(--fs-md)}
  body.desk.atelier .dt-sep tr.dt-grp .dt-grp-l::before{content:"";display:inline-block;width:8px;height:8px;transform:rotate(45deg);
    background:var(--text-3);margin-inline-end:9px;vertical-align:1px}
  body.desk.atelier .dt-sep tr.dt-grp-bad .dt-grp-l::before{background:var(--bad)}
  body.desk.atelier .dt-sep tr.dt-grp-warn .dt-grp-l::before{background:var(--gold)}
  body.desk.atelier .dt-sep tr.dt-grp-info .dt-grp-l::before{background:var(--ink)}
  body.desk.atelier .dt-sep tr.dt-grp-ok .dt-grp-l::before{background:var(--ok)}
  body.desk.atelier .dt-sep tr.dt-grp .dt-grp-n{background:transparent;color:var(--text-3);font-weight:500}
  /* الصفّ الأخير في كلّ مجموعة يُقفل البطاقة · the last row of each group closes the card */
  body.desk.atelier .dt-sep tbody tr[data-row]:has(+ tr.dt-grp)>td:first-child,
  body.desk.atelier .dt-sep tbody tr[data-row]:last-child>td:first-child{border-end-start-radius:12px}
  body.desk.atelier .dt-sep tbody tr[data-row]:has(+ tr.dt-grp)>td:last-child,
  body.desk.atelier .dt-sep tbody tr[data-row]:last-child>td:last-child{border-end-end-radius:12px}
  body.desk.atelier .dt-sep tbody tr[data-row]>td{padding-top:9px;padding-bottom:9px}
  /* ── المهامّ · tasks ── */
  body.desk.atelier .tk-st{display:inline-flex;align-items:center;gap:6px}
  body.desk.atelier .tk-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid #B9BFC8;display:inline-grid;place-items:center;
    flex:none;background:var(--dk-surf);color:#fff;font-size:var(--fs-xs);line-height:1;padding:0;cursor:pointer}
  body.desk.atelier button.tk-dot:hover{border-color:var(--ok);box-shadow:0 0 0 3px rgba(46,125,82,.12)}
  body.desk.atelier .tk-dot.on{background:var(--ok);border-color:var(--ok)}
  body.desk.atelier .tk-dot.off{cursor:default;opacity:.55}
  body.desk.atelier .tk-t{font-weight:600;color:var(--ink)}
  body.desk.atelier .tk-who{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  body.desk.atelier .tk-av{width:22px;height:22px;border-radius:50%;background:var(--dk-soft);color:var(--text-2);
    font-size:var(--fs-xs);font-weight:600;display:inline-grid;place-items:center;flex:none;border:2px solid var(--dk-surf)}
  body.desk.atelier .tk-avs{display:inline-flex}
  body.desk.atelier .tk-av+.tk-av{margin-inline-start:-7px}
}
@media(min-width:1100px){
  /* ── بطاقاتُ المشاريع بمراحلها · project cards with their phases ── */
  body.desk.atelier .pgc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:14px}
  body.desk.atelier .pgc{display:flex;flex-direction:column;gap:8px;text-align:start;width:100%;padding:14px 16px 12px;
    background:var(--dk-surf);border:1px solid var(--dk-line);border-radius:var(--rad-m);color:var(--text)}
  body.desk.atelier button.pgc{cursor:pointer}
  body.desk.atelier button.pgc:hover{border-color:var(--text-3)}
  body.desk.atelier .pgc.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
  body.desk.atelier .pgc-h{display:flex;align-items:baseline;gap:9px;min-width:0}
  body.desk.atelier .pgc-h b{font-size:var(--fs-md);color:var(--ink);white-space:nowrap}
  body.desk.atelier .pgc-s{font-size:var(--fs-sm);color:var(--text-3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .pgc-p{font-size:var(--fs-2xl);font-weight:600;color:var(--ink)}
  /* 2.2.54 · شريطان رفيعان على مقياسٍ واحد · two slim bars on one scale */
  body.desk.atelier .pgc-r{display:grid;grid-template-columns:minmax(84px,auto) 1fr 52px;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .pgc-tr{display:block;height:6px;border-radius:3px;background:#ECE8DF;overflow:hidden}
  body.desk.atelier .pgc-tr i{display:block;height:100%;border-radius:3px;background:var(--ink)}
  body.desk.atelier .pgc-tr.built i{background:var(--gold)}
  body.desk.atelier .pgc-tr.over i{background:var(--bad)}
  body.desk.atelier .pgc-rv{text-align:end;color:var(--ink);font-weight:600}
  body.desk.atelier .pgc-m{font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .pgc-bad{color:var(--bad);font-weight:600}
  body.desk.atelier .pgc-late{font-size:var(--fs-sm);font-weight:600;color:var(--bad);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .pgc-none{font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .pgc-f{display:flex;gap:16px;font-size:var(--fs-sm);color:var(--text-3);border-top:1px solid var(--dk-line);padding-top:8px}
  body.desk.atelier .pgc-f b{color:var(--ink);font-weight:600}
  /* شريطُ المرحلة في صفّها · a phase's bar in its row */
  body.desk.atelier .pg-mini{display:inline-block;width:84px;height:6px;border-radius:3px;background:#E7E3DA;overflow:hidden;vertical-align:middle}
  body.desk.atelier .pg-mini i{display:block;height:100%;background:var(--ink)}
  body.desk.atelier .pg-mini.part i{background:var(--gold)}
  body.desk.atelier .pg-mini.late i{background:var(--bad)}
  body.desk.atelier .pg-mini-n{font-size:var(--fs-sm);margin-inline-start:7px;display:inline-block;min-width:34px}
}
@media(min-width:1100px){
  /* ── من يغيب: شبكةُ أيّام · who is away: a day grid ── */
  body.desk.atelier .ag{display:grid;gap:4px;padding:6px 14px 4px}
  body.desk.atelier .ag-r{display:grid;grid-template-columns:78px repeat(21,minmax(0,1fr));gap:3px;align-items:center}
  body.desk.atelier .ag-r>span{font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .ag-r>i{display:block;height:14px;border-radius:3px;background:#F1EFEA;font-style:normal}
  body.desk.atelier .ag-r>i.we{background:#E9E6DF}
  body.desk.atelier .ag-r>i.a{background:var(--ink)}
  body.desk.atelier .ag-r>i.p{background:repeating-linear-gradient(45deg,var(--gold) 0 3px,#F4E6CF 3px 6px);outline:1px solid var(--gold)}
  body.desk.atelier .ag-h>i{background:transparent!important;height:auto;font-size:var(--fs-2xs);color:var(--text-3);text-align:center;font-family:var(--dk-num)}
  body.desk.atelier .ag-h>i.we{opacity:.55}
  body.desk.atelier .ag-h>i.td{background:var(--ink)!important;color:#fff;border-radius:3px;font-weight:600}
  body.desk.atelier .ag-k{display:flex;gap:14px;padding:6px 14px 12px;font-size:var(--fs-xs);color:var(--text-3)}
  body.desk.atelier .ag-k i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;vertical-align:-1px}
  body.desk.atelier .ag-k i.a{background:var(--ink)}
  body.desk.atelier .ag-k i.p{background:repeating-linear-gradient(45deg,var(--gold) 0 3px,#F4E6CF 3px 6px)}
  /* ── الفعلُ على الصفّ · the verb on the row ── */
  body.desk.atelier .dt-verb{white-space:nowrap;height:28px;min-height:28px;padding:0 11px;font-size:var(--fs-sm)}
}

/* ═══ 2.2.26 — اللوحة الجانبية من جديد · the lateral pane, reworked ═══════════
   أضيق (٢١٦)، وصفوفٌ أقصر (٣٠ / ٢٦)، وثلاث مناطق لا تشبه إحداها الأخرى:
   التنقّل صفوفٌ بأيقونات؛ «تصفية وعرض» بطاقةٌ بيضاء أقسامُها تُطوى، عدساتُها
   نقاطٌ كأزرار راديو؛ و«أقسام الصفحة» فهرسٌ على خطٍّ رفيع.
   Narrower (216), shorter rows (30 / 26), and three zones that look nothing
   alike: navigation is rows with icons; "Filter & view" is a white card whose
   sections fold and whose lenses are radio dots; "Sections" is a table of
   contents on a thin rule. */
@media(min-width:1100px){
  body.desk.atelier.paned #app{grid-template-columns:56px 216px minmax(0,1fr)}
  body.desk.atelier.paned .selbar{inset-inline-start:calc(56px + 216px + 26px)}
  body.desk.atelier.paned #lpane,body.desk.atelier.wide.pane-fly:not(.paned) #lpane{padding:10px 9px 40px;gap:0}
  body.desk.atelier.wide.pane-fly:not(.paned) #lpane{width:216px}
  body.desk.atelier #lpane .lp-h{padding:2px 4px 8px;min-height:32px}
  body.desk.atelier #lpane .lp-h b{font-size:var(--fs-md);font-weight:600}
  body.desk.atelier #lpane .lp-x{width:26px;height:26px;font-size:var(--fs-sm)}
  /* ١ التنقّل · navigate */
  body.desk.atelier .lp-nav{display:flex;flex-direction:column;gap:1px}
  body.desk.atelier .lp-nav .lp-i{display:flex;align-items:center;justify-content:flex-start;gap:9px;height:30px;min-height:30px;padding:0 8px;font-weight:500;
    border-radius:var(--rad-s);font-size:var(--fs-base);color:var(--text-2);box-shadow:none;background:transparent}
  body.desk.atelier .lp-nav .lp-i:hover{background:rgba(15,32,59,.045);color:var(--ink)}
  body.desk.atelier .lp-nav .lp-i.on{background:var(--dk-surf);color:var(--ink);font-weight:600;
    box-shadow:0 1px 2px rgba(15,32,59,.07),inset 2px 0 0 var(--gold)}
  html[dir=rtl] body.desk.atelier .lp-nav .lp-i.on{box-shadow:0 1px 2px rgba(15,32,59,.07),inset -2px 0 0 var(--gold)}
  body.desk.atelier .lp-ic{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--text-3)}
  body.desk.atelier .lp-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  body.desk.atelier .lp-ic i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
  body.desk.atelier .lp-i.on .lp-ic{color:var(--gold-ink)}
  body.desk.atelier .lp-lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;line-height:1.25}
  /* 2.2.47 · مشاريعُ القارئ تحت «المشاريع» · the reader's projects under "Projects" */
  body.desk.atelier .lp-subs{display:flex;flex-direction:column;gap:1px;margin:1px 0 4px;padding-inline-start:14px;border-inline-start:1px solid var(--dk-line);margin-inline-start:15px}
  body.desk.atelier .lp-nav .lp-i.lp-sub{height:26px;min-height:26px;font-size:var(--fs-sm);gap:7px;padding:0 6px}
  body.desk.atelier .lp-sub .lp-ic{width:auto;min-width:22px;font-size:var(--fs-2xs);font-weight:600;color:var(--text-3)}
  body.desk.atelier .lp-nav .lp-n{background:var(--ink);color:#fff;min-width:17px;height:17px;line-height:17px;border-radius:var(--rad-m);
    padding:0 5px;font-size:var(--fs-2xs);font-weight:600;text-align:center}
  /* ٢ تصفية وعرض · filter & view */
  body.desk.atelier .lp-box{margin-top:12px;background:var(--dk-surf);border:1px solid var(--dk-line);border-radius:var(--rad-m);
    padding:8px 8px 6px;box-shadow:0 1px 2px rgba(15,32,59,.04)}
  body.desk.atelier .lp-bh{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:600;color:var(--ink);padding:1px 3px 7px}
  body.desk.atelier .lp-bh::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
  body.desk.atelier .lp-box .lp-f{margin:0 0 4px;height:30px;background:var(--dk-soft);border-color:transparent}
  body.desk.atelier .lp-box .lp-f:focus-within{background:var(--dk-surf)}
  body.desk.atelier .lp-s{border-top:1px solid var(--dk-line);margin-top:4px;padding-top:2px}
  body.desk.atelier .lp-box .lp-s:first-of-type{margin-top:6px}
  body.desk.atelier .lp-sh{display:flex;align-items:center;gap:6px;width:100%;height:26px;min-height:26px;padding:0 3px;
    font-size:var(--fs-xs);font-weight:600;color:var(--text-3);border-radius:var(--rad-s)}
  body.desk.atelier .lp-sh:hover{color:var(--ink)}
  body.desk.atelier .lp-sh span:first-child{flex:1;text-align:start}
  body.desk.atelier .lp-sn{font-size:var(--fs-2xs);color:var(--text-3);font-weight:600}
  body.desk.atelier .lp-sh i{width:6px;height:6px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);margin:-3px 3px 0;transition:transform var(--m-1) var(--ease)}
  body.desk.atelier .lp-s.fold .lp-sh i{transform:rotate(-45deg);margin-top:0}
  html[dir=rtl] body.desk.atelier .lp-s.fold .lp-sh i{transform:rotate(135deg)}
  body.desk.atelier .lp-sb{display:flex;flex-direction:column;gap:1px;padding:0 0 4px}
  body.desk.atelier .lp-l{display:flex;align-items:center;gap:8px;height:26px;min-height:26px;padding:0 6px;border-radius:var(--rad-s);
    font-size:var(--fs-sm);color:var(--text-2);text-align:start}
  body.desk.atelier .lp-l::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid #B9BFC8;flex:none}
  body.desk.atelier .lp-l span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .lp-l:hover{background:var(--dk-soft);color:var(--ink)}
  body.desk.atelier .lp-l.on{background:var(--dk-sel);color:var(--ink);font-weight:600}
  body.desk.atelier .lp-l.on::before{border-color:var(--gold);background:var(--gold)}
  body.desk.atelier .lp-l .lp-c{font-size:var(--fs-xs);color:var(--text-3);background:none;padding:0}
  body.desk.atelier .lp-box .lp-h2{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);padding:6px 6px 1px}
  body.desk.atelier .lp-v{display:flex;align-items:center;border-radius:var(--rad-s)}
  body.desk.atelier .lp-v:hover{background:var(--dk-soft)}
  body.desk.atelier .lp-v.on{background:var(--dk-sel)}
  body.desk.atelier .lp-v.on .lp-vb{font-weight:600}
  body.desk.atelier .lp-v.on .lp-vb::before{content:"✓";color:var(--gold-ink);margin-inline-end:5px}
  body.desk.atelier .lp-vb{flex:1;min-width:0;height:26px;min-height:26px;padding:0 6px;font-size:var(--fs-sm);color:var(--ink);text-align:start;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .lp-v .lp-vx{width:22px;height:22px;opacity:0}
  body.desk.atelier .lp-v:hover .lp-vx,body.desk.atelier .lp-vx:focus{opacity:1}
  body.desk.atelier .lp-box .lp-add{margin:2px 0 0;padding:5px 6px;border:0;font-size:var(--fs-sm);color:var(--gold-ink);text-align:start;border-radius:var(--rad-s)}
  body.desk.atelier .lp-box .lp-add:hover{background:var(--dk-sel);color:var(--ink)}
  body.desk.atelier .lp-box .lp-g{padding:2px 2px 4px}
  body.desk.atelier .lp-box .lp-g .dgrp{gap:4px}
  body.desk.atelier .lp-box .lp-g .dgrp button{height:24px;min-height:24px;padding:0 9px;font-size:var(--fs-xs);border-radius:var(--rad-m)}
  /* بطاقةُ السياق · the context card */
  body.desk.atelier #lpane .lp-ctx{margin-top:12px;padding:9px 11px;gap:4px;border-radius:var(--rad-m)}
  /* ٣ أقسام الصفحة · sections (a table of contents) */
  body.desk.atelier #lpane>.lp-s{border-top:0;margin-top:12px}
  body.desk.atelier .lp-toc{border-inline-start:1.5px solid var(--dk-line);margin-inline-start:6px;display:flex;flex-direction:column}
  body.desk.atelier .lp-o{display:block;height:24px;min-height:24px;padding:0 10px;margin-inline-start:-1.5px;font-size:var(--fs-sm);color:var(--text-3);
    text-align:start;border-inline-start:1.5px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier .lp-o:hover{color:var(--ink);border-inline-start-color:var(--gold)}
  body.desk.atelier .lp-o span{display:block;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:1100px){
  /* ── المراحل ومهامّها على الزمن · phases and their tasks over time (2.2.26) ── */
  body.desk.atelier .pg-gantt .tl-row:not(.tl-sub):not(.tl-head){min-height:34px;border-top:1px solid var(--dk-line);border-radius:0;margin-top:3px}
  body.desk.atelier .pg-gantt .tl-row:not(.tl-sub):not(.tl-head) .tl-lab{font-size:var(--fs-base);font-weight:600}
  body.desk.atelier .pg-gantt .tl-row:not(.tl-sub):not(.tl-head) .tl-r{color:var(--ink);font-weight:600}
  body.desk.atelier .pg-gantt .tl-bar{top:9px;height:12px;border-radius:var(--rad-s)}
  body.desk.atelier .pg-gantt .tl-sub{min-height:24px}
  body.desk.atelier .pg-gantt .tl-sub .tl-track{height:22px}
  body.desk.atelier .pg-gantt .tl-sub .tl-lab{position:relative;font-weight:500;font-size:var(--fs-sm);color:var(--text-2);padding-inline-start:18px}
  body.desk.atelier .pg-gantt .tl-sub .tl-lab::before{content:"";position:absolute;inset-inline-start:6px;top:2px;width:7px;height:8px;
    border-inline-start:1.2px solid #C3C8D0;border-bottom:1.2px solid #C3C8D0;border-end-start-radius:3px}
  body.desk.atelier .pg-gantt .tl-sub.tl-t-late .tl-lab{color:var(--bad)}
  body.desk.atelier .pg-gantt .tl-sub.tl-t-ok .tl-lab{color:var(--text-3);text-decoration:line-through}
  body.desk.atelier .pg-gantt .tl-sub .tl-pt{top:6px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 2px var(--dk-surf)}
  body.desk.atelier .pg-gantt .tl-sub .tl-r{font-size:var(--fs-xs)}
}

/* ═══ 2.2.43 · الدفترُ على المنضدة (أتيليه) · the ledger on the desk ═══════
   نموذج «سجلّات صيره»: بلاطاتٌ تشرح نفسها، صفُّ رقائقَ بعدّها، وجدولٌ خلاياه سطران
   وما ينقص فيه في خانته. ⚠ كلُّه خلف body.desk.atelier — «كلاسيكي» والهاتف كما كانا.
   The "SIRA Records" prototype: tiles that explain themselves, a chip row with
   counts, a table whose cells are two lines and whose gaps sit in their own
   cells. ⚠ All behind body.desk.atelier — Classic and the phone are untouched. */
@media(min-width:1100px){
  body.desk.atelier .lg-tiles{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
  body.desk.atelier .lg-tile{text-align:start;padding:14px 16px}
  body.desk.atelier .lg-tile .v{font-size:24px;margin-top:6px}
  body.desk.atelier .lg-tile .n{font-size:var(--fs-sm);margin-top:4px}
  body.desk.atelier button.lg-tile{cursor:pointer;font:inherit;color:inherit}
  body.desk.atelier button.lg-tile.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
  body.desk.atelier .lg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
  body.desk.atelier .lg-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  body.desk.atelier .lg-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;
    border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer}
  body.desk.atelier .lg-chip b{font-weight:600;font-size:var(--fs-sm);color:var(--text-3)}
  body.desk.atelier .lg-chip:hover{border-color:var(--ink-3)}
  body.desk.atelier .lg-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
  body.desk.atelier .lg-chip.on b{color:var(--gold)}
  body.desk.atelier .lg-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
  body.desk.atelier .lg-mn{margin-inline-start:-4px;font-size:var(--fs-xs);font-weight:600;color:var(--warn);background:var(--warn-bg);
    border-radius:999px;padding:1px 6px}
  body.desk.atelier .lg-tools{display:flex;gap:6px;align-items:center}
  body.desk.atelier .lg-hint{font-size:var(--fs-sm);color:var(--text-3);margin:2px 2px 8px}
  body.desk.atelier .lg-at td{vertical-align:middle}
  body.desk.atelier .lg-at .lg-d{font-weight:600;color:var(--ink)}
  body.desk.atelier .lg-at .lg-ref{font-size:var(--fs-xs);color:var(--text-2)}
  body.desk.atelier .lg-at .lg-pool{font-size:var(--fs-sm);color:var(--text-2)}
  body.desk.atelier .lg-at .lg-amt{font-weight:600;color:var(--ink)}
  body.desk.atelier .lg-at .lg-part{color:var(--text-3);font-size:var(--fs-sm);padding-inline-start:10px}
  body.desk.atelier .lg-at tr:has(.lg-part)>td{background:var(--bg);color:var(--text-2)}
  body.desk.atelier .lg-at td.dt-ed .ie-miss+.ie-pen{display:none}
}

/* ═══ 2.2.53 · عهدةُ شخص: خطٌّ زمنيّ عموديّ، والمنقولُ إلى اعتمادات بجانبه ·
   a person's custody: a vertical timeline, what moved to drawdowns beside it ═══ */
.cp-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.cp-mv{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px;border-radius:var(--rad-m);font-size:var(--fs-sm);color:var(--text-2)}
.cp-mv:hover{background:var(--bg)}
.cp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cp-k{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;color:var(--text-3)}
.cp-n{margin:2px 0 0;font-size:var(--fs-3xl);color:var(--ink)}
.cp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cp-tiles{margin-bottom:10px}
.cp-ccy{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-2);margin:0 2px 16px}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media(min-width:900px){.cp-grid{grid-template-columns:minmax(0,3fr) minmax(300px,2fr)}
  .cp-side{position:sticky;top:12px}}
.cp-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:var(--fs-md);color:var(--ink)}
.cp-h .mono{font-size:var(--fs-xs);color:var(--text-3)}
.cp-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
/* الخيطُ الذي يصل الحركات، متّصلاً عبر الشهور · the thread that links the movements,
   unbroken across the months */
.cpt-w{position:relative}
.cpt-w::before{content:"";position:absolute;top:10px;bottom:18px;inset-inline-start:10px;width:2px;border-radius:2px;
  background:linear-gradient(var(--gold),var(--line))}
.cpt-m{position:relative;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:var(--gold-ink);margin:14px 0 4px;padding-inline-start:30px}
.cpt-m:first-child{margin-top:0}
.cpt-m::before{content:"";position:absolute;inset-inline-start:6px;top:50%;width:10px;height:10px;margin-top:-5px;
  background:var(--gold);transform:rotate(45deg);border-radius:2px}
.cpt{list-style:none;margin:0;padding:0;position:relative}
.cpt-n{position:relative;padding-inline-start:30px;padding-block:5px}
.cpt-dot{position:absolute;inset-inline-start:4px;top:18px;width:14px;height:14px;border-radius:50%;
  background:var(--card);border:3px solid var(--text-3);box-sizing:border-box}
.cpt-float .cpt-dot{border-color:var(--ok);background:var(--ok)}
.cpt-spend .cpt-dot{border-color:var(--ink)}
.cpt-pending .cpt-dot,.cpt-topay .cpt-dot{border-color:var(--warn)}
.cpt-rejected .cpt-dot{border-color:var(--bad)}
.cpt-request .cpt-dot{border-style:dashed}
.cpt-c{display:flex;flex-direction:column;gap:4px;width:100%;text-align:start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r,10px);padding:10px 12px;min-height:44px;transition:border-color var(--m-1,.12s) var(--ease,ease)}
.cpt-c:hover{border-color:var(--gold)}
.cpt-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cpt-t{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpt-a{font-weight:600;white-space:nowrap}
.cpt-float .cpt-a{color:var(--ok)}
.cpt-pending .cpt-a,.cpt-topay .cpt-a{color:var(--warn)}
.cpt-rejected .cpt-a{color:var(--text-3);text-decoration:line-through}
.cpt-s{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-2)}
.cpt-b{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--text-3)}
.cpt-b b{color:var(--text-2)}
.cpt-hx{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding-top:6px;border-top:1px dashed var(--line);font-size:var(--fs-xs);color:var(--text-3)}
.cpt-hx b{color:var(--text-2);font-weight:600}
.cp-side-s{font-size:var(--fs-sm);color:var(--text-3);margin:-4px 0 10px}
.cp-empty{font-size:var(--fs-sm);color:var(--text-3);padding:14px;border:1px dashed var(--line);border-radius:var(--r,10px);text-align:center}
.cpd{background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--gold);border-radius:var(--r,10px);padding:10px 12px;margin-bottom:10px}
.cpd-h{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:32px;color:var(--ink);font-size:var(--fs-base)}
.cpd-h:hover{color:var(--gold-ink)}
.cpd-r{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}
.cpd-p{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.cpd-l{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.cpd-l button{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;width:100%;min-height:32px;
  font-size:var(--fs-sm);text-align:start;color:var(--text-2);padding:4px 0;border-bottom:1px dashed var(--line)}
.cpd-l li:last-child button{border-bottom:0}
.cpd-l button span[dir=auto]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpd-l button:hover{color:var(--ink)}

/* 2.2.54 · العرضُ الافتراضيّ: نجمةٌ على العرض · the default view: a star on the view */
.vstar{display:inline-flex;align-items:center;justify-content:center;min-width:28px;align-self:stretch;
  color:var(--text-3);font-size:var(--fs-md);line-height:1;border-inline-start:1px solid var(--line)}
.vstar:hover{color:var(--gold-ink)}
.vstar.on{color:var(--gold)}
.vchip.on .vstar{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.2)}
.vchip.on .vstar.on{color:var(--gold)}
.lp-v .vstar{border:0;min-width:22px;height:22px;opacity:.55}
.lp-v .vstar.on,.lp-v:hover .vstar{opacity:1}

/* 2.2.54 · تخصيصُ الرئيسية، والذممُ حين لا شيء مفتوح · customising home, and receivables when nothing is open */
.cmd-cust{display:flex;justify-content:flex-end;margin:0 0 8px}
.cmd-empty{font-size:var(--fs-base);color:var(--text-2);line-height:1.6;padding:6px 2px}
.cmd-empty small{color:var(--text-3)}
.cmd-agt{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-size:var(--fs-sm);color:var(--text-2)}

/* 2.2.56 · شريطُ الأشخاص في سجلّ العهدة · the people strip on the custody timeline */
.cp-head{align-items:center}
.cp-ppl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:2px 0;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cp-ppl::-webkit-scrollbar{display:none}
.cp-pp{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:52px;padding-block:6px;
  padding-inline:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:999px;
  scroll-snap-align:start;text-align:start;transition:border-color var(--m-1,.12s) var(--ease,ease),background var(--m-1,.12s) var(--ease,ease)}
.cp-pp:hover{border-color:var(--gold)}
.cp-pp:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cp-av{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--ink);font-weight:600;font-size:var(--fs-md)}
.cp-pp.me .cp-av{background:var(--gold);color:#fff}
.cp-pt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cp-pn{font-size:var(--fs-base);font-weight:600;color:var(--ink);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.cp-pn small{font-size:var(--fs-xs);font-weight:600;color:var(--gold-ink)}
.cp-pb{font-size:var(--fs-sm);color:var(--text-3)}
.cp-pp.on{background:var(--ink);border-color:var(--ink)}
.cp-pp.on .cp-pn{color:#fff}
.cp-pp.on .cp-pn small{color:var(--gold)}
.cp-pp.on .cp-pb{color:rgba(255,255,255,.7)}
.cp-pp.on .cp-av{background:rgba(255,255,255,.14);color:#fff}
.cp-pp.on.me .cp-av{background:var(--gold)}
.cp-dot{position:absolute;top:6px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--card)}
.cp-pp.on .cp-dot{box-shadow:0 0 0 2px var(--ink)}

/* ═══ 2.2.58 · حركةُ العهدة: أزرارٌ أقلّ صخباً، وقائمةٌ بالزرّ الأيمن · the custody movement:
   quieter buttons, and a right-click menu ═══ */
.mv-acts{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.mv-dec{display:flex;gap:8px;flex-wrap:wrap}
.mv-dec .btn{flex:1 1 0;min-width:120px}
.mv-more{display:flex;gap:var(--s2) var(--s3);flex-wrap:wrap;align-items:center;justify-content:space-between}
.mv-fix,.mv-end{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.mv-end{margin-inline-start:auto}
.mv-more .btn-sm,.mv-more .tag{min-height:36px}
.mv-page{max-width:760px}
/* القائمة على كلّ عرض: كانت أنماطُها فوق 1100 بكسل وحدها · the menu at any width: its
   styles lived above 1100px alone */
.ctxmenu{position:fixed;z-index:95;min-width:220px;max-width:320px;padding:5px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);
  box-shadow:0 14px 40px rgba(15,32,59,.2)}
.ctxmenu button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  min-height:34px;padding:6px 10px;border-radius:var(--rad-m);text-align:start;font-size:var(--fs-base);color:var(--text)}
.ctxmenu button:hover,.ctxmenu button:focus-visible{background:var(--gold-soft);outline:0}
.ctxmenu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.ctxmenu button.dng{color:var(--bad)}
.ctxmenu button.dng:hover,.ctxmenu button.dng:focus-visible{background:var(--bad-bg)}
/* الخطُّ الزمنيّ: الردُّ نقطةٌ زرقاء هادئة · the timeline: a return is a quiet blue dot */
.cpt-return .cpt-dot{border-color:var(--ink-3);background:#E9EFF9}
.cpt-return .cpt-a{color:var(--text-2)}

/* ═══ 2.2.59 · مسارُ الدفعة · the payment journey — ⚠ 2.2.60: `jr`, never `pj`: the payment
   sheet's project column is `pq-pj`, and a bare `.pj` grid stacked its letters ═══ */
.jr{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;padding:16px 18px 6px;border-top:1px solid var(--line-2)}
@media(min-width:900px){.jr{grid-template-columns:minmax(0,1fr) minmax(240px,320px)}.jr-side{position:sticky;top:12px}}
.jr-c{cursor:default}
.jr-c:hover{border-color:var(--line)}
.jr-when{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.jr-ago{margin-inline-start:6px;color:var(--text-3)}
.jr-note{font-size:var(--fs-base);color:var(--text-2);line-height:1.5;padding:6px 8px;background:var(--bg);border-radius:var(--rad-m)}
.jr-chg{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--text-3)}
.jr-chg s{color:var(--text-3)}
.jr-ok .cpt-dot{border-color:var(--ok);background:var(--ok)}
.jr-bad .cpt-dot{border-color:var(--bad);background:var(--bad)}
.jr-warn .cpt-dot{border-color:var(--warn);background:var(--card)}
.jr-note .cpt-dot,.jr-mut .cpt-dot{border-color:var(--text-3)}
.jr-l{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;width:100%;text-align:start;
  background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--gold);border-radius:var(--r,10px);
  padding:9px 12px;margin-bottom:8px;min-height:44px}
.jr-l:hover{border-color:var(--gold)}
.jr-lk{grid-column:1;font-size:var(--fs-xs);font-weight:600;color:var(--gold-ink)}
.jr-lt{grid-column:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.jr-lt b{color:var(--ink);font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-lt small{font-size:var(--fs-sm);color:var(--text-3)}
.jr-la{grid-column:2;grid-row:1/3;align-self:center;color:var(--text-3);font-size:var(--fs-xl)}
.jr-help{font-size:var(--fs-sm);color:var(--text-3);line-height:1.6;margin-top:6px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r,10px)}

/* ═══ 2.2.62 · رأسُ مركز الفرع سطرٌ واحد في كلّ شكل · the branch hub's head is one line
   in every look ═══ */
#view .bh-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);padding:6px 8px 6px 10px;padding-inline:10px 6px}
#view .bh-bar .pfilter{margin:0!important}
#view .bh-bar .mpick{display:inline-flex;width:auto;margin:0;padding:0;gap:4px;border:0;box-shadow:none;background:none}
#view .bh-bar .mpick .mp-a{width:36px;height:36px;font-size:var(--fs-xl);border-radius:var(--rad-m)}
#view .bh-bar .mpick .mp-l{flex:0 0 auto;min-width:96px;font-size:var(--fs-md)}
.bh-name{font-weight:600;color:var(--ink);font-size:var(--fs-md);padding-inline:4px}
.bh-mgr{font-size:var(--fs-base);color:var(--text-2);padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.bh-none{color:var(--warn)}
#view .bh-bar .ts-sp{flex:1 1 0}

/* ═══ 2.2.63 · الأوراقُ في الأسفل، فوق شريط الحال · the tabs at the foot, above the status
   bar ═══ الرأسُ للعنوان والبحث و«جديد» والجرس وحدها، والأوراقُ شريطٌ ثابت فوق شريط الحال
   تتدلّى من حافّته العليا. وكلُّ ما يعوم في الأسفل يرتفع بارتفاعه (34 بكسل). ⚠ ثابتٌ
   خارج الشبكة، فلا يأخذ خانةً في ‎#app‎. The header keeps the title, search, New and the
   bell alone; the tabs are a fixed strip above the status bar, hanging from its top
   edge. Everything floating at the foot rises by its height (34px). ⚠ Fixed, outside the
   grid, so it takes no cell in #app. */
@media(min-width:1100px){
  body.desk.atelier #rtabs{position:fixed;bottom:26px;inset-inline-start:56px;inset-inline-end:0;height:34px;z-index:44;
    margin:0;padding:0 12px;display:flex;align-items:flex-start;align-self:auto;gap:3px;flex:none;
    background:var(--dk-rail);border-top:1px solid var(--dk-line)}
  body.desk.atelier #rtabs:empty{display:none}
  body.desk.atelier #rtabs .rt{height:30px;border:1px solid var(--dk-line);border-top:0;border-radius:0 0 var(--rad-m) var(--rad-m);background:transparent}
  body.desk.atelier #rtabs .rt.on,body.desk.atelier #rtabs .rt.cur{background:var(--dk-surf);box-shadow:inset 0 -2px 0 var(--gold)}
  body.desk.atelier #rtabs .rt-o,body.desk.atelier #rtabs .rt-x{min-height:28px}
  body.desk.atelier main{padding-bottom:124px}
  body.desk.atelier #appfoot{padding-bottom:64px}
  body.desk.atelier .selbar{bottom:74px}
  body.desk.atelier #toast{bottom:74px}
}

/* 2.2.63 · بطاقاتُ المسار في «المال»: النصُّ الصغير يُقرأ — كان رماديّاً بحجم 11 بكسل ·
   the Money flow cards: the small text is readable — it was 11px grey.
   ⚠ والنقطةُ في سجلّ التغييرات داخل البطاقة (‎.hist-b‎ مُزاحٌ 5 بكسل): كانت تتجاوز خطَّها
   بـ٢ بكسل فتقصّها حافّةُ البطاقة · and the history dot sits inside the card (.hist-b
   inset 5px): it passed its own line by 2px and the card's edge cut it in half */
@media(min-width:1100px){
  body.desk.atelier .mk-l{font-size:var(--fs-base);color:var(--ink-2)}
  body.desk.atelier .mk-n{font-size:var(--fs-base);color:var(--ink-2)}
  body.desk.atelier .mk-s{font-size:var(--fs-sm);color:var(--text-2)}
}

/* ═══ 2.2.64 · نظامُ البطاقات (docs/DESIGN.md) · the card system ═══════════════════════
   سجلٌّ واحد = بطاقةٌ واحدة: رأسٌ (الحالة، العنوان، المبلغ) ثمّ صفوفٌ تفصلها شعرةٌ،
   بلا خطٍّ فوق الصفّ الأوّل، وشريطُ لونٍ على حافّة البطاقة كلّها. One record = one card:
   a head (status, title, amount), then rows separated by a hairline, no line above the
   first row, and a colour bar on the whole card's edge. */
.rec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;
  border-inline-start:3px solid var(--line)}
.rec-warn{border-inline-start-color:color-mix(in srgb,var(--gold) 50%,var(--card))}
.rec-ok{border-inline-start-color:color-mix(in srgb,var(--ok) 50%,var(--card))}
.rec-bad{border-inline-start-color:color-mix(in srgb,var(--bad) 50%,var(--card))}
.rec-info{border-inline-start-color:var(--ink-3)}
.rec-h{padding:var(--s4)}
.rec-top{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.rec-t{font-size:var(--fs-body);font-weight:600;line-height:1.45;color:var(--ink)}
.rec-amt{font-size:25px;font-weight:600;letter-spacing:-.6px;margin-top:var(--s2);color:var(--ink)}
.rec-sub{font-size:var(--fs-base);color:var(--text-3);margin-top:2px}
.rec-kv{border-top:1px solid var(--line-2)}
.rec-r{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);min-height:44px}
.rec-r+.rec-r{border-top:1px solid var(--line-2)}
.rec-l{font-size:var(--fs-base);color:var(--text-2)}
.rec-v{font-size:var(--fs-md);font-weight:600;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}
/* الحركة: القرارُ ثمّ التصحيحاتُ ثمّ السجلّ، ١٢ بكسل بين كلٍّ، بلا خطّ فوقها · the movement:
   decision, corrections, history, 12px apart, no line above them */
.mv-acts+.hist,.rec+.hist{border-top:0;margin-top:var(--s4);padding-top:0}
.mv-dec .btn{min-height:44px}
.mv-page{max-width:760px}
.mono.ref{font-size:var(--fs-sm)}
/* أزرارُ المرشّح على الهاتف: هدفٌ لا يقلّ عن ٣٦ بكسل (§4) · filter pills on the phone: a
   target of 36px at least */
@media(max-width:899px){.pfilter button,.lp-pill,.ts-seg button{min-height:36px}}
/* بطاقةٌ داخل بطاقة بلا ظلٍّ ولا إطارٍ خاصّ (§3) · a card inside a card has no shadow nor border of its own */
.acc-b .tile,.card .tile,.rec .tile{box-shadow:none;border-color:var(--line-2);background:#FAF9F6}
/* أصغرُ نصٍّ ١١٫٥ (§7) · the smallest text is 11.5px */
.cp-k,.cpt-b,.cpt-m,.cp-h .mono{font-size:var(--fs-sm)}

/* §7 · نصُّ القراءة لا ينزل عن ١١٫٥ بكسل. ⚠ الاستثناءُ الضيّق (١٠ بكسل على الأقلّ): الشاراتُ
   العدديّة وحرفُ الدرجة، وتلميحاتُ المفاتيح، وتسمياتُ الشريط السفليّ، ورأسُ شبكة ساعات
   العمل، وأرقامُ الرسوم داخل الأعمدة — لا نصَّ قراءةٍ فيها · reading text never below
   11.5px. ⚠ The narrow exception (10px at least): count badges and the grade letter,
   key hints, bottom-bar captions, the timesheet grid head, chart data labels — none of
   them reading text. */
.pcard-figs .l,.track-lab,.tile .n,.hist-d,.why-b,.flow-w,.ask-card .s,.ask-trk .ts,.rql-h,.pc-lh,
.pal-c,.pal-esc,.st-nav>button b,.cm-sub{font-size:var(--fs-sm)}
table.ctab th{font-size:var(--fs-sm)}
table.ctab .tag{font-size:var(--fs-sm);padding:1px 7px}
.grade{font-size:var(--fs-xs)}
/* §3 · بطاقةٌ داخل طيّةٍ بلا إطارٍ ولا ظلّ خاصّين — الطيّةُ هي البطاقة · a card inside a
   fold has no border nor shadow of its own — the fold is the card */
.acc-b .card{box-shadow:none;border:0;border-radius:0}

/* §7 على المنضدة · on the desk — نصُّ القراءة ١١٫٥ على الأقلّ، والكثافةُ في المسافات لا في
   الحروف. خارجَها عمداً (الاستثناء): ‎kbd‎ وشاراتُ العدد والحروفُ الأولى وشريطُ الحال وشبكةُ
   الساعات وتعليقاتُ الرسوم · reading text at 11.5px at least, density in the spacing not in
   the letters. Deliberately outside it (the exception): kbd, count badges, initials, the
   status bar, the timesheet grid and chart annotations. */
@media(min-width:1100px){
  body.desk.atelier .tile .n,
  body.desk.atelier #view .tiles>.tile .n,
  body.desk.atelier .mins-h,
  body.desk.atelier .insp-h,
  body.desk.atelier .insp-kv span,
  body.desk.atelier .insp-sub,
  body.desk.atelier .dgrp-l,
  body.desk.atelier .lp-t,
  body.desk.atelier .apq-h,
  body.desk.atelier .apq-t,
  body.desk.atelier .apd-h,
  body.desk.atelier .apd-kv span,
  body.desk.atelier table.cmp td small,
  body.desk.atelier table.dt th,
  body.desk.atelier table.dt .dt-sub,
  body.desk.atelier .qadd-l,
  body.desk.atelier .is-h,
  body.desk.atelier .il-w,
  body.desk.atelier .lp-h2,
  body.desk.atelier #view .lrow-s,
  body.desk.atelier .sheet.nb-sheet .nrow .ns,
  body.desk.atelier .lp-fn,
  body.desk.atelier .lp-ctx-h span,
  body.desk.atelier .ag-k,
  body.desk.atelier .lp-bh,
  body.desk.atelier .lp-sn,
  body.desk.atelier .lp-box .lp-h2,
  body.desk.atelier .lp-box .lp-g .dgrp button,
  body.desk.atelier .pg-gantt .tl-sub .tl-r,
  body.desk.atelier .lg-at .lg-ref,
  body.desk.atelier .mk-s,
  body.desk.atelier .lg-mn,
  body.desk.atelier .cmd-ag small{font-size:var(--fs-sm)}
}

/* ═══ 2.2.65 · سجلُّ الاعتماد — على هيئة سجلّ العهدة · the drawdown timeline, in the
   custody timeline's shape ═══ */
.dl-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-base);color:var(--text-2);margin-top:4px}
.dl-bar{margin:0 0 var(--s4,16px)}
.dl .cpd-l{margin-top:var(--s2,8px)}
.dl .cpd-l button,.dl .cpd-l .dlt-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;
  min-height:32px;font-size:var(--fs-sm);text-align:start;color:var(--text-2);padding:4px 0;border-bottom:1px dashed var(--line)}
.dl .cpd-l li:last-child>*{border-bottom:0}
.dl .cpd-l span[dir=auto]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlt-receipt .cpt-dot{border-color:var(--info,var(--ink-3))}
.dlt-moved .cpt-dot{border-color:var(--warn)}
.dlt-conv .cpt-dot{border-color:var(--ok);background:var(--ok)}
.dlt-ret .cpt-dot{border-color:var(--text-3);border-style:dashed}
.jr-paid .cpt-dot{border-color:var(--gold);background:var(--gold)}
.dl-pp .cp-av{font-family:var(--font-num);font-size:var(--fs-sm)}

/* ═══ 2.2.66 · شريطُ الفريق في سجلّ العهدة · the team bar on the custody timeline ═══ */
.cp-team{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2,8px) var(--s4,16px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r,10px);padding:10px 14px;margin:0 0 14px}
.cp-team-f{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-base);color:var(--text-2)}
.cp-team-f b{color:var(--ink)}
.cp-team-a{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.cp-mvb{flex:1 1 100%;border-top:1px solid var(--line);padding-top:8px}
.cp-mvb>summary{cursor:pointer;font-size:var(--fs-base);font-weight:600;color:var(--gold-ink);min-height:32px;display:flex;align-items:center}

/* 2.2.66 · «≈» دولارٌ مقدَّر بسعر اليوم، وأزرارُ العملة · "≈" a dollar estimated at today's
   rate, and the currency buttons */
.fx-est{color:var(--warn);font-weight:600;margin-inline-end:2px}
.fx-note{font-size:var(--fs-sm);color:var(--text-3);margin:0 2px 14px}
.ccy-f{margin-bottom:10px}

/* 2.2.67 · «اجعله الافتراضيّ» و«إعادة» · «make this default» and «reset» */
.vdef{display:contents}
.vdef-on{color:var(--gold-ink)!important;font-weight:600}
.vdef-rs{color:var(--text-3)!important}
#tb-tools .tb-tx{width:auto;padding-inline:8px;font-size:var(--fs-sm);white-space:nowrap;gap:4px}

/* ═══ 2.2.68 · إدارةُ العمل · WORK MANAGEMENT ══════════════════════════════
   صفحةُ المهمّة (tkp-) وقائمةُ التحقّق (tck-) والحديث (tkc-) واللوحة (tkb-)
   والتقويم (tkcal-). كلٌّ ببادئته (docs/DESIGN.md §10). على الهاتف عمودٌ واحد
   وأهدافٌ ٤٤ بكسل؛ واللوحةُ والتقويمُ يتمرّران داخل إطارهما لا الصفحة.
   The task page (tkp-), the checklist (tck-), the thread (tkc-), the board
   (tkb-) and the calendar (tkcal-), each under its own prefix. One column and
   44px targets on a phone; the board scrolls inside its frame, never the page. */
.tk-open{all:unset;cursor:pointer;color:inherit;font:inherit;text-align:start}
.tk-open:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.tk-open:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--rad-s)}
.tk-bits{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.tk-bits.in{display:inline-flex;margin:0 var(--s2) 0 0;vertical-align:middle}
.tk-bit{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-sm);color:var(--text-2);background:var(--line-2);
  border-radius:999px;padding:1px 8px;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-bit.ok{background:var(--ok-bg);color:var(--ok)} .tk-bit.warn{background:var(--warn-bg);color:var(--warn)}
.tk-hint{font-size:var(--fs-sm);color:var(--text-3);margin:var(--s2) 2px var(--s3)}

/* طريقةُ العرض · the way of showing */
.tk-seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.tk-seg button{border:0;background:none;font:inherit;font-size:var(--fs-base);color:var(--text-2);padding:0 14px;min-height:38px;
  border-radius:999px;cursor:pointer}
.tk-seg button.on{background:var(--ink);color:#fff;font-weight:600}

/* ── صفحةُ المهمّة · the task page ── */
.tkp{display:grid;gap:var(--s3)}
.tkp-main,.tkp-side{display:grid;gap:var(--s3);align-content:start;min-width:0}
@media(min-width:900px){.tkp{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .tkp-side{position:sticky;top:var(--s3)}}
.tkp-card,.tkp-h{padding:var(--s4)}
.tkp-h.late{border-inline-start:3px solid var(--bad)}
.tkp-card h3{font-size:var(--fs-base);font-weight:600;color:var(--ink-3);margin:0 0 var(--s2);display:flex;align-items:center;gap:var(--s2)}
.tkp-n{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-3);font-size:var(--fs-sm)}
.tkp-crumb{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--fs-base);color:var(--text-3);margin-bottom:var(--s2)}
.tkp-chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.tkp-t{font-size:var(--fs-2xl);line-height:1.35;font-weight:600;margin:0 0 var(--s3);color:var(--text)}
.tkp-kv{display:grid;gap:0}
.tkp-kv>div{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;border-top:1px solid var(--line-2);font-size:var(--fs-base)}
.tkp-kv>div:first-child{border-top:0}
.tkp-kv span{color:var(--text-2)} .tkp-kv b{font-weight:600;text-align:end}
.tkp-btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.tkp-p{font-size:var(--fs-md);line-height:1.7;color:var(--text)}
.tkp-bar{height:6px;background:var(--line-2);border-radius:var(--rad-s);overflow:hidden;margin:0 0 var(--s2)}
.tkp-bar i{display:block;height:100%;background:var(--ok);border-radius:var(--rad-s)}
.tkp-empty{font-size:var(--fs-base);color:var(--text-3);padding:var(--s2) 0}
.tkp-add{display:flex;gap:var(--s2);margin-top:var(--s2);padding:0;background:none;border:0;flex-wrap:wrap}
.tkp-add input[type=text]{flex:1 1 160px;min-width:0}
.tkp-add input[type=date]{flex:0 0 auto}

/* قائمةُ التحقّق والمهامُّ الفرعيّة — صفٌّ واحد بخطٍّ بين الصفوف · the checklist
   and the subtasks — one row each, a hairline between rows */
.tck{display:flex;align-items:center;gap:var(--s3);min-height:44px;border-top:1px solid var(--line-2)}
.tkp-card h3+.tck,.tkp-bar+.tck{border-top:0}
.tck-b{flex:0 0 auto;width:22px;height:22px;border-radius:var(--rad-s);border:1.5px solid #B9BFC8;background:var(--card);
  display:inline-grid;place-items:center;font-size:var(--fs-base);color:#fff;cursor:pointer;padding:0;position:relative}
button.tck-b::after{content:"";position:absolute;inset:-11px}
.tck.on .tck-b{background:var(--ok);border-color:var(--ok)}
.tck-t{flex:1;min-width:0;font-size:var(--fs-md)}
.tck.on .tck-t{color:var(--text-3);text-decoration:line-through}
.tck-w{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.tck-x{border:0;background:none;color:var(--text-3);font-size:var(--fs-xl);min-width:36px;min-height:36px;cursor:pointer;border-radius:var(--rad-m)}
.tck-x:hover{color:var(--bad);background:var(--bad-bg)}

/* الحديث · the thread */
.tkc{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line-2)}
.tkp-card h3+.tkc{border-top:0}
.tkc-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:var(--fs-base);font-weight:600}
.tkc.mine .tkc-av{background:var(--gold)}
.tkc-b{flex:1;min-width:0}
.tkc-h{font-size:var(--fs-base);color:var(--text-3);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:baseline}
.tkc-h b{color:var(--text);font-weight:600;font-size:var(--fs-base)}
.tkc-ed{font-style:italic}
.tkc-t{font-size:var(--fs-md);line-height:1.6;margin-top:2px;overflow-wrap:anywhere}
.tkc-at{color:var(--ink-3);background:var(--gold-soft);border-radius:var(--rad-s);padding:0 3px}
.tkc.open{background:linear-gradient(to left,transparent,transparent)}
.tkc-f{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.tkc-new{border-top:1px solid var(--line-2);padding-top:var(--s3);margin-top:var(--s1)}
.tkp-card h3+.tkc-new,.tkp-empty+.tkc-new{border-top:0}
.tkc-new textarea{width:100%;resize:vertical;min-height:76px}
.tkc-tools{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.tkc-tools select{flex:1 1 140px;min-width:0}
.tkc-h2{font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--s2)}

/* ── اللوحة · the board ─ تتمرّر داخل إطارها، والعمودُ ٨٥٪ على الهاتف ·
   it scrolls inside its frame; a column is 85% wide on a phone */
.tkb-wrap{overflow-x:auto;margin:0 calc(-1 * var(--s1));padding:0 var(--s1) var(--s2);scroll-snap-type:x mandatory}
.tkb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(84%,1fr);gap:var(--s3)}
@media(min-width:700px){.tkb{grid-auto-columns:minmax(210px,1fr)}}
.tkb-col{background:var(--line-2);border-radius:var(--r);padding:var(--s3);min-height:140px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--s2);border:1px dashed transparent}
.tkb-col.over{border-color:var(--gold);background:var(--gold-soft)}
.tkb-col h3{font-size:var(--fs-base);margin:0 0 var(--s1);display:flex;align-items:center;gap:var(--s2)}
.tkb-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);padding:var(--s3);box-shadow:var(--sh)}
.tkb-card[draggable=true]{cursor:grab}
.tkb-card.dragging{opacity:.5}
.tkb-card.late{border-inline-start:3px solid var(--bad)}
.tkb-t{font-size:var(--fs-md);font-weight:600;line-height:1.4;display:block}
.tkb-s{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.tkb-m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2)}
.tkb-p{font-size:var(--fs-sm);color:var(--text-2)}
.tkb-f{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.tkb-d{font-size:var(--fs-base);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkb-mv{flex:0 1 120px;width:auto;min-width:0;height:36px;min-height:36px;padding-block:0;font-size:var(--fs-base)}
.tkb-empty{font-size:var(--fs-base);color:var(--text-3);text-align:center;padding:var(--s4) 0}
.tkb .tk-avs{display:inline-flex}
.tkb .tk-av{width:24px;height:24px;border-radius:50%;background:var(--ink-2);color:#fff;font-size:var(--fs-sm);font-weight:600;
  display:inline-grid;place-items:center;margin-inline-end:-6px;border:2px solid var(--card)}

/* ── التقويم · the calendar ─ على الهاتف يقول اليومُ عددَه ويُفتح تحته ·
   on a phone a day says its count and opens beneath */
.tkcal{padding:var(--s3)}
.tkcal-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.tkcal-h b{font-size:var(--fs-body)}
.tkcal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.tkcal-w{font-size:var(--fs-sm);color:var(--text-3);text-align:center;padding:var(--s1) 0}
.tkcal-c{min-height:48px;border-radius:var(--rad-m);background:var(--line-2);padding:2px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tkcal-c.off{background:none}
.tkcal-c.we{background:#E9E7E1}
.tkcal-c.now{box-shadow:inset 0 0 0 2px var(--gold)}
.tkcal-c.pick{background:var(--gold-soft)}
.tkcal-n{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:2px;font-size:var(--fs-base);
  font-variant-numeric:tabular-nums;padding:2px 4px;min-height:24px;border-radius:var(--rad-s)}
.tkcal-n:focus-visible{outline:2px solid var(--gold)}
.tkcal-k{font-size:var(--fs-sm);background:var(--ink);color:#fff;border-radius:999px;padding:0 6px;line-height:18px}
.tkcal-k.bad{background:var(--bad)}
.tkcal-t,.tkcal-more{display:none}
/* 3.2.37 · the span switch, the day's +, and the week spans (every task of the day written) */
.tkcal-h{flex-wrap:wrap}
.tkcal-sp{margin-inline-start:auto;margin-inline-end:var(--s2)}
.tkcal-nr{display:flex;align-items:center;gap:2px}
.tkcal-nr .tkcal-n{flex:1}
.tkcal-wd{display:none;font-weight:600}
.tkcal-add{all:unset;cursor:pointer;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--card);font-weight:600;flex:none}
.tkcal-add:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.tkcal-ph{display:inline-flex;align-items:center;gap:var(--s2);margin-inline-start:auto;font-size:var(--t-ca);color:var(--text-3)}
.tkcal-sw .tkcal-c,.tkcal-s2w .tkcal-c{min-height:140px}
.tkcal-sw .tkcal-c{min-height:260px}
.tkcal-sw .tkcal-t,.tkcal-s2w .tkcal-t{display:block;all:unset;cursor:pointer;font-size:var(--fs-sm);line-height:1.35;background:var(--card);border-radius:var(--rad-s);
  padding:3px 6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-inline-start:3px solid var(--gold);white-space:normal}
.tkcal-sw .tkcal-t.bad,.tkcal-s2w .tkcal-t.bad{border-inline-start-color:var(--bad)}
.tkcal-sw .tkcal-t.done,.tkcal-s2w .tkcal-t.done{color:var(--text-3);text-decoration:line-through;border-inline-start-color:var(--ok)}
.tkcal-sw .tkcal-k,.tkcal-s2w .tkcal-k{display:inline}
/* on a phone the week is a list of days, one under the other */
@media(max-width:899px){
  .tkcal-sw .tkcal-g,.tkcal-s2w .tkcal-g{grid-template-columns:minmax(0,1fr)}
  .tkcal-sw .tkcal-w,.tkcal-s2w .tkcal-w{display:none}
  .tkcal-sw .tkcal-wd,.tkcal-s2w .tkcal-wd{display:inline}
  .tkcal-sw .tkcal-c,.tkcal-s2w .tkcal-c{min-height:0;padding:var(--s2)}
  .tkcal-sp{order:3;flex-basis:100%;margin:var(--s2) 0 0}}
@media(min-width:900px){
  .tkcal-c{min-height:96px}
  .tkcal-t{display:block;all:unset;cursor:pointer;font-size:var(--fs-sm);line-height:1.35;background:var(--card);border-radius:var(--rad-s);
    padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-inline-start:3px solid var(--gold)}
  .tkcal-t.bad{border-inline-start-color:var(--bad)}
  .tkcal-t.done{color:var(--text-3);text-decoration:line-through;border-inline-start-color:var(--ok)}
  .tkcal-more{display:block;all:unset;cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);padding:0 5px}
  .tkcal-k{display:none}
}
@media(prefers-reduced-motion:reduce){.tkb-card.dragging{opacity:.5}}
/* 2.2.71 · اللوحةُ أكثف على الشاشة: بطاقةٌ أنحف ومنتقٍ بثلاثين بكسل · the board denser on a
   screen: a slimmer card, a 30px picker */
@media(min-width:900px){
  .tkb-col{padding:var(--s2)}
  .tkb-card{padding:10px 12px;border-radius:var(--rad-m)}
  .tkb-t{font-size:var(--fs-md)}
  .tkb-m,.tkb-f{margin-top:6px}
  .tkb-mv{height:30px;min-height:30px;flex-basis:110px}
  .tkb-empty{padding:var(--s3) 0}
}

/* ═══ 2.2.69 · رأسُ المهامّ وجدولُها · the tasks head and table ═════════════
   شريطٌ واحد يحمل طريقةَ العرض والحالةَ بأعدادها ولمن والتجميعَ والبحث — بدل ستّة
   صناديق متراكبة كانت تأكل ثلثَ الشاشة قبل أوّل مهمّة. والخلايا التي تُحرَّر بنقرة
   (‎td.ie1‎) تقول ذلك عند المرور. بادئةُ الرأس ‎tkh-‎ (docs/DESIGN.md §10).
   One bar holding the way of showing, the status with its counts, whose, grouping and
   search — instead of six stacked boxes that ate a third of the screen before the first
   task. Cells edited on one click (td.ie1) say so on hover. The head's prefix is tkh-. */
.tkh{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:var(--s3)}
.tkh-p .pfilter,.tkh-lists .pfilter{margin:0}
.tkh-lists{display:flex;gap:6px;align-items:center;min-width:0}
.tkh-lists .pfilter{flex:1 1 auto;min-width:0}
.tkh-lists .btn{flex:0 0 auto;white-space:nowrap}
/* ⚠ 2.2.71 · سطران مسطّحان بلا إطار · two flat lines, no frame */
.tkh-r{display:flex;gap:var(--s2);align-items:center;min-width:0}
.tkh-r1 .tkh-p{flex:1 1 auto;min-width:0}
.tkh-gap{flex:1 1 auto}
.tkh-r2{border-bottom:1px solid var(--line);padding-bottom:6px}
.tkh-sep{flex:0 0 1px;align-self:stretch;background:var(--line);margin-block:4px}
.tkh-r .tk-seg{flex:0 0 auto;border:0;background:var(--line-2);padding:2px}
/* لمن والحالة شريطٌ واحد يتمرّر جانبيّاً · whose and the status are one strip, scrolling
   sideways */
.tkh-chips{display:flex;align-items:center;gap:var(--s2);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tkh-chips::-webkit-scrollbar{display:none}
.tkh-cs{display:flex;gap:2px;flex:0 0 auto}
.tkh-c{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;font:inherit;font-size:var(--fs-base);
  font-weight:600;color:var(--text-2);padding:0 9px;min-height:36px;border-radius:var(--rad-s);cursor:pointer;white-space:nowrap}
.tkh-c:hover{background:var(--line-2);color:var(--text)}
.tkh-c b{font-weight:600;font-size:var(--fs-sm);background:var(--line-2);color:var(--text-2);border-radius:999px;padding:0 6px;line-height:18px}
.tkh-c.bad b{background:var(--bad-bg);color:var(--bad)} .tkh-c.warn b{background:var(--warn-bg);color:var(--warn)}
.tkh-c.on{background:var(--ink);color:#fff} .tkh-c.on b{background:rgba(255,255,255,.2);color:#fff}
.tkh-end{display:flex;gap:6px;align-items:center;margin-inline-start:auto;flex:0 0 auto}
.tkh-dd{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card);
  padding-inline-start:9px;font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.tkh-dd select{border:0;background-color:transparent;width:auto;min-width:0;font-weight:600;color:var(--text);box-shadow:none}
.tkh-q{min-width:0;width:180px}
.tkh-ai{white-space:nowrap}
/* على الهاتف: كلُّ شريطٍ سطرٌ يتمرّر جانبيّاً، والأهدافُ ٣٦ بكسل، والحقولُ ١٦ بكسل (iOS) · on a
   phone each strip is one sideways-scrolling line, targets 36px, fields 16px (iOS zooms
   otherwise) */
@media(max-width:899px){
  .tkh-r{flex-wrap:wrap;gap:6px}
  .tkh-r .tk-seg{width:100%;justify-content:space-between}
  .tkh-r .tk-seg button{flex:1 1 0;padding:0 6px;min-height:36px}
  .tkh-r1 .tkh-p{flex-basis:100%}
  .tkh-gap{display:none}
  .tkh-chips{flex-basis:100%}
  .tkh-r1 .tkh-end{margin-inline-start:0;width:100%}
  .tkh-r2 .tkh-end{margin-inline-start:0;width:100%}
  .tkh-dd{flex:1 1 140px}
  .tkh-dd select{flex:1 1 auto;min-height:36px}
  .tkh-q{flex:1 1 auto;width:auto}
}
/* على الشاشة: ٣٠ بكسل، والنصّ المساعد يُطوى حين يضيق · on a screen: 30px, and helper labels
   fold away when it narrows */
@media(min-width:900px){
  .tkh-r .tk-seg button{min-height:30px;padding:0 11px;font-size:var(--fs-base)}
  .tkh-c{min-height:30px}
  .tkh-dd select{height:30px;min-height:30px;padding-block:0;font-size:var(--fs-base)}
  .tkh-q{height:32px;min-height:32px;font-size:var(--fs-base);padding-block:0}
  .tkh-end .btn-sm{min-height:32px;height:32px}
  .tkh-p .pfilter button,.tkh-lists .pfilter button{min-height:calc(var(--h-m) - 4px);height:calc(var(--h-m) - 4px);padding:0 11px}
  .tkh-p .pf-l,.tkh-lists .pf-l{display:none}
}
@media(min-width:900px) and (max-width:1399px){
  .tkh-lb{display:none}
  .tkh-q{width:140px}
}
/* مجموعاتُ بطاقات الهاتف · the phone's card groups */
.tk-gh{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-base);font-weight:600;color:var(--ink-3);margin:var(--s4) 2px var(--s2)}
.tk-gh::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--text-3);transform:rotate(45deg)}
.tk-gh.bad::before{background:var(--bad)} .tk-gh.warn::before{background:var(--warn)}
.tk-gh.ok::before{background:var(--ok)} .tk-gh.info::before{background:var(--ink-3)}
.tk-gh b{font-weight:500;color:var(--text-3)}
/* الجدول · the table */
.tk-pill{display:inline-flex;align-items:center;gap:3px;padding:0 9px;line-height:22px;border-radius:var(--rad-s);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.tk-nm{display:inline-flex;align-items:center;gap:8px;min-width:0}
.tk-fl{font-size:var(--fs-base);white-space:nowrap} .tk-fl.hi{color:var(--bad);font-weight:600}
.tk-fl.lo{color:var(--text-3)} .tk-fl.n{color:var(--line)}
.tk-ls{font-size:var(--fs-sm);color:var(--text-2);background:var(--line-2);border-radius:var(--rad-s);padding:1px 8px;white-space:nowrap}
.tk-dep{font-size:var(--fs-sm);color:var(--warn);white-space:nowrap} .tk-dep.ok{color:var(--ok)}
.tk-dt{font-size:var(--fs-base);color:var(--text-2)}
.tk-who{display:inline-flex;align-items:center;gap:6px}
table.dt .tk-av{width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;font-size:var(--fs-xs);font-weight:600;
  display:inline-grid;place-items:center;border:2px solid var(--card)}
table.dt .tk-av+.tk-av{margin-inline-start:-7px}
table.dt td.ie1{cursor:pointer}
table.dt td.ie1:hover{background:var(--line-2)}
table.dt td.ie1:hover .tk-fl.n{color:var(--text-3)}
.tk-tl{padding:var(--s3) var(--s2)}
.tkp-sub{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin:var(--s2) 0 0;letter-spacing:.02em}
/* ⚠ اللوحةُ الجانبيّة تتمرّر وحدها ولا تجرّ الصفحةَ معها · the side pane scrolls on its
   own and never drags the page along with it */
#lpane{overscroll-behavior:contain}
/* ⚠ رؤوسُ الأعمدة تبقى ظاهرةً فوق المجموعات: بها يُعرف العمودُ ويُفرز ويُخفى · the column
   heads stay visible above the groups: they name the column, sort it and hide it */
@media(min-width:1100px){
  body.desk.atelier .dt-sep.tk-tbl thead{display:table-header-group}
  body.desk.atelier .dt-sep.tk-tbl thead th{background:transparent;border:0;font-size:var(--fs-sm);font-weight:600;color:var(--text-3);
    padding-block:2px 6px}
}
.tk-nm .tk-bits.in{flex-wrap:nowrap}

/* ═══ 2.2.70 · بطاقةُ المهمّة السريعة، الشريطان، مصفوفةُ المهامّ · the task quick card, the
   two chip rows, the tasks matrix ═══ prefixes tkpk- · tkh- · tm- (docs/DESIGN.md §10) */
.tkh-w{color:var(--ink-2)}
.tkh-c{transition:background-color var(--m-1) var(--ease),color var(--m-1) var(--ease)}
/* البطاقةُ السريعة · the quick card */
.sheet.tk-peek .sheet-b{padding-top:var(--s2)}
@media(min-width:900px){.sheet.tk-peek{max-width:560px}}
.tkpk-chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.tkpk-kv{display:grid}
.tkpk-r{display:flex;justify-content:space-between;gap:var(--s3);padding:8px 0;border-top:1px solid var(--line-2);font-size:var(--fs-base)}
.tkpk-r:first-child{border-top:0}
.tkpk-r span{color:var(--text-2)} .tkpk-r b{font-weight:600;text-align:end;min-width:0;overflow-wrap:anywhere}
.tkpk-d{font-size:var(--fs-md);line-height:1.65;color:var(--text);background:var(--line-2);border-radius:var(--rad-m);padding:10px 12px;margin-top:var(--s2);white-space:pre-line}
.tkpk-prog{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--fs-base);color:var(--text-2);margin-top:var(--s2)}
.tkpk-btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-2)}
.tkpk-btns .btn-p{margin-inline-start:auto}
.tkpk.late{border-inline-start:3px solid var(--bad);padding-inline-start:10px}
.tkpk-empty{font-size:var(--fs-base);color:var(--text-3);padding:var(--s3) 0}
/* مصفوفةُ المهامّ · the tasks matrix — تتمرّر داخل إطارها · it scrolls inside its frame */
.tm-card{padding:var(--s3);margin-bottom:var(--s3)}
.tm-card .card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.tm-card .card-h h3{margin:0;font-size:var(--fs-md)}
.tm-nav{display:inline-flex;align-items:center;gap:6px}
.tm-wrap{overflow-x:auto;margin:0 calc(-1 * var(--s1));padding:0 var(--s1)}
.tm{display:grid;min-width:880px}
.tm-r{display:grid;grid-template-columns:150px repeat(8,minmax(0,1fr));border-top:1px solid var(--line-2)}
.tm-r.tm-h{border-top:0}
.tm-h>*{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);padding:4px 6px;text-align:center;white-space:nowrap}
.tm-h>span{text-align:start}
.tm-h .td{color:var(--ink);background:var(--gold-soft);border-radius:var(--rad-s)}
.tm-h .we,.tm-c.we{background:var(--line-2)}
.tm-n{font-size:var(--fs-base);font-weight:600;padding:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
.tm-n i{font-style:normal;color:var(--text-3);font-weight:500}
.tm-c{padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0;border-inline-start:1px solid var(--line-2)}
.tm-c.td{background:color-mix(in srgb,var(--gold-soft) 55%,transparent)}
.tm-o{background:color-mix(in srgb,var(--bad-bg) 45%,transparent)}
.tm-t{all:unset;cursor:pointer;display:block;font-size:var(--fs-sm);line-height:1.35;padding:3px 6px;border-radius:var(--rad-s);background:var(--card);
  border:1px solid var(--line);border-inline-start:3px solid var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-t:hover{background:var(--line-2)}
.tm-t:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.tm-t.bad{border-inline-start-color:var(--bad)} .tm-t.blk{border-inline-start-color:var(--warn)}
.tm-t.done{color:var(--text-3);text-decoration:line-through;border-inline-start-color:var(--ok)}
.tm-more{font-size:var(--fs-sm);color:var(--text-3);padding:0 6px}
/* 2.2.70 · أزرارُ الصفّ في بطاقته السريعة في «أتيليه» — تبقى في الشجرة (‎[W2]‎، A/R)، وتُخفى هنا
   لتأخذ العناوينُ مكانها · in Atelier a task row's buttons live in its quick card — they stay
   in the tree ([W2], A/R) and are hidden here so the titles get the room */
@media(min-width:1100px){body.desk.atelier .tk-tbl .dt-actc{display:none}}

/* ═══ 2.2.71 · البطاقةُ عند المرور، والسحبُ في المصفوفة · the hover card, the drag in the
   matrix ═══ prefixes tht- · tm- (docs/DESIGN.md §10) */
#task-tip{position:fixed;z-index:120;max-width:min(340px,calc(100vw - 24px));padding:8px 11px;border-radius:var(--rad-m);
  background:var(--ink);color:#fff;font-size:var(--fs-sm);line-height:1.45;box-shadow:0 6px 20px rgba(15,32,59,.22);
  pointer-events:none;opacity:0;transition:opacity var(--m-1) var(--ease)}
#task-tip.on{opacity:1}
.tht-t{font-size:var(--fs-base);font-weight:600;overflow-wrap:anywhere}
.tht-t.bad::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#F08A7E;margin-inline-end:6px;vertical-align:1px}
.tht-m{color:rgba(255,255,255,.72);margin-top:2px;overflow-wrap:anywhere}
.tm-hint{font-size:var(--fs-sm);color:var(--text-3);margin:-4px 0 var(--s2)}
@media(hover:none){.tm-hint{display:none}}
/* ⚠ ‎all:unset‎ على الشريحة يمحو ‎-webkit-user-drag‎ فلا يبدأ سحبٌ أصلاً · all:unset on the chip wipes -webkit-user-drag, so no drag ever starts */
.tm-t.tm-dr{cursor:grab;-webkit-user-drag:element;user-select:none}
.tm-t.dragging{opacity:.45}
.tm-c.over{outline:2px dashed var(--gold);outline-offset:-2px;background:var(--gold-soft)}
.tm-c[data-drop-tm]{min-height:30px}
@media(prefers-reduced-motion:reduce){#task-tip{transition:none}}

/* ═══ 2.2.72 · السحبُ في التقويم والخطّ الزمنيّ · dragging on the calendar and the timeline ═══ */
/* ⚠ ‎all:unset‎ على شريحة التقويم يمحو ‎-webkit-user-drag‎ كما محاه في المصفوفة · all:unset on
   the calendar chip wipes -webkit-user-drag, as it did in the matrix */
.tkcal-t.tk-dr{cursor:grab;-webkit-user-drag:element;user-select:none}
.tkcal-t.dragging{opacity:.45}
.tkcal-c.over{box-shadow:inset 0 0 0 2px var(--gold);background:var(--gold-soft)}
.tl .tl-dg{cursor:grab;touch-action:pan-y}
/* ⚠ ‎.tl-bar‎ يقصّ ما يخرج منه (overflow:hidden)، فيقصّ المقبضين وهدفَ اللمس — والمسحوبُ يُفتح ·
   .tl-bar clips what leaves it, the handles and the hit area included — a draggable one opens */
.tl .tl-bar.tl-dg{overflow:visible}
.tl .tl-dg::before{content:"";position:absolute;inset:-7px -2px}
.tl .tl-pt.tl-dg::before{inset:-6px}
.tl .tl-dg:hover{filter:brightness(1.08)}
.tl .tl-hd{position:absolute;top:-3px;bottom:-3px;width:8px;cursor:ew-resize;z-index:2}
.tl .tl-hd.s{left:-4px} .tl .tl-hd.e{right:-4px}
.tl .tl-bar.tl-dg:hover .tl-hd::after{content:"";position:absolute;top:2px;bottom:2px;left:3px;width:2px;border-radius:1px;background:var(--ink)}
.tl .tl-moving{cursor:grabbing;opacity:.85;box-shadow:0 2px 10px rgba(15,32,59,.25);z-index:3}
#tl-dl{position:fixed;z-index:121;padding:4px 9px;border-radius:var(--rad-s);background:var(--ink);color:#fff;font:600 var(--fs-sm)/1.4 var(--font-num);
  pointer-events:none;white-space:nowrap;direction:ltr}
#tl-dl[hidden]{display:none}

/* ═══ 2.2.73 · السيولة · fluidity ═══
   (١) بطاقاتُ القوائم الطويلة خارج الشاشة لا تُخطَّط ولا تُرسم حتى تقترب (‎content-visibility‎)؛
   ‎auto‎ في الحجم يتذكّر ما قيس فلا يقفز شريطُ التمرير. وفي الطباعة تُرسم كلُّها.
   (٢) الانتقالُ بين الصفحات: القديمةُ تذوب في ١٢٠ م.ث فوق الجديدة الداخلة بحركتها.
   (1) the cards of long lists off screen are neither laid out nor painted until they come near
   (content-visibility); "auto" in the size remembers what was measured, so the scrollbar does
   not jump. In print, all of them are drawn. (2) moving between pages: the old one dissolves in
   120 ms over the new one entering with its own motion. */
#view .appr{content-visibility:auto;contain-intrinsic-size:auto 150px}
#view .lrow{content-visibility:auto;contain-intrinsic-size:auto 56px}
@media print{#view .appr,#view .lrow{content-visibility:visible}}
::view-transition-old(root){animation:vtOut var(--m-1) var(--ease) both}
::view-transition-new(root){animation:none}
@keyframes vtOut{to{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ═══ 2.3 · المنضدة تُصقَل لا تُعاد · the desk refined, not redone ═══════════════
   من تدقيقٍ خارجيّ للمنضدة (أتيليه، ١٤٤٠ بكسل): ما تحقّق منه في الكود والمتصفّح وحده.
   خارجَ الختم ثلاثةُ أشياء لا تخصّ «أتيليه»: إطارُ الجدول الذي ما زال يُمرَّر جانباً،
   واسمُ اليوم على الخطّ الزمنيّ، وقائمةُ «تصدير» (تُلحق بالجسم).
   From an outside audit of the desk (Atelier, 1440px): only what was confirmed in the code
   and the browser. Outside the seal, three things that are not Atelier's: the frame of a
   table that still scrolls sideways, today's name on the timeline, and the Export menu
   (appended to the body). */
/* شريطُ التمرير لا يُرسم فوق صفّ المجاميع · the scrollbar is never drawn over the totals row */
.dt-wrap.dt-scrolls{padding-bottom:10px}
.tl-today{position:absolute;top:1px;transform:translateX(-50%);z-index:2;white-space:nowrap;
  background:var(--gold);color:#fff;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.02em;
  padding:1px 6px;border-radius:999px;pointer-events:none}
.xpm{position:fixed;z-index:400;min-width:250px;max-width:calc(100vw - 16px);background:var(--card,#fff);
  border:1px solid var(--line);border-radius:var(--rad-m);box-shadow:0 12px 32px rgba(15,32,59,.16);padding:4px}
.xpm button{display:block;width:100%;text-align:start;background:none;border:0;border-radius:var(--rad-s);
  padding:8px 10px;cursor:pointer;color:var(--ink);font:inherit}
.xpm button:hover,.xpm button:focus-visible{background:var(--bg);outline:0}
.xpm b{display:block;font-size:var(--fs-base);font-weight:600}
.xpm small{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-top:1px}
@media(min-width:1100px){
  /* المرحلةُ المختارة بخطٍّ ذهبيّ لا بإطارٍ أسود · the chosen stage by a gold rule, not a black frame */
  body.desk.atelier .mk-f.on{border-color:transparent;box-shadow:inset 0 -3px 0 var(--gold),var(--dk-shadow)}
  body.desk.atelier .mk-ccy{flex:none;margin-inline-start:2px;font-size:var(--fs-xs);font-weight:600;color:var(--text-3);
    letter-spacing:.02em}
  /* المرحلةُ كلمةً بجانب نقاطها · the stage as a word beside its pips */
  body.desk.atelier .stw{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
  body.desk.atelier .stw-ok{color:var(--ok)}
  body.desk.atelier .stw-warn{color:var(--warn)}
  body.desk.atelier .stw-bad{color:var(--bad)}
  body.desk.atelier .stw-info{color:#2C4979}
  body.desk.atelier .stw-mut{color:var(--text-3)}
  body.desk.atelier .dt-orig{color:var(--text-3);font-size:var(--fs-sm)}
  /* مجاميعُ المجموعة تحت رؤوسها · a group's totals under their heads */
  body.desk.atelier table.dt tbody tr.dt-grp-al td{font-weight:600;color:var(--ink)}
  body.desk.atelier table.dt tbody tr.dt-grp-al td.mono{font-size:var(--fs-sm)}
  /* الرئيسية: العمودُ ينشقّ عند خطّ النقد، ومفتاحٌ تحته · Home: the bar splits at the cash
     line, a key under it */
  body.desk.atelier .cmd-bar.over{background:var(--ink)}
  body.desk.atelier .cmd-bo{position:absolute;top:0;inset-inline:0;display:block;background:var(--bad);
    border-radius:var(--rad-s) var(--rad-s) 0 0}
  body.desk.atelier .cmd-bar i{z-index:1}
  body.desk.atelier .cmd-lg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:var(--fs-sm);color:var(--text-2)}
  body.desk.atelier .cmd-lg>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  body.desk.atelier .cmd-lg i{display:inline-block;width:10px;height:10px;border-radius:2px}
  body.desk.atelier .cmd-lg-c{background:var(--ink)}
  body.desk.atelier .cmd-lg-o{background:var(--bad)}
  body.desk.atelier .cmd-lg-l{width:16px!important;height:0!important;border-radius:0!important;border-top:1.5px dashed var(--gold)}
  body.desk.atelier .cmd-lg b{font-weight:600;color:var(--ink)}
  body.desk.atelier .cmd-also{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 6px 2px;
    border-top:1px solid var(--dk-soft);font-size:var(--fs-sm)}
  body.desk.atelier .cmd-also-l{color:var(--text-3);margin-inline-end:2px}
  body.desk.atelier .cmd-also-i{background:none;border:1px solid var(--dk-line);border-radius:999px;padding:3px 10px;
    font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;cursor:pointer}
  body.desk.atelier .cmd-also-i:hover,body.desk.atelier .cmd-also-i:focus-visible{border-color:var(--gold);outline:0}
  body.desk.atelier .cmd-also-i b{margin-inline-start:4px;color:var(--text-3);font-weight:600}
  body.desk.atelier .cmd-also-i::first-letter{text-transform:uppercase}
  /* اسمُ المؤشّر سطرٌ واحد · a KPI's name on one line */
  body.desk.atelier .cmd-kl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* الاعتمادات: الجاهزيّة، ومفتاحُ شريط البند · Approvals: readiness, and the line bar's key */
  /* «تصدير» و«الأعمدة» بكلمتيهما في الشريط العلويّ · Export and Columns in words in the top bar */
  body.desk.atelier .tb-t:has(.tb-tl){width:auto;padding-inline:7px 9px;grid-auto-flow:column;gap:5px}
  body.desk.atelier .tb-tl{font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
  /* ⚠ 2.5.2 · مع لوحة السجلّ مفتوحةً ضاق الرأس فزحفت الأدواتُ تحت العنوان («المدفوعاتصدير»):
     العنوانُ لا يضيق دون نفسه، والأدواتُ تفقد كلماتها وتبقى أيقوناتٍ بأسمائها في التلميح ·
     with the record panel open the header narrowed and the tools slid under the title
     ("المدفوعاتصدير"): the title never shrinks below itself, and the tools drop their
     words and stay icons, named in their tooltip */
  body.desk.atelier.wide .topbar>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);min-width:auto}
  body.desk.atelier.docked .tb-t:has(.tb-tl){width:30px;padding-inline:0}
  body.desk.atelier.docked .tb-tl{display:none}
  /* 3.3.26 · حين لا يتّسع السطرُ الأوّل · when line 1 does not fit (fitBar) */
  body.desk.atelier.tb-tight .tb-t:has(.tb-tl){width:30px;padding-inline:0}
  body.desk.atelier.tb-tight .tb-tl{display:none}
  body.desk.atelier.docked #tb-add span{display:none}
  body.desk.atelier.docked #tb-add{padding:0 10px}
  /* التذييلُ في شريط الحال · the footer in the status bar */
  body.desk.atelier #appfoot{display:none}
  body.desk.atelier .sb-dot.off{background:var(--bad)}
  body.desk.atelier .sb-live{font-weight:600;color:var(--ok)}
  body.desk.atelier .sb-live.off{color:var(--bad)}
  body.desk.atelier .sb-ver{letter-spacing:.04em;background:none;border:0;padding:0 2px;cursor:pointer}
  body.desk.atelier button.sb-k{background:none;border:0;cursor:pointer;font:inherit;font-size:var(--fs-xs)}
  body.desk.atelier button.sb-k:hover{color:var(--ink)}
  /* الأقراصُ سطرٌ واحد — يلتفّ صفُّها لا كلماتُها · chips on one line — their row wraps, not their words */
  body.desk.atelier .lg-chip,body.desk.atelier .dgrp button,body.desk.atelier .tkh-c,
  body.desk.atelier .vchip button,body.desk.atelier .lp-l{white-space:nowrap}
  /* الوثائق: تنبيهٌ واحد، وإسقاطٌ في سطر · Documents: one notice, a drop zone on one line */
  body.desk.atelier .pagedrop.pd-slim{padding:8px 14px;min-height:0}
  body.desk.atelier .pagedrop.pd-slim br{display:none}
  body.desk.atelier .pagedrop.pd-slim>span>span{margin-inline-start:8px}
  body.desk.atelier .dc-maint{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  body.desk.atelier .dc-maint>div:first-child{display:flex;flex-direction:column;gap:3px}
  body.desk.atelier .dc-maint-b{display:flex;gap:8px;flex-wrap:wrap}
}

/* ═══ 2.3.2 · المهامّ بتصميم «SIRA Tasks» · Tasks from the "SIRA Tasks" design ═════════
   علاماتٌ بأيقونات، وسطرُ «لماذا» بلونه، وجملةُ التأخّر، وطيُّ المجموعة، ولوحةُ المهمّة.
   Icon markers, the "why" line in its tone, the late sentence, folding a group, and the task
   panel. Global where the phone shares them, sealed where only the desk draws them. */
.tk-bit svg{flex:none;opacity:.85}
.tk-bit.bad{background:var(--bad-bg);color:var(--bad)}
/* جملةُ التأخّر · the late sentence */
.tk-ins{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card,#fff);border-radius:var(--rad-m);
  padding:10px 14px;margin:0 0 var(--s3);box-shadow:0 1px 2px rgba(15,32,59,.05);font-size:var(--fs-base);line-height:1.5}
.tk-ins-d{width:9px;height:9px;border:1.5px solid var(--gold);transform:rotate(45deg);flex:none}
.tk-ins>b{font-weight:600;color:var(--gold-ink,#8A5A17);flex:none}
.tk-ins-t{min-width:0;flex:1 1 240px;color:var(--ink)}
.tk-ins-o{margin-inline-start:auto;flex:none;font-size:var(--fs-base);font-weight:600;color:#2C4979;min-height:32px;padding:0 4px}
.tk-ins-o:hover{color:var(--gold-ink,#8A5A17)}
/* طيُّ المجموعة · folding a group */
.dt-gf{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;cursor:pointer;padding:2px 0;background:none;border:0}
.dt-gf-c{width:7px;height:7px;border-inline-end:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg);margin-inline:2px 4px;transition:transform var(--m-1,.12s) var(--ease,ease);opacity:.6}
.dt-gf[aria-expanded="false"] .dt-gf-c{transform:rotate(-45deg)}
html[dir=rtl] .dt-gf[aria-expanded="false"] .dt-gf-c{transform:rotate(135deg)}
.dt-gf:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--rad-s)}
@media(min-width:1100px){
  /* سطرُ «لماذا»: ما يوقفها بالأحمر · the "why" line: what stops it in red */
  body.desk.atelier .tk-why{display:flex;flex-wrap:wrap;gap:2px 12px}
  body.desk.atelier .tkw{color:var(--text-3)}
  body.desk.atelier .tkw-k{color:var(--text-3)}
  body.desk.atelier .tkw.bad,body.desk.atelier .tkw.bad .tkw-k{color:var(--bad)}
  body.desk.atelier .tkw bdi{font-weight:500}
}
/* ── لوحةُ المهمّة · the task panel ── */
.sheet.tk-panel .sheet-b,.sheet.tk-peek .sheet-b{padding:0}
.tkpn{display:flex;flex-direction:column;min-height:100%}
.tkpn-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:14px 18px 18px}
.tkpn.late .tkpn-body{border-inline-start:3px solid var(--bad)}
.tkpn-crumb{font-size:var(--fs-sm);color:var(--text-3)}
.tkpn-par{align-self:flex-start;font-size:var(--fs-sm);font-weight:600;color:#2C4979;padding:0;margin-top:-6px}
.tkpn-t{margin:0;font-size:var(--fs-2xl);font-weight:600;line-height:1.35;color:var(--ink)}
.tkpn-t.done{text-decoration:line-through;color:var(--text-3)}
.tkpn-d{font-size:var(--fs-md);line-height:1.6;color:var(--text-2);white-space:pre-line}
.tkpn-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:#E4E1D9;border-radius:var(--rad-m);padding:3px}
.tkpn-seg button{min-height:32px;border-radius:var(--rad-s);font-size:var(--fs-sm);font-weight:600;color:var(--text-2);padding:0 4px}
.tkpn-seg button:disabled{cursor:default}
.tkpn-seg button.on{background:#fff;box-shadow:0 1px 2px rgba(15,32,59,.12)}
.tkpn-seg button.on.s-open{color:var(--warn)} .tkpn-seg button.on.s-doing{color:#2C4979}
.tkpn-seg button.on.s-blocked{color:var(--bad)} .tkpn-seg button.on.s-done{color:var(--ok)}
.tkpn-seg button:not(:disabled):not(.on):hover{color:var(--ink)}
.tkpn-note{display:flex;gap:10px;border-radius:var(--rad-m);padding:10px 12px;font-size:var(--fs-base);line-height:1.45}
.tkpn-note>i{width:7px;height:7px;transform:rotate(45deg);background:currentColor;flex:none;margin-top:6px}
.tkpn-note.bad{background:var(--bad-bg);color:#7A2A21}
.tkpn-note.warn{background:#F6EAD6;color:#6E4712}
.tkpn-meta{background:var(--card,#fff);border-radius:var(--rad-m);padding:2px 14px;box-shadow:0 1px 2px rgba(15,32,59,.05)}
.tkpn-r{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-size:var(--fs-base);align-items:center}
.tkpn-r:first-child{border-top:0}
.tkpn-r>span{color:var(--text-2)}
.tkpn-r>b{font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.tkpn-who{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.tkpn-who .tk-av{width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;font-size:var(--fs-xs);font-weight:600;
  display:inline-grid;place-items:center}
.tkpn-dt{color:var(--text-3);font-weight:400;margin-inline-start:4px}
.tkpn-sec{display:flex;flex-direction:column;gap:6px}
.tkpn-sec h4{margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
html[lang=ar] .tkpn-sec h4{letter-spacing:0;font-size:var(--fs-sm)}
.tkpn-dep{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--card,#fff);border-radius:var(--rad-m);
  padding:9px 12px;box-shadow:inset 3px 0 0 var(--bad),0 1px 2px rgba(15,32,59,.05);font-size:var(--fs-base)}
html[dir=rtl] .tkpn-dep{box-shadow:inset -3px 0 0 var(--bad),0 1px 2px rgba(15,32,59,.05)}
.tkpn-dep bdi{flex:1;min-width:0;font-weight:600;color:var(--ink)}
.tkpn-dep>span{flex:none;font-size:var(--fs-sm)}
.tkpn-dep.ok{box-shadow:inset 3px 0 0 var(--ok),0 1px 2px rgba(15,32,59,.05)}
html[dir=rtl] .tkpn-dep.ok{box-shadow:inset -3px 0 0 var(--ok),0 1px 2px rgba(15,32,59,.05)}
.tkpn-body .tkp-card{padding:12px 14px;margin:0}
.tkpn-bar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:12px 18px;z-index:1}
.tkpn-btns{display:flex;flex-wrap:wrap;gap:8px}
.tkpn-btns .btn-ok{flex:1 1 140px}
.tkpn-pend{display:flex;flex-direction:column;gap:8px}
.tkpn-pp{display:flex;gap:6px}
.tkpn-pp button{flex:1;min-height:34px;border-radius:var(--rad-s);font-size:var(--fs-sm);font-weight:600;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.tkpn-pp button.on{background:var(--ink);color:#fff;box-shadow:none}
.tkpn-pend input{height:38px;border-radius:var(--rad-m)}
@media(max-width:899px){
  .tkpn-pp button,.tkpn-seg button{min-height:40px}
  .tkpn-pend input{font-size:var(--fs-lg);height:44px}
}

/* ═══ 2.5 · الجيوب على صفحة العهدة · the pockets on the custody page ═══ */
.cpk{margin:var(--s4,14px) 0}
.cpk-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:var(--s3,10px)}
.cpk-c{background:var(--bg-card,#fff);border:1px solid var(--line);border-radius:var(--r,12px);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.cpk-cash{border-color:var(--gold)}
.cpk-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.cpk-ref{all:unset;cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:underline dotted;min-height:24px;display:inline-flex;align-items:center}
.cpk-t{font-weight:600;font-size:var(--fs-base)}
.cpk-r{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-base);color:var(--text-2)}
.cpk-r b{color:var(--text)}

/* ═══ 2.5 · قمعُ العمود ومقبضُ عرضه · column funnel and width handle ═══ */
.dt-cf,.dt-rz{display:none}
@media(min-width:1100px){
  body.desk table.dt th[data-cl]{padding-inline-end:22px}
  body.desk .dt-cf{display:inline-flex;align-items:center;justify-content:center;position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:0;background:none;color:var(--text-3);font-size:var(--fs-2xs);cursor:pointer;opacity:0;border-radius:var(--rad-s)}
  body.desk table.dt th:hover .dt-cf,body.desk .dt-cf.on{opacity:1}
  body.desk .dt-cf.on{color:var(--gold-ink);background:rgba(207,156,81,.18)}
  body.desk .dt-rz{display:block;position:absolute;inset-inline-end:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}
  body.desk .dt-rz:hover,body.dt-resizing .dt-rz{background:rgba(207,156,81,.35)}
  body.dt-resizing{cursor:col-resize;user-select:none}
  table.dt.dt-fixedw{table-layout:fixed;width:1px}
  table.dt.dt-fixedw td,table.dt.dt-fixedw th{overflow:hidden;text-overflow:ellipsis}
}
#cf-pop{position:fixed;z-index:1200;background:var(--bg-card,#fff);border:1px solid var(--line);border-radius:var(--rad-m);box-shadow:0 10px 30px rgba(15,32,59,.18);padding:8px;font-size:var(--fs-base);max-height:320px;display:flex;flex-direction:column;gap:6px}
#cf-pop .cf-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
#cf-pop .cf-q{height:30px;font-size:var(--fs-base);border:1px solid var(--line);border-radius:var(--rad-s);padding:0 8px}
#cf-pop .cf-a{display:flex;gap:6px}
#cf-pop .cf-a button{all:unset;cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);padding:2px 6px;border-radius:var(--rad-s);background:var(--bg)}
#cf-pop .cf-l{overflow:auto;display:flex;flex-direction:column;gap:2px;min-height:0}
#cf-pop .cf-l label{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:var(--rad-s);cursor:pointer}
#cf-pop .cf-l label:hover{background:var(--bg)}
#cf-pop .cf-l label span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cf-pop .cf-l input{width:15px;height:15px;accent-color:var(--ink)}
.vdef-sh{color:var(--gold-ink)}

/* ═══ 2.5.1 · رقائقُ العملة · the currency chips ═══ */
.ccysw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--s3,10px)}
.ccysw-l{font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em;color:var(--text-3);margin-inline-end:4px}
.ccysw-b{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg-card,#fff);color:var(--ink-2);font:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer}
/* 3.1.5 · إنفاقُ صيره: الفترةُ داخل البطاقة، وسطرُ الشركة مفصولٌ بخطّ · SIRA spend: the period inside the card, the company line set apart */
.ais-p{padding:var(--s3) var(--s4) 0;margin:0}
.st-t tr.ais-tot td{border-top:2px solid var(--line);background:var(--bg)}
.ccysw-b.on{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:899px){.ccysw-b{min-height:44px}}
@media(min-width:1100px){.ccysw-b{min-height:30px;font-size:var(--fs-sm)}}
/* 2.5.1 · شريطُ العُهد وتنبيهُ العملة · the custodies strip and the currency notice */
.cpk .cpk-c{all:unset;box-sizing:border-box;cursor:pointer;background:var(--bg-card,#fff);border:1px solid var(--line);border-radius:var(--r,12px);padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-height:44px}
.cpk .cpk-c.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cpk .cpk-c:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cp-mis{margin:0 0 var(--s3,10px)}
.cp-mis-l{list-style:none;margin:8px 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.cp-mis-l li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cp-tiles .v div{line-height:1.25}
/* ═══ 2.5.1 · شريطُ المرشّح · the filter bar ═══ */
.lgf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--s3,10px)}
.lgf-q{flex:1 1 220px;min-width:180px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg-card,#fff);font:inherit;font-size:var(--fs-base)}
.lgf-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg-card,#fff)}
.lgf-seg button{all:unset;cursor:pointer;padding:0 11px;height:32px;display:inline-flex;align-items:center;font-size:var(--fs-base);font-weight:600;color:var(--ink-2)}
.lgf-seg button.on{background:var(--ink);color:#fff}
.lgf-s{height:34px;max-width:190px;padding-block:0;padding-inline:12px 28px;border:1px solid var(--line);border-radius:999px;background-color:var(--bg-card,#fff);font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--ink-2);text-overflow:ellipsis}
.lgf-s.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.lgf-n{font-size:var(--fs-sm);color:var(--text-3);margin-inline-start:auto;white-space:nowrap}
.lgf-x{all:unset;cursor:pointer;font-size:var(--fs-base);font-weight:600;color:var(--gold-ink);padding:0 6px;min-height:34px;display:inline-flex;align-items:center}
@media(max-width:899px){
  .lgf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .lgf::-webkit-scrollbar{display:none}
  .lgf-q{flex:0 0 220px;height:44px;font-size:var(--fs-lg)}
  .lgf-s{flex:0 0 auto;height:44px;font-size:var(--fs-lg)}
  .lgf-seg button{height:42px}
}

/* ═══ 2.5.2 · لا تباعدَ بين حروف العربيّة (القاعدة ٣٨) ═══════════════════════════════
   عشرةُ عناوين وتسمياتٍ صغيرة وُرثت تباعداً (وبعضُها أحرفاً كبيرة) صُمّم للاتينيّة، فانفكّت
   حروفُها في العربيّة. Ten small headers and labels inherited a letter-spacing (some an
   uppercase) designed for Latin, and their Arabic letters came apart. */
html[dir=rtl] :is(th, th *, table.ctab th, .pfilter .pf-l, .ccysw-l, .fsec span, .rql-h, .pc-lh, .newmenu .nm-gh, .ai-lab, .qadd-l, .cp-k, .cpt-m span, table.ts .c0){letter-spacing:0!important;text-transform:none!important}

/* ═══ 3.0 · شريطُ أدوات القائمة · the list toolbar (DESIGN.md §3) ═══════════════
   المرشّحُ والتجميعُ فوق القائمة نفسها، لا في اللوحة الجانبيّة · the filter and the
   grouping above the list itself, never in the side pane */
@media (min-width:1100px){
  body.desk .ptool{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
  body.desk .ptool .pt-f{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;min-width:220px;flex:0 1 320px;
    border:1px solid var(--line);border-radius:var(--rad-s);background:var(--card);color:var(--text-3)}
  body.desk .ptool .pt-f:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--dk-sel)}
  body.desk .ptool .pt-f input{flex:1;min-width:0;border:0;background:transparent;height:30px;padding:0;font-size:var(--fs-base);color:var(--text);outline:0}
  body.desk .ptool .pt-sp{flex:1}
  body.desk .ptool .pt-g{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
}
@media (min-width:1100px){
  body.desk .ptool .pt-tabs{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:2px;border-radius:999px;background:var(--line-2)}
  body.desk .ptool .pt-tabs button{height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  body.desk .ptool .pt-tabs button.on{background:var(--ink);color:#fff}
  body.desk .ptool .pt-tabs .pt-n{font-size:var(--fs-xs);opacity:.75}
  body.desk .ptool .pt-h{font-size:var(--fs-xs);color:var(--text-3);padding:0 6px}
}
@media (min-width:1100px){
  body.desk .mrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
  body.desk .mrow .ccysw{margin:0}
  body.desk .mrow .mrow-sp{flex:1}
}
@media (min-width:1100px){
  body.desk .mk-acc{display:flex;align-items:center;gap:12px;width:100%;height:36px;padding:0 14px;margin:0 0 10px;
    border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card);font:inherit;font-size:var(--fs-base);color:var(--text-2);cursor:pointer}
  body.desk .mk-acc>span{flex:1;text-align:start}
  body.desk .mk-acc i{font-style:normal;color:var(--text-3)}
}

/* ═══ 3.0 · تحميل على… · Charge to… (DESIGN.md §5.1) ═══════════════════════════ */
.ch-sec{margin-top:14px}
.ch-h{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin:0 0 6px}
.ch-p{font-size:var(--fs-sm);color:var(--text-2);margin:10px 0 4px;font-weight:600}
.ch-i{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;margin:0 0 6px;
  border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card);font:inherit;color:var(--text);text-align:start;cursor:pointer}
.ch-i:hover{border-color:var(--gold)}
.ch-i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ch-m{flex:1;min-width:0;display:flex;flex-direction:column}
.ch-m b{font-weight:600;font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-m small{font-size:var(--fs-sm);color:var(--text-3)}
.ch-f{font-size:var(--fs-base);color:var(--text-2);white-space:nowrap}

/* ═══ 3.0 · سلسلةُ المال · the money chain (DESIGN.md §5.1) ═════════════════════ */
.mchain{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.mchain .mc-s{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;max-width:220px;min-height:36px;padding:4px 10px;
  border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card);font:inherit;color:var(--text);cursor:pointer;text-align:start}
.mchain button.mc-s:hover{border-color:var(--gold)}
.mchain button.mc-s:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mchain .mc-s.cur{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default}
.mchain .mc-s small{font-size:var(--fs-xs);color:var(--text-3);line-height:1.3}
.mchain .mc-s.cur small{color:rgba(255,255,255,.7)}
.mchain .mc-s b{font-size:var(--fs-base);font-weight:600;line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchain .mc-a{color:var(--gold-ink);font-size:var(--fs-md)}
.il-links{display:flex;flex-direction:column;gap:2px}
.il-ln,.il-all{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:5px 8px;border:0;border-radius:var(--rad-s);background:transparent;font:inherit;font-size:var(--fs-base);color:var(--text);text-align:start;cursor:pointer}
.il-ln span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.il-ln:hover,.il-all:hover{background:var(--line-2)}
.il-all{color:var(--gold-ink);font-weight:600}
/* ═══ 3.0 · منصّةُ الإفلات · the charge drop dock (DESIGN.md §5) ════════════════ */
#ch-dock{position:fixed;inset-block:70px 70px;inset-inline-end:16px;width:320px;z-index:85;overflow:auto;
  padding:14px;border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card);box-shadow:0 12px 32px rgba(15,32,59,.18)}
#ch-dock .cd-top{font-size:var(--fs-base);color:var(--text-2);margin-bottom:8px}
#ch-dock .cd-h{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin:12px 0 6px}
#ch-dock .cd-t{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;margin-bottom:6px;
  border:1px dashed var(--line);border-radius:var(--rad-m);font-size:var(--fs-base)}
#ch-dock .cd-t b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ch-dock .cd-t span{font-size:var(--fs-sm);color:var(--text-3)}
#ch-dock .cd-t.over{border-style:solid;border-color:var(--gold);background:var(--warn-bg)}
.cd-src{opacity:.55}
/* 3.0 · تنبيهٌ بلا قرار: نقطةٌ لا رقم (DESIGN.md §8) · an alert with no decision: a dot, never a number */
#s-bell-n.pip{min-width:9px!important;width:9px!important;height:9px!important;padding:0!important;font-size:0!important;border-radius:50%}
/* 3.0 · صفُّ الصفحة الواحد · the page's one tool row */
.pbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.pbar>*{margin:0!important}
.pbar .pt-lead,.pbar .pt-tail{display:contents}
.pbar .pt-sp,.ptool .pt-sp{flex:1}
.pbar .pt-t{font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.pbar .pt-h2{font-size:var(--fs-sm);color:var(--text-3)}
@media (min-width:1100px){
  body.desk .pt-gsel{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);color:var(--text-3)}
  body.desk .pt-gsel select{height:32px;padding-block:0;font-size:var(--fs-base);width:auto;min-width:110px}
  body.desk .pbar .pt-f{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;min-width:200px;flex:0 1 280px;
    border:1px solid var(--line);border-radius:var(--rad-s);background:var(--card);color:var(--text-3)}
  body.desk .pbar .pt-f input{flex:1;min-width:0;border:0;background:transparent;height:30px;padding:0;font-size:var(--fs-base);color:var(--text);outline:0}
  body.desk .pbar .pt-tabs{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:2px;border-radius:999px;background:var(--line-2)}
  body.desk .pbar .pt-tabs button{height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  body.desk .pbar .pt-tabs button.on{background:var(--ink);color:#fff}
}
.pbar .mpick{height:32px;padding:0 4px;gap:2px;border-radius:var(--rad-s)}
.pbar .mpick .mp-a{width:28px;height:28px;min-height:28px}
.pbar .mpick .mp-l{font-size:var(--fs-base);min-width:auto;padding:0 6px}
.pbar .pfilter{margin:0;flex-wrap:nowrap}
.pbar .pfilter{margin:0!important}
.pbar>div[style*="display:flex"]{flex:1 1 320px}
.ccysw-sel{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);color:var(--text-3)}
.ccysw-sel select{height:32px;padding-block:0;font-size:var(--fs-base);width:auto;min-width:96px}
@media (min-width:1100px){
  body.desk .pbar select,body.desk .pbar input[type="search"],body.desk .pbar input:not([type]){height:32px;min-height:32px;padding-block:0;font-size:var(--fs-base)}
  body.desk .pbar input[type="search"]{min-width:200px;flex:0 1 280px}
}

/* ═══ 3.0 · صفُّ الهاتف · the phone row (DESIGN.md §9) ═══════════════════════
   صفٌّ بارتفاعٍ واحد يفتح بطاقةَ سجلّه · a row of one height opening its record's card */
.prow-w{display:block}
.prow-w.prow-tree .prow{padding-inline-start:calc(var(--s3,12px) + var(--d,0) * 14px)}
.prow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--s3,12px);width:100%;min-height:64px;
  padding:10px 14px;background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r,10px);
  margin-bottom:8px;cursor:pointer;border-inline-start:3px solid transparent}
.prow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.prow:active{background:var(--bg)}
.prow-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.prow-m b{font-size:var(--fs-md);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow-m small{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow-e{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.prow-e b{font-size:var(--fs-md);font-weight:600;color:var(--text)}
.prow-bad{border-inline-start-color:var(--bad)}
.prow-warn{border-inline-start-color:var(--warn)}
.prow-ok{border-inline-start-color:var(--ok)}
.sheet.cardsh .sheet-b>.appr{box-shadow:none;border:0!important;padding:0;padding-inline-start:14px;margin:0;opacity:1!important}
/* 3.1.21 · بلا إطارٍ ولا حشوة كان شريطُ الحالة (3.5px على الحافّة) فوق أوّل حرفٍ من كلّ سطر،
   و overflow:hidden يقصّ ما تحته — «أنشأ» تُقرأ «نشأ». مسافةٌ عن الشريط، ولا قصّ ·
   with no frame and no padding the status edge sat over the first letter of every line and
   overflow:hidden cut what was beneath it; a gap from the edge, and nothing cut */
.sheet.cardsh .sheet-b>.appr{overflow:visible}
/* 3.0 · سؤالُ السبب فوق السجلّ · the reason question over the record */
.sheet.rsn .rsn-f{margin-top:12px}
.sheet.rsn textarea{width:100%;min-height:84px}
.sheet.rsn textarea.bad{border-color:var(--bad)}

/* 3.0.1 · روابطُ القيد أيقونات · an entry's links as icons */
.lg-ics{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.lg-ic{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--rad-s);
  font-size:var(--fs-base);line-height:1;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);cursor:pointer}
.lg-ic:hover{background:var(--card);border-color:var(--gold)}
.lg-ic:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
@media (max-width:899px){.lg-ic{width:36px;height:36px}}

/* ═══ 3.0.2 · سجلّ العهدة: لا فيضَ على الهاتف، بطاقاتٌ أقصر، ولونٌ بالحالة · the custody timeline:
   no overflow on a phone, shorter cards, a tone by state ═══
   ⚠ العمودُ `1fr` يعني minmax(auto,1fr): عنوانٌ طويل بلا التفاف وسّع الصفحةَ كلَّها عن شاشة الهاتف ·
   a `1fr` column is minmax(auto,1fr): one long unwrapped title widened the whole page past the phone. */
.cp,.cp-main,.cp-side,.cpt-w,.cpt,.cpt-n{min-width:0}
.cpt-c{min-width:0;max-width:100%}
.cpt-hx span{overflow-wrap:anywhere}
.cp-tiles .tile .v{overflow-wrap:anywhere;font-size:var(--t-ti)}
.cpt-n{padding-block:3px}
.cpt-c{gap:3px;padding:8px 12px;border-inline-start-width:4px}
.cpt-hx{margin-top:2px;padding-top:4px}
/* 3.0.4 · الألوانُ أخفّ بنسبة ٤٠٪: كلُّ لونٍ يُمزج بلون البطاقة بنسبة ٦٠٪ فتبقى الحالةُ مقروءةً بنظرة بلا صخب ·
   the tones are 40% lighter: each colour is mixed 60% with the card's own, so the state still reads at a glance, quietly */
.cpt-spend .cpt-c,.cpt-float .cpt-c{background:color-mix(in srgb,var(--ok-bg) 30%,var(--card));border-color:color-mix(in srgb,#CFE3D6 30%,var(--card));border-inline-start-color:color-mix(in srgb,var(--ok) 30%,var(--card))}
.cpt-pending .cpt-c,.cpt-topay .cpt-c{background:color-mix(in srgb,var(--warn-bg) 30%,var(--card));border-color:color-mix(in srgb,#F0DDB0 30%,var(--card));border-inline-start-color:color-mix(in srgb,var(--warn) 30%,var(--card))}
.cpt-rejected .cpt-c{background:color-mix(in srgb,var(--bad-bg) 30%,var(--card));border-color:color-mix(in srgb,#EFD5D5 30%,var(--card));border-inline-start-color:color-mix(in srgb,var(--bad) 30%,var(--card))}
.cpt-request .cpt-c{border-inline-start-color:var(--text-3);border-style:dashed}
.cpt-return .cpt-c{border-inline-start-color:var(--ink-3)}
.cpt-spend .cpt-a{color:var(--ok)}
.cpt-spend .cpt-dot{border-color:var(--ok)}
.cpt-c:hover{border-color:var(--gold)}

/* ═══ 3.0.3 · التعليقُ على سجلّ مال، والملاحظاتُ باسمها · comments on a money record, and notes by their name ═══
   الحديثُ يستعير أنماطَ حديث المهمّة (.tkc*) · the thread borrows the task thread's styles (.tkc*) */
.rc{margin-top:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r,10px);padding:var(--s3) var(--s4)}
.rc-h{display:flex;align-items:center;gap:6px;margin:0 0 var(--s2);font-size:var(--fs-md);color:var(--ink)}
.rc-h .mono{font-size:var(--fs-xs);color:var(--text-3)}
.rc-ic{flex:0 0 auto}
.rc-none{font-size:var(--fs-base);color:var(--text-3);padding:2px 0 var(--s3)}
.rc-h+.tkc{border-top:0}
.rc-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);line-height:20px;padding:0 8px;border-radius:999px;background:var(--line-2);color:var(--text-2)}
.rc-chip.hot{background:var(--warn-bg);color:var(--warn);font-weight:600}
/* الملاحظة: كلمتُها ظاهرة، ونصُّها بحجم القراءة، على ذهبٍ هادئ · the note: its word visible,
   its text at reading size, on a quiet gold */
/* صفُّ ملاحظة داخل البطاقة: الكلمةُ بذهبٍ مقروء، والنصُّ بحجم القراءة، وسطرٌ صغير لكاتبها —
   بلا خلفيةٍ ولا إطار · a note row inside the card: the word in readable gold, the text at reading
   size, a small line for its author — no fill, no frame */
.rec-r.nts .rec-l,.nts>span:first-child{color:var(--gold-ink);font-weight:600}
.rec-r.nts .rec-v,.nts>b{font-size:var(--fs-md);font-weight:400;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.rec-r.nts .rec-v small,.nts>b small{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.nts-w{margin-top:var(--s3)}
/* على بطاقة الخطّ الزمنيّ · on the timeline card */
.cpt-note{display:block;margin-top:3px;padding:2px 10px;border-inline-start:2px solid var(--gold);
  font-size:var(--fs-base);line-height:1.5;color:var(--ink)}
.cpt-note b{font-size:var(--fs-xs);font-weight:600;color:var(--gold-ink);margin-inline-end:4px}
.cpt-note span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cpt-note small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
/* 3.0.6 · نقلُ الأعمدة · moving columns */
@media (min-width:1100px){
  body.desk table.dt th[data-thmove]{cursor:grab}
  body.desk table.dt th.th-dragging{opacity:.45}
  body.desk table.dt th.th-drop-b{box-shadow:inset 3px 0 0 var(--gold)}
  body.desk table.dt th.th-drop-a{box-shadow:inset -3px 0 0 var(--gold)}
  html[dir=rtl] body.desk table.dt th.th-drop-b{box-shadow:inset -3px 0 0 var(--gold)}
  html[dir=rtl] body.desk table.dt th.th-drop-a{box-shadow:inset 3px 0 0 var(--gold)}
}
.cols-sheet .col-row{display:flex;align-items:center;gap:6px}
.cols-sheet .col-mv{min-width:36px;padding-inline:0}
.cols-sheet .col-list .col-row{padding-block:3px;min-height:0}
@media (min-width:1100px){.cols-sheet .col-mv{min-width:30px;height:30px}}

/* ═══ 3.0.4 · مربّعُ التعليق كفيسبوك · the comment box, Facebook-style ═══ */
.rcn{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s2);align-items:start;padding-top:var(--s3);border-top:1px solid var(--line-2);margin-top:var(--s1)}
.rc-h+.rcn,.rc-none+.rcn{border-top:0}
.rcn-box{position:relative}
.rcn-box textarea{display:block;width:100%;height:40px;min-height:40px;max-height:140px;resize:none;overflow-y:auto;padding:9px 44px 9px 14px;box-sizing:border-box;margin:0;
  border-radius:19px;background:var(--bg);border:1px solid var(--line);line-height:1.45}
html[dir=rtl] .rcn-box textarea{padding:9px 14px 9px 44px}
.rcn-box textarea:focus{box-shadow:none;border-color:var(--gold)}
.rcn-send{bottom:5px}
.rcn-send{position:absolute;inset-inline-end:4px;bottom:4px;width:30px;height:30px;border:0;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;cursor:pointer}
html[dir=rtl] .rcn-send svg{transform:scaleX(-1)}
.rcn-sug{position:absolute;inset-inline:0;bottom:calc(100% + 4px);z-index:5;background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);
  box-shadow:var(--sh);overflow:hidden}
.rcn-s{display:block;width:100%;min-height:44px;padding:0 14px;border:0;background:none;text-align:start;font-size:var(--fs-md);color:var(--ink);cursor:pointer}
.rcn-s:hover,.rcn-s:focus{background:var(--gold-soft)}
.rcn-s+.rcn-s{border-top:1px solid var(--line-2)}
.rcn-to{grid-column:2;font-size:var(--fs-sm);color:var(--gold-ink);margin-top:-2px}
.rc .tkc{padding:var(--s2) 0}
.rc .tkc-t{background:var(--bg);border-radius:var(--rad-m);padding:6px 12px;display:inline-block;max-width:100%}

/* ═══ 3.0.8 · سجلُّ العهدة مكثّفاً، والأشهرُ تُطوى · the custody timeline condensed, months that fold ═══
   كلُّ حركةٍ سطران قصيران بلا سطر تاريخ (التاريخُ في الحركة)، فيُرى ضعفُ ما كان. وبين الأشهر خطٌّ
   ذهبيّ واضح — الذهبُ يرسم الخطوط (القاعدة ٣٨) — ورأسٌ يُطوى بعدده وما دخل وما خرج.
   Each movement is two short lines with no history line (the history is in the movement), so
   twice as many show. Between months a clear gold rule — gold draws lines (rule 38) — and a
   head that folds, with its count and what came in and went out. */
.cpt-x .cpt-w::before{top:18px}
.cpt-x .cpt-mo+.cpt-mo{margin-top:var(--s2,8px)}
.cpt-mh{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:36px;margin:0;
  padding-block:6px;padding-inline:30px 4px;background:var(--bg);border:0;
  color:var(--gold-ink);font-size:var(--fs-sm);font-weight:600;text-align:start;cursor:pointer}
.cpt-mh::before{content:"";position:absolute;inset-inline-start:6px;top:50%;width:10px;height:10px;margin-top:-5px;
  background:var(--gold);transform:rotate(45deg);border-radius:2px}
.cpt-mh:hover{color:var(--ink)}
.cpt-mh:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cpt-mh.off{color:var(--text-2)}
.cpt-mh.off::before{background:var(--card);border:2px solid var(--gold)}
.cpt-mv{width:12px;color:var(--text-3)}
.cpt-mc{font-size:var(--fs-xs);color:var(--text-3);background:var(--card);border:1px solid var(--line);border-radius:var(--rad-pill,999px);padding:0 7px}
.cpt-ms{margin-inline-start:auto;display:flex;gap:10px;font-size:var(--fs-xs);font-weight:500;color:var(--text-2)}
.cpt-mi{color:var(--ok)}
.cpt-x .cpt-n{padding-block:2px}
.cpt-x .cpt-dot{top:12px;width:12px;height:12px;inset-inline-start:5px}
.cpt-x .cpt-c{gap:1px;padding:5px 10px;min-height:36px}
.cpt-x .cpt-s{font-size:var(--fs-xs);gap:4px}
.cpt-x .cpt-s .tag{padding-block:0}
.cpt-x .cpt-hx{display:none}
.cpt-x .cpt-note{margin-top:1px;padding-block:0}
.cpt-x .cpt-note span{-webkit-line-clamp:1}
.cpt-x .cpt-note small{display:none}
@media(max-width:899px){.cpt-x .cpt-c,.cpt-mh{min-height:44px}}
/* 3.0.7 · سجلُّ الاستهلاك · the usage log */
.lu-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:start}
.lu-d{font-size:var(--fs-xs);color:var(--text-3)}
.lu-l{display:flex;flex-direction:column;min-width:0}
.lu-l span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu-l small{font-size:var(--fs-xs);color:var(--text-3)}
.lu-p b{color:var(--warn)}
.lu-h{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin:14px 2px 6px}
/* 3.0.7 · المطابقة · the reconciliation */
.rc-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center;width:100%;text-align:start}
.rc-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-m{font-size:var(--fs-xs);color:var(--text-3)}
.rc-v{font-size:var(--fs-sm);white-space:nowrap}
@media(max-width:599px){.rc-r{grid-template-columns:auto minmax(0,1fr) auto}.rc-m{display:none}}
/* 3.1.8 · مراجعةُ الأنماط عند الإقفال · the pattern review at close (views/review.js) */
.an-sub{margin:-4px 2px 10px;white-space:normal}
.an-card{margin-bottom:12px}
.an-r{display:flex;gap:var(--s3);align-items:flex-start;width:100%;text-align:start;border-inline-start:3px solid transparent}
.an-r.an-high{border-inline-start-color:var(--bad)}
.an-r.an-mid{border-inline-start-color:var(--warn)}
.an-r+.an-r{border-top:1px solid var(--line-2)}
.an-h{display:flex;gap:var(--s2);align-items:center;min-width:0}
.an-h .lrow-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-what{margin-top:var(--s1);font-size:var(--fs-base);color:var(--text-2);white-space:normal;line-height:1.5}
.an-w{margin-top:2px;font-size:var(--fs-sm);color:var(--text-3)}
.an-v{flex:0 0 auto;font-weight:600;padding-top:2px}
.an-recs{padding:var(--s3) var(--s4);margin-bottom:12px}
.an-recs ul{margin:0;padding-inline-start:18px;display:grid;gap:var(--s2);font-size:var(--fs-base);line-height:1.55}
.an-plan{margin-bottom:12px}
.an-pr{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,auto));gap:var(--s3);padding:var(--s2) var(--s4);align-items:center;font-size:var(--fs-base)}
.an-pr+.an-pr{border-top:1px solid var(--line-2)}
.an-pr>span:not(:first-child){text-align:end}
.an-pr>span:first-child{min-width:0;display:flex;flex-direction:column}
.an-pr>span:first-child>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-pr small{color:var(--text-3);font-size:var(--fs-sm)}
.an-ph{font-size:var(--fs-sm);color:var(--text-3);font-weight:500}
.an-ai{padding:var(--s3) var(--s4);margin-bottom:12px;border-inline-start:3px solid var(--gold)}
.an-ai.an-prev{padding:0}
.an-ai.an-prev .an-ans{padding:0 var(--s4) var(--s3)}
.an-ai-h{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;margin-bottom:var(--s2)}
.an-mk{color:var(--gold-ink)}
.an-ans{font-size:var(--fs-base);line-height:1.6;white-space:normal}
.an-cites{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.an-cites .btn span{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-ai-go{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin:0 0 var(--s4)}
.an-ai-go .lrow-s{flex:1 1 240px;white-space:normal}
@media(max-width:599px){.an-pr{grid-template-columns:minmax(0,1fr) repeat(2,auto)}.an-pr>span:nth-child(3){display:none}}
/* 3.1.9 · المدقّق: الخلاصة وسجلّ الاختبارات والمعيار · the auditor: conclusion, test register, criterion */
.an-op{padding:var(--s3) var(--s4);margin-bottom:12px;border-inline-start:3px solid var(--ok)}
.an-op.an-op-mid{border-inline-start-color:var(--warn)}
.an-op.an-op-bad{border-inline-start-color:var(--bad)}
.an-op-h{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s1)}
.an-tests{margin-top:var(--s2)}
.an-tests summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);font-weight:500}
.an-tl{display:grid;gap:2px;margin-top:var(--s2)}
.an-tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;font-size:var(--fs-base);padding:4px 0;border-top:1px solid var(--line-2)}
.an-cr{margin-top:var(--s1);font-size:var(--fs-sm);color:var(--text-3);line-height:1.5}
.an-cr b{font-weight:500;color:var(--text-2)}


/* العُهد بطاقاتٍ صغيرة تحت «ما حُمِّل على البنود» · the custodies as small cards under "charged to budget lines" */
.cpk.cpk-s{margin:var(--s4,14px) 0 0}
.cpk.cpk-s .cpk-g{grid-template-columns:minmax(0,1fr);gap:6px}
.cpk.cpk-s .cpk-c{padding:6px 10px;gap:2px;min-height:36px}
.cpk.cpk-s .cpk-h{margin:0}
.cpk.cpk-s .cpk-h b{font-size:var(--fs-sm);color:var(--text)}
.cpk.cpk-s .cpk-t{font-size:var(--fs-sm);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpk-sub{color:var(--text-3);font-weight:400}
@media(max-width:899px){.cpk.cpk-s .cpk-c{min-height:44px}}
/* ما حُمِّل على البنود · charged to budget lines */
.cpl{background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--gold);border-radius:var(--r,10px);margin-bottom:8px}
.cpl>summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.cpl>summary::-webkit-details-marker{display:none}
.cpl>summary:hover .cpl-h{color:var(--gold-ink)}
.cpl-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--ink);font-size:var(--fs-sm)}
.cpl-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpl-d{color:var(--text-3)}
.cpl-s{font-size:var(--fs-xs);color:var(--text-3)}
.cpl .cpd-l{margin:0 12px 8px}

/* ═══ 3.0.22 · الصور، قائمةُ الحساب، الجرس · photos, the account menu, the bell ═══
   ⚠ الصورةُ تملأ الدائرة القائمة ولا تغيّر حجمها: ‎.fc‎ ترث استدارتها، والحاويات
   تقصّ ما يفيض. The photo fills the existing circle without resizing it: .fc
   inherits its rounding and the holders clip what overflows. */
.fc{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.tk-av,.tkc-av,.cp-av,.staff-pill-avatar,.rail-me,.me-av{overflow:hidden}
.tk-av:has(.fc),.tkc-av:has(.fc),.cp-av:has(.fc),.staff-pill-avatar:has(.fc),.rail-me:has(.fc),.me-av:has(.fc){padding:0;background:var(--line)}

/* الزرّ: الصورة أو الحرف في دائرة · the button: the photo or the initial in a circle */
.me-btn{padding:0}
.me-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--gold);color:var(--ink);font-weight:600;font-size:var(--fs-sm);
  box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.me-btn:hover .me-av,.me-btn[aria-expanded=true] .me-av{box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--gold)}

/* القائمة · the menu */
.me-menu{position:fixed;z-index:9000;min-width:220px;max-width:calc(100vw - 16px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad-l);box-shadow:var(--sh-2);padding:6px;
  animation:mm-in var(--m-2) var(--ease) both}
.me-menu .mm-h{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.me-menu .mm-av{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--gold);color:var(--ink);font-weight:600}
.me-menu .mm-w{display:flex;flex-direction:column;min-width:0}
.me-menu .mm-w b{font-weight:600;font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-menu .mm-w small{color:var(--text-3);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-menu .mm-i{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;background:none;
  border-radius:var(--rad-m);color:var(--text);font:inherit;font-size:var(--fs-base);cursor:pointer;text-align:start}
.me-menu .mm-i:hover,.me-menu .mm-i:focus-visible{background:var(--bg);outline:none}
.me-menu .mm-i svg{color:var(--text-3);flex:none}
.me-menu .mm-i.bad{color:var(--bad)}
.me-menu .mm-i.bad svg{color:var(--bad)}
@keyframes mm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (min-width:1100px){.me-menu .mm-i{min-height:36px}}

/* ⚠ الجرس: الرقمُ في دائرةٍ حمراء بحلقةٍ تفصله عن الشريط — كانت فئةُ النقطة تُرفع عن
   العدّاد كلّما وُجد رقم، فيُرسم بلا شكله. The bell: the number in a red circle, ringed
   off the bar — the dot class was removed whenever there was a number, so it drew
   without its shape. */
.bell .dot{min-width:18px;height:18px;border-radius:var(--rad-pill);padding:0 5px;font-weight:600;line-height:1;
  box-shadow:0 0 0 2px var(--card);top:-5px;inset-inline-end:-6px}
@media (prefers-reduced-motion:reduce){.me-menu{animation:none}}


/* 3.1.11 · ما حُمِّل على البنود بألوان الخطّ: مصادَقٌ أخضر، وما ينتظر المصادقة كهرمانيّ — المرفوضُ لا يُحمَّل أصلاً ·
   charged to budget lines in the timeline's tones: validated green, awaiting validation amber — a rejected spend is never charged */
.cpl-t li>button{border-inline-start:3px solid transparent;padding-inline:8px;border-radius:var(--rad-s);margin-block:2px}
.cpl-t .cpl-ok>button{background:color-mix(in srgb,var(--ok-bg) 30%,var(--card));border-inline-start-color:color-mix(in srgb,var(--ok) 45%,var(--card))}
.cpl-t .cpl-pend>button{background:color-mix(in srgb,var(--warn-bg) 30%,var(--card));border-inline-start-color:color-mix(in srgb,var(--warn) 45%,var(--card))}
.cpl-t .cpl-pend>button :last-child{color:var(--warn)}
/* 3.1.11 · من يستعمل التطبيقَ الآن: وجوهٌ متراكبة في فراغ الرأس، ونقطةٌ خضراء · who is using the app now:
   overlapping faces in the header's empty space, and a green dot. Not drawn on a phone (the bar is full). */
.tb-who:empty{display:none}
.pw{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 6px 0 4px;border-radius:999px;background:none}
.pw:hover{background:var(--line)}
.pw-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;overflow:hidden;
  background:var(--ink-3);color:#fff;font-size:var(--fs-xs);font-weight:600;border:2px solid var(--card);flex:0 0 auto}
.pw .pw-av+.pw-av{margin-inline-start:-8px}
.pw-av .fc{width:100%;height:100%;object-fit:cover}
.pw-more{background:var(--line);color:var(--text-2)}
.pw-dot{position:absolute;inset-inline-start:2px;bottom:4px;width:9px;height:9px;border-radius:50%;background:var(--ok);border:2px solid var(--card)}
.pw-menu{min-width:220px}
.pw-h{padding:8px 12px;font-size:var(--fs-sm);color:var(--text-2);border-bottom:1px solid var(--line)}
.pw-i{display:flex;align-items:center;gap:8px;padding:6px 12px;min-height:36px;font-size:var(--fs-sm)}
.pw-i .pw-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pw-i small{color:var(--text-3)}
/* 3.1.13 · وحدك: الوجهُ خافت، والنقطةُ تنبض بهدوء، وسطرٌ صغير — لا زرّ يصرخ · alone: the face
   quiet, the dot breathing, one small line — nothing that shouts */
.pw-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--ok);animation:gtPulse var(--m-pulse) var(--ease) infinite}
.pw-alone .pw-av{opacity:.72}
.pw-alone:hover .pw-av{opacity:1}
.pw-l{margin-inline-start:8px;font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.pw-x{margin:0;padding:6px 12px 10px;max-width:240px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}
@media(prefers-reduced-motion:reduce){.pw-dot::after{animation:none;display:none}}
@media(max-width:1279px){.pw-l{display:none}}
@media(max-width:899px){.tb-who{display:none}}
/* ═══ 3.3.1 · المحادثة · the chat (views/chat.js, chatui.js) ════════════════════════════════════
   archetype A. على المكتب أداةٌ من سطحٍ واحد: القائمة · المحادثة · التفاصيل (من 1280px، ⌘I)، بارتفاع
   الشاشة. الفقاعاتُ على هيئة Messages: سلسلةُ الكاتب متلاصقة، زواياها الداخليّة صغيرة والخارجيّة مستديرة،
   والوقتُ في آخرها، والتفاعلاتُ على حافّتها. على الهاتف تملأ المحادثةُ الشاشةَ فوق لوحة المفاتيح
   (‎--cvh‎ من visualViewport). لا تمريرَ أفقيّ عند ٣٩٠.
   archetype A. On the desk one surface, a tool: list · conversation · details (from 1280px, ⌘I), at the
   screen's height. Bubbles in the Messages shape: a writer's run sits close, inner corners small and outer
   ones round, the time in its last bubble, reactions on its edge. On a phone the conversation fills the
   screen above the keyboard (--cvh from visualViewport). No horizontal scroll at 390. */
.cht{--cb-r:18px;--cb-in:6px;--cb-me:var(--ink);--cb-them:var(--card);display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.cht-list,.cht-main,.cht-det{min-width:0;background:var(--card)}
.cht-list{display:flex;flex-direction:column;position:relative}
.cht-lh{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s3) var(--s2) var(--s4);min-height:60px}
.cht-lh b{font-size:var(--t-ti);font-weight:600;letter-spacing:-.01em}
html[dir=rtl] .cht-lh b{letter-spacing:0}
.cht-lf{padding:0 var(--s3) var(--s2)}
.cht-lf .pfilter{width:100%;display:flex}
.cht-lf .pfilter button{flex:1;justify-content:center}
.cht-list>.fchips{padding:0 var(--s4) var(--s2)}
.cht-lb{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s1) var(--s2) var(--s3)}
.cht-ib{width:var(--h-m);height:var(--h-m);flex:0 0 auto;display:inline-grid;place-items:center;border:0;border-radius:50%;
  background:none;color:var(--text-2);font:inherit;font-weight:600;cursor:pointer;transition:background var(--m-1) var(--ease),color var(--m-1) var(--ease)}
.cht-ib:hover{background:var(--fill);color:var(--ink)}
.cht-ib.on{color:var(--gold-ink);background:var(--gold-soft)}
.cht-ib:focus-visible,.cht-row:focus-visible,.cht-send:focus-visible,.cht-tl:focus-visible,.cht-di:focus-visible,.cht-da:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
/* 3.7.18 · design B «SIRA calme»: the New button named, with its key on the desk */
.cht-new{display:inline-flex;align-items:center;gap:6px}
.cht-new kbd{font-size:var(--t-ca);font-weight:500;background:none;border:0;box-shadow:none;padding:0;color:inherit;opacity:.7}
@media(hover:none){.cht-new kbd{display:none}}
.cht-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 12px;border:0;border-radius:var(--rad-l);
  background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;transition:background var(--m-1) var(--ease)}
.cht-row:hover{background:var(--fill-2)}
.cht-row.on{background:var(--gold-soft)}
.cht-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cht-rh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cht-rh b{font-weight:500;font-size:var(--t-bo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-rh small{color:var(--text-3);font-size:var(--t-ca);flex:0 0 auto}
.cht-row.un .cht-rh b{font-weight:600}
.cht-row.un .cht-rh small{color:var(--gold-ink);font-weight:600}
.cht-rs{font-size:var(--t-su);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-row.un .cht-rs{color:var(--ink)}
.cht-drf{font-style:normal;font-weight:500;color:var(--bad)}
.cht-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:0 0 auto;box-shadow:0 0 0 3px var(--gold-soft)}
.cht-pin{color:var(--text-3);display:inline-flex;flex:0 0 auto}
/* 3.7.18 · B: the count of unread messages is a gold pill; a mention is a gold "@" beside it */
.cht-cnt{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:var(--rad-pill);background:var(--gold);color:var(--ink);
  font-size:var(--t-ca);font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.cht-atm{flex:0 0 auto;color:var(--gold-ink);font-size:var(--t-su);font-weight:600;display:inline-flex;align-items:center}
.cht-grp{display:flex;flex-direction:column}
.cht-sub{padding:var(--s3) var(--s3) var(--s1);font-size:var(--t-ca);font-weight:600;color:var(--text-3)}
.cht-av{position:relative;width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:linear-gradient(160deg,var(--ink-3),var(--ink));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;overflow:visible}
.cht-av .fc{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cht-gav{border-radius:30%;background:linear-gradient(160deg,var(--gold-2),var(--gold-ink))}
.cht-mnav{background:linear-gradient(160deg,var(--gold-2),var(--gold-ink));color:#fff}
/* 3.7.19 · Saved messages: a bookmark in an ink rounded square; a saved message names its source and goes to it */
.cht-svav{border-radius:30%;background:linear-gradient(160deg,var(--ink-3),var(--ink));color:#fff}
.cht-fwd{display:flex;align-items:center;gap:4px;margin-bottom:4px;font-size:var(--t-ca);color:var(--text-3)}
.cht-fwd span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-m.me .cht-fwd{color:rgba(255,255,255,.7)}
html[dir=rtl] .cht-fwd svg{transform:scaleX(-1)}
.cht-gosrc{display:inline-flex;align-items:center;min-height:32px;margin-top:4px;padding:0;border:0;background:none;font:inherit;
  font-size:var(--t-su);color:var(--gold-ink);cursor:pointer}
.cht-m.me .cht-gosrc{color:var(--gold-2)}
.cht-gosrc:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
/* 3.7.20 · select mode (B-Desk): the head becomes an ink bar; a circle beside each message; a picked row a soft gold fill */
.cht-hd.cht-selbar{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;box-shadow:none;gap:var(--s2);padding-inline:var(--s2) var(--s3)}
.cht-selbar .cht-ib{color:#fff}
.cht-selbar .cht-ib:hover{background:rgba(255,255,255,.12);color:#fff}
.cht-seln{flex:1;min-width:0;font-weight:600;font-size:var(--t-bo)}
.cht-selbar .btn-o{background:rgba(255,255,255,.12);color:#fff}
.cht-selbar .btn-p{background:var(--card);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
html[dir=rtl] .cht-selbar .btn-p svg{transform:scaleX(-1)}
.cht-m.slm{max-width:none;align-self:stretch;cursor:pointer;margin-inline:calc(-1 * var(--s3));padding:3px var(--s3);border-radius:var(--rad-m);
  transition:background var(--m-1) var(--ease)}
.cht-m.slm .cht-bw{max-width:min(78%,600px)}
.cht-m.slm .cht-bub *{pointer-events:none}
.cht-m.picked{background:var(--gold-soft)}
.cht-m.slm:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-2px}
/* 3.7.26 · a link's preview inside the bubble: site, title, two lines of description — flat, no image */
.cht-lp{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-width:200px;margin:6px 0 2px;padding:8px 12px;border:0;
  border-inline-start:3px solid var(--gold);border-radius:var(--rad-m);background:var(--fill-2);font:inherit;color:var(--ink);text-align:start;cursor:pointer}
.cht-lp:hover{background:var(--fill)}
.cht-lp small{font-size:var(--t-ca);color:var(--gold-ink);font-weight:600}
.cht-lp b{font-weight:600;font-size:var(--t-su);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cht-lp span{font-size:var(--t-ca);color:var(--text-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cht-m.me .cht-lp{background:rgba(255,255,255,.1);color:#fff}
.cht-m.me .cht-lp small{color:var(--gold-2)}
.cht-m.me .cht-lp span{color:rgba(255,255,255,.72)}
/* 3.7.25 · voice: the mic stands where Send is while the box is empty; the recording bar; the voice bubble */
.cht-send.cht-mic{display:none}
.cht-cmp:not(:has(.cht-pend)):has(textarea:placeholder-shown) .cht-send:not(.cht-mic){display:none}
.cht-cmp:not(:has(.cht-pend)):has(textarea:placeholder-shown) .cht-send.cht-mic{display:grid;background:var(--ink);color:#fff}
.cht-recbar{align-items:center;gap:var(--s2);padding:4px 4px 4px 8px;border-radius:var(--rad-pill);background:var(--bad-bg)}
.cht-recdot{width:10px;height:10px;border-radius:50%;background:var(--bad);flex:0 0 auto;animation:gtPulse var(--m-pulse) var(--ease) infinite}
.cht-recbar .ai-rec-t{font-weight:600;color:var(--bad);font-size:var(--t-su)}
.cht-lv{flex:1;justify-content:center;height:28px}
.cht-lv i{height:28px;background:var(--bad)}
.cht-voice{display:flex;align-items:center;gap:10px;min-width:220px;padding:2px 0}
.cht-vplay{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;cursor:pointer}
.cht-m.me .cht-vplay{background:rgba(255,255,255,.14);color:var(--gold-2)}
.cht-vbar{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.cht-vbar i{display:block;width:3px;border-radius:2px;background:var(--gold-ink);opacity:.55}
.cht-voice.on .cht-vbar i{opacity:1}
.cht-m.me .cht-vbar i{background:var(--gold-2)}
.cht-vdur{font-size:var(--t-ca);color:var(--text-3)}
.cht-m.me .cht-vdur{color:rgba(255,255,255,.7)}
@media(prefers-reduced-motion:reduce){.cht-recdot{animation:none}}
/* 3.7.24 · "typing…" in gold, in the list and the head */
.cht-rs.cht-typ,.cht-row.un .cht-rs.cht-typ,.cht-hn small.cht-typ{color:var(--gold-ink);font-weight:500}
/* 3.7.22 · search in a chat: the head becomes a search bar; matches get a gold ring, the current one a filled gold ring */
.cht-findbar{gap:4px}
.cht-fq{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:var(--h-m);padding:0 12px;border-radius:var(--rad-m);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3)}
.cht-fq:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.cht-fq input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--t-bo);color:var(--ink);padding:0}
.cht-fq input:focus{outline:none;box-shadow:none}
.cht-fn{flex:0 0 auto;font-size:var(--t-ca);color:var(--text-2);min-width:36px;text-align:center}
.cht-findbar .cht-ib:disabled{opacity:.35;cursor:default}
.cht-m.hit .cht-bub{box-shadow:0 0 0 1.5px var(--gold)}
.cht-m.hit.cur .cht-bub{box-shadow:0 0 0 3px var(--gold)}
/* 3.7.21 · New message (B-New): search, the three-way switch, picked people as chips, a footer with "Next: name" */
.cnw{display:flex;flex-direction:column;gap:var(--s2)}
.cnw-q{display:flex;align-items:center;gap:8px;height:var(--h-l);padding:0 12px;border-radius:var(--rad-m);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3)}
.cnw-q:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.cnw-q input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--t-bo);color:var(--ink);padding:0}
.cnw-q input:focus{outline:none;box-shadow:none}
.cnw .pfilter.cnw-seg{width:100%;display:flex}
.cnw .pfilter.cnw-seg button{flex:1;justify-content:center}
.cnw-list{display:flex;flex-direction:column;gap:2px;min-height:200px}
.cnw-list .cht-grp{background:var(--card);border-radius:var(--rad-l);box-shadow:var(--sh);overflow:hidden}
.cnw-list .cht-row{border-radius:0;min-height:64px;padding:0 14px}
.cnw-list .cht-row+.cht-row::before{content:"";position:absolute;top:0;inset-inline:70px 0;height:.5px;background:var(--hair)}
.cnw-list .cht-av{width:42px;height:42px;flex-basis:42px}
.cnw-list .cht-ck{width:24px;height:24px;flex-basis:24px}
.cnw-chips{display:flex;flex-wrap:wrap;gap:8px;padding:var(--s1) 0}
.cnw-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:4px 2px;border-radius:var(--rad-pill);background:var(--card);
  box-shadow:var(--sh);font-size:var(--t-su)}
.cnw-chip .cnw-cav{width:28px;height:28px;flex-basis:28px;font-size:var(--t-ca)}
.cnw-chip .cnw-cav .cht-on{display:none}
.cnw-chip .cht-x{width:32px;height:32px}
.cnw-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0 var(--s1);background:var(--card);
  box-shadow:0 -.5px 0 var(--hair)}
.cnw-foot span{flex:1;font-size:var(--t-su);color:var(--text-2)}
.cnw-foot .btn{min-height:var(--h-l)}
.cht-ck{width:22px;height:22px;flex:0 0 22px;align-self:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3);display:grid;place-items:center;color:#fff}
.cht-ck.y{background:var(--ink);box-shadow:none}
.cht-ck.x{opacity:.3}
.cht-on{position:absolute;bottom:1px;inset-inline-end:1px;width:13px;height:13px;border-radius:50%;background:var(--ok);border:2.5px solid var(--card)}
.cht-empty{padding:var(--s5) var(--s4);text-align:center;color:var(--text-3);font-size:var(--t-su)}
.cht-pick,.cht-hi{margin:auto;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.cht-pick{min-height:320px;justify-content:center;color:var(--text-3)}
.cht-pick b{font-size:var(--t-he);font-weight:600;color:var(--ink)}
.cht-pick .btn{margin-top:var(--s2)}
.cht-pki{width:72px;height:72px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;margin-bottom:var(--s1)}
.cht-hi{padding-top:var(--s6)}
.cht-hi .cht-av{width:72px;height:72px;flex-basis:72px;font-size:var(--t-ti)}
/* المحادثة · the conversation */
.cht-main{position:relative;display:flex;flex-direction:column}
.cht-th{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
.cht-hd{display:flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s2) var(--s2) var(--s3);min-height:64px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 .5px 0 var(--hair);position:absolute;inset-inline:0;top:0;z-index:3}
.cht-hb{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 6px;border:0;border-radius:var(--rad-l);background:none;
  font:inherit;color:inherit;text-align:start}
button.cht-hb{cursor:pointer}
button.cht-hb:hover{background:var(--fill-2)}
.cht-hd .cht-av{width:40px;height:40px;flex-basis:40px}
.cht-hn{display:flex;flex-direction:column;min-width:0}
.cht-hn b{font-weight:600;font-size:var(--t-he);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-hn small{font-size:var(--t-ca);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-hn small.on,.cht-hn .on{color:var(--ok)}
.cht-ha{display:flex;gap:2px;flex:0 0 auto}
.cht-dtg{display:none}
.cht-back{display:none;min-width:44px;min-height:44px;border:0;border-radius:50%;background:none;font-size:var(--t-lt);line-height:1;color:var(--ink);cursor:pointer}
.cht-msw{position:relative;flex:1;min-height:0;display:flex}
.cht-ms{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:76px var(--s5) var(--s4);display:flex;flex-direction:column;
  background:linear-gradient(var(--fill),var(--fill)),var(--card);scroll-padding-top:76px}
.cht-ms>:first-child{margin-top:auto}
.cht-more{align-self:center;margin:0 0 var(--s2)}
.cht-day{position:sticky;top:72px;z-index:2;display:flex;justify-content:center;margin:var(--s4) 0 var(--s2);pointer-events:none}
.cht-day span{font-size:var(--t-ca);font-weight:500;color:var(--text-3);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--rad-pill);padding:3px 12px}
.cht-unr{display:flex;align-items:center;gap:var(--s2);margin:var(--s3) 0 var(--s1);color:var(--gold-ink);font-size:var(--t-ca);font-weight:600}
.cht-unr::before,.cht-unr::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.cht-unr::after{background:linear-gradient(90deg,var(--gold),transparent)}
/* الرسالة · a message */
.cht-m{display:flex;flex-direction:column;align-items:flex-start;max-width:min(72%,560px,calc(100% - 104px));margin-top:14px;min-width:0}
.cht-m.cont{margin-top:2px}
.cht-m.hrx{margin-top:22px}
.cht-m.hrx .cht-bub{margin-inline-end:6px}
.cht-m.me.hrx .cht-bub{margin-inline-end:0;margin-inline-start:6px}
.cht-m.me{align-self:flex-end;align-items:flex-end}
.cht-who{font-size:var(--t-ca);font-weight:500;color:var(--text-3);padding:0 14px 3px;padding-inline-start:calc(28px + 8px + 14px)}
.cht-bw{position:relative;display:flex;align-items:flex-end;gap:8px;max-width:100%}
.cht-m.me .cht-bw{flex-direction:row-reverse}
.cht-mav{width:28px;height:28px;flex:0 0 28px;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,var(--ink-3),var(--ink));color:#fff;
  display:grid;place-items:center;font-size:var(--t-ca);font-weight:600}
.cht-mav .fc{width:100%;height:100%;object-fit:cover}
.cht-mav.sp{visibility:hidden}
.cht-bub{position:relative;min-width:0;max-width:100%;padding:8px 12px;background:var(--cb-them);color:var(--ink);border-radius:var(--cb-r);box-shadow:var(--sh)}
.cht-m:not(.me).cont .cht-bub{border-start-start-radius:var(--cb-in)}
.cht-m:not(.me):not(.end) .cht-bub{border-end-start-radius:var(--cb-in)}
.cht-m.me .cht-bub{background:var(--cb-me);color:#fff;box-shadow:none}
.cht-m.me.cont .cht-bub{border-start-end-radius:var(--cb-in)}
.cht-m.me:not(.end) .cht-bub{border-end-end-radius:var(--cb-in)}
.cht-b{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-bo);line-height:1.42}
.cht-m.del .cht-bub{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3)}
.cht-m.me.del .cht-bub{color:var(--text-3)}
.cht-m.emo .cht-bub{background:none;box-shadow:none;padding:0 2px}
.cht-emo{font-size:40px;line-height:1.15}
.cht-m.me.emo .cht-bub{color:var(--ink)}
.cht-m.me.emo .cht-mt{color:var(--text-3)}
.cht-m.tome:not(.me) .cht-bub{box-shadow:inset 0 0 0 1.5px var(--gold);background:var(--gold-soft)}
/* 3.7.18 · B: the time and the mark sit under the bubble, outside it · the time and mark under the bubble */
.cht-mt{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 0;font-size:var(--t-ca);color:var(--text-3)}
.cht-m.hfc>.cht-mt{padding-inline-start:44px}
.cht-tk{display:inline-flex}
.cht-tk.pend{opacity:.7}
.cht-tk.seen{color:var(--gold-ink)}
.cht-at{font-weight:600;color:var(--gold-ink)}
.cht-m.me .cht-at{color:var(--gold-2)}
.cht-at.me{background:rgba(207,156,81,.22);border-radius:var(--rad-s);padding:0 3px}
.cht-lnk{display:inline;border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:currentColor;
  text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere;text-align:start}
.cht-m.me .cht-lnk{color:#fff}
.cht-q{display:flex;flex-direction:column;gap:1px;width:100%;min-width:150px;margin:2px 0 6px;padding:6px 10px;border:0;border-inline-start:3px solid var(--gold);
  border-radius:var(--rad-l);background:rgba(255,255,255,.7);font:inherit;color:var(--text-2);text-align:start;cursor:pointer}
.cht-q b{font-size:var(--t-ca);font-weight:600;color:var(--gold-ink)}
.cht-q span{font-size:var(--t-su);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cht-m.me .cht-q{background:rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.cht-m.me .cht-q b{color:var(--gold-2)}
.cht-rec{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:220px;max-width:100%;margin:4px -6px 2px;text-align:start;
  font:inherit;color:var(--ink);background:var(--card);border:0;box-shadow:0 0 0 .5px var(--hair),0 1px 2px rgba(15,32,59,.06);
  border-radius:var(--rad-l);padding:10px 14px;cursor:pointer;min-height:44px;transition:transform var(--m-1) var(--ease)}
.cht-rec:hover{box-shadow:0 0 0 .5px var(--hair),0 4px 14px rgba(15,32,59,.1)}
.cht-rec:active{transform:scale(.98)}
.cht-rec small{font-size:var(--t-ca);color:var(--gold-ink);font-weight:600}
.cht-rec b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cht-rec-go{font-size:var(--t-ca);color:var(--text-3)}
.cht-file small{color:var(--ink-3)}
.cht-rec-x{cursor:default;color:var(--text-3);font-size:var(--t-su)}
/* 3.7.19 · a record or file card inside a bubble fills the bubble, never past it (it overflowed by 14px at 1280,
   and by 30px on the phone before 3.7.18), and the bubble holding one takes a readable width; flat, no card in a card */
.cht-bub:has(>.cht-rec){width:min(280px,100%)}
.cht-bub>.cht-rec{width:100%;min-width:0;margin:6px 0 2px;padding:8px 12px;background:var(--fill-2);box-shadow:inset 0 0 0 .5px var(--hair)}
.cht-bub>.cht-rec:hover{background:var(--fill);box-shadow:inset 0 0 0 .5px var(--hair)}
.cht-m.me .cht-bub>.cht-rec{background:rgba(255,255,255,.1);box-shadow:none;color:#fff}
.cht-m.me .cht-bub>.cht-rec small{color:var(--gold-2)}
.cht-m.me .cht-bub>.cht-rec .cht-rec-go{color:rgba(255,255,255,.7)}
.cht-m.flash .cht-bub::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--cb-r) + 4px);box-shadow:0 0 0 2px var(--gold);animation:chtFlash var(--m-pulse) var(--ease) both;pointer-events:none}
@keyframes chtFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
/* الأدواتُ عند المرور · the tools on hover */
/* 3.7.18 · out of the flow: hidden tools no longer took ~100px beside every bubble (bubbles wrapped at 140px) */
.cht-tools{display:flex;gap:2px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:100%;margin-inline-start:6px;
  transition:opacity var(--m-1) var(--ease)}
.cht-m.me .cht-tools{inset-inline-start:auto;inset-inline-end:100%;margin-inline-start:0;margin-inline-end:6px}
.cht-m:hover .cht-tools,.cht-m:focus-within .cht-tools{opacity:1}
.cht-tl{width:30px;height:30px;border:0;border-radius:50%;background:var(--card);box-shadow:var(--sh);color:var(--text-2);display:grid;place-items:center;cursor:pointer}
.cht-tl:hover{color:var(--ink);background:var(--fill-2)}
@media(hover:none){.cht-tools{display:none}
  .cht-bub{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
/* التفاعلاتُ على حافّة الفقاعة · reactions on the bubble's edge */
.cht-rx{position:absolute;top:-14px;inset-inline-end:-10px;display:flex;gap:3px;z-index:1}
.cht-m.me .cht-rx{inset-inline-end:auto;inset-inline-start:-10px}
.cht-rxc{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 7px;border:0;border-radius:var(--rad-pill);background:var(--card);
  box-shadow:0 0 0 2px var(--card),0 0 0 2.5px var(--hair),0 1px 3px rgba(15,32,59,.08);font:inherit;font-size:var(--t-su);cursor:pointer;color:var(--ink)}
.cht-rxc b{font-size:var(--t-ca);font-weight:600;color:var(--text-2)}
.cht-rxc.mine{background:var(--gold-soft)}
.cht-rp-pick{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:5;display:flex;gap:2px;padding:5px;background:var(--card);
  border-radius:var(--rad-pill);box-shadow:var(--sh-2);animation:growIn var(--m-2) var(--spring,var(--ease)) both}
.cht-m.me .cht-rp-pick{inset-inline-start:auto;inset-inline-end:0}
.cht-rp-pick button{width:40px;height:40px;border:0;border-radius:50%;background:none;font-size:var(--t-ti);cursor:pointer;transition:transform var(--m-1) var(--ease)}
.cht-rp-pick button:hover{background:var(--fill-2);transform:scale(1.2) translateY(-2px)}
.cht-rp-pick button.on{background:var(--gold-soft)}
/* «↓» إلى آخر رسالة · "↓" to the last message */
.cht-jump{position:absolute;bottom:var(--s3);inset-inline-end:var(--s4);width:40px;height:40px;border:0;border-radius:50%;background:var(--card);
  box-shadow:var(--sh-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;
  transition:opacity var(--m-2) var(--ease),transform var(--m-2) var(--ease);z-index:3}
.cht-jump.on{opacity:1;transform:none;pointer-events:auto}
.cht-jump b{position:absolute;top:-6px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--rad-pill);background:var(--gold);
  color:var(--ink);font-size:var(--t-ca);display:grid;place-items:center}
/* المربّع · the composer */
.cht-cmp{padding:var(--s2) var(--s4) var(--s3);background:var(--card);box-shadow:0 -.5px 0 var(--hair);position:relative;z-index:2}
.cht-cmp-r{display:flex;align-items:flex-end;gap:var(--s2)}
.cht-fld{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;padding:3px;border-radius:22px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--m-1) var(--ease)}
.cht-fld:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink-3),0 0 0 4px rgba(15,32,59,.06)}
.cht-fld .cht-ib{width:36px;height:36px}
.cht-dir[data-to=rtl] svg{transform:scaleX(-1)}
.cht-cmp textarea{flex:1;min-width:0;height:36px;min-height:36px;max-height:160px;resize:none;overflow-y:auto;padding:7px 6px;border:0;
  background:transparent;font:inherit;font-size:var(--t-bo);line-height:22px;color:var(--ink)}
.cht-cmp textarea:focus{outline:none;box-shadow:none}
.cht-send{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background var(--m-1) var(--ease),color var(--m-1) var(--ease),transform var(--m-1) var(--spring,var(--ease))}
.cht-send:active{transform:scale(.9)}
html[dir=rtl] .cht-send svg{transform:scaleX(-1)}
.cht-cmp:not(:has(.cht-pend)):has(textarea:placeholder-shown) .cht-send{background:var(--fill);color:var(--text-3)}
.cht-kh{display:none}
.cht-rpl{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s2);padding:6px 6px 6px 12px;border-inline-start:3px solid var(--gold);
  border-radius:var(--rad-l);background:var(--fill-2);animation:growIn var(--m-2) var(--ease) both}
.cht-rpl-t{flex:1;min-width:0;display:flex;flex-direction:column}
/* 3.7.16 · the file waiting to be sent, above the box */
.cht-pend{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s2);padding:6px;border-radius:var(--rad-l);background:var(--fill-2);
  animation:growIn var(--m-2) var(--ease) both;transition:opacity var(--m-1) var(--ease)}
.cht-pend.busy{opacity:.6}
.cht-pend-img,.cht-pend-doc{flex:0 0 auto;width:56px;height:56px;border-radius:var(--rad-m);overflow:hidden;background:var(--fill);display:grid;place-items:center;color:var(--text-2)}
.cht-pend-img img{display:block;width:100%;height:100%;object-fit:cover}
.cht-pend-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cht-pend-t b{font-size:var(--t-su);font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-pend-t small{font-size:var(--t-ca);color:var(--text-2)}
.cht-rpl-t b{font-size:var(--t-ca);font-weight:600;color:var(--gold-ink)}
.cht-rpl-t span{font-size:var(--t-su);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-x{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--text-3);cursor:pointer}
.cht-x:hover{background:var(--fill);color:var(--ink)}
.cht-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cht-main.drop::after{content:"";position:absolute;inset:8px;border:2px dashed var(--gold);border-radius:var(--rad-l);background:var(--gold-soft);opacity:.7;pointer-events:none;z-index:4}
/* التفاصيل · the details */
.cht-det{display:none;overflow-y:auto;overscroll-behavior:contain;padding:var(--s4) var(--s3) var(--s5);box-shadow:inset .5px 0 0 var(--hair)}
html[dir=rtl] .cht-det{box-shadow:inset -.5px 0 0 var(--hair)}
.cht-dh{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:var(--s3) var(--s2) var(--s4)}
.cht-dav{width:80px;height:80px;flex-basis:80px;font-size:var(--t-lt);margin-bottom:var(--s2)}
.cht-dav .cht-on{width:18px;height:18px;bottom:3px;inset-inline-end:3px;border-width:3px}
.cht-dh b{font-size:var(--t-he);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-dh small{font-size:var(--t-su);color:var(--text-3)}
.cht-dh small.on{color:var(--ok)}
.cht-das{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.cht-da{display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 4px;border:0;border-radius:var(--rad-l);background:var(--fill-2);
  font:inherit;color:var(--ink);cursor:pointer;transition:background var(--m-1) var(--ease)}
.cht-da:hover{background:var(--fill)}
.cht-da.on{background:var(--gold-soft);color:var(--gold-ink)}
.cht-da small{font-size:var(--t-ca);color:var(--text-2);line-height:1.2}
.cht-ds{padding-top:var(--s3);margin-top:var(--s2);box-shadow:inset 0 .5px 0 var(--hair)}
.cht-ds h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--s1);padding:0 var(--s2);font-size:var(--t-ca);font-weight:600;color:var(--text-3)}
.cht-ds h4 span{color:var(--text-3);font-weight:500}
.cht-di{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px var(--s2);border:0;border-radius:var(--rad-m);background:none;
  font:inherit;color:inherit;text-align:start}
button.cht-di{cursor:pointer}
button.cht-di:hover{background:var(--fill-2)}
.cht-di.x{color:var(--text-3)}
.cht-sav{width:34px;height:34px;flex-basis:34px;font-size:var(--t-ca)}
.cht-sav .cht-on{width:10px;height:10px;border-width:2px}
.cht-dic{width:34px;height:34px;flex:0 0 34px;border-radius:var(--rad-m);background:var(--fill);color:var(--ink-3);display:grid;place-items:center}
.cht-dt{flex:1;min-width:0;display:flex;flex-direction:column}
.cht-dt b{font-weight:500;font-size:var(--t-su);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-dt small{font-size:var(--t-ca);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-dn{margin:var(--s3) var(--s2) 0;font-size:var(--t-su);color:var(--text-3);text-align:center}
/* القائمة على الرسالة · the message menu */
.cht-mrx{display:flex;justify-content:space-between;gap:4px;padding:var(--s2) 0 var(--s3)}
.cht-mrx button{width:48px;height:48px;border:0;border-radius:50%;background:var(--fill-2);font-size:var(--t-ti);cursor:pointer}
.cht-mrx button.on{background:var(--gold-soft);box-shadow:0 0 0 1.5px var(--gold)}
.cht-mis{display:flex;flex-direction:column;border-radius:var(--rad-l);overflow:hidden;box-shadow:0 0 0 .5px var(--hair)}
.cht-mi{min-height:48px;padding:0 var(--s4);border:0;border-top:.5px solid var(--hair);background:var(--card);font:inherit;color:var(--ink);text-align:start;cursor:pointer}
.cht-mi:first-child{border-top:0}
.cht-mi:hover{background:var(--fill-2)}
.cht-mi.btn-del{color:var(--bad)}
/* أعضاءُ المجموعة · the group's members */
.cht-mems{display:flex;flex-direction:column;margin-bottom:var(--s3)}
.cht-mem{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.cht-mem:last-child{border-bottom:0}
.cht-mem b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-mem small{color:var(--gold-ink);font-size:var(--t-ca)}
/* الإشارات · Mentions */
.cht-mnl{padding-top:80px}
.cht-mnc{margin:0 0 var(--s3);padding:var(--s3) var(--s4);background:var(--card);border-radius:var(--rad-l);box-shadow:var(--sh);display:grid;gap:4px}
.cht-mnc.open{box-shadow:var(--sh),inset 3px 0 0 var(--gold)}
html[dir=rtl] .cht-mnc.open{box-shadow:var(--sh),inset -3px 0 0 var(--gold)}
.cht-mnh{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-ca);color:var(--text-3)}
.cht-mns{font-size:var(--t-ca);color:var(--text-2)}
.cht-mnc .cht-rec{justify-self:start;min-width:0;flex-direction:row;padding:6px 12px;min-height:36px;margin:4px 0 0}
.cht-mnl{background:var(--fill-2)}
/* الرسائلُ الجديدة تنمو، لا رسائلُ الفتح · new messages grow in, not the opening ones */
.cht-ms:not(.ready) .m-new{animation:none}
@media(min-width:900px){
  .cht{grid-template-columns:minmax(300px,360px) minmax(0,1fr);height:calc(100dvh - 156px);min-height:520px;
    background:var(--card);border-radius:var(--rad-l);box-shadow:var(--sh);overflow:hidden}
  .cht-list{box-shadow:inset -.5px 0 0 var(--hair);background:linear-gradient(var(--fill-2),var(--fill-2)),var(--card)}
  .cht-row:hover{background:var(--fill)}
  .cht-row.on{background:var(--gold-soft)}
  .cht-row{min-height:64px;padding:0 12px;border-radius:var(--rad-m)}
  .cht-list .cht-av{width:42px;height:42px;flex-basis:42px}
  html[dir=rtl] .cht-list{box-shadow:inset .5px 0 0 var(--hair)}
  .cht-list,.cht-main,.cht-det{height:100%;min-height:0}
  .cht-kh{display:block;height:0;overflow:hidden;opacity:0;padding-inline:var(--s4);font-size:var(--t-ca);color:var(--text-3);
    transition:opacity var(--m-1) var(--ease)}
  .cht-cmp:focus-within .cht-kh{height:auto;opacity:1;padding-top:6px}
}
@media(min-width:1100px){
  body.desk .cht{height:calc(100dvh - var(--bar-1) - 104px)}
}
@media(min-width:1280px){
  .cht.has-det{grid-template-columns:minmax(300px,360px) minmax(0,1fr) 300px}
  .cht.has-det .cht-det{display:block}
  .cht-dtg{display:inline-grid}
  .cht.has-det .cht-gi{display:none}
}
@media(max-width:899px){
  .cht-lh{display:none}
  .cht-lf{padding:0 0 var(--s2)}
  .cht-list{background:none;overflow:visible}
  .cht-lb{padding:0;overflow:visible}
  .cht-row{border-radius:0;min-height:72px;padding:0 14px}
  .cht-list .cht-av{width:46px;height:46px;flex-basis:46px}
  /* 3.7.18 · B: on the phone each section is one white card, rows parted by an inset hairline */
  .cht-grp{background:var(--card);border-radius:var(--rad-l);box-shadow:var(--sh);overflow:hidden}
  .cht-grp .cht-row:hover{background:var(--fill-2)}
  .cht-grp .cht-row.on{background:var(--gold-soft)}
  .cht-grp .cht-row+.cht-row::before{content:"";position:absolute;top:0;inset-inline:74px 0;height:.5px;background:var(--hair)}
  .cht-sub{padding:var(--s3) var(--s3) 6px}
  .cht:not(.has-sel) .cht-main{display:none}
  .cht.has-sel .cht-main{position:fixed;inset-inline:0;top:var(--cvt,0);height:var(--cvh,100dvh);z-index:60;background:var(--card);
    animation:chtIn var(--m-page) var(--ease) both}
  body:has(.cht.has-sel) :is(#bnav,#secrow,.sec-row,#fab,#ask-dock,.ask-fab){visibility:hidden}
  /* ⚠ دخولُ الصفحة يحرّك ‎.cht‎ بـ transform، وtransform يحبس ‎position:fixed‎ داخله — فلا حركةَ عليه هنا ·
     the page's entrance moves .cht by a transform, and a transform traps position:fixed inside it — none here */
  #view>.cht.has-sel{animation:none!important;transform:none!important}
  .cht-hd{padding-top:calc(var(--s1) + env(safe-area-inset-top));min-height:calc(60px + env(safe-area-inset-top))}
  .cht-day{top:calc(68px + env(safe-area-inset-top))}
  .cht-ms{padding:calc(72px + env(safe-area-inset-top)) var(--s3) var(--s3);scroll-padding-top:calc(72px + env(safe-area-inset-top))}
  .cht-cmp{padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom))}
  .cht-back{display:inline-flex;align-items:center;justify-content:center}
  .cht-m{max-width:82%}
  .cht-fld .cht-ib{width:40px;height:40px}
  .cht-pend .cht-x{width:44px;height:44px}
  .cht-cmp textarea{height:40px;min-height:40px;padding:9px 6px}
  .cht-send{width:46px;height:46px}
}
@keyframes chtIn{from{opacity:0;transform:translateX(calc(40px * var(--vt)))}}
@media(prefers-reduced-motion:reduce){.cht.has-sel .cht-main,.cht-rpl,.cht-pend,.cht-rp-pick,.cht-m.flash .cht-bub::after{animation:none}
  .cht-jump,.cht-send,.cht-rp-pick button,.cht-rec{transition:none}}
/* 3.1.14 · المجموعات: مربّعٌ مدوّر بحرف الاسم لا وجه، والكاتبُ مسمّىً فوق سلسلته · groups: a rounded
   square with the name's letter, never a face; the writer named above their run */
.pw{cursor:pointer}
.pw-cn{margin-inline-start:6px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--rad-pill);background:var(--bad);color:#fff;
  font-size:var(--fs-xs);font-weight:600;display:inline-grid;place-items:center;line-height:1}
.me-menu .mm-o{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 10px;font-size:var(--fs-sm);color:var(--text-2)}
.me-menu .mm-o .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--rad-m);overflow:hidden}
.me-menu .mm-o .seg button{min-width:40px;min-height:32px;border:0;background:none;font:inherit;color:var(--text-2);cursor:pointer}
.me-menu .mm-o .seg button.on{background:var(--ink);color:#fff}
#s-lang{display:none!important}
.pw-fb{padding:0;border:0;font:inherit;cursor:pointer;position:relative}
.pw-fb:hover{z-index:1;box-shadow:0 0 0 2px var(--gold)}
.pw-fb:focus-visible{outline:2px solid var(--gold);outline-offset:1px;z-index:1}
.pw-go{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.pw-go:hover{background:var(--bg)}
.pw-go small{color:var(--gold-ink)}
.tkp-send{margin-inline-start:auto}
/* ═══ 3.1.19 · تفصيلُ البند وإعادةُ التوزيع · decomposing a line and redistributing ═══
   قطعُ العُدّة وحدها (§6): بلاطاتٌ للأرقام، ملاحظةٌ، عنوانُ قسم، وكلُّ بندٍ فرعيّ بطاقةُ سجلٍّ
   (‎.rec‎) فيها حقولُ النموذج بأسمائها فوقها. ثلاثةُ أعمدة على الشاشة العريضة، عمودٌ على الهاتف.
   Kit parts alone (§6): tiles for the figures, a note, a section heading, and each sub-line a
   record card (.rec) holding the form's own fields with their labels above. Three columns wide,
   one on a phone. */
.sl-tiles{margin-bottom:var(--s3)}
.sl-tiles .tile .s{margin-top:var(--s1);display:flex;flex-wrap:wrap;gap:var(--s1)}
.sl-note{margin-bottom:var(--s4)}
.sl-sec{margin-bottom:var(--s3)}
.sl-grid{display:flex;flex-direction:column;gap:var(--s3)}
.sl-it{padding:var(--s3) var(--s4) var(--s4);box-shadow:none}
.sl-it-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);min-height:32px}
.sl-it-h .btn-del{min-height:32px}
.sl-f{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.sl-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.sl-mvs{box-shadow:none}
.sl-mv{padding:var(--s3) var(--s4)}
.sl-mv+.sl-mv{border-top:1px solid var(--line-2)}
.sl-mv-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.sl-mv-d{font-size:var(--fs-md);font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.sl-mv-sub{font-size:var(--fs-sm);color:var(--text-3);margin:2px 0 var(--s3)}
@media (min-width:640px){
  .sl-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sl-f{grid-template-columns:140px minmax(0,1fr) 180px}
}
.code.bl-sub{background:var(--ink-3)}
.bl-ind{color:var(--text-3);margin-inline-end:var(--s1);display:inline-block}
/* العمقُ درجاتٌ من سلّم المسافات · depth in steps of the spacing scale */
.bl-ind.bl-d2{margin-inline-start:var(--s3)} .bl-ind.bl-d3{margin-inline-start:var(--s5)} .bl-ind.bl-d4{margin-inline-start:calc(var(--s6) + var(--s3))}
.lrow.bl-subrow{border-inline-start:2px solid var(--line)}
.bl-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.lrow.bl-d1{padding-inline-start:var(--s6)} .lrow.bl-d2{padding-inline-start:calc(var(--s6) + var(--s4))}
.lrow.bl-d3,.lrow.bl-d4{padding-inline-start:calc(var(--s6) * 2)}
/* ═══ 3.1.26 · استيرادُ مصروفات العهدة · importing custody spends ═══════════════
   على أجزاء معاينة اللصق (.px-*)؛ وهذه لمصدر الملفّ ولربط الرموز بالأشخاص فقط ·
   on the paste preview's parts (.px-*); these are the file source and the code → person map */
.spi-src{display:grid;gap:var(--s2);margin-bottom:var(--s3)}
.spi-link{display:flex;gap:var(--s2)}
.spi-link input{flex:1;min-width:0;font-size:var(--fs-lg)}
.spi-off{font-size:var(--fs-sm);color:var(--text-3)}
.spi-file{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.spi-whos{border:1px solid var(--line-2);border-radius:var(--rad-m);padding:var(--s2) var(--s3);margin-bottom:var(--s2)}
.spi-h{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin-bottom:6px}
.spi-who{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:4px 0}
.spi-who select{min-width:0;flex:1 1 180px}
.spi-code{font-weight:600;min-width:3ch}
.spi-t td select{font-size:var(--fs-sm);padding:4px 6px;min-height:30px;width:auto;min-width:130px!important;max-width:190px}
.spi-t td:has(>select){max-width:none!important;overflow:visible}
.spi-fee{color:var(--text-3);font-size:var(--fs-xs)}

/* ═══ 3.1.26 · المسودات: الإرفاق بمصروف مسجّل، الإفلات · drafts: attach to a recorded expense, the drop ═══
   الإيصالُ بجانب القائمة على المنضدة، وفوقها على الهاتف · the receipt beside the list on a desk,
   above it on a phone */
body.dr-dragging #view{outline:2px dashed var(--gold);outline-offset:-6px;border-radius:var(--rad-l)}
@media(min-width:900px){.sheet.dra-sheet{max-width:920px!important}}
.dra{display:grid;gap:var(--s3)}
@media(min-width:900px){.dra{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.dra-l{position:sticky;top:0}
.dra-pv{width:100%;max-height:60vh;object-fit:contain;border-radius:var(--rad-m);background:var(--bg);display:block}
@media(max-width:899px){.dra-pv{max-height:32vh}}
.dra-pv-i{display:grid;place-items:center;gap:6px;padding:var(--s6);color:var(--text-2);font-weight:600;border:0;cursor:pointer;min-height:44px}
.dra-r{display:grid;gap:var(--s2);min-width:0}
.dra-r input{font-size:var(--fs-lg)}
.dra-h{font-size:var(--fs-xs);color:var(--text-3)}
.dra-list{display:grid;gap:6px;max-height:56vh;overflow:auto}
.dra-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);text-align:start;width:100%;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--rad-m);padding:10px 12px;cursor:pointer;min-height:44px}
.dra-c:hover{border-color:var(--gold)}
.dra-c.sug{border-color:var(--gold);background:var(--warn-bg)}
.dra-c-t{font-weight:600;color:var(--ink);font-size:var(--fs-base);display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.dra-c-s{grid-column:1;font-size:var(--fs-sm);color:var(--text-3);min-width:0}
.dra-c-a{grid-row:1/span 2;grid-column:2;align-self:center;font-weight:600;color:var(--ink);font-size:var(--fs-base)}
.dra-c-a small{display:block;font-weight:400;color:var(--text-3);font-size:var(--fs-xs)}
.dra-add{display:flex;gap:var(--s2);margin:0 0 var(--s3)}
.dra-add input{flex:1;min-width:0;font-size:var(--fs-lg)}
.drf-note{white-space:pre-wrap;font-size:var(--fs-md);color:var(--ink);background:var(--bg);border-radius:var(--rad-m);padding:var(--s3)}

/* 3.1.29 · أوراقُ المجلّد فوق المعاينة · the folder's sheets above the preview */
.spi-shs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}
.spi-shs .tag{cursor:pointer;min-height:32px}

/* ═══ 3.1.30 · البوصلة · Compass ═══════════════════════════════════════════
   المكتب: شجرةٌ أفقيّة بخطوط CSS من بداية السطر، ولوحةٌ لاصقة بجانبها. الهاتف: مخطّطٌ يُطوى.
   The desk: a horizontal tree drawn with CSS lines from the inline start, and a sticky
   panel beside it. The phone: a folding outline. Logical properties throughout (RTL). */
.cps-intro{margin-bottom:var(--s3)}
/* 3.1.35 · «كيف تعمل البوصلة؟» · How Compass works */
.cps-how{margin-bottom:var(--s3)}
.cph p{font-size:var(--fs-md);line-height:1.75;color:var(--text-2);margin:0 0 var(--s2)}
.cph .flow{margin:var(--s3) 0}
.cph-b{padding:var(--s2) 0;border-top:1px solid var(--line-2)}
.cph-b>b{display:block;font-size:var(--fs-body);margin-bottom:var(--s1)}
.cph .note{margin:var(--s3) 0 var(--s2)}
.cps-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.cps-wait{margin-inline-start:auto;font-size:var(--fs-sm);color:var(--text-2)}
/* 3.1.32 · اللقطة والفرق ووثيقةُ المجلس · the snapshot, the difference, the board document */
.cps-cnt{font-size:var(--fs-sm);color:var(--text-2)}
.cps-cnt + .cps-pdf,.cps-wait + .cps-pdf{margin-inline-start:var(--s2)}
.cps-cnt:last-of-type + .cps-pdf{margin-inline-start:auto}
.cps-diff{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.cps-df{margin-top:var(--s2)}
.cps-df summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm)}
.cps-snap{padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
/* 3.1.33 · قراءةُ SIRA AI · SIRA AI's reading */
.cps-ai{padding:var(--s3) var(--s4);margin-bottom:var(--s3);border-inline-start:3px solid var(--gold)}
/* 3.1.37 · the Monday brief preview: the email in a sandboxed frame */
.cpb-sheet .cpb-fr{display:block;width:100%;height:70vh;border:1px solid var(--line);border-radius:var(--rad-m);background:var(--bg);margin-top:var(--s3)}
.cps-aih{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s1)}
.cps-ai .an-ans{margin-top:var(--s2)}
.cps-c{display:inline-flex;align-items:center;gap:var(--s1);min-height:36px;padding:0 var(--s3);border:1px solid var(--line);
  border-radius:var(--rad-pill);background:var(--card);color:var(--text);font-size:var(--fs-sm);cursor:pointer}
.cps-c.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cps{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s4);align-items:start}
.cps-map{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--rad-l);padding:var(--s4)}
.cps-row{display:flex;align-items:center}
.cps-kids{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding-inline-start:28px;margin-inline-start:12px}
.cps-kids::before{content:"";position:absolute;inset-inline-start:0;top:18px;bottom:18px;border-inline-start:1px solid var(--line)}
.cps-kids>.cps-row{position:relative}
.cps-kids>.cps-row::before{content:"";position:absolute;inset-inline-start:-28px;width:28px;top:50%;border-top:1px solid var(--line)}
.cps-kids>.cps-row>.cps-n{align-self:center}
.cps-n{display:flex;align-items:center;gap:var(--s2);min-height:36px;max-width:240px;padding:var(--s1) var(--s3);flex:none;
  border:1px solid var(--line);border-radius:var(--rad-m);background:var(--card);color:var(--text);font-size:var(--fs-sm);
  text-align:start;cursor:pointer}
.cps-n small{color:var(--text-3);font-size:var(--fs-xs)}
.cps-nt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cps-n.cps-k-root{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.cps-n.cps-k-branch{font-weight:600;border-color:var(--gold)}
.cps-n.on{outline:2px solid var(--gold);outline-offset:1px}
.cps-n.cps-dim{opacity:.45}
.cps-dots{display:inline-flex;gap:3px;margin-inline-start:auto}
.cps-d{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:var(--rad-pill);
  font-style:normal;font-size:var(--fs-2xs);font-weight:600;color:#fff;font-family:var(--font-num)}
.cps-d.hi{background:var(--bad)} .cps-d.th{background:var(--warn)} .cps-d.op{background:var(--ok)}
.cps-panel{position:sticky;top:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:var(--rad-l);padding:var(--s4);
  max-height:calc(100vh - 140px);overflow:auto}
.cps-ph{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-md);margin-bottom:var(--s3)}
.cps-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s2);margin:0 0 var(--s3)}
.cps-facts div{background:var(--bg);border-radius:var(--rad-m);padding:var(--s2) var(--s3)}
.cps-facts dt{font-size:var(--fs-xs);color:var(--text-3)} .cps-facts dd{margin:0;font-size:var(--fs-base)}
.cps-sigs{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.cps-s{border:1px solid var(--line);border-inline-start:3px solid var(--warn);border-radius:var(--rad-m);padding:var(--s2) var(--s3)}
.cps-s.cps-threat.sev-high{border-inline-start-color:var(--bad)}
.cps-s.cps-threat.sev-low{border-inline-start-color:var(--line)}
.cps-s.cps-opportunity{border-inline-start-color:var(--ok)}
.cps-st{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-base)}
.cps-sk{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--text-3)}
.cps-se{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}
.cps-sa{font-size:var(--fs-sm);color:var(--text);margin:var(--s1) 0}
.cps-quiet{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--s3)}
/* 3.1.31 · القرار على الإشارة وسجلّ القرارات · the decision on a signal and the register */
.cps-sb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s1)}
.cps-dec{flex:1 1 100%;font-size:var(--fs-sm);color:var(--text-2);background:var(--bg);border-radius:var(--rad-m);
  padding:var(--s2) var(--s3);border-inline-start:3px solid var(--line)}
.cps-dec.cps-dc-act{border-inline-start-color:var(--gold)}
.cps-dec.cps-dc-accept,.cps-dec.cps-dc-done{border-inline-start-color:var(--ok)}
.cps-dec.cps-dc-defer{border-inline-start-color:var(--warn)}
.cps-dr{color:var(--text);margin-top:2px}
.cps-dm{color:var(--bad);font-weight:600;margin-top:2px}
.cps-reg{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.cps-rh{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.cps-ri{border:1px solid var(--line);border-radius:var(--rad-m);padding:var(--s2) var(--s3);font-size:var(--fs-base)}
.cps-links{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cps-outline{display:flex;flex-direction:column;gap:var(--s2)}
.cps-o{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-m)}
.cps-o summary{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3);cursor:pointer;font-size:var(--fs-base)}
.cps-o.d0>summary,.cps-o.d1>summary{font-weight:600}
.cps-ob{padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.cps-ob>.cps-o{border-color:var(--line-2)}
.cps-outline .cps-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);margin-bottom:var(--s2)}
.cps-outline .cps-facts div{padding:var(--s1) var(--s2)}
.cps-outline .cps-facts dd{font-size:var(--fs-sm)}
@media(max-width:1280px){.cps{grid-template-columns:minmax(0,1fr) 300px}}


/* 3.2.14 · a similar task exists — said on the draft card */
.dup-w{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.dup-w .btn{margin-inline-start:auto}
/* 3.2.13 · بطاقة التغيير: ما هو الآن → ما يُقترح · the change card: what it is now → what is proposed */
.chg-t{font-weight:600;font-size:var(--fs-md);margin:var(--s2) 0 var(--s3);color:var(--text)}
/* 3.2.15 · ما تحت رأس البطاقة يحفظ حاشيتها · what sits under the card's head keeps its margin */
.ai-card.chg>.chg-t,.ai-card.chg>.chg-rows,.ai-card.chg>.chg-cmt,.ai-card.chg>.chg-mv{margin-inline:16px}
.ai-card.chg>:last-child{margin-bottom:var(--s4)}
.chg-rows,.chg-mv{display:grid;gap:var(--s2)}
.chg-mv{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.chg-mvh{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.chg-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--s2);align-items:baseline;font-size:var(--fs-base)}
.chg-l{color:var(--text-2);min-width:0;overflow-wrap:anywhere}
.chg-from{color:var(--text-3);text-decoration:line-through}
.chg-ar{color:var(--gold-ink)}
.chg-to{color:var(--text);font-weight:600}
.chg-cmt{margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--bg);border-radius:var(--rad-s);white-space:pre-wrap;font-size:var(--fs-base)}
.chg-sk{font-size:var(--fs-sm);color:var(--text-3)}
html[dir=rtl] .chg-ar{display:inline-block;transform:scaleX(-1)}
/* 3.2.15 · المسوّدةُ على صفحتها: بطاقاتٌ بيضاء على أرض التطبيق · a draft on its own page: white cards on the app's ground */
.drp{display:grid;gap:var(--s3);max-width:1180px}
.drp-back{justify-self:start}
.drp-h{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-l);box-shadow:var(--sh);padding:var(--s4);display:grid;gap:var(--s2)}
.drp-hk{font-size:var(--fs-sm);font-weight:600;color:var(--gold-ink)}
.drp-ht{font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.drp-hm{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--fs-base);color:var(--text-2)}
.drp-ha{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.drp-all{justify-self:start}
.drp-list{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
.drp-it{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-l);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.drp-it .ai-card{border-radius:0;background:transparent}
.drp-it>.note,.drp-it>.ai-sug{margin:0 var(--s4) var(--s3)!important}
.drp-it>.ai-acts{margin:auto 0 0;padding:var(--s3) var(--s4);border-top:1px solid var(--line-2)}
.drp .ai-ghost{border-color:var(--line);background:var(--bg);color:var(--ink)}
.drp .ai-sug{color:var(--gold-ink)}
.drp-it>.ai-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.drp-it>.ai-acts>.ai-ok{flex:1 1 200px}
.drp-it>.ai-acts>.ai-ghost{flex:0 0 auto}
@media(min-width:1100px){.drp-list{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}}


/* 3.2.9 · the Assistant log */
.mlg-r{gap:var(--s3)}
.mlg-b{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
/* 3.2.32 · المحذوفات: السببُ يُقرأ كاملاً · Deleted: the reason reads whole */
.bin-r{gap:var(--s3)}
.bin-r .bin-why{white-space:normal;overflow:visible;text-overflow:clip}
.bin-pf{margin-bottom:var(--s3)}
@media(min-width:1100px){body.desk #view .bin{max-width:880px}}
.mlg-k{color:var(--text-2)}
.mlg-gone .lrow-t{color:var(--text-3)}
.mlg-h{color:var(--text-2);font-size:var(--fs-sm);margin:var(--s2) 0 var(--s3)}

/* ═══ 3.0.6 · كثافةُ المنضدة · desk density (docs/DESIGN.md §7) ═════════════
   على الحاسوب وحده (‎body.desk‎، من ١١٠٠ بكسل): الحقلُ والزرُّ الثانويّ ٣٢ بكسل، وزرُّ القرار ٣٦،
   والنصُّ في الحقل ١٣، والعنوانُ فوقه ١٢ بوزن ٥٠٠. الهاتفُ لا يتغيّر: ١٦ بكسل في الحقل (لا يكبّر
   iOS) وأهدافٌ ≥ ٤٤. ⚠ الوصفُ فوق الحقل باقٍ في الشبكة ذات الأعمدة الأربعة: الوصفُ بجانب الحقل
   في عمودين ليس أكثفَ منها (‎≈٢٠ بكسل للحقل مقابل ‎≈١٦‎)، وكان هو المقترح فقيس قبل أن يُبنى.
   On the desk alone (body.desk, from 1100px): a field and a secondary button are 32px,
   a decision button 36, the text in a field 13, its label above 12 at weight 500. The
   phone is untouched: 16px in a field (iOS does not zoom) and ≥ 44px targets.
   ⚠ The label stays above its field in the four-column grid: labels beside fields in
   two columns are NOT denser (≈20px a field against ≈16) — that was the proposal, and
   it was measured before it was built. Atelier's own tighter controls (in tables, the
   inspector, the bars) are more specific and stay as they are. */
@media(min-width:1100px){
  body.desk .btn{min-height:var(--h-m);padding:0 14px;font-size:var(--fs-base)}
  body.desk .btn-sm{min-height:var(--h-s);padding:0 10px;font-size:var(--fs-sm)}
  body.desk .icon-btn{width:32px;height:32px}
  body.desk input:not([type=file]):not([type=checkbox]):not([type=radio]),body.desk select,body.desk textarea{font-size:var(--fs-base)}
  body.desk .sheet:not(.ai) label{font-size:var(--fs-sm);font-weight:500;color:var(--text-2);margin-bottom:4px}
  body.desk .sheet:not(.ai) input:not([type=file]):not([type=checkbox]):not([type=radio]),
  body.desk .sheet:not(.ai) select{min-height:32px;height:32px;padding-block:0;padding-inline-start:10px;
    border-width:1px;border-radius:var(--rad-s);line-height:30px}
  body.desk .sheet:not(.ai) input:not([type=file]):not([type=checkbox]):not([type=radio]){padding-inline-end:10px}
  body.desk .sheet:not(.ai) select{padding-inline-end:28px;background-position:left 10px center}
  html[dir=ltr] body.desk .sheet:not(.ai) select{background-position:right 10px center}
  body.desk .sheet:not(.ai) textarea{min-height:56px;padding:6px 10px;border-width:1px;border-radius:var(--rad-s);line-height:1.45}
  body.desk .sheet:not(.ai) .segi span{min-height:32px;min-width:32px;padding:0 10px;border-radius:var(--rad-s);font-size:var(--fs-sm)}
  body.desk .sheet:not(.ai) .multi .mopt{min-height:32px;font-size:var(--fs-sm)}
  body.desk .sheet:not(.ai) .fields,body.desk .sheet.is-form:not(.ai) .fgrp{gap:10px 14px}
  body.desk .sheet.is-form:not(.ai) .sheet-b{padding:14px 24px}
  body.desk .sheet.is-form:not(.ai) .sheet-f{padding:10px 24px 12px}
  body.desk .sheet:not(.ai) .sheet-f .btn{min-width:96px}
}




/* ═══ 3.2.19 · SIRA 2.0 · اللغة · the language (docs/DESIGN.md §7, §12) ═════════════════════════
   ستّةُ أساليب للنصّ (في :root)، ثلاثةُ ارتفاعاتٍ للأزرار، والمرشِّحُ مقطَّعاً، والحقولُ في البطاقات أسطراً
   مجمَّعة، والسطحُ حافّةً بنصف بكسل. ما هنا قطعُ العدّة نفسُها؛ كلُّ صفحةٍ تقرؤها.
   Six text styles (on :root), three button heights, the filter as a segmented control, a card's
   fields as grouped rows, a surface as a half-pixel edge. What is here is the kit's own parts;
   every page reads them. */

/* السطح · the surface: no visible frame, a hairline ring and a near-nil shadow */
:is(.card,.tile,.appr,.pcard,.acc,.drp-h,.drp-it,.apd-top,.tkb-col){border-color:transparent;box-shadow:var(--sh)}

/* المرشِّح المقطَّع · the segmented filter: one track, the picked segment lifted in white */
.pfilter{gap:2px;padding:2px;background:var(--fill);border-radius:calc(var(--rad-m) + 2px);
  width:max-content;max-width:100%}
.pfilter button{min-height:calc(var(--h-s) - 4px);padding:0 12px;border:0;border-radius:var(--rad-m);
  background:transparent;color:var(--text-2);font-weight:500;font-size:var(--t-su)}
.pfilter button:hover{color:var(--ink)}
.pfilter button.on{background:var(--card);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(15,32,59,.12),0 0 0 .5px rgba(15,32,59,.06)}
.pfilter button .mono,.pfilter button .tb{color:var(--text-3);font-weight:500}
.pfilter button.on .tb{background:transparent;color:var(--text-3)}
.pfilter .tb{background:transparent;color:var(--text-3)}
.pfilter > .pf-l{padding:0 8px}
@media(min-width:1100px){
  body.desk :is(.ptool,.pbar) .pt-tabs{border-radius:calc(var(--rad-m) + 2px);background:var(--fill);padding:2px}
  body.desk :is(.ptool,.pbar) .pt-tabs button{height:calc(var(--h-m) - 4px);border-radius:var(--rad-m);font-weight:500}
  body.desk :is(.ptool,.pbar) .pt-tabs button.on{background:var(--card);color:var(--ink);font-weight:600;
    box-shadow:0 1px 2px rgba(15,32,59,.12),0 0 0 .5px rgba(15,32,59,.06)}
}

/* الأسطر المجمَّعة · grouped rows: the label at the start, the value at the end, a hairline
   between rows that starts after the inset — the iPhone Settings row. On every SIRA card
   (.ai-ed) the existing fields are drawn this way; no save path knows the difference. */
.ig,.ai-card .ai-ed{display:block;margin:0 var(--s4) var(--s3);padding:0;border:0;border-radius:var(--rad-m);
  background:var(--card);box-shadow:0 0 0 .5px var(--hair)}
.ai-card .ai-ed+.ai-ed{margin-top:calc(-1 * var(--s3));border-top-left-radius:0;border-top-right-radius:0}
.ai-card .ai-ed:has(+.ai-ed){border-bottom-left-radius:0;border-bottom-right-radius:0}
.ig-r,.ai-card .ai-ed>div{display:flex;align-items:center;gap:var(--s3);min-height:var(--h-m);padding:0 var(--s3);position:relative}
.ig-r+.ig-r::before,.ai-card .ai-ed>div+div::before,.ai-card .ai-ed+.ai-ed>div:first-child::before{content:"";position:absolute;top:0;
  inset-inline:var(--s3) 0;height:1px;background:var(--hair)}
.ig-l,.ai-card .ai-ed label{flex:0 0 auto;margin:0;font-size:var(--t-bo);font-weight:400;color:var(--text-2)}
.ig-v,.ai-card .ai-ed>div>select,.ai-card .ai-ed>div>input{flex:1 1 auto;min-width:0;width:auto;margin:0;
  border:0;background-color:transparent;box-shadow:none;text-align:end;text-align-last:end;font-size:var(--t-bo);
  color:var(--ink);min-height:calc(var(--h-m) - 4px);padding-inline:0}
.ai-card .ai-ed>div>select{padding-inline-end:18px;background-position:left 0 center}
html[dir=ltr] .ai-card .ai-ed>div>select{background-position:right 0 center}
.ai-card .ai-ed>div>select:focus,.ai-card .ai-ed>div>input:focus{outline:0;box-shadow:none;color:var(--gold-ink)}
.ai-card .ai-ed>div:focus-within{background:var(--fill-2)}
.ai-card-h{padding:var(--s4) var(--s4) var(--s3);font-size:var(--t-he)}

/* الأفعال على بطاقة المسوّدة · a draft card's actions: the one filled button at the END,
   compact; Drop as red text at the other end (docs/DESIGN.md §12) */
.drp-it>.ai-acts{display:flex;align-items:center;gap:var(--s2);border-top:0;padding:0 var(--s4) var(--s4)}
.drp-it>.ai-acts>.ai-ok{order:3;flex:0 0 auto;margin-inline-start:auto;min-height:var(--h-m);padding:0 16px;
  background:var(--ink);color:#fff;border-radius:var(--rad-m);font-size:var(--t-su);font-weight:600}
.drp-it>.ai-acts>.ai-ghost{order:1;min-height:var(--h-m);padding:0 8px;border:0;background:transparent;color:var(--ink);font-size:var(--t-su);font-weight:500}
.drp-it>.ai-acts>.ai-ghost[data-act=propDrop]{color:var(--bad)}
.drp-list{grid-template-columns:minmax(0,1fr)!important}
.drp{max-width:880px}
.drp-all{justify-self:end}

/* أيقونةُ النوع وسطرُ المسوّدة · the kind icon and a draft line */
.dr-ic{flex:0 0 28px;width:28px;height:28px;border-radius:var(--rad-m);display:inline-grid;place-items:center;
  background:var(--fill);color:var(--text-2)}
.dr-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dr-ic-ai{background:linear-gradient(135deg,var(--gold),var(--ink-3));color:#fff}
.dr-ic-back{background:var(--warn-bg);color:var(--warn)}
.dr-r .nrow{align-items:center;gap:var(--s3)}
.dr-rm{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-re{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dr-d{font-size:var(--t-ca);font-weight:500;color:var(--text-3);white-space:nowrap}
.dr-pg-h{align-items:center;gap:var(--s3)}
.dr-sp{flex:1}
.dra-add{display:flex;align-items:center;gap:0;margin:0;flex:0 1 300px;min-width:180px;height:var(--h-m);
  padding:0 4px 0 var(--s3);border-radius:var(--rad-m);background:var(--fill)}
.dra-add input{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.dra-go{width:28px;height:28px;border-radius:var(--rad-s);color:var(--text-3)}
.dra-go:hover{color:var(--ink);background:var(--card)}
.dr-addb{flex:0 0 auto}
@media(max-width:1099px){.dr-pg-h .pfilter{order:3;flex:1 1 100%}.dra-add{flex:1 1 200px}}

/* الطابور على المكتب: سطرُ بريد، والاختيارُ تعبئةٌ ذهبيّة لطيفة بلا خطّ · the desk queue: a mail line,
   and the pick a soft gold fill with no bar */
@media(min-width:1100px){
  body.desk.atelier .apq-i{border-radius:var(--rad-m)}
  body.desk.atelier .apq-i.on,html[dir=rtl] body.desk.atelier .apq-i.on{background:var(--gold-soft);box-shadow:none}
  body.desk.atelier .apq-i.drq-i{grid-template-columns:28px minmax(0,1fr) auto;gap:2px var(--s3);padding:10px 12px;align-items:start}
  body.desk.atelier .drq-i .dr-ic{grid-row:1/3}
  body.desk.atelier .drq-n{grid-column:2;font-size:var(--t-he);font-weight:600;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  body.desk.atelier .drq-d{grid-column:3;grid-row:1;font-size:var(--t-ca);font-weight:500;color:var(--text-3);white-space:nowrap}
  body.desk.atelier .drq-m{grid-column:2;font-size:var(--t-su);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.desk.atelier .drq-a{grid-column:3;grid-row:2;font-size:var(--t-su);font-weight:600;color:var(--ink)}
  body.desk.atelier .apq-h{font-size:var(--t-ca);font-weight:500;padding:12px 12px 4px}
  body.desk.atelier .apd-title{font-size:var(--t-ti)}
  body.desk.atelier .apd-meta{font-size:var(--t-su)}
  body.desk.atelier .apx.drx{gap:var(--s5)}
}
/* 3.2.19 · عنوانُ المهمّة على البطاقة يلتفّ ولا يُقصّ · a card's task title wraps, never clipped */
.ai-card-h .ai-tt{display:block;width:100%;min-height:0;border:0;padding:0;margin:0;background:none;box-shadow:none;resize:none;
  font-size:var(--t-he);font-weight:600;color:var(--ink);field-sizing:content;overflow:hidden;text-align:start}
.ai-card-h .ai-tt:focus{outline:0;color:var(--gold-ink)}
/* «من الملاحظات» صندوقٌ محايد لا ذهبيّ · "from the notes" a neutral box, not a gold one */
.drp .ai-sug{margin:0 var(--s4) var(--s3);padding:var(--s2) var(--s3);border:0;border-radius:var(--rad-m);background:var(--fill-2);
  color:var(--text-2);font-size:var(--t-su)}
.drp .ai-verd{margin:0 var(--s4) var(--s3);border-radius:var(--rad-m)}
.drp-ht{font-size:var(--t-ti)}
/* في الطابور: صفُّ التنقّل بلا بطاقة · in the queue the navigation row carries no card */
@media(min-width:1100px){body.desk.atelier .drq-navonly{background:transparent;box-shadow:none;padding:0 0 var(--s2);margin:0}}

/* ═══ 3.2.20 · SIRA 2.1 · البطاقات والحركة · cards and motion (docs/DESIGN.md §7, §8) ═══════════════
   بإجماع المالك (٢٠٢٦-١٠-٢٩) على أربع: منحنى iOS ونابضٌ خفيف لما يظهر وحده · بطاقاتٌ بزوايا ٢٢
   على الهاتف · شريطٌ سفليٌّ عائمٌ كالكبسولة · أزرارٌ ورقاقاتٌ كبسولاتٌ على الهاتف. المكتب يبقى
   كثيفاً (١٤ بكسلاً) ويأخذ الحركةَ والظلّ الهامس. The owner's yes to four (2026-10-29): iOS's
   curve and a light spring for what appears alone · 22px cards on the phone · a floating
   capsule bottom bar · capsule buttons and chips on the phone. The desk stays dense (14px)
   and takes the motion and the whispered shadow. */
:root{
  /* منحنى أوراق iOS: ينطلق سريعاً ويحطّ بلا ارتداد · iOS's sheet curve: leaves fast, lands
     without a bounce. ونابضٌ صغيرٌ لما يظهر — زرّ +، بطاقةٌ أضيفت — لا لما يحمل رقماً ·
     and a small spring for what appears — the +, an added card — never what carries a figure */
  /* الحركة: السلّمُ كلُّه في كتلة الحركة أعلاه (3.4.2) · motion: the whole scale lives in the motion block above */
  /* ظلٌّ هامس بطبقتين فوق الحلقة الرفيعة · a whispered two-layer shadow over the hairline ring */
  --sh:0 0 0 .5px var(--hair),0 1px 2px rgba(15,32,59,.04),0 10px 26px -16px rgba(15,32,59,.2);
  --rad-xl:22px; --rad-sheet:28px;
  /* 3.2.21 · مقاساتُ الإطار والبطاقات (docs/DESIGN.md §13) · the frame and card sizes */
  --frame-side:248px; --frame-side-min:64px; --bar-1:56px; --bar-2:44px; --insp-w:360px;
  --row-h:40px; --row-h-dense:32px; --tile-h:88px; --sheet-w:560px; --sheet-w-wide:760px;
  --pop-w:320px; --sec-row:40px;
  --vt:1;
}
html[dir=rtl]{--vt:-1}

/* ── الصفحة: الأعمق يدخل من الجانب، والرجوعُ من الجانب الآخر · the page: deeper slides in from
   the side, back from the other side ─────────────────────────────────────────────────────── */
#view.v-push,#view.v-pop{overflow-x:clip}
.v-in.v-push>*{animation:vPush var(--m-page) var(--ease) both}
.v-in.v-pop>*{animation:vPop var(--m-page) var(--ease) both}
@keyframes vPush{from{opacity:0;transform:translateX(calc(48px * var(--vt)))}}
@keyframes vPop{from{opacity:0;transform:translateX(calc(-48px * var(--vt)))}}

/* ── الضغط: يصغر قليلاً تحت الإصبع كما في iOS · a press shrinks a little under the finger ── */
@media(hover:none){
  .btn,.pfilter button,.tag[data-act],.icon-btn{transition:transform .12s ease,background-color var(--m-1) var(--ease)}
  .btn:active,.pfilter button:active{transform:scale(.97)}
  .lrow,.nrow,.prow,.pcard{transition:transform var(--m-1) var(--ease),background-color var(--m-2) var(--ease)}
  .lrow:active,.nrow:active,.prow:active,.pcard:active{transform:scale(.985);transition:none}
}

/* ── المقطّع: مؤشّرٌ واحد ينزلق إلى الخيار الجديد (segthumb.js) · the segmented control: one
   thumb slides to the new choice ── */
.seg-thumb{position:relative;isolation:isolate}
.seg-thumb::before{content:"";position:absolute;z-index:-1;inset:2px auto 2px 0;width:var(--sw,0);
  transform:translateX(var(--sx,0));border-radius:var(--rad-m);background:var(--card);
  box-shadow:0 2px 6px rgba(15,32,59,.12),0 1px 2px rgba(15,32,59,.08);opacity:0}
.seg-thumb.seg-on::before{opacity:1}
.seg-thumb.seg-ready::before{transition:transform var(--m-page) var(--ease),width var(--m-page) var(--ease)}
.seg-thumb.seg-on>button.on,.seg-thumb.seg-on>button.on:hover{background:transparent!important;box-shadow:none!important}

/* ── ما يصل من بيانات يكبر في مكانه، وما يبقى لا يعيد شيئاً (morph.js) · what a snapshot adds
   grows in place; what stays replays nothing ── */
.m-new{animation:growIn var(--m-page) var(--ease) both}
@keyframes growIn{from{opacity:0;transform:translateY(6px) scale(.98)}}
.fab{animation:fabPop var(--m-spring) var(--spring) both}
@keyframes fabPop{from{opacity:0;transform:scale(.6)}}

/* ── الهاتف واللوح (< ١١٠٠) · the phone and the tablet ─────────────────────────────────── */
@media(max-width:1099px){
  :root{--r:var(--rad-xl)}
  /* الصفوف: هامشٌ ١٨ وفاصلٌ رفيعٌ يبدأ بعد الهامش كما في iOS · rows: an 18px edge and a hairline
     that starts after it, as on iOS */
  .lrow,.nrow{padding-inline:18px;border-top:0;border-bottom:0;position:relative}
  .lrow+.lrow::before,.nrow+.nrow::before{content:"";position:absolute;top:0;inset-inline:18px 0;height:.5px;
    background:var(--hair);pointer-events:none}
  .lrow-acts{padding-inline:18px}
  .tile{padding:16px}
  /* الكبسولات · capsules */
  .btn,.pfilter,.pfilter button,.seg-thumb::before,.ptabs button,.icon-btn{border-radius:var(--rad-pill)}
  .pfilter{padding:3px}
  .seg-thumb::before{inset-block:3px}
}

/* ── الشريط السفليّ: كبسولةٌ عائمةٌ مصقولة · the bottom bar: a floating frosted capsule ── */
@media(max-width:900px){
  :root{--nav-h:calc(76px + env(safe-area-inset-bottom))}
  #bnav{inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:4px;border:0;border-radius:var(--rad-pill);
    background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:0 0 0 .5px var(--hair),0 12px 30px -12px rgba(15,32,59,.32)}
  #bnav button{padding:7px 2px 6px;border-radius:var(--rad-pill);transition:background-color var(--m-2) var(--ease),color var(--m-2) var(--ease)}
  #bnav button.on{background:var(--fill)}
  #bnav button.on::before{display:none}
  #bnav button:active{transform:scale(.92)}
  #bnav .badge{top:3px}
  /* الورقة تطفو على بُعد ٨ من الحواف وتعود من حيث جاءت · the sheet floats 8px from the edges and
     goes back the way it came */
  .ov{padding:0 8px calc(8px + env(safe-area-inset-bottom))}
  .sheet{border-radius:var(--rad-sheet);padding-bottom:0;max-height:calc(100dvh - 24px - env(safe-area-inset-top))}
  /* ⚠ 3.4.2 · كان الخروجُ هنا ٠٫٣ ثانية والشيفرةُ تزيل الورقةَ بعد ٠٫١٧ (OUT_MS) — فتنقطع الحركة في وسطها. الخروجُ واحدٌ
     في كلّ مكان: --m-out · the exit here was .3s while the code removes the sheet after .17s (OUT_MS) — so the motion was
     cut halfway. One exit everywhere: --m-out */
}

@media(prefers-reduced-motion:reduce){
  .v-in.v-push>*,.v-in.v-pop>*,.m-new,.fab{animation:none}
  .seg-thumb.seg-ready::before{transition:none}
}

/* 3.2.31 · نقلٌ إلى دفعات حساب · move to account payments — SIRA 2.0: grouped rows, tokens only.
   The tick on a timeline node sits beside the card (never inside its button), and a ticked node is a
   soft gold fill with no frame (§7 Selection). The bar lives in flow and is always drawn, so a tick
   moves nothing. */
.cpt-n.cpt-pick{display:flex;align-items:center;gap:var(--s1)}
.cpt-n.cpt-pick .cpt-c{flex:1 1 auto;min-width:0}
.cpt-tk{margin-inline-start:-6px}
.cpt-n.msel .cpt-c{background:var(--gold-soft)!important;border-color:transparent!important}
.am-bar{margin-block:var(--s2) var(--s3)}
.am-acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-inline-start:auto}
.am-note.am-warn{color:var(--bad)}
.am-note.am-left{color:var(--warn)}
.am-note{margin:0 0 var(--s3);font-size:var(--t-su);color:var(--text-2)}
.am-hd{display:flex;align-items:center;gap:var(--s2);margin-block-end:var(--s2)}
.am-h{font-size:var(--t-su);font-weight:500;color:var(--text-2)}
.am-l{border-radius:var(--rad-m);background:var(--card);box-shadow:var(--sh);max-height:46vh;overflow:auto}
.am-r{display:flex;align-items:center;gap:var(--s2);min-height:var(--h-m);padding-block:var(--s2);padding-inline-end:var(--s3);cursor:pointer}
.am-r+.am-r{box-shadow:inset 0 1px 0 var(--hair)}
.am-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.am-t{font-size:var(--t-bo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-s{font-size:var(--t-ca);color:var(--text-3)}
.am-a{flex:0 0 auto;font-size:var(--t-bo);font-weight:500;font-variant-numeric:tabular-nums}

/* ═══ 3.2.32 · نبضُ المشاريع · the project pulse (views/pulse.js) ═══════════════
   archetype C · a card per live project (phone: a strip swiped sideways inside itself; desk:
   a wrapping row), the week under the row on the desk, the page /pulse/<id> on the phone. */
.pls{margin-bottom:var(--s5)}
.pls .sec-h{align-items:baseline}
.pls-wk{font-size:var(--t-ca);color:var(--text-3)}
.pls-row{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px var(--s2);margin-bottom:var(--s3);scrollbar-width:none}
.pls-row::-webkit-scrollbar{display:none}
.pls-c{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 min(82%,300px);scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s3);
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s4);min-width:0;transition:transform var(--m-2) var(--ease),box-shadow var(--m-2) var(--ease)}
.pls-c:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pls-c.on{box-shadow:0 0 0 1.5px var(--gold),var(--sh-2)}
.pls-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.pls-id{display:flex;flex-direction:column;min-width:0}
.pls-code{font-size:var(--t-ca);color:var(--text-3);font-weight:600}
.pls-n{font-size:var(--t-he);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pls-st{font-size:var(--t-ca);color:var(--text-3)}
.pls-chip{flex:none;font-size:var(--t-ca);font-weight:600;padding:2px var(--s2);border-radius:var(--rad-pill);white-space:nowrap}
.pls-chip.ok{background:var(--ok-bg);color:var(--ok)}.pls-chip.watch{background:var(--warn-bg);color:var(--warn)}
.pls-chip.risk{background:var(--bad-bg);color:var(--bad)}.pls-chip.quiet{background:var(--fill);color:var(--text-3)}
.pls-mid{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);align-items:center}
.pls-ring{width:64px;height:64px}
.pls-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.pls-ring .pls-rt{stroke:var(--fill-2)}.pls-ring .pls-rs{stroke:var(--ink-2)}.pls-ring .pls-rb{stroke:var(--gold)}
.pls-ring .pls-rl{font-size:var(--t-ca);font-weight:600;fill:var(--text);font-variant-numeric:tabular-nums}
.pls-bt{display:flex;flex-direction:column;gap:4px;min-width:0}
.pls-bt small{font-size:var(--t-ca);color:var(--text-3)}
.pls-beat{width:100%;height:30px}
.pls-beat rect{fill:var(--line-2)}.pls-beat rect.hot{fill:var(--gold)}
.pls-gate{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-ca);color:var(--text-2);min-width:0}
.pls-gate span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-gate i{flex:none;min-width:28px;height:28px;padding:0 4px;border-radius:var(--rad-s);background:var(--fill);display:grid;place-items:center;font-style:normal;font-weight:600;color:var(--gold-ink)}
.pls-gate.none{color:var(--text-3)}
.pls-f{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);border-top:1px solid var(--hair);padding-top:var(--s3)}
.pls-f>span{display:flex;flex-direction:column}
.pls-f b{font-size:var(--t-he);font-weight:600;color:var(--text)}.pls-f small{font-size:var(--t-ca);color:var(--text-3)}
.pls-f .bad b{color:var(--bad)}
.pls-ppl{display:flex}
.pls-av{width:24px;height:24px;border-radius:50%;background:var(--ink-2);color:var(--card);font-size:var(--t-ca);font-weight:600;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 0 2px var(--card);margin-inline-start:-6px}
.pls-av:first-child{margin-inline-start:0}
.pls-av img.fc{width:100%;height:100%;object-fit:cover}
.pls-quiet{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--t-su);color:var(--text-3)}
.pls-qb{all:unset;cursor:pointer;padding:4px var(--s3);border-radius:var(--rad-pill);background:var(--fill);color:var(--text-2);font-size:var(--t-ca);min-height:28px;display:inline-flex;align-items:center}
.pls-qb:focus-visible{outline:2px solid var(--gold)}
/* the week */
.pls-brief{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:var(--s3)}
.pls-bh{background:var(--ink);color:#F4F1E8;padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.pls-eb{font-size:var(--t-ca);font-weight:600;color:var(--gold)}
.pls-bh h3{margin:0;font-size:var(--t-ti);font-weight:600;color:#F4F1E8}
.pls-bh p{margin:0;font-size:var(--t-su);color:rgba(244,241,232,.72)}
.pls-bs{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s1)}
.pls-bs>span{display:flex;flex-direction:column}
.pls-bs b{font-size:var(--t-ti);font-weight:600;color:#F4F1E8}.pls-bs small{font-size:var(--t-ca);color:rgba(244,241,232,.66)}
.pls-bs .bad b{color:#F2A49C}
.pls-bg{display:grid;grid-template-columns:minmax(0,1fr)}
.pls-bc{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.pls-bc+.pls-bc{border-top:1px solid var(--hair)}
.pls-bl .sec-h{margin:0 0 var(--s2)}
.pls-none{font-size:var(--t-su);color:var(--text-3)}
.pls-pri{list-style:none;margin:0;padding:0;counter-reset:pp}
.pls-pri li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--hair);counter-increment:pp}
.pls-pri li:last-child{border-bottom:0}
.pls-pri li::before{content:counter(pp);font-weight:600;color:var(--gold-ink);font-size:var(--t-su);grid-row:span 2}
.pls-pt{all:unset;cursor:pointer;display:flex;flex-direction:column;min-width:0}
.pls-pt:disabled{cursor:default}
.pls-ptt{font-size:var(--t-su);color:var(--text)}.pls-ptm{font-size:var(--t-ca);color:var(--text-3)}
.pls-why{justify-self:start;font-size:var(--t-ca);font-weight:600;padding:2px var(--s2);border-radius:var(--rad-s);background:var(--fill);color:var(--text-2);white-space:nowrap}
.pls-why.bad{background:var(--bad-bg);color:var(--bad)}.pls-why.warn{background:var(--warn-bg);color:var(--warn)}
.pls-done{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.pls-done li{display:flex;gap:var(--s2);font-size:var(--t-su);color:var(--text-2)}
.pls-done li::before{content:"✓";color:var(--ok);font-weight:600}
.pls-done button{all:unset;cursor:pointer}
.pls-gl{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:var(--s2);overflow-x:auto;padding-bottom:4px}
.pls-gl::before{content:"";position:absolute;inset-inline:0;top:7px;height:2px;background:var(--hair)}
.pls-g{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:22px;font-size:var(--t-ca)}
.pls-g::before{content:"";position:absolute;top:1px;inset-inline-start:0;width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--gold);box-sizing:border-box}
.pls-g.now::before{background:var(--gold)}.pls-g.late::before{border-color:var(--bad);background:var(--bad)}
.pls-g.done::before{border-color:var(--text-3);background:var(--text-3)}.pls-g.done b,.pls-g.done small{color:var(--text-3)}.pls-g.done b{font-weight:500}
.pls-g b{font-weight:600;color:var(--text)}.pls-g small{color:var(--text-3)}
.pls-ls{display:flex;flex-direction:column;gap:var(--s2)}
.pls-lr{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 96px 40px;gap:var(--s2);align-items:center;font-size:var(--t-ca);color:var(--text-2)}
.pls-lr>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-lr>span:last-child{text-align:end;color:var(--text-3)}
.pls-bar{height:6px;border-radius:3px;background:var(--fill-2);overflow:hidden}
.pls-bar i{display:block;height:100%;background:var(--gold)}
.pls-ld{display:flex;flex-direction:column;gap:var(--s2)}
.pls-lp{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--s2);align-items:center;font-size:var(--t-ca);color:var(--text-2)}
.pls-lp .pls-av{margin:0}
.pls-lpn{display:flex;flex-direction:column;gap:4px;min-width:0}
.pls-lpc{color:var(--text-3)}
.pls-stk{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--fill-2)}
.pls-stk i,.pls-lg i{display:block;height:100%}
.pls-stk .o,.pls-lg .o{background:var(--bad)}.pls-stk .w,.pls-lg .w{background:var(--gold)}.pls-stk .l,.pls-lg .l{background:var(--line-2)}
.pls-lg{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--t-ca);color:var(--text-3)}
.pls-lg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:4px}
.pls-away{background:var(--warn-bg);border-radius:var(--rad-m);padding:var(--s3);font-size:var(--t-su);color:var(--text)}
.pls-bf{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--hair)}
/* today on the ground: what is due today and in the next days, a column per day */
.pls-rv{margin-bottom:var(--s5)}
.pls-days{display:flex;gap:var(--s3);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:2px 2px var(--s2)}
.pls-days::-webkit-scrollbar{display:none}
.pls-day{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 min(70%,240px);scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s2);
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s3) var(--s4);min-width:0;transition:box-shadow var(--m-2) var(--ease)}
.pls-day:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pls-day.now{box-shadow:0 0 0 1px var(--gold),var(--sh)}
.pls-day.on{box-shadow:0 0 0 1.5px var(--gold),var(--sh-2)}
.pls-dh{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:var(--t-su)}
.pls-dh b{font-weight:600;color:var(--text)}
.pls-chev{color:var(--text-3);transition:transform var(--m-2) var(--ease)}
html[dir=rtl] .pls-chev{transform:scaleX(-1)}
.pls-day.on .pls-chev{transform:rotate(90deg)}
.pls-dn{display:flex;align-items:baseline;gap:var(--s1);flex-wrap:wrap}
.pls-dn b{font-size:var(--t-ti);font-weight:600;color:var(--text)}.pls-dn small{font-size:var(--t-ca);color:var(--text-3)}
.pls-dn .pls-hi{margin-inline-start:auto}
.pls-d1{font-size:var(--t-ca);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-av-n{background:var(--fill);color:var(--text-2)}
.pls-dx{display:none}.pls-dm{color:var(--text-3)}
.pls-d1+.pls-dx{padding-top:2px;border-top:1px solid var(--hair)}
.pls-dl{margin-top:var(--s3);background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s2) var(--s3) var(--s3)}
.pls-dlh{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);font-size:var(--t-su)}
.pls-dlh b{font-weight:600}.pls-dlh .num{font-size:var(--t-ca);color:var(--text-3)}
.pls-dlg{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
@media(min-width:900px){.pls-dlg{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the High tag hugs its title, so in two columns it never reads as the other column's */
.pls-dlg .pls-ev{grid-template-columns:24px minmax(0,max-content) auto;justify-content:start}
.pls-ev{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--s2);align-items:center;
  padding:var(--s2);border-radius:var(--rad-m);font-size:var(--t-ca);min-height:44px}
.pls-ev:hover{background:var(--fill)}
.pls-ev:focus-visible{outline:2px solid var(--gold)}
.pls-ev .pls-av{margin:0}
.pls-ev>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.pls-evt{font-size:var(--t-su);color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pls-evs{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-hi{font-size:var(--t-ca);font-weight:600;padding:2px var(--s2);border-radius:var(--rad-s);background:var(--warn-bg);color:var(--warn)}
.pls-page{display:flex;flex-direction:column;gap:var(--s3);max-width:880px}
.pls-back{align-self:flex-start}
@media(hover:hover){.pls-c:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}}
@media(min-width:900px){.pls-bg{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .pls-bc+.pls-bc{border-top:0;border-inline-start:1px solid var(--hair)}}
/* desk: the row wraps into a grid; nothing scrolls sideways */
@media(min-width:1100px){
  body.desk .pls-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));overflow:visible;scroll-snap-type:none}
  body.desk .pls-c{flex:none;padding:var(--s3) var(--s4)}
  body.desk .pls-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow:visible;scroll-snap-type:none}
  body.desk .pls-day{flex:none}}
@media(prefers-reduced-motion:reduce){.pls-c{transition:none}.pls-c:hover{transform:none}}

/* ═══ 3.2.38 · الرئيسية على المكتب بلا فراغ · Home on the desk without voids ═══════════════
   ① الأرقامُ شريطٌ واحد مقسوم لا بطاقاتٌ عريضة · the figures one divided strip, not wide cards
   ② بطاقاتُ المشاريع و«اليوم على الأرض» في شريطٍ يلتفّ · project cards and today's days in one wrapping band
   ③ الإجراءاتُ السريعة أزرارٌ صغيرة على سطر «تخصيص» · quick actions small buttons on the Customise line */
@media(min-width:1100px){
  body.desk.atelier .cmd-kpis{display:flex;flex-wrap:wrap;gap:0;background:var(--dk-surf);border-radius:var(--dk-r);box-shadow:var(--dk-shadow);overflow:hidden}
  body.desk.atelier .cmd-k{flex:1 1 180px;background:none;box-shadow:none;border-radius:0;padding:var(--s3) var(--s4);gap:2px;
    border-inline-start:1px solid var(--hair);margin-inline-start:-1px}
  body.desk.atelier .cmd-k:hover{box-shadow:none;background:var(--dk-on)}
  body.desk.atelier .cmd-kv{font-size:var(--t-ti)}
  body.desk.atelier .cmd-k.mine .cmd-kl{color:var(--text-2)}
  body.desk.atelier .cmd-cust{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
  body.desk.atelier .cmd-q{display:flex;flex-wrap:wrap;gap:var(--s2);min-width:0}
  body.desk.atelier .cmd-qb{display:inline-flex;align-items:center;gap:6px}
  body.desk.atelier .cmd-qb .qi{display:inline-grid;width:16px;height:16px}
  body.desk.atelier .cmd-qb .qi svg{width:16px;height:16px}
  body.desk.atelier .cmd-cust>.more{margin-inline-start:auto}
  body.desk .pls-dk{margin-bottom:var(--s4)}
  body.desk .pls-band{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch;margin-bottom:var(--s3)}
  body.desk .pls-band>.pls-c{flex:0 0 270px}
  body.desk .pls-band>.pls-rv{flex:1 1 440px;min-width:0;margin:0;display:flex;flex-direction:column}
  body.desk .pls-band>.pls-rv .sec-h{margin-top:0}
  body.desk .pls-band .pls-days{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:1;align-items:stretch}
  body.desk .pls-band .pls-day{justify-content:flex-start}
  body.desk .pls-band .pls-day .pls-ppl{margin-top:auto}
  body.desk .pls-band .pls-dx{display:block}
  body.desk .pls-band .pls-dh b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}

/* ═══ 3.2.40 · بطاقاتُ الرئيسية على شبكة ١٢ عموداً، والفارغُ سطرٌ هادئ · Home's cards on a 12-column grid, the empty a quiet line ═══ */
@media(min-width:1100px){
  body.desk.atelier .cmd-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:stretch;margin-bottom:var(--s3)}
  body.desk.atelier .cmd-bento>.bs-3{grid-column:span 3}body.desk.atelier .cmd-bento>.bs-4{grid-column:span 4}body.desk.atelier .cmd-bento>.bs-5{grid-column:span 5}body.desk.atelier .cmd-bento>.bs-6{grid-column:span 6}body.desk.atelier .cmd-bento>.bs-7{grid-column:span 7}body.desk.atelier .cmd-bento>.bs-8{grid-column:span 8}body.desk.atelier .cmd-bento>.bs-9{grid-column:span 9}body.desk.atelier .cmd-bento>.bs-10{grid-column:span 10}body.desk.atelier .cmd-bento>.bs-11{grid-column:span 11}body.desk.atelier .cmd-bento>.bs-12{grid-column:span 12}
  body.desk.atelier .cmd-bento>.cmd-c{display:flex;flex-direction:column}
  body.desk.atelier .cmd-calm{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--dk-r);background:var(--fill);margin-bottom:var(--s4)}
  body.desk.atelier .cmd-cl{font-size:var(--t-ca);font-weight:600;color:var(--text-2)}
  body.desk.atelier .cmd-cb{all:unset;cursor:pointer;font-size:var(--t-ca);color:var(--text-2);background:var(--card);border-radius:var(--rad-pill);padding:3px 12px;min-height:24px;display:inline-flex;align-items:center;box-shadow:var(--sh)}
  body.desk.atelier .cmd-cb:hover{color:var(--ink)}
  body.desk.atelier .cps-hb{flex:none;font-size:var(--t-ca);font-weight:600;padding:2px 8px;border-radius:var(--rad-s);background:var(--bad-bg);color:var(--bad)}
  body.desk.atelier .cmd-cb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}

/* ═══ 3.2.41 · رأسُ صفحة القائمة على قواعد الشاشة (DESIGN.md §13) — المدفوعات أوّلاً ═══════════
   شريطُ العرض وزرُّ التصفية في سطر (R4 · R5) · سطرُ الأرقام بلا صناديق (R7) · رقائقُ النشط ·
   شريطُ التوليد لاصقٌ بأسفل الشاشة على الهاتف. The list page's head on the screen rules (DESIGN.md
   §13) — Payments first: the view strip and the Filter button on one line (R4 · R5) · the figures
   line with no boxes (R7) · the active chips · the generate bar stuck to the phone's foot. */
.vbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.vbar .pfilter{flex:0 1 auto;min-width:0;margin:0}
.vbar .pflt{margin-inline-start:auto}
/* 3.2.42 · الشهرُ في سطر العرض مضغوطٌ بارتفاع التحكّم (R1) · the month inside the view line is a control's height */
.vbar .mpick{flex:0 1 auto;min-width:0;margin:0;height:var(--h-m);padding:0 4px;gap:2px;border-radius:var(--rad-m)}
.vbar .mpick .mp-a{width:var(--h-s);height:var(--h-s);min-height:0;font-size:var(--fs-lg)}
.vbar .mpick .mp-l{flex:0 0 auto;min-width:0;padding:0 6px;font-size:var(--fs-base)}
.vbar .mpick .mp-now{padding:4px 8px}
@media(min-width:1100px){body.desk.atelier #view .vbar .mpick{margin:0;padding:0 3px}}
.pflt{flex:none;gap:6px}
.pflt.on{background:var(--gold-soft);color:var(--ink)}
.pflt-n{min-width:16px;height:16px;padding:0 4px;border-radius:var(--rad-pill);background:var(--ink);color:#fff;
  font-size:var(--t-ca);line-height:16px;text-align:center}
.pfig{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4);margin:0 0 var(--s3);
  font-size:var(--t-su);color:var(--text-2)}
.pfig-i{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.pfig-w{display:inline-flex;align-items:baseline;gap:6px}
.pfig-v{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.fchips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3)}
.fchip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 var(--s3);border:0;
  border-radius:var(--rad-pill);background:var(--gold-soft);color:var(--ink);font:inherit;font-size:var(--t-ca);cursor:pointer}
.fchip i{font-style:normal;color:var(--text-3)}
.flt-sheet .flt-sec{margin:var(--s4) var(--s4) 0}
.flt-sheet .flt-h{font-size:var(--t-ca);color:var(--text-3);margin-bottom:var(--s2)}
.flt-sheet .ccysw-l{display:none}
.flt-sheet .note{margin:var(--s4) var(--s4) 0}
.flt-foot{display:flex;justify-content:space-between;gap:var(--s2);margin:var(--s5) var(--s4) var(--s4)}
.pbar-fig .pfig{margin:0}
@media(max-width:1099px){
  .mbar{position:sticky;bottom:calc(var(--nav-h) + var(--s2));z-index:3;box-shadow:var(--sh)}}
@media(min-width:1100px){
  .pflt{min-height:var(--h-s)}
  .vbar .pflt-t{display:inline}}
.vbar .pmore,.pbar .pmore{flex:none;width:auto;min-width:0;max-width:40%;margin:0}
.vbar .pmore.on{background-color:var(--gold-soft)}
/* 3.2.41 · صفُّ صفحات القسم فوق الشريط السفليّ (R3, §13.5): يُطوى أثناء النزول ويعود عند الصعود ·
   the section's pages row above the bottom bar (R3, §13.5): it folds while the list scrolls down
   and returns on the way up */
.sec-row{display:none}
@media(max-width:900px){
  #view>.ptabs{display:none}
  .sec-row:not(:empty){display:block;position:fixed;z-index:49;inset-inline:12px;
    bottom:calc(10px + env(safe-area-inset-bottom) + 66px);height:var(--sec-row);
    transition:transform var(--m-2) var(--ease),opacity var(--m-2) var(--ease)}
  .sec-row .ptabs{margin:0;height:100%;align-items:center;padding:0 4px;border-radius:var(--rad-pill);
    background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:0 0 0 .5px var(--hair)}
  .sec-row .ptabs button{min-height:32px;padding:0 var(--s3);font-size:var(--t-su)}
  body.has-secrow{--nav-h:calc(76px + var(--sec-row) + 6px + env(safe-area-inset-bottom))}
  body.sr-down .sec-row{transform:translateY(calc(var(--sec-row) + 8px));opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.sec-row{transition:none}}
@media(max-width:1099px){
  .pfig{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--s3);font-size:var(--t-ca)}
  .pfig::-webkit-scrollbar{display:none}
  .vbar .pflt-t{display:none}
  .vbar .pfilter button{padding-inline:9px}
  .vbar .pfilter .tb{margin-inline-start:4px}
  .vbar .pflt{min-width:var(--h-m);justify-content:center;padding:0 var(--s2)}}
.flt-sheet .flt-g .pt-gsel{display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.flt-sheet .flt-g select{width:auto;min-width:160px}
/* 3.2.42 · قطعُ قواعد الشاشة لكلّ الصفحات · the screen-rules parts for every page */
.pfig-i.warn .pfig-v{color:var(--warn)}
.pfig-i.bad .pfig-v{color:var(--bad)}
.pfig-i.ok .pfig-v{color:var(--ok)}
.pfig-s{font-size:var(--t-ca);color:var(--text-3)}
.pfig-a{display:inline-flex;align-items:baseline;gap:6px;cursor:pointer;border-radius:var(--rad-s);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.pfig-a:hover{text-decoration-color:var(--gold)}
.pfig-a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.psel{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;margin:0}
.psel-l{font-size:var(--t-ca);color:var(--text-3);white-space:nowrap}
.psel select{width:auto;min-width:0;max-width:260px;margin:0}
.vbar .psel{flex:0 1 auto}
.lg-foot,.tk-foot{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end;margin-top:var(--s3)}
.bulk.mbar-bulk{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.bulk.mbar-bulk .btn{flex:1 1 150px}
.flt-sheet .psel{display:flex;width:100%}
.flt-sheet .psel select{max-width:none;flex:1}
.flt-sheet .psel-l{display:none}
.flt-sheet .flt-sec select{width:100%}
.flt-sheet .tkh-when{display:flex;flex-wrap:wrap;gap:var(--s2)}
.im-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.im-tpl{display:block;padding:var(--s3);border-radius:var(--rad-m);background:var(--fill);color:var(--text);font:inherit}
.im-tpl .l{font-size:var(--t-su);font-weight:500}
.im-tpl .v{color:var(--text-3)}
.tkh-v{flex-wrap:nowrap}
@media(max-width:1099px){
  .bulk.mbar-bulk{position:sticky;bottom:calc(var(--nav-h) + var(--s2));z-index:3;background:var(--bg);padding:var(--s2) 0}
  .vbar .psel select{max-width:160px}}

/* ═══ 3.2.43 · إطارُ المكتب بمقاساته (docs/DESIGN.md §13.2) · the desk frame at its sizes ═══════════
   الشريطُ الجانبيّ ٢٤٨ (الأيقونات ٦٤ + لوحةُ القسم)، ويُطوى إلى ٦٤؛ السطرُ الأوّل ٥٦ (العنوان · البحث ·
   «تصفية» · «جديد»)؛ السطرُ الثاني ٤٤: شريطُ العرض وسطرُ الأرقام متقابلَين، لا سطرَين.
   ⚠ بالتعويم لا بإعادة ترتيب الـ DOM: الصفحاتُ ترسم الأرقامَ قبل الشريط أو بعده، فيطفو الأوّلُ منهما إلى
   طرفه ويجاوره الثاني، وما بعدهما يُنظَّف (clear). وإن ضاق السطرُ نزل الثاني تحته — لا يُقصّ شيء.
   The sidebar is 248 (the 64 icons + the section pane) and folds to 64; line 1 is 56 (title · search ·
   Filter · New); line 2 is 44: the view strip and the figures line facing each other, not two lines.
   ⚠ By floats, never by moving the DOM: pages draw the figures before or after the strip, so the first of
   the two floats to its side and the second sits beside it, and what follows clears. When the line is too
   narrow the second drops under it — nothing is cut. The pages draw the bar first (3.2.43). */
@media(min-width:1100px){
  body.desk.atelier #app{grid-template-columns:var(--frame-side-min) minmax(0,1fr)}
  body.desk.atelier #snav{width:var(--frame-side-min)}
  body.desk.atelier.paned #app{grid-template-columns:var(--frame-side-min) calc(var(--frame-side) - var(--frame-side-min)) minmax(0,1fr)}
  body.desk.atelier .selbar{inset-inline-start:calc(var(--frame-side-min) + 26px)}
  body.desk.atelier.paned .selbar{inset-inline-start:calc(var(--frame-side) + 26px)}
  body.desk.atelier.wide.pane-fly:not(.paned) #lpane{inset-inline-start:var(--frame-side-min);width:calc(var(--frame-side) - var(--frame-side-min))}
  body.desk.atelier #rtabs{inset-inline-start:var(--frame-side-min)}
  body.desk.atelier .topbar{min-height:var(--bar-1);height:var(--bar-1)}
  body.desk.atelier.wide #view .pflt{display:none}
  body.desk.atelier.wide #tb-tools .tb-flt{display:inline-flex;align-items:center;margin-inline-start:6px}
  body.desk.atelier.wide #tb-tools .tb-flt .pflt{height:var(--h-m)}
  body.desk.atelier #view>.pbar:has(+ .pfig),body.desk.atelier #view>.ptool:has(+ .pfig),
  body.desk.atelier #view>.vbar:has(+ .pfig){float:inline-start;min-height:var(--bar-2);
    margin:0 0 var(--s3);margin-inline-end:var(--s4);align-items:center;max-width:100%}
  body.desk.atelier #view>.pbar+.pfig,body.desk.atelier #view>.ptool+.pfig,
  body.desk.atelier #view>.vbar+.pfig{min-height:var(--bar-2);margin:0 0 var(--s3);
    justify-content:flex-end;align-items:center;min-width:min(100%,420px)}
  body.desk.atelier #view>.pbar+.pfig+*,body.desk.atelier #view>.ptool+.pfig+*,
  body.desk.atelier #view>.vbar+.pfig+*{clear:both}
}

/* ═══ 3.2.43 · R8 · العنوانُ الكبير على الهاتف (docs/DESIGN.md §13.1, §13.5) · the phone's large title ═══
   عند الفتح عنوانٌ كبير (٢٨) في الصندوق نفسه الذي كان يأخذه عنوانُ ٢٢ — فلا يتأخّر أوّلُ سجلّ (R1)؛ وما إن
   تُمرَّر القائمة صار عنوانَ شريطٍ (نمطُ العنوان الفرعيّ) وغاب السطرُ تحته. ⚠ بلا حركة: حجمُ الخطّ لا يُحرَّك (قاعدة الحركة:
   transform و opacity وحدهما). ورابطُ الصفحة في قائمة الحساب، فالرأس بحثٌ وجرسٌ وحساب.
   On opening a large title (28) in the very box a 22 title took — so the first record is not pushed (R1); as
   soon as the list scrolls it becomes a bar title (17) and the line under it goes. ⚠ No motion: a font size is
   never animated (transform and opacity only). The page's link is in the account menu, so the header is
   search, bell and account. */
@media(max-width:899px){
  .topbar h2{font-size:var(--t-lt);line-height:32px;letter-spacing:-.4px}
  body.ttl-small .topbar h2{font-size:var(--t-he);line-height:22px;letter-spacing:-.2px}
  body.ttl-small .topbar .who{display:none}
  #tb-share{display:none}
}
/* ═══ 3.3.1 · زرّ المحادثات فوق كرة صيره · the chat button above SIRA's orb (views/chatfab.js) ═══
   أبيضُ بأيقونةٍ كحليّة كي لا يُخلط بالكرة الكحليّة ذات الحلقة الذهبيّة، وعددُه أحمر. الهاتف: فوق الكرة
   في زاوية البداية · المكتب: فوقها في زاوية النهاية · Atelier: فوقها على الشريط.
   White with a navy icon so it is never taken for the navy, gold-ringed orb; its count red. Phone:
   above the orb at the start corner · desk: above it at the end corner · Atelier: above it on the rail. */
.cht-dock{position:fixed;z-index:58;inset-inline-start:20px;bottom:calc(var(--nav-h) + 14px + 60px + 12px);width:52px;height:52px;
  border:0;border-radius:50%;background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 .5px var(--hair),0 8px 22px rgba(15,32,59,.18);transition:transform var(--m-1) var(--spring,var(--ease)),box-shadow var(--m-1) var(--ease)}
.cht-dock.solo{bottom:calc(var(--nav-h) + 14px)}
.cht-dock:hover{box-shadow:0 0 0 .5px var(--hair),0 10px 26px rgba(15,32,59,.24)}
.cht-dock:active{transform:scale(.92)}
.cht-dock:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
html[dir=rtl] .cht-dock svg{transform:scaleX(-1)}
.cht-dock-n{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--rad-pill);
  background:var(--bad);color:#fff;font-size:var(--t-ca);font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
html.sheet-open .cht-dock{display:none}
@media(min-width:900px){
  .cht-dock{inset-inline:auto 26px;bottom:calc(24px + 56px + 14px)}
  .cht-dock.solo{bottom:24px}
}
@media(min-width:1100px){
  body.desk.atelier .cht-dock{inset-inline-end:auto;inset-inline-start:8px;bottom:calc(92px + 40px + 12px);width:40px;height:40px;
    box-shadow:0 0 0 .5px var(--hair),0 3px 10px rgba(15,32,59,.16)}
  body.desk.atelier .cht-dock.solo{bottom:92px}
  body.desk.atelier .cht-dock svg{width:20px;height:20px}
  body.desk.atelier .cht-dock-n{min-width:18px;height:18px;top:-5px;inset-inline-end:-5px}
}
@media(prefers-reduced-motion:reduce){.cht-dock{transition:none}}
@media print{.cht-dock{display:none!important}}

/* ═══ 3.3.5 · الإطار: ستّة تطبيقات · the frame: six apps (SIRA 3.0 design system, DESIGN.md §14) ═══
   ألوانُ التطبيقات على مربّعاتها وفي خطٍّ أعلى مساحتها؛ ألوانُ القطاعات أعمقُ ولا تقول حالةً أبداً ·
   the apps' colours on their tiles and as a line at the top of their space; the domains' tones are
   deeper, and neither ever says a status */
:root{--app-me:#E3DDCF;--app-me-ink:#0F203B;--app-work:#3F5E7A;--app-finance:#0F203B;--app-people:#7A6A58;
  --app-board:#CF9C51;--app-admin:#4A5361;--dom-health:#083041;--dom-realestate:#3E2714;--dom-lifestyle:#0B3325;
  --dom-consulting:#341F5F;--dom-none:#5A6270;--app-c:transparent}
body[data-app=me]{--app-c:var(--app-me-ink)}body[data-app=work]{--app-c:var(--app-work)}
body[data-app=finance]{--app-c:var(--app-finance)}body[data-app=people]{--app-c:var(--app-people)}
body[data-app=board]{--app-c:var(--app-board)}body[data-app=admin]{--app-c:var(--app-admin)}
/* الخطّ أعلى المساحة · the line at the top of the space */
body.frame3 .topbar{box-shadow:inset 0 3px 0 var(--app-c)}
/* الشعار يعيد إلى التطبيقات · the mark returns to the apps */
.tb-home{flex:none;width:var(--h-m,32px);height:var(--h-m,32px);border-radius:var(--rad-m);border:0;background:var(--sunk,#EEEEEA);
  display:grid;place-items:center;cursor:pointer;margin-inline-end:var(--s3,12px);padding:0}
.tb-home svg{width:16px;height:19px;fill:var(--gold)}
.tb-home[hidden]{display:none}
.topbar{display:flex;align-items:center}
.tb-app{display:block;font-size:var(--fs-xs);line-height:16px;font-weight:600;color:var(--app-c)}
body[data-app=me] .tb-app,body[data-app=board] .tb-app{color:var(--gold-ink)}
.tb-app[hidden]{display:none}
/* شاشةُ التطبيقات · the app home */
.ah{padding:var(--s5,20px) 0}
.ah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6,24px) var(--s4,16px);justify-items:center;max-width:720px;margin:0 auto}
@media(min-width:900px){.ah-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s6,24px)}}
.ah-app{display:grid;justify-items:center;gap:var(--s2,8px);border:0;background:none;padding:0;cursor:pointer;color:var(--ink);font:inherit}
.ah-tile{position:relative;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  box-shadow:0 0 0 .5px rgba(15,32,59,.09),0 1px 3px rgba(15,32,59,.06);transition:transform var(--m-1,.12s) var(--ease,ease)}
.ah-app:active .ah-tile{transform:scale(.94)}
.ah-tile svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ah-app b{font-size:var(--fs-base);line-height:18px;font-weight:500}
.ah-cnt{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--rad-pill);
  background:var(--bad,#A63A2E);color:#fff;font-size:var(--fs-2xs);line-height:20px;font-weight:600;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.ah-t-me{background:var(--app-me);color:var(--app-me-ink)}
.ah-t-work{background:var(--app-work);color:#fff}
.ah-t-finance{background:var(--app-finance);color:var(--gold)}
.ah-t-people{background:var(--app-people);color:#fff}
.ah-t-board{background:var(--app-board);color:var(--ink)}
.ah-t-admin{background:var(--app-admin);color:#fff}
/* على شاشة التطبيقات لا شريطَ ولا أقسام: الشاشةُ هي التنقّل · on the app home no bar and no sections:
   the screen is the navigation */
body.frame3:not([data-app]) #bnav,body.frame3[data-app=""] #bnav,body.frame3[data-app=""] #secrow{display:none}
body.frame3[data-app=""]{--nav-h:0px}
/* القسمُ المفتوح يحمل لونَ تطبيقه · the open section carries its app's colour */
body.frame3 #bnav button.on{color:var(--app-c)}
body.frame3[data-app=me] #bnav button.on,body.frame3[data-app=board] #bnav button.on{color:var(--gold-ink)}
/* على المكتب الشعارُ في رأس الشريط الجانبيّ، واسمُ التطبيق يقرؤه الخطّ والأقسام · on the desk the mark heads
   the side rail, and the app is read from its line and its sections */
@media(min-width:900px){.tb-home,.tb-app{display:none!important}}

/* ═══ 3.3.6 · الترحيب والمساحات · the welcome page and the spaces ═══
   الترحيبُ وحده على الشاشة: لا شريطَ ولا لوحةَ ولا أدوات. وداخل المساحة لونُها في ثلاثة مواضع خفيفة:
   علامتُها بجانب العنوان، والقسمُ المختار، وغسلةٌ خفيفة على الأرضيّة · the welcome page alone on screen: no
   rail, pane or tools. Inside a space its colour in three light places: its mark beside the title, the
   chosen section, and a light wash on the ground */
:root{--app-chat:#6B5E8F}
body[data-app=chat]{--app-c:var(--app-chat)}
.ah-t-chat{background:var(--app-chat);color:#fff}
body.frame3[data-app=me]{--bg:#EBE8E0}body.frame3[data-app=work]{--bg:#E6E6E2}body.frame3[data-app=finance]{--bg:#E7E6E1}
body.frame3[data-app=people]{--bg:#E9E6E0}body.frame3[data-app=board]{--bg:#EDE7DC}body.frame3[data-app=chat]{--bg:#E8E6E3}
body.frame3[data-app=admin]{--bg:#E8E7E2}
body.frame3[data-app]:not([data-app=""]){background:var(--bg)}
/* علامةُ المساحة · the space's mark — on every width now */
.tb-home{width:30px;height:30px;border-radius:var(--rad-m);display:grid;place-items:center;border:0;cursor:pointer;flex:none;
  margin-inline-end:var(--s3,12px);padding:0;box-shadow:0 0 0 .5px rgba(15,32,59,.09)}
.tb-home svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tb-home.ah-t-me{background:var(--app-me);color:var(--app-me-ink)}
@media(min-width:900px){.tb-home{display:grid!important}.tb-home[hidden]{display:none!important}}
/* القسمُ المختار بلون مساحته · the chosen section in its space's colour */
body.frame3 #snav-items button.on{color:var(--app-c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-c) 30%,transparent)}
body.frame3[data-app=me] #snav-items button.on,body.frame3[data-app=board] #snav-items button.on{color:var(--gold-ink)}
body.frame3 #lpane a.on,body.frame3 #lpane button.on{color:var(--app-c)}
body.frame3[data-app=board] #lpane a.on,body.frame3[data-app=me] #lpane a.on{color:var(--gold-ink)}
/* الترحيب: الشاشةُ كلّها له · the welcome page owns the whole screen */
body.on-home #snav,body.on-home #lpane,body.on-home .topbar,body.on-home #bnav,body.on-home #secrow,body.on-home #rtabs,
body.on-home #ask-dock,body.on-home #appfoot,body.on-home #sbar,body.on-home .dtools,body.on-home .phead{display:none!important}
body.on-home #app{grid-template-columns:1fr!important}
body.on-home main,body.on-home #view{max-width:none}
.ah{max-width:760px;margin:0 auto;padding:max(24px,env(safe-area-inset-top,0px)) var(--s4,16px) 48px;min-height:100vh;
  display:flex;flex-direction:column}
.ah-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.ah-lock{display:flex;align-items:center;gap:var(--s2)}
.ah-lock i{width:26px;height:31px;display:block}.ah-lock i svg{width:100%;height:100%;fill:var(--gold)}
.ah-lock span{display:grid;line-height:1;direction:ltr}
.ah-lock b{font-size:var(--fs-lg);letter-spacing:.06em;font-weight:600;color:var(--ink)}
.ah-lock small{font-size:var(--fs-2xs);letter-spacing:.32em;color:var(--gold-ink);margin-top:3px}
.ah-corner{display:flex;align-items:center;gap:var(--s2)}
.ah-bell,.ah-me{position:relative;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer}
.ah-bell{background:var(--card);color:var(--ink);box-shadow:0 0 0 .5px rgba(15,32,59,.09),0 1px 3px rgba(15,32,59,.05)}
.ah-bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ah-bell .ah-cnt{top:-4px;inset-inline-end:-4px}
.ah-me{background:transparent;padding:0}
.ah-me .me-av{width:40px;height:40px;background:var(--gold);color:var(--ink);font-weight:600;font-size:var(--fs-base)}
.ah-hello{margin-top:clamp(40px,10vh,96px)}
.ah-hello h1{margin:0;font-size:var(--t-lt);line-height:1.25;font-weight:600;color:var(--ink)}
.ah-hello p{margin:var(--s1) 0 0;color:var(--text-3);font-size:var(--fs-base)}
.ah-rule{width:48px;height:2px;background:var(--gold);margin:var(--s5,20px) 0 var(--s4,16px)}
.ah-ask{margin:0 0 var(--s6,24px);color:var(--text-2);font-size:var(--fs-md)}
.ah .ah-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px;margin:0;max-width:none;justify-items:center}
@media(min-width:700px){.ah .ah-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}}
.ah .ah-tile{width:72px;height:72px;border-radius:20px}
@media(min-width:900px){.ah .ah-tile{width:84px;height:84px;border-radius:23px}.ah .ah-tile svg{width:34px;height:34px}}
.ah .ah-app{transition:transform var(--m-1,.12s) var(--ease,ease)}
@media(hover:hover){.ah .ah-app:hover .ah-tile{transform:translateY(-2px);box-shadow:0 0 0 .5px rgba(15,32,59,.09),0 8px 20px rgba(15,32,59,.12)}}

/* ═══ 3.3.7 · «ما يخصّني» · "Mine" — archetype C ═══ */
.mn{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4,16px);margin-top:var(--s3,12px)}
@media(min-width:1100px){.mn{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1200px}}
/* 3.3.23 · عمودٌ واحد حين لا يملأ الثاني شيء — بعرض القراءة · one column when the second holds nothing, at reading width */
@media(min-width:1100px){.mn.mn-1{grid-template-columns:minmax(0,880px)}}
.mn-col{display:grid;gap:var(--s4,16px);align-content:start;min-width:0}
.mn-sec{min-width:0}
.mn-card{padding:var(--s1,4px) 0}
.mn-r{width:100%;text-align:start;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.mn-m{flex:1;min-width:0;display:grid}
.mn-m .nt,.mn-m .ns{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-e{flex:none;display:flex;align-items:center;gap:var(--s2,8px)}
.mn-late .mn-e b{color:var(--bad)}
.mn-more{padding:var(--s2,8px) var(--s4,16px);color:var(--text-3);font-size:var(--fs-sm)}
.mn-empty{grid-column:1/-1}

/* ═══ 3.3.9 · «الفريق هذا الأسبوع» · the team this week — the away grid on every width (it was the hub's
   desk alone) · archetype C. Both cards scroll inside themselves; the page never does ═══ */
.tmw{display:grid;gap:var(--s4,16px);min-width:0}
.tmw>*{min-width:0;margin:0}
.ag-card{padding:var(--s3,12px)}
.ag-card .card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2,8px);margin-bottom:var(--s2,8px)}
.ag-card .card-h h3{margin:0;font-size:var(--fs-md)}
.ag{display:grid;gap:4px;overflow-x:auto;padding-bottom:var(--s1,4px)}
.ag-r{display:grid;grid-template-columns:72px repeat(21,minmax(14px,1fr));gap:3px;align-items:center;min-width:420px}
.ag-r>span{font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-r>i{display:block;height:14px;border-radius:var(--rad-xs,3px);background:var(--fill);font-style:normal}
.ag-h>i{height:auto;background:none;text-align:center;font-size:var(--fs-2xs);color:var(--text-3)}
.ag-h>i.td{background:var(--ink);color:#fff;border-radius:var(--rad-xs,3px)}
.ag-r>i.we{background:var(--line)}
.ag-r>i.a{background:var(--ink)}
.ag-r>i.p{background:repeating-linear-gradient(45deg,var(--gold) 0 3px,var(--gold-soft,#F4E6CF) 3px 6px);outline:1px solid var(--gold)}
.ag-k{display:flex;gap:14px;padding-top:var(--s2,8px);font-size:var(--fs-xs);color:var(--text-3)}
.ag-k i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;vertical-align:-1px}
.ag-k i.a{background:var(--ink)}
.ag-k i.p{background:repeating-linear-gradient(45deg,var(--gold) 0 3px,var(--gold-soft,#F4E6CF) 3px 6px)}
/* 3.3.9 · على الهاتف: العنوانُ يقصُر بدل أن يدفع الحساب خارج الشاشة، وعلامةُ المساحة لا تنكمش ·
   on a phone the title shortens rather than pushing the account off screen, and the space mark keeps its size */
@media(max-width:899px){
  body.frame3 .topbar>div:has(>#pg-title){min-width:0;flex:1 1 auto;overflow:hidden}
  body.frame3 .topbar #pg-title,body.frame3 .topbar #pg-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.frame3 .topbar .tb-actions{flex:none}
}

/* 3.3.10 · مجالُ الشركة: حافّةٌ بلونه العميق واسمُه · a company's domain: an edge in its deep shade and its name */
.dom-chip{--dom-c:var(--dom-none);display:inline-flex;align-items:center;gap:var(--s1);
  font-size:var(--t-ca);font-weight:500;color:var(--dom-c);padding-inline:var(--s2);
  border-inline-start:3px solid var(--dom-c);border-radius:var(--rad-s);background:var(--fill);white-space:nowrap}
.dom-chip[data-dom="health"]{--dom-c:var(--dom-health)}
.dom-chip[data-dom="realestate"]{--dom-c:var(--dom-realestate)}
.dom-chip[data-dom="lifestyle"]{--dom-c:var(--dom-lifestyle)}
.dom-chip[data-dom="consulting"]{--dom-c:var(--dom-consulting)}
.pj-ent{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;align-items:center;margin-top:var(--s3)}

/* 3.3.13 · الفرصة · an opportunity (archetype F) */
.opp-h{padding:var(--s4)}
.opp-hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-start;justify-content:space-between}
.opp-st{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.opp-acts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.opp-desc{margin:var(--s3) 0 0;font-size:var(--t-bo);color:var(--text-2);white-space:pre-wrap}
.opp-sec{padding:var(--s4);margin-top:var(--s3)}
.opp-sec h4{margin:0 0 var(--s2);font-size:var(--t-he);font-weight:600}
@media(min-width:1100px){.opp-h,.opp-sec{max-width:880px}}

/* 3.3.14 · النبضُ على صفحة الترحيب · the pulse on the welcome page */
.ah-pls{margin-top:var(--s6);text-align:start}
@media(min-width:1100px){.ah-pls{--ahw:min(1180px,calc(100vw - 48px));width:var(--ahw);margin-inline:calc((100% - var(--ahw))/2)}}

/* 3.3.15 · المكان · the place picker */
.tb-place{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s1);padding:2px var(--s2);
  border:0;border-radius:var(--rad-pill);background:var(--fill);color:var(--text-2);font:inherit;font-size:var(--t-ca);font-weight:500;cursor:pointer;max-width:100%}
.tb-place[hidden]{display:none}
.tb-place svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.tb-place span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-place.on{background:var(--gold-soft);color:var(--gold-ink)}
.plc-list{display:flex;flex-direction:column;gap:2px}
.plc-r{display:flex;align-items:center;gap:var(--s2);min-height:var(--h-m);padding:var(--s2) var(--s3);border:0;border-radius:var(--rad-m);
  background:transparent;color:var(--text);font:inherit;font-size:var(--t-bo);text-align:start;cursor:pointer}
.plc-r:hover{background:var(--fill)}
.plc-r.on{background:var(--gold-soft)}
.plc-e{padding-inline-start:calc(var(--s3) + var(--s5));font-size:var(--t-su);color:var(--text-2)}
.plc-t{flex:1;min-width:0}
.plc-s{font-size:var(--t-ca);color:var(--text-3)}
.plc-ok{color:var(--gold-ink);font-weight:600}
.plc-note{margin:var(--s3) 0 0;font-size:var(--t-ca);color:var(--text-3)}
@media(min-width:1100px){.topbar .tb-place{margin-top:0;margin-inline-start:var(--s2)}}

/* ── 3.3.16 · شريطُ المجالات · the domain band ─────────────────────────────
   3.3.17: هادئ — بطاقةٌ بيضاء بحافّة المجال وعلامة صيره بلونه؛ اللونُ يملأ عند الاختيار وحده. اللاتينيّةُ وحدها
   متباعدةُ الحروف · quiet — a white card with the domain's edge and the SIRA mark in its colour; the colour fills
   only when picked. Only the Latin word is letter-spaced. */
.dmb{margin-block:var(--s2) var(--s4)}
.dmb-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media(min-width:900px){.dmb-g{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)}}
.dmb-c,.dmb-bar,.dmb-e{--dom-c:var(--dom-none)}
:is(.dmb-c,.dmb-bar,.dmb-e)[data-dom="health"]{--dom-c:var(--dom-health)}
:is(.dmb-c,.dmb-bar,.dmb-e)[data-dom="realestate"]{--dom-c:var(--dom-realestate)}
:is(.dmb-c,.dmb-bar,.dmb-e)[data-dom="lifestyle"]{--dom-c:var(--dom-lifestyle)}
:is(.dmb-c,.dmb-bar,.dmb-e)[data-dom="consulting"]{--dom-c:var(--dom-consulting)}
.dmb-c{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:var(--s1);min-width:0;
  padding:var(--s3);border-radius:var(--r);background:var(--card);box-shadow:var(--sh);color:var(--ink);
  transition:background var(--m-1) var(--ease)}
.dmb-c:hover{background:color-mix(in srgb,var(--dom-c) 5%,var(--card))}
.dmb-c:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dmb-c.on{background:var(--dom-c);color:#fff}
.dmb-h{display:flex;align-items:center;gap:var(--s2)}
.dmb-m{display:inline-flex;width:22px;height:26px;flex:0 0 auto;color:var(--dom-c)}
.dmb-m svg{width:100%;height:100%;fill:currentColor}
.dmb-c.on .dmb-m{color:var(--gold)}
.dmb-w{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.dmb-w b{font-size:var(--t-su);font-weight:600;letter-spacing:.08em}
.dmb-w i{font-style:normal;font-size:var(--t-ca);font-weight:500;letter-spacing:.18em;color:var(--dom-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmb-c.on .dmb-w i{color:inherit;opacity:.85}
.dmb-n{font-size:var(--t-ca);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmb-k{font-size:var(--t-ca);color:var(--text-3)}
.dmb-c.on :is(.dmb-n,.dmb-k){color:inherit;opacity:.85}
.dmb-bar{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);padding:var(--s2) var(--s3);
  border-radius:var(--r);background:color-mix(in srgb,var(--dom-c) 8%,var(--card));color:var(--dom-c)}
.dmb-bar .dmb-m{width:16px;height:19px}
.dmb-bt{font-size:var(--t-ca);font-weight:600;letter-spacing:.18em}
.dmb-bs{flex:1;min-width:0;font-size:var(--t-ca);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmb-x{all:unset;cursor:pointer;width:var(--h-s);height:var(--h-s);display:grid;place-items:center;border-radius:50%;color:var(--text-2)}
.dmb-x:hover{background:color-mix(in srgb,var(--dom-c) 12%,transparent)}
.dmb-ents{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.dmb-e{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--h-s);padding-inline:var(--s3);border-radius:var(--rad-pill);background:var(--card);
  box-shadow:var(--sh);font-size:var(--t-ca);color:var(--ink)}
.dmb-e i{width:6px;height:6px;border-radius:50%;background:var(--dom-c)}
.dmb-e small{font-size:var(--t-ca);color:var(--text-3)}
.dmb-e.dorm span{color:var(--text-2)}
.dmb-e.on{box-shadow:0 0 0 1.5px var(--dom-c)}
.dmb-e:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ah-dmb{margin-top:var(--s5)}
@media(max-width:899px){
  .dmb-g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
  .dmb-g::-webkit-scrollbar{display:none}
  .dmb-c{flex:0 0 auto;scroll-snap-align:start;padding:var(--s2) var(--s3);gap:2px;border-radius:var(--rad-l)}
  .dmb-w b{font-size:var(--t-ca)}
  .dmb-bar{padding:var(--s1) var(--s3)}
  .dmb-n{display:none}
  .dmb-m{width:18px;height:22px}
  .dmb-e{min-height:36px}}
@media(prefers-reduced-motion:reduce){.dmb-c{transition:none}}

/* ── 3.3.17 · النبضُ بالمجال · the pulse by domain ── */
.pls-dg{all:unset;box-sizing:border-box;--dom-c:var(--dom-none);display:flex;align-items:center;gap:var(--s2);
  min-height:var(--h-m);margin-block:var(--s2) var(--s1);cursor:pointer;color:var(--ink);font-size:var(--t-su);font-weight:600}
.pls-dg[data-dom="health"]{--dom-c:var(--dom-health)}
.pls-dg[data-dom="realestate"]{--dom-c:var(--dom-realestate)}
.pls-dg[data-dom="lifestyle"]{--dom-c:var(--dom-lifestyle)}
.pls-dg[data-dom="consulting"]{--dom-c:var(--dom-consulting)}
.pls-dg[disabled]{cursor:default;color:var(--text-2)}
.pls-dg i{width:4px;height:16px;border-radius:2px;background:var(--dom-c)}
.pls-dg small{font-size:var(--t-ca);font-weight:500;color:var(--text-3)}
.pls-dg:not([disabled]):hover b{text-decoration:underline;text-underline-offset:3px}
.pls-dg:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--rad-s)}
@media(min-width:1100px){
  body.desk .pls-band>.pls-grp{flex:0 1 auto;min-width:270px;display:flex;flex-direction:column;gap:var(--s2)}
  body.desk .pls-grp>.pls-dg{margin:0;min-height:var(--h-s)}
  body.desk .pls-gc{display:flex;flex-wrap:wrap;gap:var(--s3);flex:1;align-items:stretch}
  body.desk .pls-gc>.pls-c{flex:0 0 270px}}

/* ── 3.3.18 · إعادةُ الفوترة · the recharge ── */
.rch{max-width:880px}
.rch-h{font-size:var(--t-he);font-weight:600;margin:var(--s5) 0 var(--s2)}
.rch-p{margin-bottom:var(--s2)}
.rch-p>summary{cursor:pointer;list-style:none}
.rch-p>summary::-webkit-details-marker{display:none}
.rch-p[open]>summary{border-bottom:.5px solid var(--hair)}
.rch-note{font-size:var(--t-ca);color:var(--text-3);margin-top:var(--s3)}

/* ── 3.3.19 · الهاتف: شريحةُ المكان على سطر العنوان الفرعيّ (R1) · phone: the place chip on the subtitle's line ──
   على سطرٍ ثالث دفعت كلَّ قائمةٍ ٤٠px فتجاوزت أحدَ عشر صفحةً ربعَ الشاشة · on a third line it pushed every list
   40px down and eleven pages passed a quarter of the screen */
@media(max-width:899px){
  .topbar>div:has(>#pg-title){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);align-items:center}
  .topbar>div:has(>#pg-title)>:not(.who):not(.tb-place){grid-column:1/-1}
  .topbar>div:has(>#pg-title)>.who{-webkit-line-clamp:1}
  .topbar .tb-place{margin-top:0;max-width:44vw;height:20px;padding-block:0;font-size:var(--t-ca)}
  .psel select{height:var(--h-m);min-height:0}
  /* المساحةُ تُسمّى مرّةً: مربّعها بجانب العنوان (3.3.6) يغني عن السطر فوقه · the space is named once */
  body.frame3 .topbar #tb-app{display:none}}

/* ── 3.3.20 · شاشةُ الإقلاع: العلامةُ تتجمّع · the loading screen: the mark assembles ─────────────────
   على كحليٍّ صافٍ، نقطةُ ضوءٍ ترسم كلَّ خطٍّ من خطوط العلامة الأربعة بشعرةٍ ذهبيّة، واسمُ مجاله بجانبه مع معيّنٍ من
   لونه الحقيقيّ الداكن؛ ثمّ تنزلق الخطوطُ إلى الوسط وتتعشّق، فتمتلئ العلامةُ ذهباً معدنيّاً ويعبرها بريق، ثمّ SIRA GROUP
   والمجالاتُ الأربعة صفّاً. لا لونَ على الخطوط (قرار المالك: فخامةٌ لا لعبة). ⚠ transform وopacity وstroke-dashoffset
   وحدها؛ ولا شيء تحت «الحركة المخفّفة». On plain navy, light traces each of the mark's four lines as a gold hairline,
   its domain's name beside it with a diamond of its real deep colour; the lines glide in and lock, the mark fills with
   metallic gold and a sheen crosses it, then SIRA GROUP and the four domains in a row. No colour on the lines (the
   owner: luxury, not a toy). */
#splash .sp-in{gap:22px}
.sp-tag,.sp-doms span{--c:var(--dom-none)}
.sp-stage{position:relative;width:320px;max-width:100%;height:250px;display:grid;place-items:center}
.sp-mark{width:112px;height:133px;overflow:visible;animation:sp-click .5s cubic-bezier(.34,1.56,.64,1) 2.55s both}
@keyframes sp-click{40%{transform:scale(1.07)}}
.sp-ln,.sp-cm{transform-box:view-box;transform-origin:128px 152px;transform:translate(var(--dx),var(--dy))}
.sp-l1{--dx:-30px;--dy:-30px}.sp-l2{--dx:0px;--dy:-26px}.sp-l3{--dx:30px;--dy:30px}.sp-l4{--dx:0px;--dy:26px}
.sp-ln{fill:none;stroke:#D9AE68;stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:sp-draw 1.15s cubic-bezier(.45,0,.25,1) both,sp-lock .7s cubic-bezier(.34,1.56,.64,1) 2.1s both}
.sp-cm{fill:none;stroke:#FFEBC4;stroke-width:4;stroke-linecap:round;stroke-dasharray:28 972;stroke-dashoffset:1000;opacity:0;filter:url(#sp-glow);
  animation:sp-run 1.15s cubic-bezier(.45,0,.25,1) both,sp-lock .7s cubic-bezier(.34,1.56,.64,1) 2.1s both}
.sp-ln.sp-l1,.sp-cm.sp-l1{animation-delay:.35s,2.1s}.sp-ln.sp-l2,.sp-cm.sp-l2{animation-delay:.55s,2.1s}
.sp-ln.sp-l3,.sp-cm.sp-l3{animation-delay:.75s,2.1s}.sp-ln.sp-l4,.sp-cm.sp-l4{animation-delay:.95s,2.1s}
@keyframes sp-draw{to{stroke-dashoffset:0}}
@keyframes sp-run{0%{opacity:0;stroke-dashoffset:1000}8%,88%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes sp-lock{to{transform:translate(0,0)}}
.sp-lines{animation:sp-out .4s ease 2.75s both}
@keyframes sp-out{to{opacity:0}}
.sp-gold{animation:sp-in2 .45s ease 2.5s both}
@keyframes sp-in2{from{opacity:0}}
.sp-sheen{opacity:0;animation:sp-on 0s linear 2.95s both}
.sp-sheen rect{animation:sp-sweep .95s ease-in-out 3s both}
@keyframes sp-on{to{opacity:1}}
@keyframes sp-sweep{from{transform:translateX(-200px) skewX(-18deg)}to{transform:translateX(320px) skewX(-18deg)}}
.sp-tag{position:absolute;display:inline-flex;align-items:center;gap:7px;font-family:"Inter",system-ui,sans-serif;font-size:var(--t-ca);
  font-weight:500;letter-spacing:.24em;color:#E9DCC0;white-space:nowrap;opacity:0;animation:sp-tag 2.9s cubic-bezier(.2,.8,.2,1) both}
.sp-tag::before,.sp-doms i{content:"";width:7px;height:7px;background:var(--c);box-shadow:0 0 0 1px rgba(207,156,81,.75);transform:rotate(45deg);flex:none}
.sp-t1{top:6px;left:0;animation-delay:.6s}.sp-t2{top:6px;right:0;animation-delay:.8s}
.sp-t3{bottom:6px;right:0;animation-delay:1s}.sp-t4{bottom:6px;left:0;animation-delay:1.2s}
@keyframes sp-tag{0%{opacity:0;letter-spacing:.7em;filter:blur(3px)}22%,55%{opacity:1;letter-spacing:.24em;filter:none}72%,100%{opacity:0}}
#splash .sp-name{gap:9px;margin-top:0}
#splash .sp-name b{font-family:"Inter",system-ui,sans-serif;font-size:var(--t-he);letter-spacing:.42em;padding-inline-start:.42em;color:#fff;
  animation:sp-wm 1s cubic-bezier(.2,.8,.2,1) 3.05s both}
@keyframes sp-wm{from{opacity:0;letter-spacing:.9em;filter:blur(4px)}}
#splash .sp-name small{font-size:var(--t-ca);letter-spacing:.5em;color:var(--gold);animation:sp-in2 .6s ease 3.45s both}
#splash .sp-rule{display:block;width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:sp-ul .8s cubic-bezier(.2,.8,.2,1) 3.4s both}
@keyframes sp-ul{from{transform:scaleX(0)}}
.sp-doms{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px 12px;font-family:"Inter",system-ui,sans-serif;font-size:var(--t-ca);letter-spacing:.14em;color:rgba(233,220,192,.78)}
.sp-doms span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;animation:sp-up .6s cubic-bezier(.2,.8,.2,1) both}
.sp-doms span:nth-child(1){animation-delay:3.55s}.sp-doms span:nth-child(2){animation-delay:3.63s}
.sp-doms span:nth-child(3){animation-delay:3.71s}.sp-doms span:nth-child(4){animation-delay:3.79s}
@keyframes sp-up{from{opacity:0;transform:translateY(-14px) scale(.9)}}
/* le grand écran : la même scène, à l'échelle de l'écran · the big screen: the same scene, at the screen's scale */
@media(min-width:900px){
  .sp-stage{width:520px;height:390px}
  .sp-mark{width:176px;height:209px}
  .sp-tag{font-size:var(--t-su);gap:9px}
  .sp-tag::before,.sp-doms i{width:9px;height:9px}
  #splash .sp-in{gap:30px;width:min(640px,calc(100vw - 48px))}
  #splash .sp-name b{font-size:var(--t-ti)}
  #splash .sp-name small{font-size:var(--t-su)}
  #splash .sp-rule{width:110px}
  .sp-doms{font-size:var(--t-su);gap:10px 22px}
  .sp-cm{stroke-width:3.2}}
@media(max-width:439px){.sp-doms{display:grid;grid-template-columns:auto auto;justify-content:center;gap:8px 18px}}
@media(prefers-reduced-motion:reduce){
  #splash .sp-mark,#splash .sp-mark *,.sp-tag,#splash .sp-name *,.sp-doms span{animation:none!important}
  .sp-lines,.sp-cm,.sp-tag{display:none}.sp-sheen{opacity:0}}

/* ═══ 3.3.25 · الجولة المرشدة · the guided tour (src/tour.js) ═══
   إطارٌ ذهبيّ حول الجزء المشروح يُظلم ما حوله بظلّه، وبطاقةٌ بيضاء تحته · a gold ring round the part explained,
   darkening the rest with its shadow, and a white card under it. ⚠ No transition on position (transform/opacity only) */
#tour{position:fixed;inset:0;z-index:9500}
#tour .tour-scrim{position:absolute;inset:0;background:rgba(15,32,59,.5);display:none}
#tour.tour-free .tour-scrim{display:block}
#tour .tour-ring{position:fixed;border-radius:var(--rad-m);box-shadow:0 0 0 9999px rgba(15,32,59,.5);
  outline:2px solid var(--gold);outline-offset:0;pointer-events:none}
#tour .tour-card{position:fixed;width:min(360px,calc(100vw - 32px));background:var(--card);color:var(--text);
  border-radius:var(--rad-l);box-shadow:var(--sh-2);padding:var(--s4);display:grid;gap:var(--s2);
  animation:tourIn var(--m-2) var(--ease) both}
#tour.tour-free .tour-card{top:50%;left:50%;transform:translate(-50%,-50%)}
#tour .tour-n{font-size:var(--t-ca);color:var(--gold-ink)}
#tour .tour-t{font-size:var(--t-he);font-weight:600;margin:0}
#tour .tour-b{font-size:var(--t-bo);color:var(--text-2);margin:0}
#tour .tour-acts{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
#tour .tour-skip{color:var(--text-3)}
@media(max-width:899px){
  #tour.tour-free .tour-card{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%)}
  #tour .tour-acts .btn{min-height:var(--h-m)}}
@keyframes tourIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#tour .tour-card{animation:none}}

/* ═══ 3.3.26 · مراجعةُ الشاشات · the screen pass (tools: the audit of every page, phone and desk) ═══ */
.bk-ttl{margin:0;font-size:var(--t-he);font-weight:600}
/* على الهاتف: هدفُ اللمس 36 على الأقلّ لما يُلمس وهو صغير — بمساحةٍ خفيّة حوله، فلا يتحرّك شيء · on the phone a small
   tappable item gets an invisible 36px hit area around it, so nothing moves */
@media(max-width:1099px){
  #view :is(.pfig-a,.cm-btn,.lg-open,.fhelp,.dra-go,.tk-ins-o,button.tag,.tag[data-act]){position:relative}
  #view :is(.pfig-a,.cm-btn,.lg-open,.fhelp,.dra-go,.tk-ins-o,button.tag,.tag[data-act])::after{content:"";position:absolute;inset:-8px -4px}
  #view .sim-exact input{min-height:var(--h-s)}
  #view .pls-done button{min-height:var(--h-s)}}
/* رمزُ العملة بجانب المبلغ في جدول: على السلّم لا 11px · a currency code beside an amount in a table: on the scale */
#view .dt td small{font-size:var(--t-ca)}
/* على المنضدة: لا عمودَ قراءةٍ أعرضُ من 880 (DESIGN.md §11) · on the desk no reading column is wider than 880 */
@media(min-width:1100px){#view :is(.note,p){max-width:880px}}

/* 3.3.26 · شاشةُ الإقلاع على نافذةٍ قصيرة: المسرحُ أصغر فلا يلامس سطرُ المجالات سطرَ الحقوق · the loading screen on a
   short window: a smaller stage, so the domains row never meets the © line */
@media(min-width:900px) and (max-height:760px){
  .sp-stage{width:420px;height:300px}
  .sp-mark{width:140px;height:166px}
  #splash .sp-in{gap:22px}}
@media(max-height:560px){.sp-ver{display:none}}

/* ═══ 3.3.27 · مراجعةُ المالك: شريطٌ جانبيّ واحد، شريطُ المجال، العنوانُ وعلامتُه ═══════════════════════
   the owner's review: one sidebar, the domain bar, the title and its mark */
/* ── شريطُ المجال أعلى الشاشة، بدل غسلة الأرضيّة · the domain bar at the top, in place of the ground wash ── */
body.frame3[data-app]:not([data-app=""]){background:var(--dk-bg,#EFEDE7)}
body.frame3[data-app]{--bg:#EFEDE7}
body.frame3 .topbar{box-shadow:none}
body.frame3::before{content:"";position:fixed;inset-inline:0;top:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(to left,var(--dom-health) 0 25%,var(--dom-realestate) 25% 50%,var(--dom-lifestyle) 50% 75%,var(--dom-consulting) 75% 100%)}
html[dir=ltr] body.frame3::before{background:linear-gradient(to right,var(--dom-health) 0 25%,var(--dom-realestate) 25% 50%,var(--dom-lifestyle) 50% 75%,var(--dom-consulting) 75% 100%)}
body.frame3[data-dom=health]::before{background:var(--dom-health)}
body.frame3[data-dom=realestate]::before{background:var(--dom-realestate)}
body.frame3[data-dom=lifestyle]::before{background:var(--dom-lifestyle)}
body.frame3[data-dom=consulting]::before{background:var(--dom-consulting)}
body.on-home::before{display:none}
@media print{body.frame3::before{display:none}}

/* ── العنوانُ وعلامةُ المساحة متلاصقان عند بداية الشريط · the title and the space's mark together at the bar's start ── */
body.frame3 .topbar>.tb-home{margin-inline-end:var(--s2,8px);align-self:center}
body.frame3 .topbar>div:has(>#pg-title){flex:0 1 auto;min-width:0;text-align:start}
@media(min-width:900px){
  body.frame3 .topbar #pg-title{font-size:var(--t-ti);line-height:26px}
  body.frame3 .topbar #pg-sub{font-size:var(--t-ca)}
  body.frame3 .topbar .tb-actions{margin-inline-start:auto}
}

/* ── شريطٌ جانبيّ واحد (المنضدة، داخل المساحات) · one sidebar (the desk, inside the spaces) ── */
@media(min-width:1100px){
  body.desk.atelier.side1 #lpane{display:none!important}
  body.desk.atelier.side1 .rail-me{display:none!important}
  body.desk.atelier.side1 .rail-pane:not([hidden]){display:grid;place-items:center;width:34px;height:30px;margin:0 auto 6px;
    border-radius:var(--dk-rb,8px);color:var(--text-3)}
  body.desk.atelier.side1 .rail-pane:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  body.desk.atelier.side1 #app{grid-template-columns:var(--frame-side-min) minmax(0,1fr)}
  body.desk.atelier.side1.side-open #app{grid-template-columns:var(--frame-side-1,224px) minmax(0,1fr)}
  body.desk.atelier.side1.side-open #snav{width:var(--frame-side-1,224px)}
  body.desk.atelier.side1.side-open .selbar{inset-inline-start:calc(var(--frame-side-1,224px) + 26px)}
  body.desk.atelier.side1.side-open #rtabs{inset-inline-start:var(--frame-side-1,224px)}
  body.desk.atelier.side1.side-open .snav-top{justify-items:start;padding-inline:20px}
  body.desk.atelier.side1.side-open .rail-pane:not([hidden]){margin-inline:20px auto}
  body.desk.atelier.side1.side-open #snav .items{padding:6px 12px}
  body.desk.atelier.side1.side-open #snav .items>button{justify-content:flex-start;gap:12px;padding:0 12px;min-height:var(--h-m,36px);
    margin-bottom:2px;font-size:var(--t-bo);border-radius:var(--rad-m,8px)}
  body.desk.atelier.side1.side-open #snav .items>button>span:not(.badge){display:inline;flex:1;min-width:0;text-align:start;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desk.atelier.side1.side-open #snav .items>button svg{flex:none;width:18px;height:18px}
  body.desk.atelier.side1.side-open #snav .items .badge{position:static;margin:0}
  body.desk.atelier.side1.side-open.paned #view>.ptabs{display:none}
  /* تحت القسم المفتوح · under the open section */
  .sn-sub{display:grid;gap:1px;margin:2px 0 8px;padding-inline-start:30px}
  .sn-sub[hidden]{display:none}
  .sn-p{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:0 10px;border:0;background:none;
    border-radius:var(--rad-m,8px);font:inherit;font-size:var(--t-su);color:var(--text-2);text-align:start;cursor:pointer}
  .sn-p:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  .sn-p.on{color:var(--ink);font-weight:600;background:var(--dk-surf,#fff)}
  .sn-vs{display:grid;gap:1px;margin-top:6px;padding-top:6px;border-top:.5px solid var(--hair,rgba(15,32,59,.12))}
  .sn-v{display:flex;align-items:center;border-radius:var(--rad-m,8px)}
  .sn-v.on{background:var(--gold-soft,#F4E6CF)}
  .sn-vb{flex:1;min-width:0;min-height:28px;padding:0 10px;border:0;background:none;font:inherit;font-size:var(--t-ca);color:var(--text-2);
    text-align:start;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sn-add{min-height:28px;padding:0 10px;border:0;background:none;font:inherit;font-size:var(--t-ca);color:var(--gold-ink);text-align:start;cursor:pointer}
  body.desk.atelier.side1:not(.side-open) .sn-sub{display:none}
  body.desk.atelier.side1 #snav{transition:width var(--m-2,.2s) var(--ease,ease)}
}
/* ── بين ٩٠٠ و١١٠٠ داخل المساحات: الشريطُ نفسُه بلونه الفاتح، لا الشريطُ الكحليّ القديم، ولا اسمٌ ولا خروجٌ أسفله
   (دائرةُ الحساب أعلى الشاشة تحملهما) · between 900 and 1100 inside the spaces: the same light sidebar, not the old navy
   one, and no name or sign-out at its foot (the account circle at the top carries them) ── */
@media(min-width:900px){
  body.frame3 .snav-btm{display:none!important}
  body.frame3 #app{grid-template-columns:var(--frame-side-1,224px) minmax(0,1fr)}
}
@media(min-width:900px) and (max-width:1099px){
  body.frame3 #snav{background:#E7E4DC;border-inline-end:1px solid var(--line)}
  body.frame3 .snav-top{padding:16px 18px 12px}
  body.frame3 #snav .snav-top .brand-logo{content:url("logo-mark.png");height:30px;margin:0}
  body.frame3 .snav-top .wm-desc{display:none}
  body.frame3 #snav .items button{color:#4C5B72;font-size:var(--t-bo);min-height:var(--h-m,36px);padding:0 12px}
  body.frame3 #snav .items button:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  body.frame3 #snav .items button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,32,59,.06)}
  body.frame3 #snav .items .badge{background:var(--gold);color:var(--ink)}
  body.frame3 .topbar{padding:10px 20px}
}
/* المكانُ بجانب العنوان لا تحته على المنضدة · the place beside the title, not under it, on the desk */
@media(min-width:900px){
  body.frame3 .topbar>div:has(>#pg-title){display:grid;grid-template-columns:auto auto;column-gap:var(--s3,12px);align-items:center;justify-content:start}
  body.frame3 .topbar>div:has(>#pg-title)>#pg-title{grid-column:1;grid-row:1}
  body.frame3 .topbar>div:has(>#pg-title)>#pg-sub{grid-column:1;grid-row:2}
  body.frame3 .topbar>div:has(>#pg-title)>#tb-place{grid-column:2;grid-row:1/3;margin:0}
}
/* 3.3.27 · ما أبدؤه بنفسي، في «أنا» والمال · what I start myself, in Me and Finance */
.mn-q{display:flex;flex-wrap:wrap;gap:var(--s2,8px);margin:var(--s3,12px) 0 0}
.mn-qb{display:inline-flex;align-items:center;gap:6px}
.mn-qb .qi{display:inline-grid;width:16px;height:16px}.mn-qb .qi svg{width:16px;height:16px}
@media(max-width:899px){.mn-q{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.mn-qb{flex:none}}
/* ═══ 3.3.27 · «الفريق» — الناسُ معاً (E) · the team, people together (archetype E) ═══ */
.cw{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4,16px);margin-top:var(--s3,12px)}
@media(min-width:900px){.cw{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.cw-g{padding:var(--s4,16px);display:grid;gap:var(--s3,12px);align-content:start;margin:0!important}
.cw-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2,8px)}
.cw-h b{font-size:var(--t-he);font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-ps{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s2,8px)}
.cw-p{display:flex;align-items:center;gap:var(--s2,8px);min-height:44px;padding:var(--s1,4px) var(--s2,8px);border-radius:var(--rad-m,8px);
  background:var(--fill);border:0;font:inherit;color:inherit;text-align:start;min-width:0}
button.cw-p{cursor:pointer;transition:background var(--m-1,.12s) var(--ease,ease)}
button.cw-p:hover{background:var(--dk-sel,rgba(207,156,81,.14))}
.cw-av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:var(--t-ca);font-weight:600;overflow:hidden}
.cw-av .fc{width:100%;height:100%;object-fit:cover}
.cw-m{display:grid;min-width:0}
.cw-m b,.cw-m small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-m b{font-size:var(--t-su);font-weight:500;color:var(--ink)}
.cw-m small{font-size:var(--t-ca);color:var(--text-3)}
/* 3.3.27 · القسمُ وصفحاتُه: حين تظهر صفحاتُه تحته يُعلَّم القسمُ بخطّه وحده، والصفحةُ المفتوحة وحدها مملوءة — لا تعليمان
   متساويان لاسمٍ واحد · a section and its pages: while its pages show under it the section is marked by its weight alone,
   and the open page alone is filled — never two equal marks for one name */
@media(min-width:1100px){
  body.desk.atelier.side1.side-open #snav .items button.on:has(+ .sn-sub:not([hidden])){background:none;box-shadow:none;font-weight:600}
  .sn-p .lp-n{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:var(--rad-pill,999px);background:var(--gold);color:var(--ink);
    font-size:var(--fs-2xs);line-height:18px;font-weight:600;text-align:center}
}
.mn-qb .qi svg,.cmd-qb .qi svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 3.3.27 · داخل المساحات العنوانُ في الشريط العلويّ وحده، وصفحاتُ القسم في الشريط الجانبيّ وحده — لا عنوانٌ ثانٍ ولا شريطُ
   تبويباتٍ ثانٍ في رأس الصفحة · inside the spaces the title lives in the top bar alone, the section's pages in the sidebar
   alone — no second title and no second tab strip at the page's head */
@media(min-width:1100px){
  body.desk.atelier.side1 .phead .ph-t{display:none}
  body.desk.atelier.side1.side-open #view>.ptabs{display:none}
}
/* 3.3.28 · قائمةُ الجرس تحت الجرس الذي ضُغط · the bell's list under the bell that was pressed */
@media(min-width:1100px){
  body.desk.atelier .ov:has(>.sheet.nb-sheet){padding-top:var(--nb-top,48px);padding-inline-end:var(--nb-end,12px)}
}
/* 3.3.28 · «العروض» · the views sheet */
.vw{display:grid;gap:var(--s3,12px)}
.vw-list{display:grid;gap:2px;background:var(--card,#fff);border-radius:var(--r,14px);padding:var(--s1,4px)}
.vw-r{display:flex;align-items:center;gap:var(--s1,4px);border-radius:var(--rad-m,8px)}
.vw-r.on{background:var(--gold-soft,#F4E6CF)}
.vw-a{flex:1;min-width:0;min-height:var(--h-m,36px);display:flex;align-items:center;justify-content:space-between;gap:var(--s2,8px);
  padding:0 var(--s3,12px);border:0;background:none;font:inherit;font-size:var(--t-bo);color:var(--ink);text-align:start;cursor:pointer}
.vw-a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-a small{font-size:var(--t-ca);color:var(--gold-ink)}
.vw-x{width:32px;height:32px;border:0;background:none;color:var(--text-3);border-radius:var(--rad-m,8px);cursor:pointer;font-size:var(--t-he)}
.vw-x:hover{color:var(--bad);background:var(--bad-bg)}
.vw-none{margin:0;color:var(--text-3);font-size:var(--t-su)}
.vw-def{display:flex;flex-wrap:wrap;gap:var(--s2,8px)}
.vw-def .vdef{display:contents}
.vw-save{justify-self:start}
/* 3.3.28 · مالُ المشاريع في «المال اليوم» — بطاقاتُ النبض نفسُها · project money on "Finance today" — the pulse's own cards */
.fin-cards{margin-top:var(--s4,16px)}
.fin-row{display:flex;gap:var(--s3,12px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s1,4px);scrollbar-width:none}
.fin-row>.fin-c{flex:0 0 min(300px,82vw);scroll-snap-align:start}
@media(min-width:900px){.fin-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));overflow:visible}.fin-row>.fin-c{flex:none}}
.fin-m{display:grid;align-content:center;gap:2px;min-width:0}
.fin-m>b{font-size:var(--t-ti);font-weight:600;color:var(--ink)}
.fin-m>small{font-size:var(--t-ca);color:var(--text-3)}
.fin-mo{font-size:var(--t-ca);color:var(--text-2)}
.pls-rs.over{stroke:var(--bad)}
.pls-f .bad b{color:var(--bad)}
/* 3.3.28 · «وحدك الآن» سطرٌ واحد هادئ، ولا يُكتب على الشاشات الأضيق · "alone now" one quiet line, not written on narrower screens */
.pw-al-t{white-space:nowrap;font-size:var(--t-ca);color:var(--text-3)}
@media(max-width:1439px){.pw-al-t{display:none}}
@media(min-width:1100px){.mn-top{max-width:1200px}.mn-top.mn-1{max-width:880px}}
/* 3.3.28 · صفحاتُ القسم تحت القسم: لا ترث شكلَ أزرار الشريط (المركز، الحشوة، الشارة الطائرة) · a section's pages under it:
   they never inherit the rail buttons' shape (centred, padded, floating badge) */
@media(min-width:1100px){
  body.desk.atelier #snav .items .sn-sub .sn-p{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
    min-height:30px;padding:0 10px;margin:0;position:static;font-size:var(--t-su);font-weight:400;color:var(--text-2);background:none;box-shadow:none}
  body.desk.atelier #snav .items .sn-sub .sn-p:hover{background:rgba(15,32,59,.05);color:var(--ink)}
  body.desk.atelier #snav .items .sn-sub .sn-p.on{background:var(--dk-surf,#fff);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(15,32,59,.06)}
  body.desk.atelier #snav .items .sn-sub .sn-p>span:first-child{display:inline;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
  body.desk.atelier #snav .items .sn-sub .sn-p .lp-n{flex:none;display:inline-block;position:static}
}
/* 3.3.28 · «العروض» تنزل من زرّها على المنضدة، كالجرس · "Views" drops from its button on the desk, like the bell */
@media(min-width:1100px){
  body.desk.atelier .ov.ov-drop{align-items:flex-start;justify-content:flex-end;padding-top:var(--nb-top,48px);padding-inline-end:var(--nb-end,12px);
    background:rgba(15,32,59,.10);backdrop-filter:none}
  body.desk.atelier .ov.ov-drop>.sheet.vw-sheet{width:360px;max-width:360px;border-radius:var(--dk-r,14px);box-shadow:0 12px 40px rgba(15,32,59,.22)}
}
/* ═══ 3.3.29 · بطاقاتُ النظرة على رؤوس المساحات · the glance cards on the space heads ═══
   صفٌّ يملأ عرضَه (auto-fit): بطاقةٌ أو اثنتان لا تتركان فراغاً · a row filling its width: one or two leave no void */
.gc-sec{margin-top:var(--s4,16px)}
.gc-row{display:flex;gap:var(--s3,12px);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px var(--s2,8px);scrollbar-width:none}
.gc-row::-webkit-scrollbar{display:none}
.gc-row>.pls-c{flex:0 0 min(300px,84vw);scroll-snap-align:start}
@media(min-width:900px){.gc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));overflow:visible;scroll-snap-type:none}
  .gc-row>.pls-c{flex:none}}
.gc-big{display:grid;align-content:center;gap:2px;min-width:0}
.gc-big>b{font-size:var(--t-ti);font-weight:600;color:var(--ink);line-height:1.2}
.gc-big>small{font-size:var(--t-ca);color:var(--text-3)}
.gc-big.bad>b{color:var(--bad)}
.gc .pls-rb.over{stroke:var(--bad)}
.gc .pls-f .warn b{color:var(--warn)}
.gc .pls-f .bad b{color:var(--bad)}
/* الأرقامُ الصغيرة في سطرٍ واحد أيّاً كان عددها؛ الكلمةُ الطويلة تلتفّ تحت رقمها · the small figures on one line however
   many; a long label wraps under its figure */
.gc .pls-f{display:flex;flex-wrap:nowrap;gap:var(--s2,8px)}
.gc .pls-f>span{flex:1 1 0;min-width:0;display:grid;gap:1px}
.gc .pls-f>span small{white-space:normal;line-height:1.25}
/* 3.3.29 · بطاقةٌ وحدها في سطرها تتمدّد ولا تترك فراغاً، وما تحت البطاقات بعرضها · a card alone on its line stretches,
   never a void beside it; what sits under the cards takes their width */
@media(min-width:900px){
  .gc-row{display:flex;flex-wrap:wrap}
  .gc-row>.pls-c{flex:1 1 250px;min-width:0}
  .mn-top{max-width:1200px}
  .mn.mn-w{grid-template-columns:minmax(0,1fr);max-width:1200px}
}
@media(min-width:900px){#view .gc-row>.pls-c{flex:1 1 250px;min-width:0;max-width:none}}

/* ═══ 3.4.1 · الشريطُ السفليّ يُمرَّر داخل المساحة، بلا «المزيد» · the bottom bar scrolls inside a space, no "More" ═══ */
/* ⚠ 3.4.4 · على الهاتف وحده: بلا حدٍّ صار ‎display:flex‎ يغلب ‎#bnav{display:none}‎ على المكتب فظهر الشريطُ السفليّ هناك ·
   on the phone alone: unbounded, display:flex beat #bnav{display:none} on the desk and the bottom bar showed there */
@media(max-width:899px){
#bnav.bn-scroll{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
#bnav.bn-scroll::-webkit-scrollbar{display:none}
#bnav.bn-scroll button{flex:0 0 22%;min-width:72px;scroll-snap-align:start}
#bnav.bn-scroll button span:not(.badge){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
/* 3.4.1 · صفحةُ الساعات: سطرُ الوحدة والعطلات · the timesheet: the unit and weekends line */
.ts-vb{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
/* 3.4.1 · مساحةُ الوثائق · the Documents space */
:root{--app-docs:#4A6B63}
body[data-app=docs]{--app-c:var(--app-docs)}
.ah-t-docs{background:var(--app-docs);color:#fff}
@media(min-width:900px){.ah-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* 3.4.3 · العنوانُ يصغر ليُقرأ كاملاً على الهاتف (fitTitle) · the title steps down to read whole on the phone */
@media(max-width:899px){
  body.ttl-fit .topbar h2{font-size:var(--t-ti);line-height:28px;letter-spacing:-.3px}
  body.ttl-fit2 .topbar h2{font-size:var(--t-he);line-height:22px;letter-spacing:-.2px}
}
/* 3.4.3 · على الهاتف «كلّ أماكني» دبّوسٌ وحده — الكلماتُ لمكانٍ مختار؛ فيبقى سطرُ الوصف مقروءاً ·
   on the phone "All my places" is the pin alone — the words for a picked place, so the subtitle stays readable */
@media(max-width:899px){
  #tb-place:not(.on):not(.sole)>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #tb-place:not(.on):not(.sole){padding-inline:6px}
}
/* 3.4.3 · «اليوم على الأرض» تحت البطاقات على الهاتف، بمسافة قسم · "today on the ground" under the cards on the phone, a section apart */
.pls>.pls-rv{margin-top:var(--s5)}

/* ═══ 3.4.4 · نصٌّ مضغوط على المكتب: كلُّ شيءٍ ٩٠٪ — الهاتفُ لا يُمسّ (أهدافُ اللمس ٤٤، وحقولُ ١٦ كي لا يكبّر iOS) ·
   compact text on the desk: everything at 90% — the phone is never touched (44px targets, 16px fields so iOS does not zoom) ═══ */
@media(min-width:1100px){
  body.desk.tx-compact{zoom:.9}
}

/* ═══ 3.4.4 · مراحلُ المشروع · the project's stages ═══ */
.pst{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin-bottom:var(--s2)}
.pst::-webkit-scrollbar{display:none}
.pst-i{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;padding:var(--s2) var(--s1);
  font-size:var(--t-ca);color:var(--text-3);position:relative;border:0;background:none;font-family:inherit}
.pst-i::after{content:"";position:absolute;top:calc(var(--s2) + 4px);inset-inline-start:calc(50% + 8px);width:calc(100% - 16px);height:1px;background:var(--line)}
.pst-i:last-child::after{display:none}
.pst-d{width:9px;height:9px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1.5px var(--line)}
.pst-i.done{color:var(--text-2)}
.pst-i.done .pst-d{background:var(--gold);box-shadow:none}
.pst-i.done::after{background:var(--gold)}
.pst-i.on{color:var(--ink);font-weight:600}
.pst-i.on .pst-d{background:var(--ink);box-shadow:0 0 0 3px var(--gold-soft,rgba(207,156,81,.25))}
button.pst-opp{cursor:pointer;color:var(--gold-ink)}
button.pst-opp .pst-d{background:var(--gold);box-shadow:none}
.pst-f{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.pst-at{font-size:var(--t-ca);color:var(--text-3)}
.pst-w{margin-top:var(--s4);padding-top:var(--s3);border-top:.5px solid var(--hair)}
.pst-w .pst-f{margin-bottom:0}
.pst-i{flex:1 1 0;min-width:0;text-align:center;line-height:1.25}
.pst-i>span:last-child{overflow-wrap:anywhere}
/* 3.4.4 · في المضغوط تُقاس «100vh» بعد التصغير، فيقصر الشريطُ الجانبيّ عن أسفل الشاشة — تُعاد إلى طولها ·
   in compact, 100vh is measured after the zoom, so the sidebar stopped short of the bottom — given back its length */
@media(min-width:1100px){
  body.desk.tx-compact #app{min-height:calc(100vh / .9)}
  body.desk.tx-compact :is(#snav,#lpane){height:calc(100vh / .9)}
}

/* ═══ 3.4.5 · الهاتفُ المطويّ واللوحيّ: شكلٌ ثالث بين الهاتف والمكتب (DESIGN.md §9) · the fold and the tablet: a third form
   between the phone and the desk ═══
   كانت ٦٠٠–١٠٩٩ هاتفاً مكبَّراً: عمودٌ واحد بعرض الشاشة، وشريطٌ سفليٌّ بعرضها، وفراغٌ تحته. هنا: هوامشُ تتنفّس، وشريطٌ سفليٌّ
   كبسولةٌ في الوسط، ونوافذُ في وسط الشاشة لا من أسفلها، وبطاقاتُ المشاريع والمساحات شبكةٌ لا شريطٌ يُسحب، ومن ٧٦٠ السجلّاتُ
   في عمودين. ⚠ تخطيطٌ وحده: لا يغيّر ما يُرسم ولا الأزرار — كلُّ صفٍّ بابُه وحارسُه كما على الهاتف.
   600–1099 was a stretched phone: one column the screen's width, a bottom bar across it, a void under it. Here: breathing
   gutters, the bottom bar a capsule in the middle, sheets in the middle of the screen rather than from the bottom, the
   project and space cards a grid rather than a strip to swipe, and from 760 the records two-up. ⚠ Layout alone: it changes
   neither what is drawn nor the buttons — every row keeps its door and its guard, as on the phone. */
@media(min-width:600px) and (max-width:1099px){
  main{padding-inline:24px}
  .ah-grid{grid-template-columns:repeat(7,minmax(0,1fr));max-width:820px}
  .pls-row,.pls-row.ph{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));overflow:visible;scroll-snap-type:none}
  .gc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));overflow:visible;scroll-snap-type:none}
  .dmb-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));overflow:visible}
  .tiles{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:600px) and (max-width:900px){
  #bnav,.sec-row:not(:empty){inset-inline:max(12px,calc(50% - 330px))}
  .ov{align-items:center;padding:24px}
  .sheet{border-radius:var(--rad-l);max-width:640px;max-height:88vh;max-height:88dvh}
  .sheet-grab{display:none}
  .fields{grid-template-columns:1fr 1fr}
  .fields .full{grid-column:1/-1}
}
@media(min-width:760px) and (max-width:1099px){
  /* السجلّاتُ في عمودين، وما سواها بعرض الصفحة · the records two-up, everything else full width */
  #view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4);align-items:start;align-content:start}
  #view>*{grid-column:1/-1;min-width:0}
  #view>:is(.prow-w,.appr,.pcard){grid-column:auto}
  #view .card:has(>.lrow~.lrow){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #view .card:has(>.lrow~.lrow)>:not(.lrow){grid-column:1/-1}
  .mn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mn.mn-1{grid-template-columns:minmax(0,1fr)}
}

/* ═══ 3.4.6 · إغلاقُ المرحلة · closing a stage ═══ */
.stc{max-width:880px}
.stc-head{padding:var(--s4);margin-bottom:var(--s3);display:grid;gap:var(--s1)}
.stc-tt{font-size:var(--t-ti);display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.stc-how{white-space:normal;margin-top:var(--s1)}
.stc-g .stc-gh{cursor:default}
.stc-rows{border-top:1px solid var(--line-2)}
.stc-rows .lrow-t{white-space:normal}
.stc-more{padding:var(--s2) var(--s4)}
.stc-carry{display:flex;gap:var(--s2);align-items:center;padding:var(--s3) var(--s4);border-top:1px solid var(--line-2);cursor:pointer;font-size:var(--t-bo)}
.stc-carry input{width:18px;height:18px;flex:none;accent-color:var(--ink)}
.stc-car{margin-block:var(--s3)}
.stc-note{padding:var(--s4);display:grid;gap:var(--s2)}
.stc-note textarea{width:100%}
.stc-left{white-space:normal;color:var(--bad)}
.stc-act{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s2)}
@media(min-width:1100px){body.desk .stc{margin-inline:auto}}

/* 3.4.10 · the workload (team this week) */
.wl-card{margin-top:var(--s4);max-width:880px}
.wl-r{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(5,minmax(0,1fr));gap:var(--s2);align-items:center;
  width:100%;padding:var(--s2) var(--s4);border:0;background:none;text-align:start;font:inherit;color:inherit;min-height:var(--h-m)}
button.wl-r{cursor:pointer;border-top:.5px solid var(--hair)}
button.wl-r:hover{background:var(--fill)}
.wl-h{color:var(--text-3);font-size:var(--t-ca);min-height:0}
.wl-h>span{white-space:normal;line-height:1.25}
.wl-r>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-r>:not(:first-child){text-align:center}
.wl-n{font-weight:500;color:var(--text-3)}
.wl-n.neg{color:var(--bad)}.wl-n.warn{color:var(--warn)}
.wl-idle>span:first-child{color:var(--text-3)}
.ap-ph-ck{margin-bottom:var(--s3)}
.ah-money{margin-top:var(--s4)}
#tb-place.sole{cursor:default;background:none;border-color:transparent}
.land-on{background:var(--gold-soft);border-radius:var(--rad-s);transition:background var(--m-2) var(--ease)}
/* 3.6.1 · "More details" in a form — folded, its fields still read by their id */
.fmore{grid-column:1/-1;margin-top:var(--s2)}
.fmore>summary{cursor:pointer;color:var(--text-2);font-size:var(--t-su);padding:var(--s2) 0;min-height:var(--h-m);display:flex;align-items:center}

/* 3.6.5 · no status bar for an employee (the review) */
body.no-sbar #sbar{display:none!important}

/* 3.6.5 · a message with Undo — the button takes the press inside the pass-through toast area */
.toast-undo{display:flex;align-items:center;gap:var(--s3);pointer-events:auto}
.toast-btn{background:none;border:0;color:var(--gold);font:inherit;font-weight:600;cursor:pointer;
  min-height:var(--h-s);padding:0 var(--s2)}

/* 3.6.7 · المبالغ مخفيّةٌ حتى تُطلب — بالأسلوب وحده، فالنصّ باقٍ للتصدير والطباعة · amounts hidden until asked for —
   by CSS alone, so the text stays for export and print (moneymask.js) */
.amt{position:relative}
body.amt-hide .amt{display:inline-block;color:transparent!important;-webkit-user-select:none;user-select:none}
body.amt-hide .amt::after{content:"••••";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--text-3);letter-spacing:.08em;font-weight:600}
@media print{body.amt-hide .amt{color:inherit!important}body.amt-hide .amt::after{content:none}}
.eye-btn .eye-c{display:none}
body.amt-hide .eye-btn .eye-o{display:none} body.amt-hide .eye-btn .eye-c{display:block}
.ah-eye{width:var(--h-m);height:var(--h-m);border-radius:50%;border:0;background:var(--fill);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

/* 3.6.7 · the cash-need card (views/needcard.js) — the pulse card's look, bars by month, the short months red */
.ah-need .nd-c{width:100%;max-width:none}
.nd-mid{display:flex;align-items:flex-end;gap:var(--s4);margin-block:var(--s2)}
.nd-big{display:flex;flex-direction:column;min-width:0}
.nd-big b{font-size:var(--t-lt);font-weight:600;color:var(--ink);line-height:1.1}
.nd-big small{font-size:var(--t-ca);color:var(--text-2)}
.nd-big.neg b{color:var(--bad)}
.nd-bars{flex:1;display:flex;align-items:flex-end;gap:var(--s1);height:64px;min-width:0}
.nd-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.nd-b i{display:block;width:100%;max-width:28px;min-height:3px;border-radius:var(--rad-s);background:var(--ink-3,#3a4a66)}
.nd-b.short i{background:var(--bad)}
.nd-b small{font-size:var(--t-ca);color:var(--text-3);margin-top:4px;white-space:nowrap}

/* 3.6.7 · the project's read-only modules (views/project.js pjModules) — mini pulse cards, one opens in place */
.pjm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media(min-width:760px){.pjm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.pjm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pjm{display:flex;flex-direction:column;gap:var(--s1);text-align:start;background:var(--card,#fff);border:0;box-shadow:var(--sh);
  border-radius:var(--r);padding:var(--s3) var(--s4);cursor:pointer;min-width:0;font:inherit;color:inherit;transition:var(--tr-ui)}
.pjm:hover{background:var(--fill)}
.pjm.on{box-shadow:0 0 0 2px var(--gold),var(--sh)}
.pjm.warn{border-inline-start:3px solid var(--warn)}
.pjm-t{font-size:var(--t-ca);color:var(--text-2);font-weight:500}
.pjm-big{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
.pjm-big b{font-size:var(--t-ti);font-weight:600;color:var(--ink)}
.pjm-big small{font-size:var(--t-ca);color:var(--text-3)}
.pjm-f{font-size:var(--t-ca);color:var(--text-2)}
.pjm-f .neg,.pjm-r .neg{color:var(--bad)} .pjm-f .warn{color:var(--warn)}
.pjm-pane{margin-top:var(--s3);padding:var(--s3) var(--s4)}
.pjm-ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2)}
.pjm-r{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);width:100%;padding:var(--s2) 0;
  border:0;border-top:.5px solid var(--hair);background:none;font:inherit;color:inherit;text-align:start}
button.pjm-r{cursor:pointer} button.pjm-r:hover{background:var(--fill)}
.pjm-l{display:flex;flex-direction:column;min-width:0}
.pjm-l bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjm-l small{font-size:var(--t-ca);color:var(--text-3)}
.pjm-v{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.pjm-bar{display:inline-block;width:64px;height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.pjm-bar i{display:block;height:100%;background:var(--gold)}
.pjm-more{font-size:var(--t-ca);color:var(--text-3);padding-top:var(--s2)}
.pjm-go{margin-top:var(--s2)}

/* 3.6.11 · اقتصاديّاتُ الفرصة · opportunity economics */
.opp-ech{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.opp-ech h4{margin:0;margin-inline-end:auto}
.opp-econ .pfig{margin:var(--s2) 0}
.opp-risks{margin-top:var(--s3)}
.opp-risks ul{margin:var(--s1) 0 0;padding-inline-start:var(--s4);font-size:var(--t-bo)}
.opp-flows{margin-top:var(--s3)}
.opp-flows summary{cursor:pointer;font-size:var(--t-su);color:var(--text-2)}
.opp-flows table{margin-top:var(--s2);width:100%}

/* ═══ 3.7 prototype · كثافةُ العمل · the work density ═══════════════════════════════════════════
   صفٌّ لا بطاقة، ومجموعاتٌ بعدِّها ومجموعها، وحكمٌ بسطرٍ واحد، وسحبٌ يكشف قرارَ البطاقة نفسِها، وشريطٌ واحد.
   A row, not a card; groups with their count and total; a one-line verdict; a swipe revealing the card's own
   decision; one bar. Tokens only. */
.dc-tabs{margin-bottom:var(--s2)}
.dc-gh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s4) var(--s2) var(--s1);
  font-size:var(--t-ca);color:var(--text-3);font-weight:500}
.dc-gh b{font-size:var(--t-su);color:var(--text);font-weight:600}
.dc-gh .mono{font-weight:600;color:var(--text-2)}
.dc-more{background:none;border:0;color:var(--gold-ink);font:inherit;font-weight:600;cursor:pointer;padding:0 var(--s2);min-height:36px}
.dc-grp{background:var(--card);border-radius:var(--rad-l);box-shadow:var(--sh);overflow:hidden}
.dc-sw{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.dc-sw::-webkit-scrollbar{display:none}
.dc-sw+.dc-sw,.dc-grp>.dc-r+.dc-r,.dc-grp>.td-t+.td-t{box-shadow:inset 0 .5px 0 var(--hair)}
.dc-r{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s3);
  align-items:start;width:100%;min-height:56px;padding:10px var(--s3);background:var(--card);border:0;font:inherit;color:inherit;
  text-align:start;cursor:pointer}
.dc-r:active{background:var(--fill-2)}
.dc-ic{width:28px;height:28px;border-radius:var(--rad-m);display:grid;place-items:center;font-size:var(--t-ca);font-weight:600;color:#fff;margin-top:1px;
  background:var(--ink-3)}
/* ⚠ 3.7.13 · ألوانُ الأيقونة «dci-*» لا «dc-*»: «dc-s» سطرُ العنوان الفرعيّ (رماديّ، صغير)، و«dc-c»/«dc-b» إطارٌ وزرٌّ في موضعٍ آخر —
   فكانت أيقونةُ الراتب مربّعاً أخضرَ بلا حرف · the icon tones are "dci-*", not "dc-*": "dc-s" is the subtitle line (grey, small) and
   "dc-c"/"dc-b" a box and a button elsewhere — the salary icon was a green square with no letter */
.dc-ic.dci-c{background:var(--gold-ink)}.dc-ic.dci-s{background:var(--ok)}.dc-ic.dci-p{background:#6B4FA0}.dc-ic.dci-b{background:var(--ink)}
.dc-m{display:flex;flex-direction:column;min-width:0;gap:1px}
.dc-t{font-size:var(--t-su);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-s{font-size:var(--t-ca);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-a{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:end;padding-top:1px}
.dc-a b{font-size:var(--t-su);font-weight:600;color:var(--text)}
.dc-a small{font-size:var(--t-ca);color:var(--text-3)}
.dc-v{display:flex;align-items:center;gap:5px;font-size:var(--t-ca);font-weight:500;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-v i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-3)}
.dc-v.dc-ok{color:var(--ok)}.dc-v.dc-ok i{background:var(--ok)}
.dc-v.dc-warn{color:var(--warn)}.dc-v.dc-warn i{background:#D49A1E}
.dc-v.dc-bad{color:var(--bad)}.dc-v.dc-bad i{background:var(--bad)}
.dc-v.dc-idle{color:var(--text-3)}
em.dc-bad,.dc-bad{color:var(--bad);font-style:normal;font-weight:600}
.dc-acts{flex:0 0 auto;display:flex;scroll-snap-align:end}
.dc-x{width:76px;border:0;color:#fff;font:inherit;font-size:var(--t-ca);font-weight:600;cursor:pointer}
.dc-y{background:var(--ok)}.dc-n{background:var(--bad)}
.dc-rest{font-size:var(--t-ca);color:var(--text-3);margin:0 2px var(--s2)}
.dc-bulk{margin-top:var(--s1);max-width:640px;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);background:var(--ink);color:#fff;border-radius:var(--rad-l);padding:8px 8px 8px 14px;
  font-size:var(--t-ca);box-shadow:0 10px 24px -8px rgba(15,32,59,.45)}
html[dir=rtl] .dc-bulk{padding:8px 14px 8px 8px}
.dc-bulk b{color:var(--gold-2)}
.dc-go{border:0;background:var(--gold);color:var(--ink);border-radius:var(--rad-m);padding:8px 12px;font:inherit;font-weight:600;cursor:pointer;min-height:var(--h-m)}
.dc-info .dc-ic{font-size:var(--t-ca)}
/* اليوم · Today */
.td-ks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s1)}
.td-k{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 10px;background:var(--card);border:0;border-radius:var(--rad-l);
  box-shadow:var(--sh);font:inherit;color:var(--text-2);text-align:start;cursor:pointer}
.td-k b{font-size:var(--t-ti);font-weight:600;color:var(--ink);line-height:1.1}
.td-k span{font-size:var(--t-ca);line-height:1.25}
.td-k.hot b{color:var(--bad)}
.td-t{display:flex;align-items:stretch}
.td-ck{flex:none;width:44px;border:0;background:var(--card);cursor:pointer;display:grid;place-items:center}
.td-ck::before{content:"";width:18px;height:18px;border-radius:var(--rad-s);border:1.6px solid #B8BFCB}
.td-ck.late::before{border-color:var(--bad)}
.td-r{flex:1;grid-template-columns:minmax(0,1fr) auto;padding-inline-start:0;min-height:48px}
.td-none{padding:14px;font-size:var(--t-ca);color:var(--text-3);text-align:center}
/* صفحةُ أمر الدفع · the payment order page */
.rp{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s4)}
.rp-k{font-size:var(--t-ca);color:var(--text-3)}
.rp-t{margin:0;font-size:var(--t-ti);line-height:1.3;color:var(--ink);font-weight:600}
.rp-amt{display:flex;align-items:baseline;gap:8px}
.rp-amt b{font-size:var(--t-lt);font-weight:600;color:var(--ink);letter-spacing:-.5px}
.rp-amt small{font-size:var(--t-ca);color:var(--text-3)}
.rp-cs{display:flex;flex-wrap:wrap;gap:6px}
.rp-c{height:28px;border-radius:var(--rad-m);background:var(--card);box-shadow:0 0 0 1px var(--hair);padding:0 9px;display:inline-flex;align-items:center;gap:4px;
  font-size:var(--t-ca);color:var(--text)}
.rp-c.miss{color:var(--bad);box-shadow:0 0 0 1px rgba(166,58,46,.35);background:var(--bad-bg)}
.rp-cs .tag{height:28px;display:inline-flex;align-items:center}
.rp-v{background:var(--card);border-radius:var(--rad-l);padding:12px 14px;box-shadow:var(--sh);border-inline-start:3px solid var(--text-3)}
.rp-v b{font-size:var(--t-su)}.rp-v p{margin:3px 0 0;font-size:var(--t-ca);color:var(--text-2)}
.rp-v.rp-ok{border-inline-start-color:var(--ok)}.rp-v.rp-ok b{color:var(--ok)}
.rp-v.rp-warn{border-inline-start-color:#D49A1E}.rp-v.rp-warn b{color:var(--warn)}
.rp-v.rp-bad{border-inline-start-color:var(--bad)}.rp-v.rp-bad b{color:var(--bad)}
.rp-bar{display:flex;height:6px;border-radius:var(--rad-s);background:var(--line-2);overflow:hidden;margin-top:8px}
.rp-bar i{display:block;height:100%}.rp-bar .s{background:var(--ink)}.rp-bar .c{background:var(--gold)}
.rp-lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;font-size:var(--t-ca);color:var(--text-3)}
.rp-lg b{color:var(--text);font-weight:600}
.rp-tl{display:flex;flex-direction:column;gap:10px;padding:2px var(--s1)}
.rp-ev{display:grid;grid-template-columns:26px 1fr;gap:8px;font-size:var(--t-ca);color:var(--text-2);line-height:1.45}
.rp-d{width:26px;height:26px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--hair);display:grid;place-items:center;
  font-size:var(--t-ca);font-weight:600;color:var(--ink)}
.rp-ev b{color:var(--text);font-weight:600}
.rp-w{color:var(--text-3)}
.rp-bub{background:var(--card);border-radius:var(--rad-l);padding:7px 10px;margin-top:3px;color:var(--text);box-shadow:0 0 0 1px var(--hair)}
.rp-act{position:sticky;bottom:calc(var(--nav-h) + 6px);z-index:40;border-radius:var(--rad-l);margin-inline-end:60px;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -.5px 0 var(--hair);padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.rp-comp{height:38px;border-radius:var(--rad-l);border:0;background:var(--fill);text-align:start;padding:0 12px;font:inherit;font-size:var(--t-ca);color:var(--text-3);cursor:pointer}
.rp-btns{display:flex;flex-wrap:wrap;gap:8px}
.rp-btns .btn{flex:1 1 auto}
/* ── 3.1 · الشكلُ على كلّ شاشة · the shape on every screen ───────────────────────────────────
   الهاتف (<600) · المطويُّ مفتوحاً واللوحيُّ عموديّاً (600–899) · اللوحيُّ أفقيّاً (900–1099) · المنضدة (≥1100).
   شريطُ 3.0 السفليّ يبقى (أقسامُ المساحة تُمرَّر)، و«+» ينتقل إلى الشريط العلويّ. الصفُّ واحدٌ في كلّ مكان؛
   والقرارُ يُسحب على الهاتف، ويُرى زرّاه على الصفّ من 600 فما فوق — لا اختيارَ قبل القرار على شاشةٍ واسعة.
   Phone (<600) · fold open and tablet portrait (600–899) · tablet landscape (900–1099) · desk (≥1100). The 3.0
   bottom bar stays (a space's sections scroll); + moves to the top bar. One row everywhere; a decision is swiped
   on the phone and its two buttons sit on the row from 600 up — no selecting before deciding on a wide screen. */
@media(max-width:899px){
  body.p31 #fab{display:none!important}
  body.p31 #tb-add:not([hidden]){display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;
    background:var(--ink);color:#fff;border:0;flex:none}
  body.p31 #tb-add:not([hidden]) svg{stroke:#fff;width:18px;height:18px}
  body.p31 #tb-add span{display:none}
  /* 3.7.21 · a page that names its add (chat: "+ جديدة") draws it as a labelled pill */
  body.p31 #tb-add.lbl:not([hidden]){display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 14px 0 12px;border-radius:var(--rad-pill);
    font-size:var(--t-su);font-weight:600}
  body.p31 #tb-add.lbl span{display:inline}
}
@media(min-width:600px){
  .dc-sw{overflow:visible;scroll-snap-type:none;align-items:center;background:var(--card)}
  .dc-sw .dc-r{flex:1 1 auto;width:auto;min-width:0}
  .dc-acts{gap:6px;padding-inline-end:12px;align-self:center}
  .dc-x{width:auto;height:var(--h-s);padding:0 14px;border-radius:var(--rad-pill);font-size:var(--t-ca);transition:var(--tr-ui)}
  .dc-x:active{transform:scale(.95)}
  .dc-n{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 40%,transparent)}
  .td-ks{grid-template-columns:repeat(4,minmax(0,160px))}
}
@media(min-width:1280px){
  .dc-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);align-items:start}
}
/* ── علاماتُ المساحات · the space marks ── */
:root{--sp-me-a:#F3EEE3;--sp-me-b:#E0D6C2;--sp-work-a:#557A9C;--sp-work-b:#34506B;--sp-docs-a:#628A80;--sp-docs-b:#3E5E56;
  --sp-chat-a:#8577AE;--sp-chat-b:#5C507F;--sp-fin-a:#29426B;--sp-fin-b:#0F203B;--sp-board-a:#E2BB7B;--sp-board-b:#BE8A3F;
  --sp-admin-a:#667183;--sp-admin-b:#424B59;--sp-gold-l:#E6BC7E}
.smk{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.smk .g{fill:var(--mark-g,var(--gold));stroke:none}
body.p31 .ah-tile{background:linear-gradient(160deg,var(--sa),var(--sb));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08),0 8px 18px -10px rgba(15,32,59,.45)}
body.p31 .ah-tile .smk{width:58%;height:58%}
body.p31 .ah-t-me{--sa:var(--sp-me-a);--sb:var(--sp-me-b);color:var(--ink);--mark-g:var(--gold-ink)}
body.p31 .ah-t-work{--sa:var(--sp-work-a);--sb:var(--sp-work-b);color:#fff;--mark-g:var(--sp-gold-l)}
body.p31 .ah-t-docs{--sa:var(--sp-docs-a);--sb:var(--sp-docs-b);color:#fff;--mark-g:var(--sp-gold-l)}
body.p31 .ah-t-chat{--sa:var(--sp-chat-a);--sb:var(--sp-chat-b);color:#fff;--mark-g:var(--sp-gold-l)}
body.p31 .ah-t-finance{--sa:var(--sp-fin-a);--sb:var(--sp-fin-b);color:#E9EEF6;--mark-g:var(--gold)}
body.p31 .ah-t-board{--sa:var(--sp-board-a);--sb:var(--sp-board-b);color:var(--ink);--mark-g:var(--ink)}
body.p31 .ah-t-admin{--sa:var(--sp-admin-a);--sb:var(--sp-admin-b);color:#fff;--mark-g:var(--sp-gold-l)}
body.p31 .tb-home{background:linear-gradient(160deg,var(--sa,var(--fill)),var(--sb,var(--fill)))}
body.p31 .tb-home .smk{width:22px;height:22px;fill:none}
body.p31 .tb-home .smk .g{fill:var(--mark-g,var(--gold))}
/* مجلسُ الميزانيات: جملةُ الرأس · the budgets headline sentence (desk) */
.bh31{display:flex;align-items:center;gap:var(--s4);background:var(--ink);color:#fff;border-radius:var(--rad-l);padding:14px 18px;margin:var(--s2) 0}
.bh31-r{--p:0;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.15) 0)}
.bh31-r b{width:46px;height:46px;border-radius:50%;background:var(--ink-2);display:grid;place-items:center;font-size:var(--t-ca)}
.bh31-s{display:flex;flex-direction:column;gap:3px;min-width:0}
.bh31-s b{font-size:var(--t-he);font-weight:600;line-height:1.4}
.bh31-s small{font-size:var(--t-ca);color:#C9D2E3}
.apq-i .dc-v{margin-top:2px}

.dc-lg{background:var(--card)}
.dc-pg{flex:none;width:36px;border:0;background:transparent;color:var(--text-3);font-size:var(--t-su);cursor:pointer}
@media(min-width:600px){.dc-lg .dc-pg{align-self:stretch}}
.rp-btns .ins-f{display:flex;flex-wrap:wrap;gap:8px}
.rp-btns .ins-f .btn{flex:1 1 auto}

/* ═══ 3.7 · SIRA 3.1 على الهاتف · on the phone ════════════════════════════════════════════════════════
   الرأسُ سطران: الأدواتُ فوق (أصغر)، والعنوانُ تحتها بعرض الشاشة كلِّه — لا يُقصّ (iOS large title)، ويصغر عند
   التمرير. والصفوفُ في كلّ صفحة مجموعاتٌ مضغوطة، والبلاطاتُ أصغر. · The head is two lines: the tools above
   (smaller), the title below across the whole width — never cut (an iOS large title), shrinking on scroll. Rows on
   every page are compact groups; tiles are smaller. */
@media(max-width:899px){
  body.p31 .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"home sp acts" "ttl ttl ttl";
    align-items:center;column-gap:var(--s2);row-gap:2px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:var(--s2)}
  body.p31 .topbar>#tb-home{grid-area:home}
  body.p31 .topbar>div:has(>#pg-title){grid-area:ttl;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s2)}
  body.p31 .topbar>#tb-tools{display:none}
  body.p31 .topbar>.tb-actions{grid-area:acts;display:flex;gap:6px;align-items:center}
  body.p31 .topbar .tb-actions .icon-btn,body.p31 .topbar .tb-actions>button{width:36px;height:36px;min-width:36px}
  body.p31 .topbar h2,body.p31.ttl-fit .topbar h2,body.p31.ttl-fit2 .topbar h2{font-size:var(--t-lt);line-height:1.15;white-space:normal;
    overflow:visible;text-overflow:clip;flex:1 1 100%;letter-spacing:-.3px}
  body.p31.ttl-small .topbar h2{font-size:var(--t-he);flex-basis:auto}
  body.p31 .topbar .who{font-size:var(--t-ca);margin-top:0;flex:1 1 auto;-webkit-line-clamp:1}
  body.p31.ttl-small .topbar .who{display:none}
  body.p31 .topbar #tb-app{display:none!important}
  /* الصفوفُ مجموعاتٌ مضغوطة · rows as compact groups */
  body.p31 .prow{min-height:56px;padding:9px var(--s3);margin:0;border:0;border-radius:0;box-shadow:inset 0 -.5px 0 var(--hair)}
  body.p31 .prow-w:not(.prow-w + .prow-w) .prow{border-start-start-radius:var(--rad-l);border-start-end-radius:var(--rad-l)}
  body.p31 .prow-w:not(:has(+ .prow-w)) .prow{border-end-start-radius:var(--rad-l);border-end-end-radius:var(--rad-l);box-shadow:none}
  body.p31 .prow-w:not(:has(+ .prow-w)){margin-bottom:var(--s3)}
  body.p31 .prow-m{gap:1px}
  body.p31 .prow-m b,body.p31 .prow-e b{font-size:var(--t-su);font-weight:500}
  body.p31 .prow-m small{font-size:var(--t-ca)}
  body.p31 .card>.dc-sw:first-child,body.p31 .card>.dc-sw:first-child .dc-r{border-start-start-radius:var(--rad-l);border-start-end-radius:var(--rad-l)}
  /* البلاطاتُ أصغر · smaller tiles */
  body.p31 .tiles{gap:var(--s2)}
  body.p31 .tile{padding:var(--s2) var(--s3);box-shadow:none;border-color:var(--hair)}
  body.p31 .tile .v{font-size:var(--t-ti);letter-spacing:-.3px}
  body.p31 .tile .l{font-size:var(--t-ca)}
}
.dc-bar{display:block;position:relative;height:4px;border-radius:var(--rad-s);background:var(--line-2);margin-top:5px;overflow:hidden}
.dc-bar i,.dc-bar b{position:absolute;inset-block:0;inset-inline-start:0;display:block}
.dc-bar i{background:var(--gold-2)}.dc-bar b{background:var(--ink)}
.card:has(>.dc-sw){padding:0;overflow:hidden}
/* 3.7 · الرأسُ أخفّ: عنوانٌ ٢٢ بعرض الشاشة، والسطرُ الشارح يُقرأ في الصفحة لا في الرأس (R1) · a lighter head: a 22px
   full-width title; the subtitle is left to the page, not the head (R1) */
@media(max-width:899px){
  body.p31 .topbar{row-gap:0;padding-bottom:6px}
  body.p31 .topbar h2,body.p31.ttl-fit .topbar h2,body.p31.ttl-fit2 .topbar h2{font-size:var(--t-ti);line-height:1.2}
  body.p31 .topbar .who{display:none}
}
@media(min-width:1100px){
  .bh31{padding:var(--s2) var(--s4);gap:var(--s3);margin:var(--s1) 0}
  .bh31-r{width:40px;height:40px}.bh31-r b{width:31px;height:31px;font-size:var(--t-ca)}
  .bh31-s b{font-size:var(--t-su)}.bh31-s small{font-size:var(--t-ca)}
}
@media(max-width:899px){
  body.p31 .topbar>div:has(>#pg-title){flex-wrap:nowrap;align-items:center}
  body.p31 .topbar h2,body.p31.ttl-fit .topbar h2,body.p31.ttl-fit2 .topbar h2{flex:1 1 auto;min-width:0}
  body.p31 .topbar #tb-place{flex:none}
}
.bh31-s small b{color:#fff;font-weight:600}
@media(min-width:1100px){
  .bh31{padding:6px var(--s4);border-radius:var(--rad-m)}
  .bh31-r{display:none}
  .bh31-s{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:var(--s4);row-gap:0}
}

/* ── 3.7.1 · the dense phone timesheet: people strip · one control line · one dossier line ── */
.ts-pk{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin:0 0 var(--s2);padding-block:2px}
.ts-pk::-webkit-scrollbar{display:none}
.ts-pkb{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:var(--h-m);padding-inline:4px 12px;
  border-radius:999px;background:var(--card);box-shadow:var(--sh);color:var(--text);font-size:var(--t-ca);font-weight:500;position:relative;transition:var(--tr-ui)}
.ts-pkb.on{background:var(--ink);color:#fff}
.ts-pka{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:var(--fs-2xs);font-weight:600;overflow:hidden}
.ts-pkd{position:absolute;inset-block-start:2px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;background:var(--warn)}
.ts-l1{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.ts-l1::-webkit-scrollbar{display:none}
.ts-l1 .ts-seg{flex:0 0 auto}
.ts-l1 .ts-seg button{padding:0 12px;height:var(--h-s)}
.ts-l1 .btn{flex:0 0 auto}
.ts-dl{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s2)}
.ts-dl .ts-sp{flex:1}
.ts-dl .btn{min-height:0;height:var(--h-s)}
/* 3.7.1 · the dense custody head (phone and tablet): the page title names the page, so the eyebrow goes; the name,
   its buttons, the team line, the people, the currency and the figures each take one short line */
@media(max-width:1099px){
  body.p31 .cp-head{margin:0 0 var(--s2);gap:var(--s2)}
  body.p31 .cp-k{display:none}
  body.p31 .cp-n{font-size:var(--t-he);margin:0}
  body.p31 .cp-acts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  body.p31 .cp-acts::-webkit-scrollbar{display:none}
  body.p31 .cp-acts .btn{flex:0 0 auto;height:var(--h-s);min-height:0;padding-block:0}
  body.p31 .cp-team{background:none;box-shadow:none;border:0;padding:0;margin:0 0 var(--s2);gap:var(--s1) var(--s3)}
  body.p31 .cp-team-f{font-size:var(--t-ca);gap:2px var(--s3)}
  body.p31 .cp-team-a{margin-inline-start:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  body.p31 .cp-team-a .btn{flex:0 0 auto;height:var(--h-s);min-height:0;padding-block:0}
  body.p31 .cp-ppl{margin:0 0 var(--s2);gap:var(--s1)}
  body.p31 .cp-pp{min-height:var(--h-m);padding-block:2px;gap:6px}
  body.p31 .cp-av{flex-basis:28px;width:28px;height:28px}
  body.p31 .cp-pt{flex-direction:row;align-items:baseline;gap:6px}
  /* tiles on every page: one scrolling line of small figures (R7), never a 2×2 block */
  body.p31 #view .tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--s1);margin-bottom:var(--s2)}
  body.p31 #view .tiles::-webkit-scrollbar{display:none}
  body.p31 #view .tiles .tile{flex:0 0 auto;padding:6px 12px;min-height:0;min-width:0}
  body.p31 #view .tiles .tile .l{font-size:var(--t-ca)}
  body.p31 #view .tiles .tile .v{font-size:var(--t-bo)}
  body.p31 #view .tiles .tile .n{font-size:var(--t-ca);white-space:nowrap}
  body.p31 .cpf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body.p31 .cpf::-webkit-scrollbar{display:none}
  body.p31 .cpf .cpf-b{flex:0 0 auto;height:var(--h-s);min-height:0;padding-block:0}
  body.p31 .am-bar{flex-wrap:nowrap;padding:6px var(--s3);gap:var(--s2);margin-bottom:var(--s2)}
  body.p31 .am-bar .mbar-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-ca)}
  body.p31 .am-bar .am-acts{display:flex;gap:var(--s1);flex:0 0 auto}
  body.p31 .am-bar .btn{height:var(--h-s);min-height:0;padding-block:0}
  body.p31 .ccysw-sel select{height:var(--h-m)}
}

/* 3.7.2 · a tight desk top bar: the place chip folds to its pin; level 2 drops the subtitle */
@media(min-width:900px){
  body.tb-tight #tb-place:not(.on):not(.sole)>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.tb-tight #tb-place:not(.on):not(.sole){padding-inline:6px}
  body.tb-tight2 .topbar #pg-sub{display:none}
  /* the last resort: the title keeps its place and ends in an ellipsis rather than running under the tools */
  body.frame3.tb-tight2 .topbar>div:has(>#pg-title){grid-template-columns:minmax(0,auto) auto}
  body.tb-tight2 .topbar #pg-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 3.7.3 · the record bar, light: Back is a plain link, the record's links are small round icon buttons */
.rc-bar{gap:var(--s1);margin-bottom:var(--s2);flex-wrap:nowrap}
.rc-back{border:0;background:none;padding:0 2px;height:var(--h-m);color:var(--text-2);font:inherit;font-size:var(--t-su);font-weight:500;cursor:pointer;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:var(--tr-ui)}
.rc-back:hover{color:var(--ink)}
.rc-ib{flex:none;width:var(--h-m);height:var(--h-m);border:0;border-radius:50%;background:var(--fill);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;transition:var(--tr-ui)}
.rc-ib:hover{background:var(--card);box-shadow:var(--sh)}
.rc-ib:active{transform:scale(.94)}
.rc-ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 3.7.3 · the picker as a compact action list (the owner: "huge", "old"): one column of 48px rows grouped like an
   iOS list — a small tinted icon, the name, its line beside it in grey — hairlines between, a soft fill under a
   finger. The same buttons and data-pick: only the drawing changed. */
#modal-root .pick-grid{display:flex;flex-direction:column;gap:0;background:var(--card);border-radius:var(--rad-l);
  box-shadow:var(--sh);overflow:hidden}
#modal-root .pick-c{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:6px var(--s3);border:0;border-radius:0;
  background:none;position:relative}
#modal-root .pick-c+.pick-c::before{content:"";position:absolute;inset-block-start:0;inset-inline:calc(var(--s3) + 42px) 0;height:.5px;background:var(--hair)}
#modal-root .pick-c:focus-visible{background:none;border:0;outline:0}
@media(hover:hover){#modal-root .pick-c:hover,#modal-root .pick-c:focus-visible{background:var(--fill)}}
#modal-root .pick-c:active{transform:none;background:var(--fill)}
#modal-root .pick-i{flex:none;width:30px;height:30px;border-radius:var(--rad-s);background:var(--fill)}
#modal-root .pick-c:hover .pick-i,#modal-root .pick-c:focus-visible .pick-i{background:var(--fill)}
#modal-root .pick-i svg{width:17px;height:17px}
#modal-root .pick-c:hover .pick-i svg,#modal-root .pick-c:focus-visible .pick-i svg{stroke:var(--ink)}
#modal-root .pick-t{font-size:var(--t-bo);font-weight:500;flex:none}
/* 3.7.17 · a person's face in a picker (new message, mention, send to a chat): it sits in the slot, never over the name */
#modal-root .pick-i:has(.cht-av){width:36px;height:36px;border-radius:50%;background:none}
#modal-root .pick-i .cht-av{width:36px;height:36px;flex:0 0 36px;font-size:var(--t-su)}
#modal-root .pick-c+.pick-c:has(.cht-av)::before{inset-inline-start:calc(var(--s3) + 48px)}
#modal-root .pick-s{font-size:var(--t-ca);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#modal-root .pick-foot{border:0;background:none;color:var(--text-2);margin-top:var(--s2)}
@media(min-width:900px){#modal-root .sheet.pick{max-width:440px}}

/* ═══ 3.7.5 · هدوءُ الحركة · calm motion ═══════════════════════════════════════════════════
   ⚠ المالك: «كلّ شيءٍ يقفز». الدخولُ شفافيّةٌ وحدها، بلا تتابعٍ ولا إزاحةٍ عموديّة؛ الانزلاقُ إلى
   العمق ١٦ بكسل لا ٤٨؛ لا أشرطةَ تنمو ولا شاراتٍ تقفز مع كلّ صفحة؛ ولا content-visibility على
   الصفوف — تقديرُ ارتفاعها كان يحرّك التمرير. The owner: "everything jumps". The entrance is opacity
   alone, no stagger and no vertical shift; the slide into depth is 16px, not 48; no bars growing and
   no badges popping on every page; and no content-visibility on rows — their estimated height moved
   the scroll. */
@media (prefers-reduced-motion: no-preference){
  .v-in>*,.v-in-h #pg-title,.v-in-h #pg-sub{animation:calmIn var(--m-2) var(--ease) both;animation-delay:0s!important}
  .v-in.v-push>*{animation:calmPush var(--m-page) var(--ease) both}
  .v-in.v-pop>*{animation:calmPop var(--m-page) var(--ease) both}
  .v-in .track>i,.v-in .fbar i,.v-in .tb{animation:none}
}
@keyframes calmIn{from{opacity:0}}
@keyframes calmPush{from{opacity:0;transform:translateX(calc(16px * var(--vt)))}}
@keyframes calmPop{from{opacity:0;transform:translateX(calc(-16px * var(--vt)))}}
::view-transition-old(root){animation:none}
#view .appr,#view .lrow{content-visibility:visible}
/* 3.7.5 · صورةٌ في المحادثة: إطارٌ ثابتُ الارتفاع (لا يقفز الخيطُ حين تصل) · an image in the chat: a frame of
   fixed height (the thread does not jump when it arrives) */
.cht-img{display:block;padding:0;border:0;background:var(--fill);border-radius:var(--rad-l);overflow:hidden;
  width:min(240px,70vw);height:200px;margin-block:2px;cursor:pointer}
.cht-img img{display:block;width:100%;height:100%;object-fit:cover}
.cht-img img:not([src]){visibility:hidden}
/* 3.7.23 · an album (2 or more photos in a row by one writer): a grid of its messages, each still its own; the gallery in
   the details panel; the strip of files waiting to be sent */
.cht-album{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;width:min(260px,72%);margin-top:14px;align-self:flex-start;align-items:start}
.cht-album.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cht-album .cht-m.al-wide{grid-column:1/-1}
.cht-album .cht-m.al-wide .cht-img{aspect-ratio:2/1}
.cht-album.me{align-self:flex-end}
.cht-album .cht-alw{grid-column:1/-1;padding-inline-start:14px}
.cht-album .cht-m{max-width:none;margin:0;min-width:0}
.cht-album .cht-bw{gap:0}
.cht-album .cht-mav{display:none}
.cht-album .cht-who:not(.cht-alw){display:none}
.cht-album .cht-bub{padding:0;background:none;box-shadow:none;width:100%}
.cht-album .cht-img{width:100%;height:auto;aspect-ratio:1;margin:0;border-radius:var(--rad-s)}
.cht-album .cht-tools{display:none}
.cht-album .cht-m.end{grid-column:auto}
.cht-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 var(--s2)}
.cht-gal .cht-img{width:100%;height:auto;aspect-ratio:1;margin:0;border-radius:var(--rad-s)}
.cht-pend-s{display:flex;gap:6px;overflow-x:auto;max-width:60%;flex:0 1 auto;padding:2px}
.cht-pend-it{position:relative;flex:0 0 auto}
.cht-pend-x{position:absolute;top:-4px;inset-inline-end:-4px;width:24px;height:24px;border:0;border-radius:50%;background:var(--ink);color:#fff;
  font-size:var(--t-ca);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 2px var(--card)}

/* ═══ 3.7.6 · a click is not an entrance · نقرةٌ ليست دخولاً ══════════════════════════════════════
   The page is morphed (only what changed changes), so an in-page change — a lens, a filter, a month — no longer
   blinks the whole page either. A chat whose messages are still on their way holds its place, empty and quiet,
   rather than saying "say hi" and then filling a moment later */
.v-soft{animation:none}
.cht-wait{flex:1;min-height:40vh}

/* ═══ 3.7.10 · «رجوع» في رأس الهاتف، وسحبُ الحافّة · Back in the phone header, and the edge swipe ═══
   على صفحةٍ عميقة يأخذ «رجوع» مكانَ علامة المساحة، فلا يزيد الرأسُ عنصراً (R1). على المكتب لا يُرسم: للصفحة رابطُها
   وللمتصفّح زرّه · on a deep page Back takes the space mark's place, so the header gains no element (R1). Not drawn
   on the desk: the page has its link and the browser its button */
.tb-back{display:none}
@media(max-width:899px){
  .tb-back:not([hidden]){display:inline-flex;align-items:center;gap:2px;flex:none;min-width:0;max-width:46vw;height:var(--h-m);
    padding-inline:2px var(--s2);margin-inline-start:-6px;border:0;background:none;color:var(--gold-ink);
    font:inherit;font-size:var(--t-bo);font-weight:500;cursor:pointer;border-radius:var(--rad-m);transition:var(--tr-ui)}
  .tb-back svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  html[dir=rtl] .tb-back svg{transform:scaleX(-1)}
  .tb-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-back:active{opacity:.55}
  body.has-back .topbar>#tb-home{display:none!important}
  body.p31 .topbar>#tb-back{grid-area:home}
}
#edge-back{position:fixed;top:calc(50% - 22px);inset-inline-start:4px;z-index:96;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--card);box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;transform:scale(.7)}
#edge-back svg{width:22px;height:22px;fill:none;stroke:var(--text-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] #edge-back svg{transform:scaleX(-1)}
#edge-back.go svg{stroke:var(--gold-ink)}

/* ═══ 3.7.11 · التناسق: قطعةٌ واحدة لكلّ عمل · coherence: one part per job ══════════════════════════
   قيست خمسون صفحةً على الهاتف والمكتب (ارتفاعات، زوايا، أوزان): هذه ما خرج عن العدّة.
   Fifty pages were measured on phone and desk (heights, radii, weights); these are what strayed from the kit.
   (1) العناوين 600 لا «bold» المتصفّح (700) · headings are 600, never the browser's bold (700) */
:where(h1,h2,h3,h4,h5){font-weight:600}
#view .cp-n,#view .cp-h{font-weight:600}
/* (2) منتقي الشهر بشكلٍ واحد أينما رُسم — مضغوطٌ بارتفاع عنصر التحكّم، لا بطاقةٌ بعرض الصفحة ·
   the month picker has ONE shape wherever it is drawn — compact, a control's height, never a page-wide card */
#view .mpick{display:inline-flex;width:auto;max-width:100%;height:var(--h-m);padding:0 4px;gap:2px;border-radius:var(--rad-m);vertical-align:middle}
#view .mpick .mp-a{width:calc(var(--h-m) - 8px);height:calc(var(--h-m) - 8px);min-height:0;font-size:var(--t-bo);border-radius:var(--rad-s)}
#view .mpick .mp-l{flex:0 1 auto;padding-inline:var(--s2);font-size:var(--t-su);white-space:nowrap}
#view .mpick .mp-now{height:calc(var(--h-m) - 8px);min-height:0;padding-block:0}
/* (3) قائمةٌ في شريط الأدوات بارتفاع جيرانها (كانت 46–50px بجانب أزرارٍ 28–36) · a select in a toolbar is as tall as
   its neighbours (it stood 46–50px beside 28–36px buttons) */
#view :is(.vbar,.pbar,.ptool,.psel) select,#view select.pmore{height:var(--h-m);min-height:0;padding-block:0}
/* (4) الشرائح داخل مبدّل العملة والحالة هي ‎.pfilter‎ نفسها · the chips of the currency and state switches are .pfilter itself */
.ccysw .pfilter,.cps-bar .pfilter{margin:0;flex:0 1 auto;min-width:0}
/* (5) الحالةُ الفارغة دائماً على سطح بطاقة · an empty state always sits on a card's surface */
#view>.empty{background:var(--card);border-radius:var(--r);box-shadow:var(--sh)}

/* ═══ 3.7.27 · «SIRA Chat» — the app opened as the chat app (?app=chat, src/chatapp.js) ═══════════════════════════
   The other spaces are not offered: no sidebar of spaces, no space bars, no space home, no assistant orb, no chat
   button over it (this IS the chat). The chat takes the width. A display, never a gate. */
body.app-chat #snav,body.app-chat #lpane,body.app-chat #secrow,body.app-chat #bnav,body.app-chat .sec-row,
body.app-chat #tb-new,body.app-chat #tb-place,body.app-chat #ask-dock,body.app-chat .ask-fab,body.app-chat .cht-dock{display:none!important}
body.app-chat #app{padding-bottom:0}
@media(min-width:900px){body.app-chat #app{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1100px){body.desk.atelier.app-chat #app,body.desk.atelier.paned.app-chat #app{grid-template-columns:minmax(0,1fr)}}

/* 3.7.28 · the chat app's foot bar: install (before and after signing in) or turn on notifications; the chrome that
   leads elsewhere (bell, search, amounts) is not offered in it */
body.app-chat #s-bell,body.app-chat #s-search,body.app-chat #s-eye,body.app-chat #tb-find,body.app-chat #tb-seg,body.app-chat #tb-back{display:none!important}
#capp-bar{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:900;display:flex;align-items:center;gap:12px;
  max-width:520px;margin-inline:auto;padding:10px 10px 10px 12px;border-radius:var(--rad-l);background:var(--card);box-shadow:var(--sh-2);
  font-family:inherit;color:var(--ink);animation:growIn var(--m-2) var(--ease) both}
#capp-bar img{width:40px;height:40px;border-radius:var(--rad-m);flex:0 0 40px}
#capp-bar .capp-t{flex:1;min-width:0;display:flex;flex-direction:column}
#capp-bar .capp-t b{font-weight:600;font-size:var(--t-su)}
#capp-bar .capp-t small{font-size:var(--t-ca);color:var(--text-2)}
#capp-bar .capp-go{min-height:var(--h-m);padding:0 16px;border:0;border-radius:var(--rad-pill);background:var(--ink);color:#fff;font:inherit;font-weight:600;font-size:var(--t-su);cursor:pointer}
#capp-bar .capp-x{width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--text-3);cursor:pointer}
@media(prefers-reduced-motion:reduce){#capp-bar{animation:none}}