/* =========================================================================
   T-146 المرحلة 2 · ب · /x «ملف يُبنى أمامك» بنظام الشبكة
   فوق grid/grid.css. المنطق في x/app.js كما هو حرفياً (القطاعات، ?sector=، utm، السجل المقيس، الأمثلة الحية)،
   والحركة كما هي (الكتابة، رسم الشبكة من نقطة النقر، دخول الأقسام). الغلاف وحده تغيّر:
   خانات بحدود 1px، زوايا قائمة، سكك بين الأقسام، وجسم من نقاط يتشكّل للقطاع المختار
   السماوي: لا لون نص ولا حد هنا؛ الإشارة الوحيدة نقطة النبض في AP (من المحرك)، و--pm-cyan يبيضّ
   ملاحظة: html لا يحمل الصنف live هنا (غيره glive)، لأن .live اسم إطار المثال الحي في app.js
   ========================================================================= */
html:root { --pm-cyan: #FFFFFF; --dir: -1; --logh: 52px; --x-pad: clamp(18px, 2.6vw, 40px) }
html[dir="ltr"] { --dir: 1 }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { min-block-size: 100svh; color: var(--t1); line-height: 1.85; background-image: none; padding-block-end: calc(var(--logh) + env(safe-area-inset-bottom, 0px)) }
/* الشبكة الثابتة: مثبّتة على الشاشة مثل طبقة الرسم (#grid)، فتنطبق خطوطهما مهما مُرّرت الصفحة */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top }
::selection { background: var(--w); color: var(--ink) }
.lat { direction: ltr; unicode-bidi: isolate; font-feature-settings: "tnum" }

/* ---------- طبقة الرسم من نقطة النقر (PulseMotion.gridDraw): الخطوط نفسها تضيء حول النقطة ---------- */
.grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0 }
.grid.is-on { opacity: 1 }
.grid > i { position: absolute; inset: 0; display: block;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .085) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .085) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #000 0, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #000 0, #000 30%, transparent 70%);
  clip-path: circle(0% at var(--gx, 50%) var(--gy, 50%)) }
.grid.is-drawn > i { clip-path: circle(150% at var(--gx, 50%) var(--gy, 50%)) }

/* ---------- الترويسة: خانات كما في الرئيسية ---------- */
.bar { z-index: 10 }
.bar__brand .lat { letter-spacing: .14em; font-weight: 700; font-size: 13px }
.bar .snd { inline-size: var(--bar); padding: 0 !important; justify-content: center; flex: none }
.snd svg { inline-size: 22px; block-size: 22px; display: block }
.snd .wave { opacity: 0; transition: opacity .4s var(--ease) }
.snd .off { opacity: 1; transition: opacity .4s var(--ease) }
.snd[aria-pressed="true"] { background: rgba(255, 255, 255, .08); color: var(--w) }
.snd[aria-pressed="true"] .wave { opacity: 1 }
.snd[aria-pressed="true"] .off { opacity: 0 }
@media (hover: hover) and (pointer: fine) { .bar .snd:hover { background: rgba(255, 255, 255, .05); color: var(--w) } }
@media (max-width: 379px) { .bar__brand .lat { display: none } }

/* ---------- المسرح ---------- */
.stage { position: relative; z-index: 1; inline-size: min(100% - var(--gut) * 2, 1180px); margin-inline: auto }

