/* أوبتس — حلقة الواجهة المستمرة 2026-11-13 (docs\phase2\ui-loop-2026-11-13\LOG.md).
   طبقة فوق ux-web: ترتيب ومقاسات ووضوح بس. الألوان من رموز الصفحة (ما نضيف لون)، وما تنشال ميزة. كل قسم = دورة بالسجل. */

/* c01 الشاشة الأولى بالجوال: البدايات الأربع شبكة 2×2 متساوية (جانت 3 + وحدة يتيمة) */
@media (max-width: 760px) {
  .hero .ux-starts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .hero .ux-starts button { justify-content: center; min-width: 0; padding: 0 10px; }
  .hero .ux-starts button > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* c02 رأس الصفحة: نقطة «متصل» الخضرة تختفي لما كلشي تمام (تبقى للقارئ الصوتي)، وتطلع بس وقت الاتصال أو الانقطاع */
.conn.good { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* c03 شريط «صفحة جاهزة» بالجوال: اسم الملف بسطر كامل، والزرّين تحته نص بنص بمتناول الإبهام (جان «landi…») */
@media (max-width: 600px) {
  .sitebar { row-gap: 10px; }
  .sitebar .sb-t { flex: 1 1 auto; }
  .sitebar .sb-name { flex: 1 1 100%; order: 1; white-space: normal; overflow-wrap: anywhere; }
  .sitebar > .btn { order: 2; flex: 1 1 0; min-height: 44px; display: inline-grid; place-items: center; }
  .sitebar .sb-note { order: 3; }
}

/* c05 تبويبات الإعدادات بالجوال: 44px للمس، وظل على الحافة يبيّن إن اكو تبويبات بعد */
@media (pointer: coarse) { .set-layout .tabs button { min-height: 44px; } }
@media (max-width: 760px) {
  .set-layout .tabs.ul-more-end { -webkit-mask-image: linear-gradient(to var(--ul-end, right), #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to var(--ul-end, right), #000 calc(100% - 36px), transparent); }
  .set-layout .tabs.ul-more-start { -webkit-mask-image: linear-gradient(to var(--ul-start, left), #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to var(--ul-start, left), #000 calc(100% - 36px), transparent); }
  .set-layout .tabs.ul-more-start.ul-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}

/* c07 الأجهزة: عنوان «الحاسوب السحابي» ما يتكرر داخل بطاقته وقت عرض الترقية، و«هواتف مربوطة» عنوان صغير بسطر وحده */
#ccCard:has(> a.btn):has(> .note-p) > .cc-h { display: none; }
#ccCard > a.btn { margin-top: 10px; }
.dev-sub > small.sub:first-child { display: block; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; }
.dev-sub > small.sub:first-child + .dev-p { border-top: 0; padding-top: 0; }

/* c08 اسم النموذج برأس الجوال: كلمة «OPTES» تنطوي (الصفحة كلها أوبتس) حتى يبين الاسم المميّز «1.2 Super Lite» كامل
   (جان يطلع «…2 Super Lite» أو «OPTES 1.2 S…»). القائمة والعنوان الكبير يبقون بالاسم الكامل. */
@media (max-width: 760px) { #modelName .ul-pfx { display: none; } }

/* c11 «شنو راح يتبعث؟» و«التفاصيل» (الموافقات وبطاقة الخطأ): نفس سهم «متقدم» بدل مثلث المتصفح (◄) */
:is(.rp-tech, .ap-more, .errbox details) > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
:is(.rp-tech, .ap-more, .errbox details) > summary::-webkit-details-marker { display: none; }
:is(.rp-tech, .ap-more, .errbox details) > summary::after { content: ""; width: 7px; height: 7px; border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform var(--op-base, .18s); }
:is(.rp-tech, .ap-more, .errbox details)[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
:is(.rp-tech, .ap-more, .errbox details) > summary:hover { color: var(--accent); }
@media (pointer: coarse) { :is(.rp-tech, .ap-more, .errbox details) > summary { min-height: 44px; } }

/* c12 اختيار النموذج بالجوال: ورقة من تحت بمتناول الإبهام (جانت قائمة صغيرة فوك)، صفوف 52px، والخلفية تعتم.
   ضغطة على الخلفية تسكّرها (ui-loop.js) وما توصل للي جوّاها. */
@media (max-width: 760px) {
  .top .model-menu { position: fixed; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); inset-inline: 8px; min-width: 0; max-height: 62vh;
    padding: 8px; border-radius: var(--op-r-xl, 24px); z-index: 60; animation: ulSheet var(--op-base, .18s) var(--op-ease, ease) both;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55), var(--op-e3, 0 12px 32px rgba(0, 0, 0, .4)); }
  /* طبقة شفافة تمسك الضغطة برّه الورقة (العتمة نفسها ظل الورقة، حتى ما تغطي لون الورقة بالفاتح) */
  .top .model-menu::before { content: ""; position: fixed; inset: 0; z-index: -1; background: transparent; }
  .top .model-menu button { min-height: 52px; font-size: 16px; padding: 0 14px; }
  .top .model-menu .mm-note { font-size: 13px; padding: 8px 14px; }
}
@keyframes ulSheet { from { opacity: 0; } to { opacity: 1; } }   /* بلا transform: يخلي الخلفية الثابتة تغطي الشاشة من أول لحظة */
@media (prefers-reduced-motion: reduce) { .top .model-menu { animation: none; } }
:root[data-motion="reduce"] .top .model-menu { animation: none; }

/* c15 (قرار المنسّق/المالك) سطر «أول حرف · الكلي» تحت كل رد: مخفي للزبون، يطلع بس إذا شغّل «سرعة الرد» بالإعدادات ← النموذج ← متقدم */
.stats > span:not([class]) { display: none; }
:root.ul-timing .stats > span:not([class]) { display: inline; }

/* c16 (قرار المنسّق/المالك) موافقة حذف الملفات: «ارفض» هو الآمن فيصير الأساسي الأبيض، و«اسمح هالمرة» حد أحمر */
.ask.ap.ap-del .acts [data-choice="deny"] { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; font-weight: 600; }
.ask.ap.ap-del .acts [data-choice="once"] { background: transparent; color: var(--danger); border: 1px solid var(--danger); font-weight: 500; }
.ask.ap.ap-del .acts [data-choice="once"]:hover:not(:disabled) { filter: none; background: var(--panel2); }

/* c17 الإعدادات ← النموذج (جوال): «النموذج الافتراضي» جان ينقص لـ«TES 1.2 Super Lite» — العنوان فوك والقائمة بعرض كامل تحته */
@media (max-width: 600px) {
  label.row:has(> #setModel) { flex-wrap: wrap; row-gap: 8px; }
  label.row:has(> #setModel) > span { flex: 1 1 100%; }
  #setModel { width: 100%; max-width: 100%; }
}