/* ============================================================
   DOOK — layout & components.
   ONE system that adapts: phone and tablet · RTL and LTR ·
   light and dark · installed and in a tab. Never a second design.

   Built from the approved component sheet (board 5a) and the craft
   rules in the handoff README. Logical properties throughout, so
   Arabic mirrors without a single RTL override of its own.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* --- the shell must FEEL like an app, not a page (owner, 2026-08-23) ---
   Three phone behaviours give the web away: the document rubber-banding,
   the browser bar collapsing and re-expanding as you scroll, and the
   300ms double-tap wait. The document is therefore pinned solid — ONLY
   .body scrolls, inside — and every control opts out of double-tap zoom.
   The last of the web chrome disappears with "Add to Home Screen":
   the manifest is standalone, and installed there is no bar at all. */
html{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pan-y}
body{
  position:fixed;inset:0;width:100%;height:100%;overflow:hidden;
  overscroll-behavior:none;touch-action:pan-x pan-y;
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit}
button,[data-act],input,a{touch-action:manipulation}

/* iOS paints autofilled fields its own yellow, straight through the dark
   theme. Repainted with the card's own ground - the inset-shadow trick is
   the only override WebKit honours. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color:var(--text);caret-color:var(--text);
  transition:background-color 999999s ease-in-out 0s;
}

/* --- shell --------------------------------------------------- */
.app{
  height:100dvh; display:flex; flex-direction:column;
  max-width:26rem; margin-inline:auto; position:relative;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
/* tablet: the same design with more air around it — not a new layout */
@media (min-width:48rem){
  body{display:flex;align-items:center;justify-content:center}
  .app{
    height:min(100dvh,54rem); max-width:25rem;
    border:1px solid var(--card-line); border-radius:30px; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
  }
}

/* --- header: transparent, centred bilingual logo -------------- */
.head{
  flex:none; height:64px; display:flex; align-items:center; justify-content:center;
  position:relative; padding-inline:20px;
}
.logo{
  height:42px; width:118px; background:var(--logo) center/contain no-repeat;
  display:block; flex:none;
}
/* اللوحات المعتمدة (ورقة المطابقة، 2026-08-28): أبواب الرأس الثلاثة
   حبّاتُ زجاجٍ واحدة الوصفة — أرضية شبه شفافة خلفها ضبابة، حدٌّ خافت،
   ولمعة داخلية. زر اللغة حبّةٌ تحمل كرةً أرضية بجوار الحرفين. */
.head__glass, .head__back, .head__menu, .head__lang{
  position:absolute; display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-line);
  color:var(--text); cursor:pointer; font:inherit;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 2px 10px rgba(0,0,0,.32), inset 0 1px 0 var(--glass-hi);
}
.head__lang{
  inset-inline-end:12px; gap:6px; padding:0 13px 0 11px; border-radius:999px;
  min-height:var(--tap); font-size:13.5px; font-weight:700; letter-spacing:.02em;
}
.head__back{
  inset-inline-start:12px; width:var(--tap); height:var(--tap); border-radius:50%;
}
:root[dir="ltr"] .head__back svg{ transform:scaleX(-1) }

/* --- page regions -------------------------------------------- */
.body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:36px var(--gutter) 24px}
.body--center{display:flex;flex-direction:column;justify-content:center;padding-top:0}
.body::-webkit-scrollbar{width:0}
.foot{flex:none;padding:16px var(--gutter) 40px;display:flex;flex-direction:column;gap:10px}

/* --- type ---------------------------------------------------- */
.title{font-size:var(--t-title);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.sub{font-size:var(--t-body);color:var(--muted);line-height:1.7}
.cap{font-size:var(--t-cap);color:var(--muted);line-height:1.6}
.min{font-size:var(--t-min);color:var(--muted);line-height:1.6}
.strong{font-weight:700;color:var(--text)}
.center{text-align:center}

/* Latin figures in both languages: money is read, compared and disputed */
.fig{font-family:var(--figures);font-variant-numeric:tabular-nums;
  unicode-bidi:plaintext;white-space:nowrap}

/* ONE hero number per screen */
.hero{display:flex;align-items:baseline;gap:10px;margin-top:22px}
.hero__n{font-family:var(--figures);font-weight:800;font-size:var(--t-hero);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;unicode-bidi:plaintext}
.hero__n--sm{font-size:var(--t-hero-sm)}
.hero__unit{font-size:19px;font-weight:600;color:var(--muted)}
.hero__lead{font-size:17px;font-weight:600}
@media (max-width:22.5rem){ .hero__n{font-size:var(--t-hero-sm)} }

/* --- the closed card: ONE per group, never stacked greys ------ */
.card{
  background:var(--card); border:1px solid var(--card-line);
  border-radius:var(--r-card); padding:4px 18px;
}
.card + .card{margin-top:12px}
.card__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--row);
}
.card__row + .card__row{border-top:1px solid var(--hair)}
.card__head{min-height:46px;border-bottom:1px solid var(--hair)}
.card__label{font-size:var(--t-body);color:var(--muted)}
.card__title{font-size:var(--t-cardtitle);font-weight:600;color:var(--text)}
.card__value{font-family:var(--figures);font-weight:600;font-size:16px;
  font-variant-numeric:tabular-nums;unicode-bidi:plaintext;white-space:nowrap}
.card--plain{background:none;border:0;padding:0}          /* hairline group, no box */
.card--plain .card__row{padding-inline:0}

/* a bare group of rows on the background, divided by hairlines */
.rows{margin-top:var(--section)}
.rows__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--row)}
.rows__row + .rows__row{border-top:1px solid var(--hair)}

/* --- badges: a 7px dot and a coloured word. No borders. ------- */
.badge{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-cap);font-weight:600}
.badge__dot{width:7px;height:7px;border-radius:50%;flex:none}
.badge--ok    .badge__dot{background:var(--ok)}      .badge--ok{color:var(--ok-ink)}
.badge--mine  .badge__dot{background:var(--mine);box-shadow:0 0 8px rgba(141,95,255,.7)}
.badge--mine{color:var(--mine-ink)}
.badge--idle  .badge__dot{background:var(--idle)}    .badge--idle{color:var(--idle-ink)}
.badge--bad   .badge__dot{background:var(--bad)}     .badge--bad{color:var(--bad-ink)}