/* ---------- 1 · الفتح: خانة الكتابة والقطاعات، وخانة الجسم ---------- */
.boot { min-block-size: calc(100svh - var(--bar) - var(--logh)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(20px, 5vh, 56px) }
body.is-built .boot { min-block-size: 0; padding-block-end: 0 }
.boot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) }
.boot__txt { flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(22px, 4vh, 40px); padding: var(--x-pad); min-block-size: clamp(380px, 56vh, 560px) }
body.is-built .boot__txt { min-block-size: 0 }
.boot__obj { position: relative; min-block-size: clamp(380px, 56vh, 560px) }
body.is-built .boot__obj { min-block-size: 280px }
.boot__line { font-family: var(--ard); font-weight: 600; font-size: clamp(34px, 6.4vw, 84px); line-height: 1.3; min-block-size: 1.3em; color: var(--t1) }
body.is-built .boot__line { font-size: clamp(26px, 3.6vw, 46px) }
.boot__line .cr { display: inline-block; inline-size: clamp(3px, .3vw, 5px); block-size: .86em; background: var(--w); vertical-align: -.1em; margin-inline-start: .16em; animation: xblink 1.15s steps(1, end) infinite }
@keyframes xblink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.boot__ask { display: grid; gap: clamp(14px, 2.4vw, 22px) }
.boot__q { color: var(--t2); font-size: clamp(16px, 1.6vw, 20px); max-inline-size: 24em }
.boot__hint { color: var(--t3); font-size: 13.5px; line-height: 1.75; max-inline-size: 40em }
/* القطاعات: أربع خانات بخط واحد بينها */
.sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.sector { --l: var(--line-s); box-shadow: 1px 0 0 0 var(--l), 0 1px 0 0 var(--l), 1px 1px 0 0 var(--l), 1px 0 0 0 var(--l) inset, 0 1px 0 0 var(--l) inset;
  position: relative; text-align: start; overflow: hidden; isolation: isolate; padding: 16px 18px 14px; min-block-size: 88px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 10px; transition: background-color .3s var(--ease) }
.sector::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--w); transform: scaleX(0); transform-origin: calc(50% + 50% * var(--dir)) 50%; transition: transform .55s var(--ease) }
.sector:hover, .sector:focus-visible { background: rgba(255, 255, 255, .05) }
.sector:hover::after, .sector:focus-visible::after { transform: scaleX(1) }
.sector.is-on { background: rgba(255, 255, 255, .08) }
.sector.is-on::after { transform: scaleX(1) }
.sector:active { transform: scale(.98) }
.sector__l { font-family: var(--ard); font-weight: 600; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; color: var(--t1) }
.sector__k { grid-column: 2; grid-row: 1; align-self: start; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--t4); transition: color .3s var(--ease) }
.sector:hover .sector__k, .sector.is-on .sector__k { color: var(--t1) }
@media (min-width: 1000px) { body:not(.is-built) .sectors { grid-template-columns: 1fr 1fr } }

/* الكود الزخرفي في خانات الجسم */
.xobj .code--t { top: 10px; right: 12px } /* rtl-ok: زخرفة لاتينية بموضع ثابت */
.xobj .code--b { bottom: 10px; left: 12px } /* rtl-ok */

/* ---------- السكك بين الأقسام (من grid.css، والنقطة تنزل مع التمرير بـgrid/pages/x.js) ---------- */
.profile .rail { inline-size: 100% }

/* ---------- 2 · الملف ---------- */
.profile { display: block }
.sec { position: relative }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block-end: 14px }
.eyebrow { font-size: 13px; letter-spacing: .02em; color: var(--t3); margin-block-end: 14px }
.h1 { font-family: var(--lat); font-weight: 700; font-size: clamp(46px, 8.4vw, 112px); line-height: 1; letter-spacing: -.04em; direction: ltr; text-align: start; color: var(--t1) }
html[dir="rtl"] .h1 { text-align: right }
.h1__sub { display: block; font-family: var(--ard); font-weight: 600; direction: rtl; letter-spacing: 0; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.5; margin-block-start: 18px; color: var(--t1) }
.lead { color: var(--t2); font-size: clamp(16px, 1.6vw, 20px); max-inline-size: 30em; margin-block-start: 22px }
.lead--2 { color: var(--t3); font-size: clamp(15px, 1.4vw, 18px); margin-block-start: 8px }
.h2 { font-family: var(--ard); font-weight: 600; font-size: clamp(28px, 3.3vw, 50px); line-height: 1.4; color: var(--t1) }
.h2 .hl, .h1__sub .hl { white-space: nowrap }
.h2__note { display: block; font-family: var(--ar); font-weight: 400; font-size: 14px; color: var(--t3); line-height: 1.7; margin-block-start: 8px }

/* الرأس: خانة الاسم وخانة الجسم (AP) */
.head__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) }
.head__txt { flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--x-pad); min-block-size: clamp(360px, 50vh, 520px) }
.head__obj { position: relative; min-block-size: clamp(360px, 50vh, 520px) }

