/* ═══════════════════════════════════════════════════════
 *  api-demo.css — ورقة صفحة /api-demo (تطبيق «مناديبي» التوضيحي)
 *  ⚠️ أُعيد بناؤها على لغة تصميم الصفحة الرئيسية (٩ سبتمبر ٢٠٢٦).
 *     كانت لوحة داكنة قائمة بذاتها: أرضية #0b1220 وكحلي #0f172a/#1e293b
 *     وبنفسجي #6366f1 وتدرّجان وزوايا 16px وأوزان 900/800/700 — أي موقع ثانٍ
 *     كامل بجوار الموقع. الآن: أبيض/لوح · أزرق #2563EB · حدّ 1px بلا ظلّ إلا
 *     للأجسام المحاكاة · وسلّم أوزان CLAUDE.md.
 *  ⚠️ الصفحة **لا تمرّ بـincludes/header.php** (مستند HTML قائم بذاته بسياسة CSP
 *     خاصّة تسمح بتضمين إطار التوقيع) — فلا تستطيع إعلان $v4Base. البديل:
 *     الصفحة تربط wtq-v4-base.css بنفسها قبل هذه الورقة، ورموزها تأتي منه.
 *  ⚠️ ولأن الترويسة غائبة فالخطّ لم يكن يُحمَّل أصلًا: body تعلن 'Alexandria'
 *     بلا @font-face في أي ورقة تحمّلها الصفحة، فكانت تُرسم بـSegoe/Tahoma —
 *     أي بخطّ غير خطّ الموقع. تعريفات الخطّ منقولة هنا كما في blog.css.
 *  ⚠️ ما بداخل <pre>/<code> لم يُمسّ: الخطّ الأحاديّ والمحتوى كما هما،
 *     والسطح وحده صار فاتحًا كما في صفحات المطوّرين العشر (developers-api.css:83).
 * ═══════════════════════════════════════════════════════ */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/alexandria-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/alexandria-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/alexandria-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ═══ الرموز ═══
   الرموز الأصلية تبقى أسماءً بديلة لرموز wtq-v4-base.css لأن الترميز والسكربت
   يستعملانها: var(--pri) في سمة stroke لأيقونة السجل، وvar(--mut) في سمة style
   تبنيها دالة renderReps داخل السكربت (لا تُمسّ). */
:root{--pri:var(--blue);--pri2:var(--blue-700);--mut:var(--muted);--card:var(--paper);--bg:var(--panel);--ok:var(--green);
  /* الأخضر المقروء: #16A34A أبيضُ عليه 3.30:1 و#15803D على --green-50 = 4.49:1 (قِيسا في
     features-custom-contracts.css). فالنصّ الأخضر يأخذ #166534 (6.31:1) والزرّ #15803D (5.02:1). */
  --green-700:#15803D; --green-800:#166534;
  /* سطح الأشرطة العلوية للأجسام المحاكاة — موحَّد مع .bbar و.fbar و.code-bar */
  --bar:#F6F6F4; --bar-line:#E6E6E2; --bar-dot:#DCDCD8;
  --focus:rgba(37,99,235,.14)}
*{box-sizing:border-box}
body{margin:0;background:var(--panel);color:var(--ink);font-family:'Alexandria','Segoe UI',Tahoma,Arial,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}

/* ═══ رأس الصفحة — h1 ثم سطر شرح، كرأس القسم في الرئيسية ═══
   كان شريطًا داكنًا بتدرّج، اسمه في <div> بوزن 900 وسطر الشرح شارةً بيضاوية
   مدفوعة إلى الطرف الآخر (margin-inline-start:auto). صار: سطح أبيض بحدّ سفلي
   رفيع · بلاطة أيقونة زرقاء 44px · h1 بوزن 800 · وسطر الشرح lead بوزن 300. */
.top{background:#fff;border-bottom:1px solid var(--line);padding:56px 0 44px}
.top .tin{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.logo{display:flex;align-items:center;gap:13px;margin:0;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.7;color:var(--ink)}
.logo .m{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r);background:var(--blue);display:flex;align-items:center;justify-content:center;color:#fff}
.logo .m svg{width:22px;height:22px}
.top .note{display:block;margin:16px 0 0;padding:0;background:none;border:0;border-radius:0;
  font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;color:var(--muted);max-width:62ch}

/* ═══ بيان التنبيه — حالة دلالية بالأحمر ═══
   كان مربّعًا كحليًّا داكنًا (#3b1414) بنصّ وردي بوزن 700 وزاوية 10px، وقواعده
   كلها في سمة style مضمَّنة. صار بياناً على نمط الكتالوج: علامة جانبية واحدة
   بلون الحالة، ونصّ بلون المتن كي يبقى تباينه فوق 4.5:1 (الأحمر على --red-50
   يقيس 4.41:1 — دون الحدّ، فيبقى الأحمر للعلامة والحدّ لا للنصّ). */
.alertwrap{max-width:var(--maxw);margin:0 auto;padding:28px 22px 0}
.alertnote{background:var(--red-50);border:1px solid var(--red-line);border-inline-start:3px solid var(--red);
  border-radius:var(--r);padding:16px 20px;color:var(--ink);font-size:clamp(13.5px,1.1vw,15px);font-weight:400;line-height:1.9}

/* ═══ مساحة العمل — سطح لوح تحمل بطاقات بيضاء (تناوب الأسطح) ═══ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:28px 22px 96px;display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
/* عمود الخطوات: فجوة 24px كعمود الرحلة في الرئيسية، والموصّل يملأها كاملة */
.col{display:flex;flex-direction:column;gap:24px}

/* ═══ خطوات مرقّمة ═══
   البطاقتان ١ و٢ تحملان رقمًا في عنوانهما أصلًا — فهما خطوتان لا بطاقتان.
   المربّع الأزرق 26px برقم أبيض 500 هو .v4-num، والموصّل المتقطّع يربطهما. */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 24px}
/* 38px = حشو البطاقة 26 + نصف الرقم 13 → الخطّ على محور الرقم */
.col .card + .card::before{content:"";position:absolute;bottom:100%;inset-inline-start:38px;width:0;height:24px;border-inline-start:1.5px dashed #C9D3EA}
.card h2{display:flex;align-items:center;gap:11px;margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.7;color:var(--ink)}
.card h2 .n{width:26px;height:26px;flex:0 0 auto;border-radius:var(--r);background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.card h2 svg{flex:0 0 auto}
.card .d{margin:0 0 18px;max-width:62ch;color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.9}

/* ═══ النماذج ═══ */
label{display:block;margin:16px 0 7px;font-size:12.5px;font-weight:500;line-height:1.7;color:var(--ink)}
label[for="tpl"]{margin-top:20px}
input,select{width:100%;padding:11px 13px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:400;line-height:1.7}
input.ltr{direction:ltr;text-align:left}
input::placeholder{color:var(--muted);font-weight:300}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus)}
input[readonly]{background:var(--panel);color:var(--muted)}
select:disabled{background:var(--panel);color:var(--muted);cursor:not-allowed}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;
  border:1px solid var(--blue);border-radius:var(--r);padding:12px 24px;font-family:inherit;font-size:14px;font-weight:500;
  line-height:1.7;cursor:pointer;transition:background .16s,border-color .16s,transform .15s}