/* --- buttons -------------------------------------------------- */
/* The chamfer is the signature of the primary action, and of nothing else. */
.btn{
  height:var(--cta-h);width:100%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--yellow);color:var(--on-yellow);
  font-weight:700;font-size:17px;line-height:1;
  clip-path:polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  transition:background .12s;
}
.btn:active{background:var(--yellow-press)}
.btn[disabled]{background:var(--yellow-off);opacity:.4;cursor:not-allowed}
.btn--2{
  height:var(--cta-h);width:100%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--secondary);color:var(--text);border-radius:var(--r-btn);
  font-weight:700;font-size:16px;clip-path:none;
}
.btn--2:active{background:var(--secondary-press)}
.btn--2[disabled]{color:var(--muted);cursor:not-allowed}
.btn--quiet{
  height:var(--tap);width:100%;background:none;border:0;cursor:pointer;
  color:var(--muted);font-weight:600;font-size:var(--t-body);
}
.btn--quiet[disabled]{opacity:.5;cursor:not-allowed}
/* A text button still has to be hit. The word keeps its own size; the box
   under it grows downward so the banner's rhythm does not shift. */
.link{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--ok-ink);font-weight:600;
  min-height:var(--tap); display:inline-flex; align-items:center}

/* --- fields ---------------------------------------------------- */
.field{
  height:var(--cta-h);width:100%;background:var(--card);
  border:1.5px solid var(--card-line);border-radius:var(--r-field);
  padding-inline:16px;font-family:inherit;font-size:17px;font-weight:600;
  color:var(--text);outline:none;
}
.field::placeholder{color:var(--muted);font-weight:400}
.field:focus{border-color:var(--ok)}
.field--bad{border-color:var(--bad)}

/* the code: four boxes, and the row stays LTR even in Arabic —
   it must match the SMS the phone is reading from */
.otp{display:flex;gap:12px;direction:ltr;justify-content:center;margin-top:26px}
.otp__box{
  width:64px;height:4.5rem;background:var(--card);
  border:1.5px solid var(--card-line);border-radius:var(--r-field);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--figures);font-weight:800;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.otp__box--on{border-color:var(--ok)}
.otp__box--bad{border-color:var(--bad)}
/* عميل Pixel حقيقي (2026-08-28): حقلٌ يرث RTL بأرقامٍ محايدة يجعل بعض
   لوحات Gboard تُدرج المحرف قبل سابقه فتنقلب القيمة المخزنة نفسها —
   فيفشل الرمز مستقيماً ومقلوباً. الحقل نفسه LTR كإخوته (حقل الجوال
   يحمل dir=ltr منذ ولادته)، في الوسم وفي الورقة معاً. */
/* 🔴 التعبئة التلقائية (أمر المالك 2026-08-29): لا يعرض iOS ولا أندرويد
   اقتراحَ الرمز فوق لوحة المفاتيح لحقلٍ يرَونه مخفياً — وكان هذا الحقل
   opacity:0 وpointer-events:none، أي غيرَ موجودٍ عندهما، فبقي العميل
   يكتب الرمز بيده. الآن هو الحقلُ الحقيقي: يملأ صفَّ الصناديق، مرئيٌّ
   ومَلموس، وحروفُه ومؤشرُه شفافان فلا يزدوج الرقم فوق الصناديق التي
   ترسمه. الصفُّ الجميل يبقى تحته زينةً لا حاجزاً. */
.otp__input{position:absolute; inset:0; width:100%; height:100%;
            direction:ltr; opacity:1; border:0; background:transparent;
            color:transparent; caret-color:transparent; text-align:center;
            letter-spacing:2.2rem; outline:none; z-index:1;
            -webkit-text-fill-color:transparent}
.otp__input::selection{ background:transparent }
/* النموذج غلافٌ وظيفي للتعبئة لا عنصرٌ مرئي: لا إطار ولا أرضية ولا حشو
   (وإلا رسم صندوقاً أبيض حول صفّ الرمز — لُقط في لقطة 2026-08-29) */
#otpForm, #phoneForm, #nameForm{
  border:0; background:none; padding:0; margin:0; display:block }
/* حلقةُ التركيز حقٌّ لمن يتنقّل بلوحة المفاتيح، لكن الحقل صار يغطي
   الصفَّ كلَّه فرسمت صندوقاً أبيض حوله (لُقط بصرياً 2026-08-29).
   تنتقل الحلقة إلى **الصندوق الجاري** الذي يراه القارئ فعلاً. */
.otp__input:focus-visible{ outline:none }
.otp__input:focus-visible ~ .otp .otp__box--on,
.otp:has(~ .otp__input:focus-visible) .otp__box--on{
  outline:2px solid var(--text); outline-offset:2px }
@media (max-width:22.5rem){ .otp{gap:9px} .otp__box{width:56px;height:4rem;font-size:26px} }

/* --- banners --------------------------------------------------- */
.banner{border-radius:var(--r-card);padding:14px 16px;margin-top:12px}
.banner__title{font-size:var(--t-cardtitle);font-weight:700;margin-bottom:6px}
.banner__body{font-size:var(--t-cap);line-height:1.65}
.banner--amber{background:var(--amber-surf);border:1px solid var(--amber-line)}
.banner--amber .banner__title{color:var(--amber-ink)}
.banner--amber .banner__body{color:var(--ink)}
.banner--red{background:var(--bad-surf);border:1px solid var(--bad-line)}
.banner--red .banner__title{color:var(--bad-ink)}
.banner--red .banner__body{color:var(--ink)}
.banner--mine{background:var(--mine-surf);border:1px solid var(--mine)}
.banner--mine .banner__title{color:var(--mine-ink)}
.banner--ok{background:var(--ok-surf);border:1px solid var(--ok)}
.banner--ok .banner__title{color:var(--ok-ink)}
.banner--quiet{background:var(--card);border:1px solid var(--card-line)}
.banner--quiet .banner__body{color:var(--muted)}

/* the debt statement card carries a violet edge, never a red one */
.edge-mine{border-inline-end:2px solid var(--mine)}

/* offline: last known data stays, and says so. Never a blank screen. */
.offline{
  flex:none;margin:6px var(--gutter) 0;background:var(--idle-surf);
  border:1px solid var(--idle-line);border-radius:var(--r-banner);
  padding:10px 14px;display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--muted);
}

/* --- bottom sheet: depth by shadow, not by border -------------- */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:40;
  display:flex;align-items:flex-end;animation:fade .2s ease-out}