/* الركائز: خانات، اثنتان في الصف على المكتب */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.pillar { --l: var(--line-s); box-shadow: 1px 0 0 0 var(--l), 0 1px 0 0 var(--l), 1px 1px 0 0 var(--l), 1px 0 0 0 var(--l) inset, 0 1px 0 0 var(--l) inset; position: relative }
.pillar__in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px 26px; block-size: 100% }
.pillar__k { font-family: var(--lat); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--t4); direction: ltr; margin-block-end: 18px }
.pillar__w { font-family: var(--ard); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.4; color: var(--t1) }
.pillar__d { color: var(--t2); font-size: 15px; line-height: 1.8; max-inline-size: 34em }
.pillar__f { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--t1); margin-block-start: auto; padding-block-start: 12px; max-inline-size: 34em }
.pillar__f::before { content: ""; inline-size: 7px; block-size: 7px; background: var(--w); flex: 0 0 auto; margin-block-start: .66em }

/* المثال الحي: الإطار خانة، والشرح خانة، والأدوات خانات */
.live { display: grid; gap: 0 }
.live__side { --l: var(--line-s); box-shadow: 1px 0 0 0 var(--l), 0 1px 0 0 var(--l), 1px 1px 0 0 var(--l), 1px 0 0 0 var(--l) inset, 0 1px 0 0 var(--l) inset; padding: 22px 24px }
.live__frame { border: 1px solid var(--line-s); border-radius: 0; overflow: hidden; background: #000; block-size: min(72svh, 620px) }
.live__side p { color: var(--t2); font-size: 14.5px; line-height: 1.85; max-inline-size: 34em }
.live__side p + p { margin-block-start: 12px; color: var(--t3) }
.live__side b { color: var(--t1); font-weight: 600 }
.live__tools { display: flex; flex-wrap: wrap; gap: 0; margin-block-start: 20px }
.tool { --l: var(--line-s); box-shadow: 1px 0 0 0 var(--l), 0 1px 0 0 var(--l), 1px 1px 0 0 var(--l), 1px 0 0 0 var(--l) inset, 0 1px 0 0 var(--l) inset; font-size: 13px; padding: 8px 14px; color: var(--t2) }
.live__act { display: flex; flex-wrap: wrap; gap: 0; margin-block-start: 16px }
.live__act[hidden] { display: none }
.tbtn { font-size: 13.5px; min-block-size: 44px; padding: 0 16px; border: 1px solid var(--line-2); margin-inline-end: -1px; color: var(--t1); transition: background-color .3s var(--ease), color .3s var(--ease) }
@media (hover: hover) and (pointer: fine) { .tbtn:hover { background: rgba(255, 255, 255, .06) } }
.tbtn[aria-pressed="true"] { background: var(--w); color: var(--ink); border-color: var(--w) }
.tbtn:active { transform: scale(.97) }

/* الختام: خانة النص، والزر كتلة بيضاء، وخانة الجسم */
.end__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) }
.end { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: var(--x-pad) }
.end .lead { margin-block-start: 6px }
.end__obj { position: relative; min-block-size: clamp(320px, 44vh, 460px) }
.cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; margin-block-start: 26px; min-block-size: 64px; padding-inline: 26px;
  background: var(--w); color: var(--ink); font-family: var(--ard); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; transition: background-color .3s var(--ease), transform 160ms var(--ease) }
.cta i { font-style: normal; font-family: var(--lat); transition: transform .4s var(--ease) }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: rgba(255, 255, 255, .86) } .cta:hover i { transform: translateX(calc(5px * var(--dir))) } }
.cta:active { transform: scale(.97) }
.cta:focus-visible { outline-offset: 4px }
.end__note { color: var(--t3); font-size: 13px; margin-block-start: 12px; max-inline-size: 40em }
/* مسافة ختام تكفي لتصل خانة الجسم الأخيرة إلى منتصف الشاشة فيتشكّل الجسم فقاعة */
.xfoot { block-size: clamp(120px, 34vh, 360px) }

