/* بيتي — طبقة الاتجاه 1c «ملف المنزل» فوق نظام Industry.
   كل قيمة هنا مأخوذة من لوحة 1c في حزمة التصميم أو من توكِنات styles.css.
   لا ألوان ولا خطوط مخترعة. */

:root {
  --ar: 'Noto Kufi Arabic', system-ui, sans-serif;        /* خط الواجهة في 1c */
  --brand: 'IBM Plex Sans Arabic', system-ui, sans-serif; /* خط الشعار في 2b */
  --lat: 'Barlow', 'Noto Kufi Arabic', system-ui, sans-serif;
  --con: 'Barlow Condensed', 'Noto Kufi Arabic', system-ui, sans-serif;

  /* إيقاع الملف — مأخوذ حرفيًا من لوحة 1c */
  --sheet-pad-x: 16px;
  --sheet-pad-y: 18px;
  --frame-pad: 16px;
  --rule: 1px solid var(--color-text);
  --dash: 1px dashed var(--color-neutral-400);
  --page: 900px;
}

/* لوحة Industry فاتحة فقط — بلا هذا السطر يرسم المتصفح قوائم <select>
   ومنتقي التاريخ بألوان داكنة على صفحة فاتحة حين يكون نظام المستخدم داكنًا. */
:root { color-scheme: light; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--ar);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--ar); margin: 0; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; inset-inline-start: -9999px; top: 8px; z-index: 100;
  background: var(--color-accent-900); color: var(--color-bg);
  padding: 10px 16px; font: 500 14px var(--ar);
}
.skip-link:focus { inset-inline-start: 8px; }

/* ============ الهيكل ============ */
.shell { max-width: var(--page); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.shell.wide { max-width: 1180px; }

/* شريط علوي — العلامة يمينًا، وزر المساعد والوسم يسارًا */
.topbar {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 5px var(--frame-pad); flex: none;
}
.topbar-side { display: inline-flex; align-items: center; gap: 8px; }
/* المساعد متاح من كل شاشة — لا لسانًا ثامنًا يُدفن بين إخوته */
.topbar-act {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--color-neutral-400); padding: 5px 10px;
  font: 500 12.5px var(--ar); color: var(--color-neutral-700); white-space: nowrap;
}
.topbar-act:hover { border-color: var(--color-accent-700); color: var(--color-accent-800); }
.topbar-act[aria-current="page"] {
  background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--color-bg);
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font: 600 16px/1 var(--brand); color: var(--color-accent-900);
}
.topbar-brand:hover { color: var(--color-accent-700); }
.topbar-tag {
  font: 500 10.5px var(--con); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700); border: 1px solid var(--color-neutral-400);
  padding: 2px 7px;
}

/* ============ ألسنة التبويب ============ */
.tabstrip-wrap { padding: 6px var(--frame-pad) 0; flex: none; }
.tabstrip { display: flex; gap: 0; align-items: flex-end; overflow-x: auto; scrollbar-width: none; }
.tabstrip::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--color-neutral-400); border-bottom: none;
  padding: 9px 15px 10px; font: 500 13.5px var(--ar); color: var(--color-neutral-700);
  background: transparent; cursor: pointer; white-space: nowrap; flex: none;
  margin-inline-start: -1px; text-decoration: none;
}
.tab svg { opacity: .7; }
.tab:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); }
.tab:hover svg { opacity: 1; }
.tab:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
/* اللسان النشط لا يُخطَأ: ورقة بيضاء + حدّ علوي بلون العلامة + خط عريض */
.tab[aria-current="page"] {
  background: var(--color-bg); border-color: var(--color-text); border-bottom: none;
  box-shadow: inset 0 3px 0 var(--color-accent-700);
  padding: 12px 18px 13px; font: 700 14px var(--ar); color: var(--color-text);
  position: relative; z-index: 1;
}
.tab[aria-current="page"] svg { opacity: 1; color: var(--color-accent-700); }
.tab-filler { flex: 1; min-width: 12px; border-bottom: var(--rule); }