.sheet{
  width:100%;background:var(--sheet);border:1px solid var(--sheet-line);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--sheet-shadow);
  padding:14px var(--gutter) 40px;display:flex;flex-direction:column;gap:16px;
  animation:rise .26s cubic-bezier(.2,.8,.2,1);
}
.sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--grabber);align-self:center}
.sheet__title{font-size:20px;font-weight:800;line-height:1.3}
@keyframes rise{from{transform:translateY(14%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* acceptance marks — a row of names, not logos we have no licence for */
.marks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mark{border:1px solid var(--card-line);border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}

/* --- empty / error states -------------------------------------- */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding-block:56px}
.state__mark{width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  margin-bottom:6px}
.state__title{font-size:20px;font-weight:800}

/* the octagon: the shape the brand already owns (its icon) */
.oct{clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}

/* Heard, never seen. Not display:none — that is not announced either. */
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* --- the scan overlay: a viewfinder, outside #app ----------------
   Imperative DOM on purpose: #app is rebuilt whole on every render and
   a rebuilt <video> is a dead camera. Lives beside #say, managed only
   by actions.js. */
#scan{position:fixed;inset:0;z-index:130;background:#000}
#scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#scan .scan__frame{
  position:absolute;inset-inline:16%;inset-block:26% 34%;
  border:3px solid rgba(255,214,77,.92);border-radius:18px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45);
}
#scan .scan__hint{
  position:absolute;inset-inline:0;text-align:center;color:#F3F3F3;
  inset-block-end:calc(env(safe-area-inset-bottom) + 104px);
  font-size:15px;padding-inline:28px;line-height:1.7;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
#scan .scan__cancel{
  position:absolute;inset-inline:0;margin-inline:auto;
  inset-block-end:calc(env(safe-area-inset-bottom) + 28px);
  width:min(58%,238px);height:48px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(243,243,243,.4);background:rgba(0,0,0,.4);
  color:#F3F3F3;font-family:inherit;font-size:16px;font-weight:600;
}

/* --- skeletons: no pulse, no spinner --------------------------- */
.skel{background:var(--skeleton);border-radius:8px}
.skel--hi{background:var(--skeleton-hi)}

/* --- the keyboard, and everything that behaves like one ---------
   A ring drawn in --text, held one gap away from the control so the gap
   shows the page behind it. That pairing is 14:1 in both themes, so the
   ring is visible on the yellow CTA, on a card, and on a tinted banner
   alike — no per-component focus colour, and nothing to keep in sync.
   :focus-visible, not :focus: a thumb should not light this up. */
:focus-visible{
  outline:3px solid var(--text); outline-offset:2px; border-radius:4px;
}
.btn:focus-visible{ border-radius:var(--chamfer) }
.field:focus-visible{ outline-offset:1px }

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

/* --- RTL: mirror the box, keep each run readable --------------- */
:root[dir="rtl"] .app{unicode-bidi:plaintext}
:root[dir="rtl"] .btn,:root[dir="rtl"] .btn--2,:root[dir="rtl"] .btn--quiet{text-align:center}

/* ============================================================
   THE HOME MAP — full-bleed, on the owner's board (2026-08-23).
   #mapHost lives outside #app; the route on <body> shows it on the home
   alone, and .map-up arrives only once the vendored library painted.
   With the map up, #app turns to glass: touches fall through to the map
   everywhere except the pieces that are really there — the head, the
   bottom sheet, the foot. Without a style or a library, none of this
   fires and the list is the whole home.
   ============================================================ */
#mapHost{ display:none; position:fixed; inset:0; z-index:0; background:transparent }
body[data-route="entry"] #mapHost.map-try{ display:block; opacity:0 }
body[data-route="entry"] #mapHost.map-up{ opacity:1; transition:opacity .4s }
#app{ position:relative; z-index:1 }

body[data-route="entry"][data-map="up"] #app{ pointer-events:none }
body[data-route="entry"][data-map="up"] #app .head,
body[data-route="entry"][data-map="up"] #app .foot,
body[data-route="entry"][data-map="up"] #app .home,
body[data-route="entry"][data-map="up"] #app .card,
body[data-route="entry"][data-map="up"] #app .btn--quiet,
body[data-route="entry"][data-map="up"] #app .mapfab,
body[data-route="entry"][data-map="up"] #app .offline{ pointer-events:auto }
body[data-route="entry"][data-map="up"] .body{
  overflow:hidden; display:flex; flex-direction:column;
  padding-block-start:0; padding-block-end:0;
}

/* the open window onto the map — a spacer; the buttons live in the foot */
.map-window{ flex:1; min-height:20vh; position:relative; pointer-events:none }

/* صفّ القاع على اللوحة المعتمدة: [تحديد موقعي ⊙] [باب المسح] [واتساب] —
   دوائر 52 على أرضية شبه شفافة، والخضراء خضراءُ واتساب نفسها */