/* ---------- 3 · سجل البناء: عمود على الحافة في المكتب، شريط في الأسفل على الجوال ---------- */
/* T-147: شريط السجل الثابت في الأسفل كان يغطي ما يصله التركيز بـTab (S وM وL في المثال الحي)، فتُحجز مساحته عند التمرير إلى العنصر المركَّز */
html { scroll-padding-block-end: calc(var(--logh) + 16px + env(safe-area-inset-bottom, 0px)) }
.log { position: fixed; z-index: 20; inset-inline: 0; inset-block-end: 0; background: var(--ink); border-block-start: 1px solid var(--line-s); padding-block-end: env(safe-area-inset-bottom, 0px) }
.log__bar { inline-size: 100%; block-size: var(--logh); display: flex; align-items: center; gap: 12px; padding-inline: var(--gut); font-size: 13px; color: var(--t2); text-align: start }
.log__dot { inline-size: 7px; block-size: 7px; background: var(--w); flex: 0 0 auto }
.log.is-live .log__dot { animation: xpulse 1.6s var(--ease) infinite }
@keyframes xpulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.log__title { white-space: nowrap; color: var(--t1) }
.log__now { flex: 1 1 auto; min-inline-size: 0; color: var(--t3); font-size: 12px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start }
.log__chev { inline-size: 9px; block-size: 9px; border-inline-end: 1.5px solid var(--t3); border-block-start: 1.5px solid var(--t3); transform: rotate(-45deg); flex: 0 0 auto; transition: transform .4s var(--ease) }
html[dir="rtl"] .log__chev { transform: rotate(45deg) scaleX(-1) }
.log__bar[aria-expanded="true"] .log__chev { transform: rotate(135deg) }
html[dir="rtl"] .log__bar[aria-expanded="true"] .log__chev { transform: rotate(-135deg) scaleX(-1) }
.log__list { display: none; padding: 2px var(--gut) 16px; max-block-size: 46svh; overflow: auto; counter-reset: logline }
.log.is-open .log__list { display: block }
.log__batch .pm-log__bar { display: none }
.log__batch .pm-log, .log__batch .pm-log__list { display: block; margin: 0; padding: 0; border: 0; background: none }
.log__batch .pm-log__row { grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding-block: 9px; border-block-end: 0; border-block-start: 1px solid var(--line); font-size: 13.5px; line-height: 1.7 }
.log__list > .log__batch:first-child .pm-log__row:first-child { border-block-start: 0 }
.log__batch .pm-log__i { grid-column: 1; grid-row: 1; font-size: 0; color: transparent }
.log__batch .pm-log__i::after { counter-increment: logline; content: counter(logline, decimal-leading-zero); font-family: var(--lat); font-size: 11px; letter-spacing: .08em; color: var(--t4); direction: ltr; white-space: nowrap }
.log__batch .pm-log__t { grid-column: 2; grid-row: 1; color: var(--t2) }
.log__batch .pm-log__v { grid-column: 2; white-space: normal; font-family: var(--lat); font-weight: 700; color: var(--t1); font-size: 12.5px; font-variant-numeric: tabular-nums }
html[dir="rtl"] .log__batch .pm-log__v { text-align: right }
.log__batch.is-last .pm-log__row:last-child .pm-log__t { color: var(--t1); font-size: 14px }
.log__batch.is-last .pm-log__row:last-child .pm-log__i::after { color: var(--t1) }
.log__list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding-block: 9px; border-block-start: 1px solid var(--line); font-size: 13.5px; line-height: 1.7; color: var(--t2) }
.log__list li:first-child { border-block-start: 0 }
.log__list li.is-last { color: var(--t1); font-size: 14px }
.log__list .log__v { display: inline-block; margin-inline-start: 6px; font-family: var(--lat); font-weight: 700; color: var(--t1); font-size: 12.5px; font-variant-numeric: tabular-nums }
.log__t { font-family: var(--lat); font-size: 11px; letter-spacing: .08em; color: var(--t4); direction: ltr; white-space: nowrap }

@media (min-width: 1180px) {
  html { scroll-padding-block-end: 0 }
  body { padding-block-end: 0; padding-inline-start: clamp(250px, 21vw, 320px) }
  .log { inset-block: 0; inset-inline-end: auto; inset-inline-start: 0; inline-size: clamp(250px, 21vw, 320px); border-block-start: 0; border-inline-end: 1px solid var(--line-s); display: flex; flex-direction: column }
  .log__bar { block-size: var(--bar); padding-inline: 24px; border-block-end: 1px solid var(--line-s); flex: 0 0 auto }
  .log__now, .log__chev { display: none }
  .log__list { display: block; padding: 8px 24px 24px; max-block-size: none; flex: 1 1 auto }
  .boot { min-block-size: calc(100svh - var(--bar)) }
}