.btn:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.sm{padding:8px 14px;font-size:12.5px}
.btn.gho{background:#fff;border-color:#C7D7FB;color:var(--blue)}
.btn.gho:hover{background:var(--blue-50);border-color:var(--blue)}
.btn.ok{background:var(--green-700);border-color:var(--green-700)}
.btn.ok:hover{background:var(--green-800);border-color:var(--green-800)}
.addbtn{margin-top:14px}
/* صفّ الاتصال — كان في سمة style مضمَّنة */
.connrow{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.conn{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--line-2)}
.dot.on{background:var(--green)}
.hint{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  color:var(--muted);font-size:12.5px;font-weight:400;line-height:1.9}

/* ═══ جدول المناديب ═══ */
table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}
th{padding:0 8px 10px;text-align:start;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:500;line-height:1.7}
td{padding:13px 8px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);font-weight:400}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:500}
/* شرائح الحالة — لوحة الحالات الأربع بتباين مقيس ≥4.5:1 على أرضيّتها */
.st{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--line);border-radius:var(--r);
  font-size:12px;font-weight:500;line-height:1.7;white-space:nowrap}
.st.new{background:var(--panel);color:var(--muted)}
.st.wait{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
.st.view{background:var(--blue-50);color:var(--blue);border-color:#D6E2FB}
.st.done{background:var(--green-50);color:var(--green-800);border-color:#CDEBD6}
.acts{display:flex;gap:7px;flex-wrap:wrap}

/* ═══ سجل الأحداث — نافذة محاكاة ═══
   كان بطاقة داكنة عادية. صار الجسم المحاكى الوحيد في الصفحة: شريط علويّ بثلاث
   نقاط وظلّ .v4-win — لأنه العرض الحيّ لما يجري بين نظام العميل وواجهة وثائق. */
.logcard{position:sticky;top:22px;padding:0;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45)}
.logbar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--bar);border-bottom:1px solid var(--bar-line)}
.logbar i{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--bar-dot)}
.logcard h2{padding:20px 22px 0}
.logcard .d{margin:0 0 16px;padding:0 22px}
.log{max-height:560px;overflow:auto;border-top:1px solid var(--line);font-size:12.5px;direction:ltr}
.le{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;border-bottom:1px solid var(--line)}
.le:last-child{border-bottom:0}
.le .t{flex:0 0 auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:400;line-height:1.9;color:var(--muted)}
.le .m{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:400;line-height:1.9;word-break:break-all}
.le.req .m{color:var(--blue)}
.le.res .m{color:var(--green-800)}
.le.err .m{color:var(--red)}
.le.ev .m{color:var(--amber)}
/* ⚠️ عيّنة الاستجابة داخل <pre> لا تُمسّ: خطّها الأحاديّ (الافتراضي للوسم) ومحتواها
   كما هما، والسطح وحده صار فاتحًا كسطح الكود في صفحات المطوّرين. */
.le pre{margin:6px 0 0;padding:10px 12px;background:var(--bar);border:1px solid var(--bar-line);border-radius:var(--r);
  max-height:150px;overflow:auto;font-size:12px;line-height:1.85;color:var(--ink);white-space:pre-wrap;word-break:break-all}
.empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px;font-weight:400;line-height:1.9}

/* ═══ نافذة التوقيع المضمَّنة ═══ */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(11,11,11,.45)}
.modal.in{display:flex}
.mbox{display:flex;flex-direction:column;width:min(560px,100%);height:min(80vh,760px);overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45)}
.mbox .mh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}
.mbox .mh b{font-size:14px;font-weight:500;line-height:1.7}
.mbox iframe{flex:1;width:100%;border:0}
.x{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-family:inherit;font-size:16px;line-height:1;transition:.15s}
.x:hover{background:var(--blue-50);border-color:var(--blue);color:var(--blue)}
.x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media(max-width:920px){
  .wrap{grid-template-columns:1fr}
  .logcard{position:static}
}
@media(max-width:640px){
  .top{padding:40px 0 32px}
  .top .tin{padding:0 18px}
  .alertwrap{padding:22px 18px 0}
  .wrap{padding:22px 18px 64px}
  .card{padding:22px 20px 20px}
  .col .card + .card::before{inset-inline-start:32px}
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}