.homefoot{ display:flex; align-items:center; gap:10px }
.homefoot .btn{ flex:1; min-width:0 }
.mapfab{
  width:52px; height:52px; flex:none; border-radius:50%;
  background:var(--glass-deep); color:var(--text); font:inherit;
  border:1px solid var(--glass-deep-line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4); pointer-events:auto;
}
.mapfab--wa{ color:#25D366 }

/* شريط التأجير الجاري (لوحة المالك «تأجير جارٍ · 0:42:15 · 8.00 ر.س»):
   بنفسجيُّ الملكية فوق الرئيسية، بحلقة تقدّمٍ نحو الحدّ اليومي —
   روحُ لوحته الجانبية ذات الحلقات، حلقةً واحدةً في السطر لا سكةً جانبية */
.rentbar{
  display:flex; align-items:center; gap:10px; inline-size:100%;
  min-height:52px; padding:10px 14px; margin-block-end:10px;
  /* سعد (من هاتفه، 2026-08-30): «قلل الشفافية» — مدنٌ كانت تنسل من
     خلف الشريط. أرضية مصمتة وفوقها مسحة البنفسج طبقةً */
  background-color:var(--card);
  background-image:linear-gradient(var(--mine-surf), var(--mine-surf));
  border:1px solid var(--mine);
  border-radius:16px; color:var(--text); font:inherit; text-align:start;
  cursor:pointer; box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.rentbar__ring{ flex:none; display:block }
.rentbar__label{ font-weight:800; color:var(--mine-ink); font-size:14.5px }
.rentbar__time{ font-weight:700; font-size:14.5px }
.rentbar__cost{ margin-inline-start:auto; font-weight:800;
                color:var(--mine-ink); font-size:15px }
.rentbar__cost b{ font-weight:800 }
.rentbar__chev{ color:var(--muted); display:flex; flex:none }
:root[dir="ltr"] .rentbar__chev svg{ transform:scaleX(-1) }
body[data-route="entry"][data-map="up"] #app .rentbar,
body[data-route="entry"][data-map="up"] #app .debtbar{ pointer-events:auto }
body[data-route="entry"][data-map="up"] .rentbar{ margin-block-start:10px }
body[data-route="entry"][data-map="up"] .rentbar + .debtbar{ margin-block-start:0 }
body[data-route="entry"][data-map="up"] .debtbar{ margin-block-start:10px }

/* شريط الدين: قماشُ شريطِ التأجير نفسه بكهرمان التحذير */
.debtbar{
  display:flex; align-items:center; gap:10px; inline-size:100%;
  min-height:52px; padding:10px 14px; margin-block-end:10px;
  background-color:var(--card);
  background-image:linear-gradient(var(--amber-surf), var(--amber-surf));
  border:1px solid var(--amber-line);
  border-radius:16px; color:var(--text); font:inherit; text-align:start;
  cursor:pointer; box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.debtbar__mark{
  width:24px; height:24px; flex:none; background:var(--warn);
  color:var(--bg); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.debtbar__label{ font-weight:800; color:var(--amber-ink); font-size:14.5px }
.debtbar__amt{ margin-inline-start:auto; font-weight:800;
               color:var(--amber-ink); font-size:15px }

/* شعار شاشة التثبيت (اللوحة 5c): لوح الشعار وفوق كتفه ثمانيةٌ بحرية «+» */
.instmark{ position:relative; display:flex; justify-content:center;
           margin-block-end:22px }
.instmark__tile{
  width:128px; height:128px; border-radius:28px; background:var(--card);
  border:1px solid var(--card-line); display:flex; align-items:center;
  justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.instmark__logo{ width:92px; height:64px }
.instmark__plus{
  position:absolute; inset-block-end:-10px;
  inset-inline-start:calc(50% - 64px - 10px);
  width:40px; height:40px; background:var(--ok); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800;
}

/* شريط الأقرب — بطاقة فوق الصف: ثمانيّةٌ صفراء تحمل البرق، الاسم،
   وسطرُ «{ن} جاهزة · مسافة · مشي» بعدده بلون البحر */
.nearstrip{
  display:flex; align-items:center; gap:12px; inline-size:100%;
  background:var(--glass-deep); border:1px solid var(--glass-deep-line);
  border-radius:16px; padding:13px 15px; margin-block-end:12px;
  color:var(--text); font:inherit; text-align:start; cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.42); pointer-events:auto;
}
.nearstrip__oct{
  width:36px; height:36px; flex:none; background:var(--cta);
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  filter:drop-shadow(0 0 8px rgba(255,214,77,.45));
}
.nearstrip__main{ flex:1; min-width:0 }
.nearstrip__name{ display:block; font-weight:700; font-size:15px;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nearstrip__sub{ display:block; color:var(--muted); font-size:12.5px; margin-top:1px }
.nearstrip__sub .fig{ font-weight:700; color:var(--text) }
/* حبر لا صبغة واجهة: --ok الفاتحة على زجاج الوضع الفاتح 3.37 فقط —
   انكشفت يوم صار الشريط يحضر من الإقلاع (كلمة سعد 4/9) ودخل مسح AA */
.nearstrip__sub .nearstrip__n{ color:var(--ok-ink) }
.nearstrip__go{ color:var(--muted); display:flex; flex:none }
.nearstrip__go svg{ transform:scaleX(-1) }
:root[dir="ltr"] .nearstrip__go svg{ transform:none }
body[data-route="entry"][data-map="up"] .foot{
  /* سفاري المتصفح: «ارفعه قليلاً» (سعد 2026-09-02 بلقطتيه) — شريط
     سفاري السفلي كان يلاصق الزر. 6px + صندوق فوتر ملموس 44px تحته.
     التطبيق المثبت يحتفظ بموضعه الذي أحبه عبر @media أدناه. */
  padding:8px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 6px);
}

/* the rims (owner, 2026-08-24): the page colour fades over the map —
   solid at the very edge, gone by the content it shelters (the logo
   above, the foot row below). #app's own fixed pseudo-layers: never
   rebuilt by the render loop, never a hand in front of a tap. */
body[data-route="entry"][data-map="up"] #app::before,
body[data-route="entry"][data-map="up"] #app::after{
  content:''; position:fixed; inset-inline:0; z-index:-1; pointer-events:none;
}
body[data-route="entry"][data-map="up"] #app::before{
  top:0; height:calc(env(safe-area-inset-top, 0px) + 86px);
  background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}
body[data-route="entry"][data-map="up"] #app::after{
  bottom:0; height:calc(env(safe-area-inset-bottom, 0px) + 70px);
  background:linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

/* the bank sheet (owner, 2026-08-24): their page framed IN the app —
   lives outside #app like #scan, so the render loop cannot rebuild it */
#paybank{ position:fixed; inset:0; z-index:140; background:var(--bg);
  display:flex; flex-direction:column }
.paybank__bar{ flex:none; display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  border-bottom:1px solid var(--card-line, rgba(127,127,127,.2)) }
.paybank__x{ width:44px; height:44px; border-radius:50%;
  border:1px solid var(--card-line, transparent);
  background:var(--card); color:var(--text); font:inherit; flex:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer }
.paybank__title{ flex:1; font-weight:700; font-size:15px }
.paybank__full{ font-size:12.5px; color:var(--muted);
  text-decoration:underline; min-height:44px;
  display:flex; align-items:center }
#paybank iframe{ flex:1; width:100%; border:0; background:#FFFFFF }

/* نسبة الخريطة (حكم المالك 2026-08-28): أعلى يسار، صغيرة جدا وشبه
   شفافة - تحت زر اللغة فلا يغطيها الرأس. حد الرخصة محفوظ: حاضرة
   دائما، ولمستها تفتح الأسماء كاملة بشفافية تامة وحجم يقرأ. */
.maplibregl-ctrl-top-left{
  top:calc(env(safe-area-inset-top, 0px) + 78px); left:10px;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib{
  opacity:.34; transform:scale(.7); transform-origin:top left;
  transition:opacity .15s ease, transform .15s ease;
  background:transparent;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib.maplibregl-compact-show{
  opacity:1; transform:scale(1); background:var(--card);
}
.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib:focus-within{ opacity:1 }

/* the bottom sheet over the map — and the flat list when there is none */
body[data-map="up"] .home{
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  background:var(--card); border-start-start-radius:18px;
  border-start-end-radius:18px; padding-block-start:4px;
  max-height:44vh; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
}
body[data-map="up"] .home::-webkit-scrollbar{ width:0 }
.home__grab{ width:44px; height:4px; border-radius:2px; background:var(--hair);
             margin:6px auto 2px }
body[data-map="off"] .home{
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  background:var(--bg); padding-block-start:6px;
}
.home__bar{ display:flex; align-items:center; justify-content:space-between;
            padding-block:10px 6px }
.home__title{ font-size:13px; font-weight:700; letter-spacing:.06em;
              color:var(--muted) }
.btn--near{ min-height:44px; padding-inline:18px; border-radius:var(--r-btn,12px);
            background:var(--card); border:1px solid var(--card-line,transparent);
            color:var(--text); font:inherit; font-weight:700; font-size:15px }

/* a station row: a real target, a dot, a name, and a STATE in words */
.strow{ display:flex; align-items:center; gap:12px; inline-size:100%;
        min-height:56px; padding-block:8px; padding-inline:2px;
        background:none; border:0; border-bottom:1px solid var(--hair);
        color:var(--text); font:inherit; text-align:start; cursor:pointer }
.strow:last-child{ border-bottom:0 }
.strow__dot{ flex:none; width:10px; height:10px; border-radius:50% }
.strow__dot--ready{ background:var(--ok) }
.strow__dot--idle{ background:var(--idle) }
.strow__main{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0 }
.strow__name{ font-weight:700; font-size:16px }
.strow__sub{ color:var(--muted); font-size:12px }
.strow__meta{ flex:none; color:var(--muted); font-size:13px }

/* the pins the map draws — the brand octagon, a colour, never a count.
   Recut to the REQUIRED boards (ورقة مطابقة شاشات دوك, 2026-08-28): the
   alive pin is a SOLID YELLOW octagon with a BLACK BOLT and a yellow
   glow; the empty one a dashed yellow outline with a yellow bolt; the
   silent one a grey outline with a grey bolt. The breath dies with
   everything else under prefers-reduced-motion. */
.mappin{ width:44px; height:44px; position:relative; pointer-events:auto;
         cursor:pointer; display:flex; align-items:center; justify-content:center;
         background:none; border:0; padding:0 }
.mappin svg{ position:absolute; inset:0; width:100%; height:100%;
             overflow:visible; filter:drop-shadow(0 2px 5px rgba(0,0,0,.3)) }
.mappin .oct{ fill:var(--cta); stroke:var(--cta); stroke-width:4 }
.mappin .bolt{ fill:var(--cta-ink) }
.mappin--ready svg{ filter:drop-shadow(0 0 14px rgba(255,214,77,.55)) }
.mappin--ready::after{ content:''; position:absolute; inset:-9px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,77,.32), transparent 66%);
  z-index:-1; animation:pinbreathe 2.8s ease-in-out infinite }
@keyframes pinbreathe{ 0%,100%{ transform:scale(.82); opacity:.65 }
                       50%{ transform:scale(1.12); opacity:1 } }
.mappin--empty .oct{ fill:rgba(255,214,77,.1); stroke:var(--cta); stroke-width:4;
                     stroke-dasharray:7 5 }
.mappin--empty .bolt{ fill:var(--cta) }
.mappin--silent .oct{ fill:rgba(90,102,110,.35); stroke:var(--idle); stroke-width:4 }
.mappin--silent .bolt{ fill:var(--idle) }

/* --- his own point («ضع مؤشراً لموقعي الحالي» — owner, 2026-08-24).
   Decoration, never a control: aria-hidden in map.js, taps fall through.
   The halo's RESTING look lives on the base rule, so the global
   reduced-motion kill (which ends animations, it does not hide things)
   leaves a calm, honest dot behind. */
.medot{ position:relative; width:38px; height:38px; pointer-events:none;
        z-index:2 }   /* above the pins, like every map he knows — yet it
                         steals no tap: pointer events pass through it */
.medot__halo{ position:absolute; inset:0; border-radius:50%;
  background:var(--ok); opacity:.14; transform:scale(.7);
  animation:medot-breathe 2.6s ease-in-out infinite }
.medot__core{ position:absolute; left:50%; top:50%; width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px; border-radius:50%; background:var(--ok);
  border:2.5px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35) }