/* ---------- تابلت ---------- */
@media (max-width: 1100px) {
  .live__side { order: -1 }
}
@media (min-width: 860px) {
  .live { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: start }
  .live__side { order: 0; position: sticky; inset-block-start: calc(var(--bar) + 16px) }
  .live__frame { block-size: min(78svh, 700px) }
}

/* ---------- جوال ---------- */
@media (max-width: 768px) {
  body::before, .grid > i { background-size: 48px 48px }
  .boot { min-block-size: 0; justify-content: flex-start; padding-block-start: 16px }
  .boot__grid, .head__grid, .end__grid { grid-template-columns: 1fr }
  .boot__obj { order: -1; min-block-size: 0; aspect-ratio: 1 / .62 }
  body.is-built .boot__obj { min-block-size: 0; aspect-ratio: 1 / .5 }
  .boot__txt { min-block-size: 0; padding: 20px }
  .head__txt { min-block-size: 0; padding: 22px 20px }
  .head__obj { min-block-size: 0; aspect-ratio: 1 / .72 }
  .end { padding: 22px 20px }
  .end__obj { min-block-size: 0; aspect-ratio: 1 / .7 }
  .pillars { grid-template-columns: 1fr }
  .pillar__in { padding: 18px 20px 22px }
  .pillar__k { margin-block-end: 8px }
  .shead { flex-direction: column; align-items: stretch }
  .cta { inline-size: 100% }
  .xobj .code--t { display: none }
  .sector { min-block-size: 76px; padding: 14px 14px 12px }
}

/* ---------- حركة مخفّضة: الصفحة كاملة وساكنة ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .grid { opacity: 1 }
  .grid > i { clip-path: none }
  .boot__line .cr { display: none }
  .cta i { transform: none !important }
  .sector:active, .cta:active, .tbtn:active { transform: none }
}
html.is-reduced .grid { opacity: 1 }
html.is-reduced .grid > i { clip-path: none }
html.is-reduced .boot__line .cr { display: none }

/* ---------- T-152 · رابط اللغة، والنسخة الإنجليزية /en/x ---------- */
.bar .xlang { inline-size: var(--bar); padding: 0 !important; justify-content: center; flex: none; font-family: var(--lat); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--t1) }
@media (hover: hover) and (pointer: fine) { .bar .xlang:hover { background: rgba(255, 255, 255, .05); color: var(--w) } }
html[lang="en"] .bar .xlang { font-family: 'Readex Pro', Tahoma, sans-serif; font-size: 16px; letter-spacing: 0 }
html[lang="en"] { --ar: 'Manrope', 'Segoe UI', system-ui, sans-serif; --ard: 'Manrope', 'Segoe UI', system-ui, sans-serif }
html[lang="en"] body { font-family: var(--lat); line-height: 1.6 }
html[lang="en"] .skip [lang="en"] { display: inline }
html[lang="en"] .boot__line { font-weight: 700; letter-spacing: -.035em; line-height: 1.1; min-block-size: 1.1em }
html[lang="en"] .h1__sub { direction: ltr; font-weight: 700; letter-spacing: -.03em; line-height: 1.25 }
html[lang="en"] .h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.45 }
html[lang="en"] .h2__note { letter-spacing: 0 }
html[lang="en"] .sector__l, html[lang="en"] .pillar__w { font-weight: 700; letter-spacing: -.02em; line-height: 1.25 }
html[lang="en"] .pillar__d, html[lang="en"] .pillar__f, html[lang="en"] .live__side p { line-height: 1.6 }
html[lang="en"] .cta { font-weight: 700; letter-spacing: -.01em }
/* الأمثلة الحية تعرّف خطوطها على جذرها، فتُبدَّل هناك */
.sx[lang="en"] { --sx-ar: 'Manrope', 'Segoe UI', system-ui, sans-serif; --sx-ard: 'Manrope', 'Segoe UI', system-ui, sans-serif; line-height: 1.55 }
.ax[lang="en"] { --ax-ar: 'Manrope', 'Segoe UI', system-ui, sans-serif; --ax-ard: 'Manrope', 'Segoe UI', system-ui, sans-serif; line-height: 1.55 }
.cx[lang="en"] { --cx-ar: 'Manrope', 'Segoe UI', system-ui, sans-serif; --cx-ard: 'Manrope', 'Segoe UI', system-ui, sans-serif; line-height: 1.55 }

@media print { .log, .snd, .xlang, .grid, canvas.field, body::before { display: none } }