/* ============ الشريط السفلي (الجوال) ============ */
/* يظهر دون 720px بدل تمرير الألسنة أفقيًا: كل الأقسام في الشاشة دائمًا. */
.bottomnav { display: none; }

/* ============ الورقة ============ */
.sheet {
  background: var(--color-bg); border: var(--rule);
  padding: var(--sheet-pad-y) var(--sheet-pad-x) 20px;
}
.sheet.attached { border-top: none; }
.sheet + .sheet { margin-top: 14px; }
.body-wrap { padding: 0 var(--frame-pad); flex: 1; }
.body-wrap.top { padding-top: 4px; }

.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sheet-title { font: 700 19px/1.4 var(--ar); }
.sheet-title.sm { font-size: 17px; }
.sheet-stamp { font: 400 11.5px var(--lat); color: var(--color-neutral-700); letter-spacing: .08em; text-align: left; flex: none; }
.sheet-rule { height: 1px; background: var(--color-text); margin: 12px 0 0; }
.sheet-rule.gap { margin-bottom: 16px; }

/* أقسام مرقّمة */
.sec { margin-top: 20px; display: flex; align-items: flex-start; gap: 14px; }
.sec:first-of-type { margin-top: 16px; }
.sec-no { font: 400 40px/1 var(--con); color: var(--color-neutral-400); flex: none; }
.sec-body { flex: 1; min-width: 0; }
.sec-label { font: 500 11.5px var(--con); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }

/* عنوان القسم شريط داكن: على الجوال كان سطرًا رماديًا باهتًا لا يفصل قسمًا عن
   قسم، فتقرأ الشاشة كتلة واحدة. الداكن يفصل بنظرة.
   صنف مستقلّ لأن `.sec-label` يُستعمل أيضًا تسميةً صغيرة بجانب قائمة منسدلة،
   وشريطٌ داكن هناك يكسر الصفّ. */
.sec-band {
  display: block; background: var(--color-accent-800); color: var(--color-bg);
  font: 500 12.5px var(--ar); letter-spacing: .04em; text-transform: none;
  padding: 6px 10px; margin-bottom: 6px;
}
.sec-list { margin-top: 8px; }