@keyframes medot-breathe{ 0%,100%{ transform:scale(.55); opacity:.24 }
                          50%{ transform:scale(1); opacity:.08 } }

/* ============================================================
   THE ROUND OF 2026-08-23 — the owner's three sentences over the
   competitor board: a home map worth looking at, a drawer of his own,
   and a serious polish pass. Everything below serves those three.
   ============================================================ */

/* --- a new screen fades in; a same-screen tick must not pulse.
       The class rides #app (never rebuilt), re-armed only on a route
       change — so the renting screen's once-a-second render stays still. */
#app.route-in{ animation:screenIn .24s ease-out }
@keyframes screenIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* --- the screens do not move (owner, 2026-08-23 — he pinch-zoomed the
       station screen by accident). The document rules alone did not hold
       Safari, so EVERY element inside #app is pinned to pan only:
       double-tap and pinch find nothing to grab, on any screen. The map
       lives outside #app and keeps its own two-finger zoom. Text is not
       selectable — an app, not a document; what is typed still is. */
#app, #app *{ touch-action:pan-x pan-y }
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
input, textarea{ -webkit-user-select:text; user-select:text }
/* iOS zooms the page when a focused input reads under 16px — the one
   auto-zoom no meta stops. The hidden code input inherited 15. */
.otp__input{ font-size:16px }

/* --- the head's own doors ------------------------------------- */
.head__menu{
  inset-inline-start:12px; width:var(--tap); height:var(--tap); border-radius:50%;
}
/* بابُ التثبيت: حبّةٌ ثانية جوار باب القائمة (اللوحة ترسمهما زوجاً) —
   يظهر على الرئيسية وحدها وما دام التطبيق غير مثبَّت */
.head__install{ inset-inline-start:calc(12px + var(--tap) + 8px) }
/* a soft fade of the page colour keeps the logo readable on any map tile */
body[data-route="entry"][data-map="up"][data-view="map"] .head{ z-index:2 }
body[data-route="entry"][data-map="up"][data-view="map"] .head::before{
  content:''; position:absolute; inset-block-start:0; inset-inline:0; height:135%;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  opacity:.8; z-index:-1; pointer-events:none;
}

/* --- the PIN SHEET (approved board: main-station) ---------------
   The tapped station's own card over the map — the way there, the live
   numbers asked after the tap, the price. No rent button: the printed
   code is the rent door. */
.pinsheet{
  /* طلب المالك (2026-08-30): لا فراغَ تحت الورقة — تلتصق بالقاع،
     وبطنُها السفلي يحمل صفَّ المسح العائم فوقه */
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  background:var(--card); border-radius:18px 18px 0 0;
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
  padding:4px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 124px);
  animation:rise .26s cubic-bezier(.2,.8,.2,1);
}
/* والورقة المفتوحة تُخفي كلَّ زرٍّ غير باب المسح: دائرتي قربي/واتساب
   وشريط الأقرب — «ما عدا زر مسح الرمز» بنصّ كلامه */
/* فوتر الشركة تحت باب المسح: هامشي بصرياً، حاضر قانونياً.
   اللون لون .cap نفسه (--muted: يعبر AA في السمتين — فحص التباين يمسح
   كل كلمة)، وفوق الخريطة يسكن حزام الحاشية كي يبقى صفُّ المسح على
   بعد ≤26px من القاع (مصيدة الصف الواطئ). */
.home-about{
  display:block; text-align:center; margin-top:10px;
  color:var(--muted); text-decoration:none; font-size:11.5px;
}
.home-about:active{ opacity:.7 }
body[data-route="entry"][data-map="up"] .home-about{
  /* تدفّقٌ طبيعي بعد الصف (لا تثبيت ولا مطلق — كلاهما خان على هاتفه):
     البنية تضمن «تحت الزر أبداً». وضعان بكلمة سعد (2026-09-02):
     - سفاري المتصفح: قابلٌ للضغط بصندوق لمسٍ كامل 44px (قانون اللمس
       يتحقق بحقّه لا باستثنائه) والصف مرفوعٌ قليلاً عن شريط سفاري.
     - التطبيق المثبت: سطرٌ نحيف بموضعه الذي أحبه — هويةٌ مطبوعة،
       وبابا اللمس بحجمهما في الدرج ورئيسية ما قبل الخريطة. */
  margin:-6px 0 0; font-size:10.5px; line-height:1.2;
  min-height:44px; padding-block:15px; pointer-events:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (display-mode: standalone){
  body[data-route="entry"][data-map="up"] .foot{
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 3px);
  }
  body[data-route="entry"][data-map="up"] .home-about{
    font-size:9.5px; min-height:0; padding:0; pointer-events:none;
  }
}
body[data-route="entry"][data-map="up"][data-pin="open"] .mapfab,
body[data-route="entry"][data-map="up"][data-pin="open"] .nearstrip,
body[data-route="entry"][data-map="up"][data-pin="open"] .home-about{ display:none }
/* هاتف سعد: الزر كان يجلس على سطر الغرامة — ينزل (حشوة قدمٍ أدنى)
   وبطن الورقة 124px يسعه بهامش */
body[data-route="entry"][data-map="up"][data-pin="open"] .foot{
  z-index:3; position:relative;
  padding-block-start:4px;
  padding-block-end:calc(env(safe-area-inset-bottom, 0px) + 10px);
}
/* ستارة الإغلاق: هاتفه — «لا استطيع اخفاء لوحة معلومات المحطه».
   شفافةٌ فوق الخريطة كلها؛ لمستُها تغلق الورقة */
.pinsheet-scrim{ position:absolute; inset:0; z-index:1; background:transparent;
                 border:0; padding:0; cursor:pointer }