/* صفوف منقّطة */
.row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: var(--dash); width: 100%;
  background: none; border-inline: none; border-top: none; text-align: start;
  font: 400 14px var(--ar); color: var(--color-text); cursor: pointer;
}
.row.static { cursor: default; }
a.row { text-decoration: none; }
.row:hover:not(.static) { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.row:active:not(.static) { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-title { font: 400 14px var(--ar); }
.row-sub { font: 400 12px var(--ar); color: var(--color-neutral-700); }
.row-val { font: 500 12.5px var(--ar); color: var(--color-neutral-700); flex: none; }
.row-val.due { color: var(--color-accent-800); }
.row-val.late { color: var(--color-accent-900); font-weight: 700; }
.row-val.calm { color: var(--color-neutral-700); }
.row-date { font: 500 12.5px var(--lat); color: var(--color-neutral-700); width: 52px; flex: none; }

/* صفوف المواصفات */
.spec { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: var(--dash); }
.spec dt { font: 400 13px var(--ar); color: var(--color-neutral-700); }
.spec dd { margin: 0; font: 500 14px var(--ar); }
.spec dd.lat { font-family: var(--lat); }
.spec dd.mark { color: var(--color-accent-800); }
dl { margin: 0; }

/* رقائق */
.chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: var(--rule); padding: 4px 9px; font: 400 12.5px var(--ar);
  background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none;
}
.chip:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.chip:active { background: color-mix(in srgb, var(--color-accent) 20%, transparent); }
/* الأزرار تستعمل aria-pressed، والروابط تستعمل aria-current — والمظهر واحد */
.chip[aria-pressed="true"], .chip[aria-current="page"], .chip.on { background: var(--color-accent-900); color: var(--color-bg); border-color: var(--color-accent-900); }
.chip.static { cursor: default; }
.chip.static:hover { background: transparent; }

/* الشكل المؤطَّر */
.figure { height: 96px; border: 1px solid var(--color-neutral-400); display: flex; align-items: center; justify-content: center; }
.figure.tall { height: 132px; }
/* صورة الجهاز داخل إطاره: تملأ الإطار وتُقصّ، فلا يتغيّر ارتفاع الصفحة بصورة طويلة */
.figure:has(.photo-open) { height: 180px; padding: 0; }
.figure .photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.figure .photo-open img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* الرقم الكبير */
.score { display: flex; align-items: flex-end; gap: 10px; }
.score-n { font: 700 56px/.9 var(--ar); color: var(--color-accent-800); }
.score-n.sm { font-size: 30px; line-height: 1; }
.score-side { padding-bottom: 6px; }
.score-of { font: 400 13px var(--ar); color: var(--color-neutral-700); }
.score-delta { font: 500 12.5px var(--ar); color: var(--color-accent-800); }

/* الجدول */
.dtable { width: 100%; border-collapse: collapse; margin-top: 18px; }
.dtable th { font: 500 11.5px var(--con); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); text-align: start; padding: 0 0 6px; border-bottom: 1px solid var(--color-divider); }
.dtable td { font: 400 13px var(--ar); padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.dtable td.muted { font-size: 12.5px; color: var(--color-neutral-700); }
/* مسافةٌ بين الأعمدة، والرقم تحت عنوانه (فحص 2026-09-18): كانت الخانات بلا حشوة جانبية والرقم
   محاذًى يسارًا وعنوانه يمينًا، فالتصق عدد الأجهزة بتاريخ «منذ» فقُرئ «٠٩/٢٠٢٦١». */
.dtable th:not(:last-child), .dtable td:not(:last-child) { padding-inline-end: 14px; }
.dtable td.num { font: 700 17.5px var(--ar); text-align: start; }
.dtable td.lat { font-family: var(--lat); font-weight: 500; }
.dtable tr.click { cursor: pointer; }
.dtable tr.click:hover td { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.tscroll { overflow-x: auto; }

/* صندوق التوصية */
.note { margin-top: 18px; border: var(--rule); padding: 12px 13px; }
.note-t { font: 500 14px var(--ar); }
.note-b { font: 400 12.5px/1.8 var(--ar); color: var(--color-neutral-700); margin-top: 4px; }
.note.warn { border-color: var(--color-accent-900); background: var(--color-accent-100); }

/* ============ شريط الإجراءات ============ */
/* شريط الإجراءات مثبَّت أسفل الشاشة كما في لوحات 1c */
.actions {
  position: fixed; bottom: 0; inset-inline: 0;
  max-width: var(--page); margin: 0 auto; z-index: 40;
  padding: 14px var(--frame-pad) 18px; background: var(--color-surface);
  display: flex; gap: 8px;
}
.shell.wide .actions { max-width: 1180px; }
/* مساحة تحت المحتوى حتى لا يختفي آخره خلف الأشرطة المثبَّتة */
.body-wrap { padding-bottom: 26px; }
/* الفراغ بقدر الشريط الفعلي (يقيسه `fitActions` في main.js)، والرقم الاحتياطي لشريط من صفّ واحد */
.shell.has-actions .body-wrap { padding-bottom: calc(var(--actions-h, 66px) + 18px); }
.act {
  flex: 1; padding: 13px 8px; text-align: center; font: 500 14.5px var(--ar);
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.act.primary { background: var(--color-accent-800); color: var(--color-bg); }
.act.primary:hover { background: var(--color-accent-700); }
.act.primary:active { background: var(--color-accent-900); }
.act.ghost { border-color: var(--color-text); color: var(--color-text); background: transparent; }
.act.ghost:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.act.ghost:active { background: color-mix(in srgb, var(--color-text) 15%, transparent); }
.act.icon { flex: none; width: 48px; padding: 13px 0; }
.act:disabled, .act[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.act svg { stroke: currentColor; flex: none; }

/* ============ نماذج ============ */
.form { margin-top: 16px; display: grid; gap: 14px; }
.f { display: flex; flex-direction: column; gap: 5px; }
.f > label { font: 500 11.5px var(--con); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.f .req { color: var(--color-accent-800); }
.in {
  width: 100%; background: transparent; border: 1px solid var(--color-neutral-400);
  border-radius: 0; padding: 10px 11px; font: 400 14.5px var(--ar); color: var(--color-text);
}
.in:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.in:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.in[aria-invalid="true"] { border-color: var(--color-accent-900); border-width: 2px; }
textarea.in { min-height: 84px; resize: vertical; line-height: 1.8; }
select.in { cursor: pointer; }
.err { font: 500 12px var(--ar); color: var(--color-accent-900); }
.hint { font: 400 12px var(--ar); color: var(--color-neutral-700); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* حقول التاريخ لها عرض داخلي أدنى يدفع الصف خارج الشاشة — اسمح لها بالانكماش */
.f, .in { min-width: 0; }
@media (max-width: 430px) { .f-row { grid-template-columns: 1fr; } }

/* اختيار مجزّأ */
.seg2 { display: flex; border: var(--rule); }
.seg2 button {
  flex: 1; padding: 9px 6px; background: transparent; border: none; cursor: pointer;
  font: 400 13px var(--ar); color: var(--color-neutral-700);
  border-inline-start: 1px solid var(--color-divider);
}
.seg2 button:first-child { border-inline-start: none; }
.seg2 button:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.seg2 button[aria-pressed="true"] { background: var(--color-accent-900); color: var(--color-bg); font-weight: 500; }

/* شبكة الخيارات */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.opt {
  border: 1px solid var(--color-neutral-400); padding: 12px 8px; background: transparent;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 400 13px var(--ar); color: var(--color-text); text-decoration: none;
}
.opt:hover { border-color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.opt[aria-pressed="true"] { border-color: var(--color-accent-900); border-width: 2px; background: var(--color-accent-100); font-weight: 500; }
.opt svg { stroke: var(--color-accent-700); }

/* ============ فتات الخبز ============ */
.crumb { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.crumb a, .crumb button {
  font: 400 12.5px var(--ar); color: var(--color-neutral-700); background: none; border: none;
  cursor: pointer; padding: 2px 4px; text-decoration: none;
}
.crumb a:hover, .crumb button:hover { color: var(--color-accent-800); text-decoration: underline; }
.crumb svg { stroke: var(--color-text); flex: none; }

/* ============ الشعار 2b ============ */
.brand { display: inline-flex; align-items: center; gap: 14px; }
/* سطر الاسم يتّسع لنقطتَي الياء تحته — بسطرٍ مضغوط (1) تركبان على الاسم اللاتيني (كما في صورة الشعار) */
.brand-name { display: block; font: 600 30px/1.45 var(--brand); color: var(--color-accent-900); text-align: start; }
.brand-lat {
  display: block; font: 500 11.5px/1 var(--con); letter-spacing: .30em; color: var(--color-accent);
  direction: ltr; text-align: right; white-space: nowrap;
  margin-right: -.30em; /* تباعد الحرف الأخير يدفع السطر عن حافة الاسم العربي */
}
/* الشريط العلوي: العلامة و«بيتي» وتحتها «BAYTI ASSISTANT» صغيرةً — الشعار نفسه مصغّرًا */
.topbar-name { display: flex; flex-direction: column; gap: 1px; }
.topbar-name > span:first-child { line-height: 1.35; }
.topbar-lat {
  font: 500 8px/1 var(--con); letter-spacing: .22em; color: var(--color-accent);
  direction: ltr; text-align: right; white-space: nowrap;
  margin-right: -.22em;
}

/* ============ الحالات ============ */
.state { padding: 34px 16px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.state svg { stroke: var(--color-neutral-400); }
.state-t { font: 500 15.5px var(--ar); }
.state-b { font: 400 13px/1.8 var(--ar); color: var(--color-neutral-700); max-width: 34ch; }
.state .act { flex: none; padding-inline: 22px; margin-top: 6px; }

/* هيكل التحميل */
.sk { background: var(--color-neutral-200); animation: pulse 1.15s ease-in-out infinite; }
.sk-line { height: 11px; margin-bottom: 9px; }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
.sk-block { height: 74px; margin-top: 14px; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none } }

/* شريط دون اتصال */
.offline-bar {
  background: var(--color-accent-900); color: var(--color-bg);
  padding: 7px var(--frame-pad); font: 500 12.5px var(--ar);
  display: flex; align-items: center; gap: 8px; flex: none;
}
.offline-bar svg { stroke: var(--color-bg); flex: none; }

/* قفل Plus */
.lock { border: var(--rule); padding: 16px 14px; margin-top: 14px; text-align: center; }
.lock-t { font: 700 16px var(--ar); }
.lock-b { font: 400 13px/1.8 var(--ar); color: var(--color-neutral-700); margin: 5px 0 12px; }
.lock .act { display: inline-flex; flex: none; padding-inline: 22px; }

/* ============ إشعارات ============ */
.toasts { position: fixed; bottom: 86px; inset-inline-start: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--color-accent-900); color: var(--color-bg); border: 1px solid var(--color-accent-900);
  padding: 11px 14px; font: 500 13px var(--ar); max-width: 300px;
  display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-md);
  animation: rise .18s ease-out;
}
.toast.err { background: var(--color-bg); color: var(--color-accent-900); border-width: 2px; }
.toast svg { flex: none; stroke: currentColor; }
@keyframes rise { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none } }

/* ============ الحوار ============ */
.backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--color-accent-900) 46%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 70;
}
.modal { background: var(--color-bg); border: var(--rule); box-shadow: var(--shadow-lg); width: 100%; max-width: 360px; padding: 18px 18px 16px; }
.modal-t { font: 700 17.5px var(--ar); }
.modal-b { font: 400 14px/1.8 var(--ar); color: var(--color-neutral-700); margin-top: 7px; }
.modal-a { display: flex; gap: 8px; margin-top: 18px; }
/* معاينة صورة الفاتورة — داخل النافذة وفي نموذج الفاتورة الجديدة */
.file-prev { margin-top: 12px; border: var(--dash); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.file-prev img { display: block; width: 100%; max-height: 42vh; object-fit: contain; background: var(--color-neutral-100, #eee); }
.file-prev .file-pdf { padding: 22px 10px; text-align: center; font: 700 15px var(--ar); border: var(--rule); }
.file-prev .file-meta { font: 400 13px/1.6 var(--ar); color: var(--color-neutral-700); overflow-wrap: anywhere; }
.file-prev .file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* صور طلب الفني — أربع مصغّرات في صفّ، تتّسع للجوال */
.photo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.photo-tile { position: relative; aspect-ratio: 1; border: var(--rule); overflow: hidden; background: var(--color-neutral-100, #eee); }
.photo-tile .photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-tile .photo-x { position: absolute; inset-block-start: 4px; inset-inline-start: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(29, 45, 61, .85); color: #fff; font: 700 16px/26px var(--ar); cursor: pointer; }
.photo-tile .photo-missing { display: flex; height: 100%; align-items: center; justify-content: center; text-align: center; font: 400 12px var(--ar); color: var(--color-neutral-700); padding: 4px; }
.photo-add { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: var(--dash); background: none; color: var(--color-accent-700); font: 400 12.5px var(--ar); cursor: pointer; }

/* ============ لوحة الإدارة ============ */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 16px; border: var(--rule); }
.kpi { padding: 14px 13px; border-inline-start: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider); }
.kpi:nth-child(-n+2) { border-top: none; }
.kpi:nth-child(2n+1) { border-inline-start: none; }
.kpi-l { font: 500 11.5px var(--con); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.kpi-v { font: 700 26px/1.2 var(--ar); color: var(--color-accent-800); margin-top: 3px; }
.kpi-d { font: 400 12px var(--ar); color: var(--color-neutral-700); }
.bars { margin-top: 16px; display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; }
.bar-l { font: 400 12.5px var(--ar); color: var(--color-neutral-700); }
.bar-t { height: 12px; border: 1px solid var(--color-neutral-400); }
/* ‏<span> سطري لا يقبل العرض ولا الارتفاع — بدونه يبقى ملء الشريط بعرض صفر */
.bar-f { display: block; height: 100%; background: var(--color-accent-700); }
.bar-v { font: 500 12.5px var(--lat); color: var(--color-text); }

/* ============ الاستجابة ============ */
@media (min-width: 720px) {
  :root { --sheet-pad-x: 26px; --sheet-pad-y: 24px; --frame-pad: 24px; }
  body { font-size: 16px; }
  .sheet-title { font-size: 24px; }
  .sec-no { font-size: 52px; }
  .row { font-size: 15px; }
  .row-title { font-size: 15px; }
  .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; align-items: start; }
  .actions { padding: 18px var(--frame-pad) 22px; }
  .act { flex: none; padding-inline: 30px; }
  .act.stretch { flex: 1; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .kpi:nth-child(-n+4) { border-top: none; }
  .kpi:nth-child(2n+1) { border-inline-start: 1px solid var(--color-divider); }
  .kpi:nth-child(4n+1) { border-inline-start: none; }
  .grid3 { grid-template-columns: repeat(4, 1fr); }
  .score-n { font-size: 68px; }
  .toasts { inset-inline-start: 24px; bottom: 92px; }
}
@media (max-width: 719px) {
  .cols2 > * + * { margin-top: 20px; }

  /* على الجوال: شريط سفلي ثابت بدل ألسنة تمرّر أفقيًا فيختفي آخرها */
  .tabstrip-wrap { display: none; }
  /* الشريط السفلي داكن بلون العلامة: كان بأرضية الورقة نفسها فيذوب فيها،
     ولا يعرف الإصبع أين تنتهي الصفحة ويبدأ التنقّل. والداكن يفصله بنظرة،
     ويطابق أشرطة عناوين الأقسام فيبقى النظام واحدًا. */
  /* شريط أزرق فاتح. والنصّ داكن لا أبيض: أبيض على هذا الأزرق تباينه ١٫٩:١ —
     أي غير مقروء في الشمس ولا لضعيف البصر. والداكن عليه ٧:١. */
  .bottomnav {
    display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 50;
    max-width: var(--page); margin: 0 auto;
    background: var(--color-accent-400);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bnav {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    padding: 7px 2px 8px; text-decoration: none; text-align: center;
    font: 500 11px var(--ar); color: var(--color-accent-900);
    border-top: 3px solid transparent; white-space: nowrap;
  }
  /* خطّ فاصل بين الأقسام: بدونه يقرأ الإصبع الشريط صفًّا واحدًا فيخطئ الهدف.
     `inline-start` لا `left`، فيقع بين كل قسمين مهما كان اتجاه الصفحة.
     وصار داكنًا لأن الأبيض يختفي على أرضية فاتحة. */
  .bnav + .bnav { border-inline-start: 1px solid color-mix(in srgb, var(--color-accent-900) 30%, transparent); }
  .bnav svg { opacity: .9; }
  .bnav:active { background: var(--color-accent-300); }
  /* القسم الحالي يُقلَب: كتلة داكنة بنصّ أبيض على شريط فاتح — أوضح فرق ممكن */
  .bnav[aria-current="page"] {
    color: var(--color-bg); background: var(--color-accent-900);
    border-top-color: var(--color-accent-900); font-weight: 700;
  }
  .bnav[aria-current="page"] svg { opacity: 1; }

  /* شريط الإجراءات يقف فوق الشريط السفلي لا تحته */
  .actions { bottom: 58px; }
  .body-wrap { padding-bottom: 76px; }
  .shell.has-actions .body-wrap { padding-bottom: calc(var(--actions-h, 66px) + 58px + 18px); }
  .toasts { bottom: 132px; }
}

/* ============ المحادثة (§9) ============ */
/* فقاعات على إيقاع 1c: بلا زوايا مستديرة، والفرق بين الطرفين في المحاذاة
   والحدّ الجانبي لا في لون فاقع — الورقة تبقى ورقة. */
.thread {
  margin-top: 14px; display: flex; flex-direction: column; gap: 10px;
  max-height: 52vh; overflow-y: auto; padding-inline-end: 4px;
}
.msg {
  max-width: 78%; border: 1px solid var(--color-neutral-400);
  border-inline-start: 3px solid var(--color-neutral-400);
  padding: 9px 11px; background: transparent;
}
.msg.mine {
  align-self: flex-end;
  border-color: var(--color-accent-700);
  border-inline-start-color: var(--color-accent-700);
  background: var(--color-accent-100);
}
.msg-b { font: 400 14px/1.8 var(--ar); margin: 0; white-space: pre-wrap; word-break: break-word; }
.msg-t { display: block; margin-top: 4px; font: 400 11px var(--ar); color: var(--color-neutral-700); }

/* الإشعار غير المقروء — علامة على الحافة لا لون فاقع */
.row.unread { border-inline-start: 3px solid var(--color-accent-700); padding-inline-start: 9px; }
.row.unread .row-title { font-weight: 700; }

/* شارة العدّ في الشريط العلوي */
.topbar-act .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--color-accent-900); color: var(--color-bg);
  font: 700 10.5px var(--ar); margin-inline-start: 2px;
}

/* زرّ الرجوع في فتات المسار — مساحة لمس كافية على الجوال */
.crumb-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-inline-start: -6px;
  padding: 0; background: none; border: none; cursor: pointer; flex: none;
}
.crumb-back:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.crumb-back:active { background: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.crumb-back svg { stroke: var(--color-text); }

/* أزرار الشريط العلوي الأيقونية (الجرس · الإعدادات) — مربّعة بمساحة لمس كافية */
.topbar-act.icon { padding: 6px; min-width: 30px; justify-content: center; }

/* الشريط العلوي على الشاشات الضيّقة: الوسم لا ينكسر سطرين، والمساعد أيقونة
   وحدها — اسمه معروف من موضعه، والمساحة أنفع للأقسام. */
.topbar-tag { white-space: nowrap; }
@media (max-width: 430px) {
  .topbar-act:not(.icon) span { display: none; }
  .topbar-act:not(.icon) { padding: 6px; min-width: 30px; justify-content: center; }
}

/* ============ الأقسام المطويّة (حسابي) ============ */
/* العنوان شريط مظلَّل يُضغط. البيانات لا تُعرض حتى تُطلَب — من يفتح حسابه
   لا يريد كل شيء دفعة واحدة، ولا أن تُعرض بياناته لمن نظر إلى شاشته. */
.fold { border: 1px solid var(--color-neutral-400); margin-top: 10px; }
.fold + .fold { margin-top: 8px; }
.fold-h {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 12px; background: var(--color-accent-800); color: var(--color-bg);
  list-style: none; user-select: none;
}
.fold-h::-webkit-details-marker { display: none; }
.fold-h:hover { background: var(--color-accent-900); }
.fold-no { font: 400 17px/1 var(--con); color: var(--color-accent-400); flex: none; }
.fold-t { font: 500 14.5px var(--ar); flex: 1; }
.fold-x { stroke: var(--color-bg); flex: none; transition: transform .16s ease; }
.fold[open] .fold-h { border-bottom: none; }
.fold[open] .fold-x { transform: rotate(180deg); }
.fold-b { padding: 4px 12px 14px; }
@media (prefers-reduced-motion: reduce) { .fold-x { transition: none; } }

/* ============================================================
   «البيت في صفحة» — طبقة الشكل (2026-10-01)
   قرار صاحب المشروع: «قم بتعديل التصميم لما اقترحته أنت».
   تُغيَّر لغة الشكل وحدها — لون وخط وفاصل — ولا تُمَسّ بنية شاشة
   ولا سطر سلوك: كل قاعدة فوق تقرأ توكِنات، فيكفي إعادة تعريفها.
   الورق والحبر والنحاس بدل الأزرق: الملف ورقةٌ تُقرأ لا لوحةُ تحكّم.
   ============================================================ */
:root {
  /* الورق والحبر */
  --color-bg: #faf7f0;         /* الورقة */
  --color-surface: #efe9dc;    /* ما حولها */
  --color-text: #1a1714;       /* الحبر */
  --color-divider: color-mix(in srgb, #1a1714 14%, transparent);

  /* محايدات دافئة — النصّ الثانوي عند 700 تباينه ٤٫٩:١ على الورقة */
  --color-neutral-100: #faf7f0;
  --color-neutral-200: #ece4d4;
  --color-neutral-300: #e0d8c8;
  --color-neutral-400: #cabea6;
  --color-neutral-500: #a89b83;
  --color-neutral-600: #8a8073;
  --color-neutral-700: #6b6354;
  --color-neutral-800: #4a443a;
  --color-neutral-900: #2b2720;

  /* النحاس — لون التوقيع، وما كان أزرق صار نحاسًا أو حبرًا */
  --color-accent: #8a5f23;
  --color-accent-100: #f5efe0;
  --color-accent-200: #ead9bb;
  --color-accent-300: #ddc8a0;
  --color-accent-400: #d9c79f;
  --color-accent-500: #b98f4a;
  --color-accent-600: #a0742e;
  --color-accent-700: #8a5f23;
  --color-accent-800: #6f4c1c;
  --color-accent-900: #241f18;

  /* التسميات بوجه الواجهة نفسه: وجهٌ لاتيني مكثَّف على نصّ عربي يفكّك
     حروفه المتصلة. ويبقى --lat لاتينيًّا لأنه للرموز التي تُنسَخ. */
  --con: 'Noto Kufi Arabic', 'Barlow Condensed', system-ui, sans-serif;
  --dash: 1px dashed var(--color-neutral-300);
}

/* العمود النحاسي — توقيع الورقة */
.sheet { border-inline-start: 2px solid var(--color-accent-700); }
.sheet-rule { background: var(--color-accent-700); height: 2px; }
.sheet-title { font-weight: 600; letter-spacing: -.01em; }

/* الأرقام الكبيرة خفيفة: الرقم يُقرأ بحجمه لا بثقله */
.score-n { font: 200 62px/.85 var(--ar); color: var(--color-text); }
.score-n.sm { font-size: 32px; line-height: 1; }
.kpi-v { font: 300 28px/1.2 var(--ar); color: var(--color-text); }
.dtable td.num { font: 300 19px var(--ar); }
.sec-no { font-weight: 200; color: var(--color-accent-600); white-space: nowrap; }
.fold-no { color: var(--color-accent-300); }

/* التسميات نحاسية صغيرة، وتباعدها ضيّق فلا تتفكّك الحروف العربية */
.sec-label:not(.sec-band), .dtable th, .f > label, .kpi-l {
  letter-spacing: .02em; color: var(--color-accent-700); font-weight: 500;
}
.topbar-tag { letter-spacing: .02em; }

/* الزرّ الأساسي نحاسيّ */
.act.primary { background: var(--color-accent-700); }
.act.primary:hover { background: var(--color-accent-800); }
.act.primary:active { background: var(--color-accent-900); }

/* العلامة بالحبر لا باللون */
.topbar-brand, .brand-name { color: var(--color-text); }
.topbar-brand:hover { color: var(--color-accent-700); }