body[data-route="entry"][data-map="up"] #app .pinsheet-scrim{ pointer-events:auto }
.pinsheet__x{
  position:absolute; inset-block-start:6px; inset-inline-end:10px; z-index:2;
  width:var(--tap); height:var(--tap); border-radius:50%;
  background:var(--secondary); color:var(--muted);
  border:1px solid var(--card-line); font:inherit;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pinsheet__grab{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; margin:0; padding:0;
  background:none; border:0; cursor:pointer;
}
.pinsheet__grab span{ width:44px; height:4px; border-radius:2px; background:var(--hair) }
.pinhead{ display:flex; align-items:center; gap:12px; padding:0 0 2px }
.pinhead__name{ flex:1; font-weight:800; font-size:19px }
.pindir{
  min-height:44px; padding:0 14px; background:none;
  border:1px solid var(--idle-line); border-radius:999px;
  color:var(--ok-ink); font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.pinsub{ display:flex; align-items:center; gap:8px; padding:0 28px 8px;
         color:var(--muted); font-size:13px }
.pinsub__d{ color:var(--ok-ink); font-weight:700 }
.pinlive{ display:flex; align-items:center; gap:14px; padding:12px 0 10px;
          border-top:1px solid var(--hair) }
.pincounts{ flex:1; display:flex; flex-direction:column; gap:2px }
.pinrow{ display:flex; align-items:center; min-height:34px }
.pinrow__word{ display:flex; align-items:center; gap:8px; font-size:13.5px }
.pinrow__word--ok{ color:var(--ok-ink) }
.pinrow__word--idle{ color:var(--muted) }
.pinrow__dot{ width:7px; height:7px; border-radius:50%; flex:none }
.pinrow__word--ok .pinrow__dot{ background:var(--ok);
  box-shadow:0 0 6px rgba(9,204,176,.55) }
.pinrow__word--idle .pinrow__dot{ background:var(--idle) }
.pinrow__lead{ flex:1; border-top:1.5px dashed var(--idle-line); margin:0 10px }
.pinrow__n{ font-weight:800; font-size:20px }
.pinrow__n--ok{ color:var(--ok-ink) }
.pinrow__n--idle{ color:var(--muted) }
.pinhair{ height:1px; background:var(--hair) }
.pinprice{ display:flex; align-items:center; justify-content:space-between;
           min-height:42px; border-top:1px solid var(--hair); font-size:14px }
.pinprice span:first-child{ color:var(--muted) }
.pinprice .fig{ font-weight:700 }
.pinprice__sub{ display:block; font-style:normal; font-size:12px;
                color:var(--muted); margin-top:1px }
.pinsilent__title{ font-weight:800; font-size:17px }

/* شعار الآلة — منحوتة اللوحات المعتمدة (ورقة المطابقة 2026-08-28)،
   مقاساتها من مصدر اللوحة نفسه على وحدة --m (الورقة 1.28 والمحطة 1):
   قاعدة داكنة، جسد كهرماني F5B301 بلمعة مائلة، رأس أسود يضم لوحةً
   ليمونية (QR ثم سطور ثم علامة دوك الداكنة)، لمبة خضراء، وست فتحات
   داكنة بشرطة سماوية — السادسة بلا ضوء عمداً. iconography فحسب:
   الأرقام جاره هي الحقيقة. */
.pinmach{ font-size:1px; position:relative; flex:none; display:block;
  width:100em; height:108em }   /* 1em = بكسل الأساس؛ المقاس حجمُ الخط */
.pinmach--lg{ font-size:1.28px }
.pinmach--sm{ font-size:0.94px }
.pinmach__ped{ position:absolute; left:7em;
  right:7em; bottom:0; height:4.5em;
  background:#15110B; border-radius:0 0 2.8em 2.8em }
.pinmach__body{ position:absolute; left:0; right:0; top:3.2em;
  height:102em; background:#F5B301;
  border-radius:7.5em 7.5em
                9em 9em;
  background-image:linear-gradient(100deg, rgba(255,255,255,.2) 0%,
    rgba(255,255,255,0) 22%, rgba(0,0,0,0) 74%, rgba(118,80,0,.16) 100%);
  box-shadow:inset 0 -2em 5em rgba(118,80,0,.16),
    0 4.5em 9em rgba(0,0,0,.42) }
.pinmach__head{ position:absolute; left:7.5em;
  right:7.5em; top:0; height:35.5em;
  background:linear-gradient(160deg, #242A20 0%, #11150E 34%, #11150E 100%);
  border-radius:8.5em; padding:3.6em;
  box-shadow:0 3em 7em rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.1) }
.pinmach__plq{ width:100%; height:100%; color:#12150F;
  background:linear-gradient(180deg, #CBEC4F 0%, #BCE23C 100%);
  border-radius:5.2em;
  box-shadow:0 0 5em rgba(198,227,84,.22);
  display:flex; align-items:center; justify-content:space-evenly;
  padding:0 2.8em }
.pinmach__qr{ display:block; width:13em; height:13em; flex:none }
.pinmach__div{ display:block; width:1px; height:16em;
  background:#12150F; opacity:.32; flex:none }
.pinmach__lines{ display:flex; flex-direction:column;
  gap:1.3em; flex:none }
.pinmach__lines i{ display:block; height:1.2em; border-radius:1px;
  background:#12150F; opacity:.6 }
.pinmach__lines i:nth-child(1){ width:7.8em }
.pinmach__lines i:nth-child(2){ width:6.6em }
.pinmach__lines i:nth-child(3){ width:7.3em; opacity:.4 }
.pinmach__lines i:nth-child(4){ width:5.5em; opacity:.4 }
.pinmach__word{ display:block; width:26em; height:15em;
  flex:none; background:url('../../assets/brand/logo-bilingual-dark.png')
  center/contain no-repeat }
.pinmach__led{ position:absolute; left:50%; transform:translateX(-50%);
  top:44.2em; width:2.6em;
  height:2.6em; border-radius:50%; background:#3DDC5C;
  box-shadow:0 0 4.5em #3DDC5C,
    0 0 9em rgba(61,220,92,.55) }
.pinmach__slot{ position:absolute; width:36em;
  height:6.4em; background:#141615;
  border-radius:2.6em;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.13) }
.pinmach__slot--0, .pinmach__slot--2, .pinmach__slot--4{ left:9em }
.pinmach__slot--1, .pinmach__slot--3, .pinmach__slot--5{ left:55em }
.pinmach__slot--0, .pinmach__slot--1{ top:51em }
.pinmach__slot--2, .pinmach__slot--3{ top:67.7em }
.pinmach__slot--4, .pinmach__slot--5{ top:84.4em }
.pinmach__slot i{ position:absolute; inset:1px;
  border-radius:2.2em;
  background:linear-gradient(180deg, #2A3033 0%, #1C2123 45%, #101314 100%) }
.pinmach__slot i::before{ content:''; position:absolute; top:1px; left:2px;
  right:2px; height:32%; border-radius:2em 2em 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.13), transparent) }
.pinmach__slot i::after{ content:''; position:absolute; top:50%; left:31%;
  transform:translateY(-50%); width:5.5em; height:2px;
  border-radius:2px; background:#4CC9F0;
  box-shadow:0 0 4px #4CC9F0, 0 0 9px rgba(76,201,240,.55) }

/* the sheet and the drawer must stay touchable through the glass */
body[data-route="entry"][data-map="up"] #app .pinsheet,
body[data-route="entry"][data-map="up"] #app .drawer-scrim{ pointer-events:auto }

/* --- the station row, refined --------------------------------- */
.strow{ min-height:60px }
.strow__dot{
  width:16px; height:16px; border-radius:0;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
}
.strow__dot--ready{ filter:drop-shadow(0 0 6px rgba(9,204,176,.55)) }
.strow__name{ font-size:16.5px }
.strow__meta--ready{ color:var(--ok-ink); font-weight:600 }
.strow__meta--idle{ color:var(--muted) }

/* --- the drawer: his own door ---------------------------------- */
.drawer-scrim{
  position:absolute; inset:0; background:var(--scrim); z-index:64;
  animation:fade .2s ease-out;
}
.drawer{
  position:absolute; inset-block:0; inset-inline-start:0; width:min(84%, 20rem);
  background:var(--bg); border-inline-end:1px solid var(--card-line);
  box-shadow:0 0 44px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:16px;
  padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 20px);
  overflow-y:auto; overscroll-behavior:contain;
  animation:drawerIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes drawerIn{ from{ transform:translateX(-104%) } to{ transform:none } }
:root[dir="rtl"] .drawer{ animation-name:drawerInRtl }
@keyframes drawerInRtl{ from{ transform:translateX(104%) } to{ transform:none } }

.drawer__prof{
  background:var(--card); border:1px solid var(--card-line);
  border-radius:var(--r-card); padding:16px; display:flex; align-items:center;
  gap:14px; text-align:start; flex:none;
}
button.drawer__prof{ cursor:pointer; font:inherit; color:var(--text); width:100% }
button.drawer__prof:active{ background:var(--secondary-press) }
.drawer__ava{
  width:52px; height:52px; flex:none; background:var(--yellow); color:var(--on-yellow);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px;
}
.drawer__who{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.drawer__name{ font-weight:800; font-size:16.5px }

.drawer__list{ display:flex; flex-direction:column; gap:10px }
.drow{
  display:flex; align-items:center; gap:14px; width:100%; min-height:54px;
  background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-card);
  padding-inline:16px; color:var(--text); font:inherit; font-weight:600;
  font-size:15.5px; cursor:pointer; text-align:start;
}
.drow:active{ background:var(--secondary-press) }
.drow svg{ flex:none; color:var(--muted) }
.drow__label{ flex:1 }
.drow__chev{ flex:none; color:var(--muted); display:flex }
:root[dir="rtl"] .drow__chev svg{ transform:scaleX(-1) }
.drow--out .drow__label{ color:var(--muted) }

/* --- «كيف تستخدم دوك» --- */
.steps{ list-style:none; display:flex; flex-direction:column }


/* --- ش2 على اللوحة المعتمدة 13: البطل والدفتر والرقاقات --- */
/* بطل الشاشة: الأرقام الحية يميناً والشعار الصغير يساراً */
.sthero{ display:flex; align-items:center; gap:18px; margin-top:16px }
.sthero__nums{ flex:1; min-width:0 }
.sthero__row{ display:flex; align-items:baseline; gap:10px }
.sthero__n{ font-weight:800; font-size:56px; line-height:1; color:var(--ok-ink) }
.sthero__unit{ font-size:18px; font-weight:600; color:var(--ok-ink) }
.sthero__nums .cap{ margin-top:8px }

/* دفتر الأسعار — بطاقة صفوف بفواصل شعرية */
.ledger{ margin-top:16px; padding:4px 18px }
.ledger__row{ display:flex; align-items:center; justify-content:space-between;
              gap:12px; min-height:44px; border-bottom:1px solid var(--hair) }
.ledger__row:last-child{ border-bottom:0 }
.ledger__label{ color:var(--muted); font-size:14px; line-height:1.35 }
.ledger__sub{ display:block; font-style:normal; opacity:.7; font-size:11.5px }
.ledger__n{ font-weight:700; font-size:16px; color:var(--text) }
.ledger__n b{ font-size:11.5px; font-weight:600; color:var(--muted) }

.paychips{ display:flex; gap:8px }
.paychip{
  flex:1; height:48px; background:#FFFFFF; border:1.5px solid rgba(31,36,38,.1);
  border-radius:12px; color:#1F2426; display:flex; align-items:center;
  justify-content:center; gap:7px; cursor:pointer; font-family:inherit;
}
.paychip--on{ border-color:#09CCB0 }
.paychip--ap{ color:#050505 }
.paychip__pay{ font-weight:700; font-size:15px; letter-spacing:-.01em }
.paychip__tick{
  width:18px; height:18px; border-radius:50%; background:#09CCB0; color:#10211D;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; flex:none;
}
.paychip__sep{ width:1px; height:14px; background:rgba(31,36,38,.16) }
/* mada's own green fails AA at this size on white (2.98:1) — the hue
   holds, the lightness drops to clear 4.5:1, same move as the tokens */
.paychip [data-brand="mada"]{ font-weight:800; font-size:11.5px; color:#4C7C21 }
.paychip [data-brand="visa"]{ font-weight:800; font-size:11.5px; font-style:italic;
                              color:#1A1F71 }
.paychip__mc{ display:flex }
.paychip__mc i{ width:13px; height:13px; border-radius:50%; display:block }
.paychip__mc i:first-child{ background:#EB001B; opacity:.9 }
.paychip__mc i:last-child{ background:#F79E1B; opacity:.9;
                           margin-inline-start:-5px }

/* (المالك 2026-08-24، وكسوة اللوحة 13) Apple Pay ينتظر البنك: الرقاقة
   واقفة باهتة البياض معطّلة، ووعدها سطرُ التعليق تحت الصف لا وسمٌ
   داخلها — وعدٌ معروض لا بابٌ أبداً */
.paychip--dead{
  opacity:.35; color:#050505; border-color:transparent;
  cursor:default; pointer-events:none;
}
.paychips__soon{
  text-align:center; color:var(--muted); font-size:11px; margin-top:-2px;
}

/* the white Apple Pay CTA — the one button beside the yellow chamfer */
.btn--ap{
  height:var(--cta-h); width:100%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:#FFFFFF; color:#050505; border-radius:14px;
  font-weight:700; font-size:17px; font-family:inherit;
}
.btn--ap:active{ background:#EDEDED }

/* --- ش1: the unified LTR phone row, ringed teal in focus --- */
#pf:focus-within{ border-color:var(--ok);
                  box-shadow:0 0 0 4px rgba(9,204,176,.12) }
#pf input{ caret-color:var(--ok) }

/* --- ش11: the four illustrated steps --- */
.hstep{ display:flex; align-items:center; gap:16px }
.hstep + .hstep{ margin-top:18px }
.hstep__tile{ position:relative; flex:none }
.hstep__art{
  width:84px; height:84px; background:var(--card);
  border:1px solid var(--card-line); border-radius:18px;
  display:flex; align-items:center; justify-content:center;
}
.hstep__n{
  position:absolute; top:-7px; inset-inline-start:-7px;
  width:26px; height:26px; background:var(--yellow); color:var(--on-yellow);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
.hstep__txt{ display:flex; flex-direction:column; gap:4px }
.hstep__title{ font-size:16px; font-weight:800 }
.hstep__sub{ font-size:12.5px; line-height:1.65; color:var(--muted) }

/* أ٤ · the consent bar — outside #app, over nothing that matters */
#updatebar{
  position:fixed; inset-inline:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index:125; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:14px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.28);
}
#updatebar button{
  flex:none; min-height:44px; padding:0 18px; border:0; border-radius:10px;
  background:var(--brand); color:var(--brand-ink, #1F2426); font-weight:700; font:inherit;
  cursor:pointer;
}

/* the bank sheet's quiet line - patience with a face */
.paybank__quiet{
  flex:1 1 100%; order:9; font-size:12px; color:var(--dim, #A5A5A9);
  padding-top:6px; text-align:center;
}

/* اللوحات المعتمدة: شعارٌ واحد للموقع (مات رسمُ-لكل-جهاز أمام لوحتي
   01/02) — والمطفأ رماديٌّ خافت كما في لوحة 03 */
.pinmach--off{ filter:grayscale(1); opacity:.55 }
.pinmach--off .pinmach__led{ background:var(--idle); box-shadow:none }

/* ---------- ش · الأسئلة الشائعة (أمر سعد 2026-09-07) ---------- */
.faqsearch{ margin-bottom:12px }
.faqchips{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  margin-bottom:14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.faqchips::-webkit-scrollbar{ display:none }
.faqchip{
  flex:none; white-space:nowrap; font:inherit; font-size:14px; font-weight:600;
  padding:8px 15px; min-height:44px; border-radius:999px; cursor:pointer;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--hairline);
}
.faqchip--on{
  background:var(--cta); color:var(--cta-ink); border-color:var(--cta);
}
.faqlist{ display:flex; flex-direction:column; gap:10px }
.faqitem{
  background:var(--card); border:1px solid var(--card-line);
  border-radius:14px; overflow:hidden;
}
.faqitem--on{ border-color:var(--ok-ink) }
.faqitem__q{
  width:100%; display:flex; align-items:center; gap:12px; text-align:start;
  font:inherit; font-size:15.5px; font-weight:600; color:var(--text);
  background:none; border:0; cursor:pointer; padding:15px 16px;
}
.faqitem__qt{ flex:1; min-width:0 }
.faqitem__chev{
  flex:none; color:var(--muted); display:flex; transition:transform .18s ease;
}
.faqitem--on .faqitem__chev{ transform:rotate(180deg) }
.faqitem__a{
  margin:0; padding:0 16px 16px; color:var(--muted);
  font-size:14.5px; line-height:1.8;
}
@media (prefers-reduced-motion: reduce){ .faqitem__chev{ transition:none } }