/* ============================================================ قالب تَك · components.css — الطبقة المبنيّة (الطاولة، ليلًا) Reads AFTER tokens.css on
. THE ONE RULE UNDER EVERY CLASS BELOW: GAME UI IS LIT. APP UI IS PRINTED. So every pressable body wears FOUR light facts, never three: ١ نور داخلي فوق ٢ ظل داخلي تحت ٣ ظل تماس ضيّق ٤ ظل محيط واسع and its border is a GRADIENT (padding-box fill + border-box gradient) — never a flat colour. A flat fill plus a hairline plus a faint inset, all on one plane, is precisely what reads as 2012. That was «basic»: an elevation failure, not a taste failure. ---- الحزّة: القانون شرطٌ لا عدد ---- كان هنا مكتوبًا «بيوته الآن **أربعة** … فالتوقيع يتكرّر **سبع** مرّات» وبدرجتين «٥٨ و٣٦»، وMOLD تقول «**ثلاثة** مواضع»، وKIT تقول «**ستّ**»، والدفتر ما هو في ولا عدّة منها ودرجته ٣٢ لا ٣٦. عددٌ في ترويسة هو رقمٌ يعيش في أربعة ملفات، ويبات مؤرّشفًا مع أول commit. فالعدد انحذف من هنا ومن MOLD، والقائمة تُقرا من الملف نفسه: grep -nE '^\s*--nt:[0-9]|clip-path:(path|polygon)\([^)]' design/tak/components.css (والـpolygon شرط: أول صياغة لهذا الـgrep كانت ‎--nt:‎ و‎path(‎ وحدهما، فتسقط منها ظهر الورقة — وهي أكثر بيت يتكرّر على الشاشة. وقاعدةٌ تُعِدّ ناقصًا أخطر من عددٍ مضبوط باليد، لأنها تُقرا موثوقة. و‎[^)]‎ يستبعد ذكر الاسمين في الشروح.) والشرط الباقي شرطان لا يزيغان: ١ · الدرجة تُقرا «مقصوصة» أو ما تنحزّ. على سطحٍ درجته بمقاس نصف قطره تُقرا خدشًا أو عطبَ رسم. مرفوضة بالقياس على ورقة الكرسي (٢١px) مرّتين — §٨٫٥. ٢ · القصّ والقناع يمحوان ظلّ العنصر الخارجي **و‎outline‎ه** (الرسم: filter ثم clip-path ثم mask). فالجسم المحزوز اللي ينضغط ما يملك ظلّه: الشكل على الجسم، والتماس والمحيط والوهج وحلقة التركيز على غلافه. والغائر ينجو من القناع فيبقى مكانه. مقيسة في §٨ وفي ‎_probe/clipshadow.html‎. ONE bloom per screen · ONE idle loop per screen · ONE accent. One sun, upper-right, FIXED: every offset is physical px and every gradient angle is in deg. NOTHING mirrors under RTL — only spacing uses logical properties. Never letter-spacing on Arabic. line-height >= 1.35 on every control. overflow:hidden is banned on any Arabic container. Image slots bound by the app shell: --im-weave نسيج الطاولة (weave-najdi.jpg) — والقاعدة اللي تستعملها تعيش في غلاف المنتج جنب الإعلان، لا هنا: الـurl() جوّا خاصيّة مخصّصة ينحلّ نسبةً لملف الاستعمال. ============================================================ */ .tak,.tak *,.tak *::before,.tak *::after{box-sizing:border-box} /* منع تزييف الأوزان يعيش في tokens.css مع بقيّة قرارات الكسوة — بيت واحد لا بيتين. */ /* ============================================================ ٠ · الأرض — ثلاث طبقات ثابتة. ما يحطّ أحد شيئًا على z 0–2. الخامة تعطي الإضاءة، واللوح يعطي الصبغة: مزج luminosity يصحّح زيتون الخامة (H104) إلى أخضرنا (H154). لا تستعملها خام. ولا طبقة حبيبات: تباين إضاءة النسيج نفسه يكسر التشريط، والحبيبات إشارة تعتيق — ممنوعة. ============================================================ */ /* ═══ وليش ما فيه ‎background-image‎ هنا · ٢٠٢٦-٠٧-٢٩ · الجولة ١ ═══ كان هذا السطر ‎background-image:var(--im-weave), …‎ — أي إن القالب يستهلك فتحة خامة. وقانون القالب نفسه (‎MOLD.md‎ §الفتحات) يمنعها بالحرف، والسطر كان يخالفه من أول يوم: الـ‎url()‎ جوّا خاصيّة مخصّصة ينحلّ عند الملف **المستعمِل**، فإعلان الكسوة ‎url("../assets/weave-najdi-v3.jpg")‎ ينحلّ من ‎design/tak/‎ إلى ‎design/assets/…‎ = ٤٠٤. وما بان العطب لأن كل مستهلك حقيقي (‎styles/tak.css‎ · ‎parts.html‎ · ‎starter.html‎ · ‎_probe/ground.html‎) يعيد كتابة ‎background-image‎ بعده فيغلبه بالتتالي — طبقةٌ كاذبة تحت طبقةٍ صادقة. انمسكت بـ‎node _probe/a-url.mjs‎، لا بالعين. والقالب الآن يملك كل شي **إلا** الصورة: اللون والمقاس والتكرار والمزج. والرابط يجي من البيت اللي يعرف وين الملفّات. ولو ما انربطت الفتحة، الأرض تطلع ‎--s-table‎ سادًّا — نقصٌ يُشاف، مو ٤٠٤ ما يقول شي. */ .tk-ground{position:fixed;inset:0;z-index:0;pointer-events:none; background-color:var(--s-table); background-size:var(--weave-tile) var(--weave-tile), cover; background-repeat:repeat,no-repeat; background-blend-mode:luminosity,normal} .tk-lamp{position:fixed;inset:0;z-index:1;pointer-events:none; mix-blend-mode:screen;background-image:var(--lamp)} .tk-fall{position:fixed;inset:0;z-index:2;pointer-events:none; background-image:var(--falloff)} /* ============================================================ ١ · الضغطة — تُلبَس مع أي جسم يُضغط الجسم يغطس صوب ظله: المحيط ينشال ويجي بداله داخلي. نزول ٨٠ms ease-in، ورجعة ٣٠٠ms بنبضة. اللاتماثل هو الحيلة. ============================================================ */ .tkpress{ transition: transform var(--t-up) var(--spring), box-shadow var(--t-up) var(--spring), background-image var(--t-tint) linear, color var(--t-tint) linear} .tkpress:active,.tkpress.is-active{ transform:scale(.96) translateY(2px); transition: transform var(--t-down) var(--ease-in), box-shadow var(--t-down) var(--ease-in)} /* ============================================================ ٢ · الزر الثاني — الأساس. أثاث مقصوص من الطاولة نفسها. ============================================================ */ /* ٨٠٠ للأدوات — زين لها وجه ٨٠٠ حقيقي */ .tkb{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em; min-height:50px;padding-block:9px;padding-inline:22px; border:1px solid transparent;border-radius:var(--r-btn); background-color:transparent; background-image:var(--lamp-catch),var(--face-rise),var(--edge); background-origin:border-box;background-clip:padding-box,padding-box,border-box; box-shadow:var(--rim),var(--sh2); color:var(--tx); font-family:var(--fu);font-weight:var(--w-control);font-size:1.0625rem;line-height:1.45; text-align:center;cursor:pointer;appearance:none;-webkit-appearance:none; -webkit-tap-highlight-color:transparent;touch-action:manipulation} /* فوقه اليد = يطلع درجة. الأثاث ما يتحرّك — الضغطة وحدها تتحرّك */ /* ═══ التحويم خلف ‎@media (hover:hover)‎ ═══════════════════════ ٢٠٢٦-٠٧-٣١ · الدورة ٣ · الجولة ٢. كانت وجوه التحويم تُشحن بلا حارس، وعلى اللمس هذا **عطبٌ مقيس لا ذوق**: المتصفّح يورّث ‎:hover‎ لآخر عنصرٍ انلمس ويخلّيه عليه لين تنلمس نقطةٌ ثانية — فاللاعب يضغط «أنت والخوي»، والصفحة تنتقل، ويرجع فيلقى الزرّ لابسًا وجه التحويم بوهجه الأوسع. حالةٌ ما لها مدخلٌ ولا مخرج على جهازٍ ما فيه مؤشّر. و‎.is-hover‎ داخل الحارس معها بقصد: هي صنف **لوح الأجزاء**، وظيفتها تفرّج وجه التحويم — ووجهٌ ما يوجد على اللمس ما يُفرَّج على اللمس. ولا سطر انتكرّر: الإعلانات مكانها، والحارس حولها، فما فيه قيمةٌ عاشت في مكانين. */ @media (hover:hover){ .tkb:hover,.tkb.is-hover{background-image:var(--lamp-catch),var(--face-lift),var(--edge); box-shadow:var(--rim),var(--sh3)} } .tkb:focus-visible,.tkb.is-focus{outline:var(--ring);outline-offset:var(--ring-gap)} .tkb:focus:not(:focus-visible){outline:none} /* ---- سلّم الضغطة، ممسوحًا كامله (٢٠٢٦-٠٧-٢٨ · الجولة ٥) ---- الشرط: الساكن والمضغوط ما يشحنان نفس المحيط، وإلا فالضغطة «اختفاء» لا «غطس». المسح: .tkb sh2 (٤ طبقات) → sh1 (٢) ينزل درجتين ✓ .tkb-1 sh3 + وهج → sh1 + وهج غاطس ينزل درجتين ✓ .tkb-q sh1 → sh1 ما ينزل ✗ → sh0 .tkchip sh1 → sh1 ما ينزل ✗ → sh0 والموقوف يشحن sh1 كذلك، وهو ليس حالة ضغط: transform:none. */ .tkb:active,.tkb.is-active{box-shadow:var(--sink),var(--sh1)} /* الموقوف = مُطفأ، مو معتّم. يبطّل يكون جسمًا عليه ضوء */ /* عطب مقيس ومصلَّح (٢٠٢٦-٠٧-٢٨ · الجولة ٣): هذي القاعدة تعلن طبقتَي خلفية بينما .tkb فوقها تعلن قصًّا بثلاث قيم. القائمة تنقصّ لأول طبقتين (padding-box,padding-box)، فـ--edge-quiet ينرسم *تحت* تعبئة سادّة وما يظهر أبدًا، والحلقة الشفّافة تورّي اللوح من ورا. أي قاعدة تعيد إعلان background-image بعدد طبقات مختلف عن أصلها لازم تعيد إعلان background-clip معها. */ .tkb:disabled,.tkb[aria-disabled="true"]{ background-image:linear-gradient(196deg,var(--s-panel-lo),var(--s-panel-lo)),var(--edge-quiet); background-clip:padding-box,border-box; box-shadow:inset 0 1px 0 rgba(var(--lit-rgb),.05),var(--sh1); color:var(--tx4);cursor:not-allowed;transform:none} /* ---- سطران داخل الزر ---- */ .tkb-stack{flex-direction:column;gap:1px;padding-block:11px} /* ١٦px مو ١٤: هذا السطر يحمل معنى (هدف الصكّة) فهو نصّ سند، وأرضية النصّ العربي السند ١٦px مكتوبة في tokens.css §الحبر. كان ١٤ — أي القالب يكسر أرضيّته المكتوبة على أظهر عنصر بالردهة. */ .tkb-stack .sub{display:block;font-weight:var(--w-support);font-size:1rem;line-height:1.75;color:var(--tx2)} /* على وجه النحاس الحبر غامق — الفاتح عليه يختفي. وكان هنا «٥٫٥٢:١ مقيسة على المركّب». الرقم انشال ٢٠٢٦-٠٧-٢٩: السطر السند انحذف من الردهة بحكم صاحب البيت، فما بقي على الشاشة جسمٌ يشحن ‎.tkb-1 .sub‎ — والقاعدة باقية للقالب لا للردهة. رقمٌ ما له جسمٌ يُقاس عليه اليوم ليس رقمًا يُنشر. والقانون اللي فوقه (الغامق على النحاس) قانونٌ، ما هو قياسًا. */ .tkb-1 .sub{color:var(--ink2)} /* ---- الثانوي المنكمش — يقعد على كلمته، ما يملأ اللوح. هذا هو اللي يعطي التفاوت الهندسي: زرّان بعرض كامل ما يقدران يختلفان إلا بالارتفاع، فالفرق يبقى في الارتفاع وحده. ---- ولا رقم هنا، وهذي **الثالثة** اللي ينشال فيها ---- ٢٠٢٦-٠٧-٢٩ · الدورة ٣ · الجولة ١. كان مكتوبًا هنا ‎#duoButton‎ ٣٠٦×٥٦ و‎#soloButton‎ ١٢٣٫٥٦×٥٠، ومنها «الأساسي ٢٫٧٧× مساحةً و١٫١٢× ارتفاعًا» — مقيسةً بيدٍ أمينة يوم قيست. وقبلها كان منشورًا ٤٫٤٢× و١٫٦٥×، وانشالا لمّا انحذف السطر السند وانكمش الأساسي. ثم **رجع الأساسي بطوله** بحكم صاحب البيت («الكبير كان أحسن»)، فصار ‎.panel .tkb-1{min-block-size:clamp(56px,56px+12*--g,88px)}‎ — وسقط الصندوق والنسبة معًا، وبقي النصّ. فالدرس مو «انتبه»: النسبة **مشتقّة من صندوقين يتحرّكان**، وكل مرّة تُكتب تنتظر حكمًا واحدًا من صاحب البيت يكذّبها. و٢٫٧٧ كانت **تحت قانون الـ٣×** نفسه المكتوب في §٣ تحت — أي إن هذا التعليق كان ينشر مخالفةً بوصفها وصفًا. الرقم يُقرا من الرِّج، ما ينكتب هنا: node _probe/a-squint.mjs (كتلةً ومساحةً، بالحجب) _probe/a-rects.html?w=390&h=844 (STABLE=true، ثم الصندوقان) والقانون نفسه في ‎MOLD.md‎ قانون ٢، ومنقولٌ عنه في §٣ تحت. ---- */ .tkb-2{display:flex;width:fit-content;margin-inline:auto} /* flex لا inline-flex، وإلا ما نفع التوسيط */ /* ============================================================ ٣ · الزر الأساسي — النحاس. وحده يحمل الوهج واللمعة. ---- قانون الوزن — يُنقل عنه، ما ينكتب هنا ---- ٢٠٢٦-٠٧-٢٩. نصّه الوحيد في ‎design/tak/MOLD.md‎ قانون ٢: الفعل الأساسي يفوق **أكبر أداة أخرى على شاشته** ٣–٥ أضعاف مساحةً، على كل بوابة — والمقيس ضدّه يُسمّى **دورًا لا صنفًا**، لأن قانونًا يسمّي ‎.tkb-2‎ يسقط يوم ينتقل الصنف. وكان مكتوبًا هنا عكسه («ضدّ ‎.tkb-2‎ وحده») وفي ‎styles/tak.css‎ مثله، فثلاثة ملفّات وقانون واحد بمحتوًى متعاكس. انشال النصّ من الاثنين، وبقي الإسناد. الفرق مقصود ومكتوب: أثقل جسم بعد الفعل الأساسي في الردهة هو **الرزمة** (‎.tkfan‎)، والفعل الأساسي ما يفوقها بثلاثة أضعاف. هذي ملاحظة تُسجَّل، مو امتثالًا يُدّعى — ولو أردناها امتثالًا لصار العلاج تصغير الرزمة أو تكبير الزر، أي إعادة تصميم. ولا رقم من هذي النسب ينكتب هنا نصًّا: الأرقام كلها من الرِّج المحصَّن، تُولَّد ولا تُنسخ — ‎_probe/a-rects.html?w=390&h=844‎ (شرطه ‎STABLE=true‎) ونسبة الوجه على اللوح تعيش في جدول السلّم بـMOLD وحده، ما تنعاد. وليش انحذف الجدول اللي كان هنا: كان ينشر «٣٠٦٫٠٠×٨٨٫١١» و «١٢١٫٦٩×٥٠٫٠٠» في ثلاثة مواضع، وهما مقاسان ما عادا يتكرّران على نفس الرِّج بنفس الشرط. والحزّة على وجه الزرّ (تحت) تغيّر مساحته مرّة أخرى. رقمٌ منشور في ثلاثة ملفّات ينبَتّ عن مصدره بأول تعديل هندسي — والقاعدة المستفادة في MOLD: «رقم من رِج ما انبرهن تكراره ما هو رقمًا»، ومعها الآن: **رقمٌ يقدر الرِّج يولّده ما ينكتب نصًّا.** وتاريخ العطب باقٍ للسجلّ بلا أرقامه: القالب كان يدّعي «٣ إلى ٥ أضعاف» والمقيس وقتها بالكاد فوق الواحد؛ ومصدر المكسب إن الثانوي انكمش على كلمته، لأن زرّين بعرض كامل ما يقدران يختلفان إلا بالارتفاع. ثم انشرت أرقام مقيسة على عنصر يتحرّك (‎@keyframes tk-rise‎ يبدأ بـ‎scale(.94)‎ و‎getBoundingClientRect‎ يرجّع الصندوق *بعد* التحويل) — عرضٌ من خارج الحركة وطولٌ من داخلها في سطر واحد. ============================================================ */ /* عطب مقيس ومصلَّح (٢٠٢٦-٠٧-٢٨ · الجولة ٣) — العطب الرئيس: .tkb-1 تعلن طبقتين (وجه + حدّ)، و.tkb فوقها تعلن قصًّا بثلاث قيم. القائمة تنقصّ لطبقتين padding-box، فينرسم --edge-hot تحت النحاس السادّ وما يظهر ولا مرّة، وتبقى حلقة الـ1px الشفّافة تورّي اللوح: قيس على DPR 3 قبل الإصلاح، شريط #375D4B فوق و#345948 يسار يلفّ الشريحة الذهبية كامل. يعني الفعل الأساسي كان يُشحن «تعبئة مسطّحة + شعرة» — وهو بالحرف البناء اللي ترويسة هذا الملف تسمّيه سبب «بيسك». تأرجح حدّه كان ١٫١٨ (حلقة لوح مسطّحة)؛ بعد الإصلاح ينرسم --edge-hot فعلًا. والقاعدة العامة مكتوبة عند .tkb:disabled. */ .tkb-1{ min-height:56px;width:100%;padding-inline:28px;border-radius:var(--r-btn-1); background-image:var(--face-hot),var(--edge-hot); background-clip:padding-box,border-box; box-shadow:var(--rim-hot),var(--sh3),var(--bloom); color:var(--ink); /* غامق على حار = إشارة لعبة */ font-weight:var(--w-lead);font-size:1.3125rem;line-height:1.4; text-shadow:0 1px 0 rgba(var(--lit-hot-rgb),.28)} /* الكلمة محفورة بالنحاس */ /* التحويم خلف الحارس — العلّة مكتوبة كاملةً عند ‎.tkb:hover‎ فوق. */ @media (hover:hover){ .tkb-1:hover,.tkb-1.is-hover{ background-image:linear-gradient(196deg,var(--a-hov-hi),var(--a-hov) 52%,var(--a-hov-lo)),var(--edge-hot); box-shadow:var(--rim-hot),var(--sh3),var(--bloom-wide)} } .tkb-1:active,.tkb-1.is-active{box-shadow:var(--sink-hot),var(--sh1),var(--bloom-sunk)} .tkb-1:disabled,.tkb-1[aria-disabled="true"]{ background-image:var(--face-hot-off),var(--edge-quiet); box-shadow:inset 0 1px 0 rgba(var(--lit-hot-rgb),.10),var(--sh1); /* الوهج انشال، والنحاس باقٍ */ color:var(--ink-off);text-shadow:none;cursor:not-allowed;transform:none} .tkb-1:disabled::after,.tkb-1[aria-disabled="true"]::after{display:none} /* اللمعة — «مرّة الشمس». تنرسم بموضع خلفية على ::after، مو بـtransform داخل overflow:hidden — فما فيه ولا احتمال إن حرفًا عربيًّا أو فتحة تنقصّ بسبب نبضة خمول. */ .tkb-1::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:linear-gradient(110deg, rgba(var(--lit-sweep-rgb),0) 42%, rgba(var(--lit-sweep-rgb),.17) 50%, rgba(var(--lit-sweep-rgb),0) 58%); background-repeat:no-repeat;background-size:260% 100%; background-position:-80% 0} /* ============================================================ ٣-ب · الحزّة على الفعل الأساسي — «.tkbite» ٢٠٢٦-٠٧-٢٨ · الجولة ٥ العلّة: الفعل الأساسي أكبر جسم على الشاشة، وكان مستطيلًا ذهبيًّا بأركان مدوّرة — أي أن **التوقيع غايبٌ عن الشي اللي يُضغط**. بالتغبيش، الشكل المسيطر على الشاشة الأولى ما يفرّق عن زرّ أي لعبة ورق ثانية. والحزّة موجودة أصلًا على ثلاثة أسطح، فالبيت عنده توقيع وما يحطّه على أظهر جسم فيه. وترويسة هذا الملف كانت تقاعد الحزّة عن كل عنصر تفاعلي بحجّة «clip-path يقصّ box-shadow فيقتل الطبقات الأربع». الحجّة صحيحة في نصفها وباطلة في نتيجتها: القصّ فعلًا يمحو الظلّ **الخارجي**، لكن الغائر يبقى (ينرسم داخل الشكل ثم ينقصّ معه)، والخارجي له بيت معروف مقيس — الغلاف. مقيسة في ‎_probe/clipshadow.html‎: صندوق بظلّ، ثم نفسه بـclip-path، ثم نفسه بقناع، ثم غلافٌ يحمل الظلّ وابنٌ يحمل القناع — والرابع يرجّع الظلّ كامله. و.tkmark نفسها تشحن clip-path و‎filter:drop-shadow‎ على نفس العنصر وترسم. وليش القناع لا ‎clip-path:path()‎: مسار العلامة مطلق بالبكسل وما يتمدّد، والفعل الأساسي **سائل** — عرضه يتغيّر مع البوابة. بناء الحزّة بثلاث طبقات قناع (مربّع الحزّة مثبَّت على ‎right top‎ بضلع ‎--nt‎، وطبقتان سادّتان تغطّيان الباقي) يتمدّد بالـcalc، وهو نفسه بناء ‎.tknotch‎ و‎.tkledger‎ حرفًا بحرف. والدرجة: ‎--nt:40px‎ — عضّة ٣٠٫٣px فيزيائيًّا (‎--nt × 44/58‎، نفس حساب الدفتر). والدرجة مختارة بين اللوح والدفتر لا اعتباطًا: ترتيب الدرجات يتبع ترتيب المساحة، فاللغة تُقرا سلّمًا لا تكرارًا — والفعل الأساسي أصغر من اللوح وأكبر من الدفتر. ولا عدد مكتوب هنا: القائمة تُقرا من الملف، مثل ما تقول الترويسة — grep -nE '^\s*--nt:[0-9]|clip-path:(path|polygon)\([^)]' design/tak/components.css (كانت الصياغة ‎--nt:‎ و‎path(‎ وحدهما، و**تفوتها ظهر تَك** لأن الظهر مقصوص بـ‎polygon()‎ — وهو أكثر بيت يتكرّر على الشاشة، أربع مرّات. انبلّغت وانوسّعت هنا وفي الترويسة وفي MOLD وKIT بنفس الصياغة. وقاعدةٌ تُعِدّ ناقصًا أخطر من عددٍ باليد.) والعضّة تشيل ذهبًا ما تزيده — فميزانية اللون المحجوز تنزل، لا ترتفع. تنقاس بـ‎_probe/a-accent.py‎ على لقطة ‎a-shot.html‎. ---- والطبقات، وين راحت كل وحدة ---- الغائر (‎--rim-hot‎ / ‎--sink-hot‎) ......... باقٍ على الزرّ التماس والمحيط (‎--sh3‎) والوهج (‎--bloom‎) ... انتقلت للغلاف وdrop-shadow ما عنده انتشار (spread)، فالطبقات معاد اشتقاقها بنفس الاتجاه ونفس الترتيب: تماسٌ ضيّق بلا إزاحة، ثم شكلٌ يسار-تحت، ثم محيطٌ واسع، ثم الوهج بلا إزاحة أفقية (الإشعاع ما يطيع الشمس — نفس نصّ ‎--bloom‎). ولا طبقة بإزاحة +x: قانون الشمس. والغلاف يورث الحالة من ابنه بـ‎:has()‎، فالضغطة تنزل الظلّ والوهج معًا كما كانت تنزلهما ‎box-shadow‎ بالضبط. ---- وحلقة التركيز ---- القناع يقصّ ‎outline‎ مثل ما يقصّ الظلّ، فالحلقة انتقلت للغلاف بـ‎:has(:focus-visible)‎ وانطفت على الزرّ. أربع حالات، كلها تنرسم: ‎design/tak/parts.html‎. ═══ والحلقة كانت تعبر العضّة، وهذا درس MOLD §٦ نفسه مشحونًا مرّةً ثانية (٢٠٢٦-٠٧-٣١ · الدورة ٣ · الجولة ٢) ═══ ‎outline‎ يرسم **مستطيلًا مدوَّرًا وبس** — مهما كان شكل الجسم. فالحلقة كانت تمشي مستقيمةً فوق مربّع العضّة ٤٠×٤٠ في الركن الأعلى-يمين: خطٌّ نحاسيّ معلَّق على سرير اللوح، ما تحته زرّ. وMOLD يكتب هالدرس بالحرف عن نفس الزرّ: «الجولة ٥ حطّت الحزّة على الزرّ وشحنت حلقة تركيزٍ تتجاهلها». انتقلت الحلقة من *مقصوصةٍ* إلى *غير مقصوصة* — ومازالت ما تتبع الشكل. ---- البناء، وليش هو قطعتان لا واحدة ---- ما فيه في CSS «حدٌّ يتبع قناعًا»: ‎box-shadow‎ و‎border‎ و‎outline‎ كلها ترسم على حدّ **الصندوق**، والقناع ينقص منها بعدين — فأي حلقةٍ مقنَّعة تنفتح فجوةً عند الدرجة بدل ما تمشي معها. فالحلقة قطعتان تتلاقيان في نقطتين محسوبتين: ‎::after‎ — الحلقة على المستطيل المدوَّر (‎box-shadow‎ غائر بعرض ‎--ring-w‎ داخل صندوقٍ مُزاحٍ للخارج ‎--ring-gap + --ring-w‎)، مقنَّعةً بطبقتين سادّتين **تستثنيان مربّع الحلقة كلَّه** ‎--nt-r‎ في الركن الأعلى-يمين. ‎::before‎ — مربّع ‎--nt-r‎ نفسه، مقنَّعًا بمسارٍ **مرسومٍ خطًّا** (‎--nt-ro‎) هو خطّ منتصف الحلقة حول الدرجة. ونقطتا اللقاء ليستا تقريبًا: المسار يبدأ عند حرف المربّع الأيسر على ارتفاع منتصف الحلقة العليا بالضبط، وينتهي عند حرفه السفلي على بُعد منتصف الحلقة اليمنى بالضبط — وهما بعينهما الموضعان اللي تنتهي عندهما الطبقتان السادّتان. ---- ولماذا نصف قطرٍ جديد لكل قوس، ولا يجوز التمديد ---- الشكل مُزاحٌ للخارج ‎d‎، والإزاحة ليست تكبيرًا: القوسان المحدّبان يزيد نصفهما ‎d‎، والقوس المقعّر ينقص نصفه ‎d‎، والخطوط المستقيمة تنتقل ‎d‎. (لو مُدِّد المسار الأصلي بدل ذلك لطلع نصف المقعّر **أكبر**، وهو عكس الحقيقة.) والحساب، بالبكسل، على ‎--nt = 40‎ و‎d = --ring-gap + --ring-w/2 = 4‎ لخطّ المنتصف (المقياس ‎40/58‎، فالأنصاف الأصلية ١٤/١٢/١٤ تصير ٩٫٦٥٥/٨٫٢٧٦/٩٫٦٥٥): محدَّب ١ ٩٫٦٥٥ + ٤ = ١٣٫٦٥٥ مقعَّر ٨٫٢٧٦ − ٤ = ٤٫٢٧٦ محدَّب ٢ ٩٫٦٥٥ + ٤ = ١٣٫٦٥٥ ضلع المربّع ‎--nt + --ring-gap + --ring-w‎ = ٤٥ ثم تُردّ للـviewBox ٥٨ بضرب ‎58/45‎، والعرض ‎--ring-w‎ = ٢px يصير ‎2 × 58/45 = 2.578‎ وحدة. وهذي كلها هندسةٌ لا صبغة: اللون يجي من ‎--ring-c‎ عبر خلفيّة العنصر، والقناع أبيضُ فقط. ============================================================ */ .tkbite{ position:relative;display:block;border-radius:var(--r-btn-1); --nt:40px; /* ضلع مربّع الحزّة — ثابت بالبكسل. عضّة ٣٠٫٣ */ /* نفس المسار الخارجي المشحون في .tknotch و.tkledger حرفًا بحرف. ثلاث نسخ لهندسة وحدة — والصحيح بيت واحد في العدّة. مبلَّغ. */ --nt-o:url("data:image/svg+xml;utf8,"); filter:drop-shadow(0 2px 4px rgba(var(--sh-rgb),.48)) drop-shadow(-4px 8px 10px rgba(var(--sh-rgb),.50)) drop-shadow(-12px 21px 26px rgba(var(--sh-rgb),.42)) drop-shadow(0 8px 14px rgba(var(--a-rgb),.45)); transition:filter var(--t-up) var(--spring)} .tkbite>.tkb-1{ box-shadow:var(--rim-hot); /* الخارجي انتقل للغلاف */ -webkit-mask-image:var(--nt-o),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); mask-image:var(--nt-o),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); /* الـ‎+1px‎ ليست زخرفة — هي إصلاح درزة مقيسة. طبقتا القناع السادّتان تتلاقيان عند ‎100% − --nt‎ بالضبط. على جسم ساكن بعرض صحيح تقع الملتقى على بكسل صحيح فما تبين، لكن الضغطة ‎scale(.96)‎ تحطّها على كسر بكسل، فينزل الطرفان دون الواحد الصحيح مجموعًا وتنفتح **درزة عمودية بعرض بكسل على وجه النحاس**. مقيسة على المركّب قبل الإصلاح: عند الضغط، بكسل ‎(158,130,58)‎ داخل صفٍّ كله ‎(232,179,74)‎ — أي خطٌّ غامق يشقّ الزرّ. تراكبٌ بكسل يخلّي المجموع يعدّي الواحد فينقصّ عند الحدّ، والعمود الملغيّ أصلًا مرسومٌ في المسار نفسه فما ينتقص من الحزّة ولا بكسل. (اللوح والدفتر ما فيهما هالدرزة لأنهما ما ينضغطان — والفعل الأساسي هو أول سطح محزوز يتحوّل.) */ -webkit-mask-size:var(--nt) var(--nt),calc(100% - var(--nt) + 1px) 100%,var(--nt) calc(100% - var(--nt) + 1px); mask-size:var(--nt) var(--nt),calc(100% - var(--nt) + 1px) 100%,var(--nt) calc(100% - var(--nt) + 1px); -webkit-mask-position:right top,left top,right bottom; /* فيزيائية — ما تنقلب بالـRTL */ mask-position:right top,left top,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat} /* التحويم خلف الحارس — العلّة مكتوبة كاملةً عند ‎.tkb:hover‎ فوق. */ @media (hover:hover){ .tkbite>.tkb-1:hover,.tkbite>.tkb-1.is-hover{box-shadow:var(--rim-hot)} .tkbite:hover{ filter:drop-shadow(0 2px 4px rgba(var(--sh-rgb),.48)) drop-shadow(-4px 8px 10px rgba(var(--sh-rgb),.50)) drop-shadow(-12px 21px 26px rgba(var(--sh-rgb),.42)) drop-shadow(0 12px 20px rgba(var(--a-rgb),.55))} } .tkbite>.tkb-1:active,.tkbite>.tkb-1.is-active{box-shadow:var(--sink-hot)} .tkbite:active,.tkbite:has(>.tkb-1.is-active){ filter:drop-shadow(0 1px 2px rgba(var(--sh-rgb),.45)) drop-shadow(-1px 2px 3px rgba(var(--sh-rgb),.38)) drop-shadow(0 4px 8px rgba(var(--a-rgb),.30)); transition:filter var(--t-down) var(--ease-in)} /* الموقوف: الوهج ينشال ويبقى المحيط الأدنى — نفس ما كان يفعل ‎box-shadow:…,var(--sh1)‎ على الزرّ */ .tkbite:has(>.tkb-1:disabled),.tkbite:has(>.tkb-1[aria-disabled="true"]){ filter:drop-shadow(0 1px 2px rgba(var(--sh-rgb),.45)) drop-shadow(-1px 2px 3px rgba(var(--sh-rgb),.38))} .tkbite>.tkb-1:disabled,.tkbite>.tkb-1[aria-disabled="true"]{ box-shadow:inset 0 1px 0 rgba(var(--lit-hot-rgb),.10)} /* الحلقة على الغلاف — القناع يقصّها لو بقيت على الزرّ. و‎outline‎ انشال كليًّا: ما يعرف إلا المستطيل المدوَّر. الشرح والحساب في ترويسة هذا القسم. */ .tkbite>.tkb-1:focus-visible,.tkbite>.tkb-1.is-focus{outline:none} .tkbite{--ring-out:calc(var(--ring-gap) + var(--ring-w)); --nt-r:calc(var(--nt) + var(--ring-out)); /* خطّ منتصف الحلقة حول الدرجة — مرسومٌ خطًّا لا مملوءًا. */ --nt-ro:url("data:image/svg+xml;utf8,")} .tkbite::before,.tkbite::after{content:"";position:absolute;pointer-events:none; opacity:0;background:var(--ring-c)} /* القطعة الأولى: الحلقة على المستطيل المدوَّر، والمربّع مستثنًى. */ .tkbite::after{inset:calc(-1 * var(--ring-out)); border-radius:calc(var(--r-btn-1) + var(--ring-out)); background:none;box-shadow:inset 0 0 0 var(--ring-w) var(--ring-c); /* نفس الطبقتين السادّتين اللي في ‎.tknotch‎، بضلع ‎--nt-r‎ بدل ‎--nt‎. و‎+1px‎ درزةٌ مقيسة، نفس علّتها المكتوبة فوق عند ‎.tkbite>.tkb-1‎. */ -webkit-mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); -webkit-mask-size:calc(100% - var(--nt-r) + 1px) 100%,var(--nt-r) calc(100% - var(--nt-r) + 1px); mask-size:calc(100% - var(--nt-r) + 1px) 100%,var(--nt-r) calc(100% - var(--nt-r) + 1px); -webkit-mask-position:left top,right bottom; /* فيزيائية — ما تنقلب بالـRTL */ mask-position:left top,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat} /* القطعة الثانية: الدرجة نفسها، مربّعٌ ثابت بالبكسل فما يتمدّد. */ .tkbite::before{top:calc(-1 * var(--ring-out));right:calc(-1 * var(--ring-out)); width:var(--nt-r);height:var(--nt-r); -webkit-mask-image:var(--nt-ro);mask-image:var(--nt-ro); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .tkbite:has(>.tkb-1:focus-visible)::before,.tkbite:has(>.tkb-1.is-focus)::before, .tkbite:has(>.tkb-1:focus-visible)::after,.tkbite:has(>.tkb-1.is-focus)::after{opacity:1} /* ============================================================ ٤ · الهادي — الطبقة الثالثة. بالكاد مرفوع: حدّ متدرّج هادي، نور علوي رفيع، وظل تماس. ولا وهج. ============================================================ */ /* وجهه مقصوص من سواطه (--face-quiet)، مو غسلة نور فوق سريره. الغسلة القديمة (١٣٪→٣٪ أبيض) كانت تتلاشى للصفر عند النصف الأسفل، فالنصف الأسفل من الزر كان *هو اللوح حرفيًّا* — ومن هنا جا رقم panel:.tkb-q بثلاث نسخ متناقضة. انظر --s-quiet. */ .tkb-q{ min-height:44px;padding-inline:18px;border-radius:var(--r-btn-sm); background-image:var(--lamp-catch-q),var(--face-quiet),var(--edge-quiet); background-clip:padding-box,padding-box,border-box; box-shadow:inset 0 1px 0 rgba(var(--lit-rgb),.06),inset 0 -1px 0 rgba(var(--sh-rgb),.55),var(--sh1); /* --tx لا --tx2: بعد ما ارتفع وجه الهادي لتحقيق قانون ١٫٢٠ صار --tx2 عليه ٤٫٤٩٧ مقيسة — تحت الأرضية بشعرة، وهذي بالضبط الشعرة اللي انفتحت لها هالجولة. وهدوء الزر يعيش في سطحه ومقاسه، مو في خفوت حبره. */ color:var(--tx);font-weight:var(--w-control);font-size:1rem} /* التحويم خلف الحارس — العلّة مكتوبة كاملةً عند ‎.tkb:hover‎ فوق. */ @media (hover:hover){ .tkb-q:hover,.tkb-q.is-hover{ background-image:var(--lamp-catch),var(--face-rise),var(--edge-quiet); /* درجة وحدة فوق، مو درجتين */ box-shadow:inset 0 1px 0 rgba(var(--lit-rgb),.10),inset 0 -1px 0 rgba(var(--sh-rgb),.55),var(--sh2)} } /* الغطسة — إلى --sh0 لا إلى --sh1 (٢٠٢٦-٠٧-٢٨ · الجولة ٥). كانت الساكنة والمضغوطة تشحنان --sh1 نفسه، فالمحيط ما ينشال والجسم ما يغطس: يلبس داخليًّا وبس. وهذا العطب مفتوح من الجولة ٢ لأن علاجه ما كان في القاعدة، كان في السلّم — انظر --sh0. */ .tkb-q:active,.tkb-q.is-active{box-shadow:var(--sink),var(--sh0)} /* ---- الرقاقة — حبّة، وهدف لمس ٤٤ ---- */ .tkchip{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em; min-height:44px;padding-block:8px;padding-inline:18px; border:1px solid transparent;border-radius:var(--r-pill); background-color:transparent; background-image:var(--lamp-catch-q),var(--face-rise),var(--edge-quiet); background-origin:border-box;background-clip:padding-box,padding-box,border-box; box-shadow:var(--rim),var(--sh1); color:var(--tx2);font-family:var(--fu);font-weight:var(--w-control);font-size:.96875rem;line-height:1.45; cursor:pointer;appearance:none} .tkchip[aria-pressed="true"],.tkchip.is-sel{ background-image:none,var(--face-hot),var(--edge-hot); box-shadow:var(--rim-hot),var(--sh2);color:var(--ink)} /* نحاس، بلا وهج — الوهج واحد بالشاشة */ .tkchip:focus-visible,.tkchip.is-focus{outline:var(--ring);outline-offset:var(--ring-gap)} .tkchip:active,.tkchip.is-active{box-shadow:var(--sink),var(--sh0)} /* نفس علّة الهادي ونفس علاجها */ /* ============================================================ ٥ · الحقل — بئر محفورة بالطاولة، عكس اتجاه الزر تمامًا. التعبئة أغمق سطح بالنظام، والشفة العليا في الظل. وحدّه ما عاد مقلوبًا (٢٠٢٦-٠٧-٢٨ · الجولة ٣): بعد قانون الأرضية ما فيه بكسل حدٍّ غامق يقدر يوصل ٣:١ على هذا السرير، فالحدّ صار مضيئًا فوق أرضية مثل بقية الأدوات — والانقلاب انتقل حيث يجب أن يعيش أصلًا: --well الداخلي والوجه شبه الأسود. ثقبٌ مخروط في معدن، حافّته تلمع وقاعه أسود. الزر يجي لك، والحقل يروح عنك — وكلاهما تحت نفس المصباح. ٥٢px طول · ١٦٫٥px (فوق ١٦ فما فيه تكبير iOS) · leading 1.5 = ٢٤٫٧px داخل صندوق ٥٢ — خلوص كامل للصاعد وللتشكيل، ولا overflow:hidden على أي شي هنا. ============================================================ */ .tkfield{display:block;min-width:0} .tkfield-lb{display:block;font-family:var(--fu);font-weight:var(--w-support);font-size:1rem;line-height:1.75; color:var(--tx2);margin-block-end:6px;padding-inline-start:2px} .tkfield-in{ display:block;width:100%;min-width:0;min-height:52px; padding-block:12px 13px;padding-inline:16px; border:1px solid transparent;border-radius:var(--r-field); background-color:transparent; background-image:var(--face-well),var(--edge-well); background-origin:border-box;background-clip:padding-box,border-box; /* الشفة العليا بالظل. وحرف النور اللي كان تحت الفتحة (0 1px 0) انشال: الحدّ المتدرّج صار يحمل النور بنفسه بعد قانون الأرضية، وذاك الحرف كان يفتّح السرير الملاصق للحافّة السفلى فينزل تباين الحدّ هناك تحت ٣:١ — أي أن زينة كانت تكسر قانونًا. */ box-shadow:var(--well), inset 0 1px 0 rgba(var(--sh-rgb),.70); color:var(--tx);caret-color:var(--a-hi); font-family:var(--fu);font-weight:var(--w-support);font-size:1.03125rem;line-height:1.5; appearance:none;-webkit-appearance:none; transition:box-shadow 220ms var(--ease-out),background-image var(--t-tint) linear} .tkfield-in::placeholder{color:var(--tx3);font-weight:var(--w-support);opacity:1} .tkfield-in:focus{outline:none} /* مستبدَلة، مو مشالة */ .tkfield-in:focus,.tkfield-in.is-focus{ background-image:linear-gradient(196deg,var(--s-well-hi),var(--s-well)), linear-gradient(196deg,var(--a-hi),var(--a) 45%,var(--a-deep)); box-shadow:var(--well), inset 0 1px 0 rgba(var(--sh-rgb),.70), inset 0 -1px 0 rgba(var(--a-hi-rgb),.18), 0 0 0 3px rgba(var(--a-rgb),.20)} .tkfield-in:disabled{color:var(--tx4);cursor:not-allowed} .tkfield-in:-webkit-autofill{-webkit-text-fill-color:var(--tx);transition:background-color 9999s} /* لا حالة ضغط على الحقل — البئر ما تغطس */ /* ============================================================ ٦ · الأسطح — لوح وورقة وصحيفة. نفس الحقائق الأربع، والمحيط يتوسّع كل ما ارتفعت الطبقة. الحشوات مشتقّة فالأركان تبقى متحدة المركز. ============================================================ */ .tkcard,.tkpanel,.tksheet{ position:relative;border:1px solid transparent;background-color:transparent; background-origin:border-box;background-clip:padding-box,border-box} .tkcard{border-radius:var(--r-card);padding:var(--pad-card); background-image:var(--face),var(--edge);box-shadow:var(--rim),var(--sh2)} .tkcard-rise{background-image:var(--face-rise),var(--edge)} /* ورقة داخل صحيفة — لا تنقرا طبقة وحدة */ .tkpanel{border-radius:var(--r-panel);padding:var(--pad-panel); background-image:var(--face),var(--edge);box-shadow:var(--rim),var(--sh2)} .tksheet{border-radius:var(--r-sheet);padding:var(--pad-sheet); background-image:linear-gradient(196deg,var(--s-panel),var(--s-panel-lo)),var(--edge); box-shadow:var(--rim),var(--sh3)} .tksheet-rail{padding:var(--pad-rail)} .tksheet-nest{padding:var(--pad-nest)} .tkmodal{border-radius:var(--r-modal);box-shadow:var(--rim),var(--sh4)} /* ============================================================ ٧ · الورقة — النقشة الكلاسيكية، من الحافة للحافة. الورق أفتح قيمة بالعالم عشان اللعب يُقرا أول. ============================================================ */ /* الورقة جسم تحت المصباح مثل غيرها: تحت أي رسمة تنحطّ عليها يقعد انحدار الورق نفسه (--p-card → -mid → -lo، فرق ٧٫٥ درجة إضاءة و١٫١٥٨:١ مقيسة). فالورقة الفاضية ما تطلع لونًا سادًّا، والرسمة إذا جت غطّته. كان الانحدار معلنًا في العدّة وما له بيت — ولا وقفة ميتة في العدّة. */ .tkcardface{--cw:76px;width:var(--cw);aspect-ratio:63/88;flex:none;display:block; border-radius:calc(var(--cw)*.045); /* استثناء المادة — قانون الورقة */ background-color:var(--p-card); background-image:linear-gradient(196deg,var(--p-card) 0%,var(--p-card-mid) 44%,var(--p-card-lo) 100%); background-size:cover;background-position:center; box-shadow:var(--rim-paper),var(--sh2);border:0;padding:0; transform:rotate(var(--r,0deg));transform-origin:50% 90%} /* الورقة البطلة — مقصوصة بحافة الشاشة، تقول «لعبة ورق» بلا كلمة */ .tkhero{position:absolute;pointer-events:none; width:var(--hw,180px);aspect-ratio:63/88; border-radius:calc(var(--hw,180px)*.045); background-color:var(--p-card); background-image:linear-gradient(196deg,var(--p-card) 0%,var(--p-card-mid) 44%,var(--p-card-lo) 100%); background-size:cover;background-position:center; box-shadow:var(--rim-paper),var(--sh4)} /* ---- ظهر تَك — البيت الثالث للحزّة، وأكبر جسم بالشاشة. كان رقاقة ١٨px ما تُستعمل في أي مكان. صار الجهاز الورقي الوحيد بالردهة: ورقة حقيقية بحجمها، عليها توقيعنا. الطبقات: الغلاف يحمل الدوران والظلّ (بلا قصّ — القصّ على الابن، وإلا انمحى الظلّ؛ انظر §٨)، والوجه مقصوص بالحزّة. قرار: ولا نقشة على الوجه. جُرّبت أرضية معيّنات ملوّنة فانقرأت ورق جدران قديمًا — وهذا فخّ التعتيق نفسه اللي نهرب منه. المكتوب في السجلّ هو المكتوب: إطار صامت، و«تَك»، وعلامة تحتها. لا رابع. والذهب هنا «الخيط» (--kh) مو النحاس المحجوز: النحاس ما يقع إلا على اللي ينضغط. تغييران ٢٠٢٦-٠٧-٢٨ (الجولة ٣): ١ · الخامة صارت كرتونًا (--p-back-*) بدل ورق الوجه (--p-card-*). الرمزان كانا معلنَين وما يُستعملان، وتعليقهما يقول «كرتون، مو ورقة لعب» — والظهر كان مقصوصًا من نفس ورق الوجه، فالظهر والوجه بالرزمة كانا مادة وحدة. صارا مادّتين. ٢ · الدرزة الذهبية صارت صفّ رموز اللعب الأربعة. الردهة كانت ما تقول أي لعبة هي: إطار وكلمة وخطّ. الآن تقولها بأصغر إشارة ممكنة — إشارة، مو شعارًا. ---- */ /* عطب مقيس ومصلَّح (٢٠٢٦-٠٧-٢٨ · الجولة ٤): كان هنا --bw:96px مُعلنًا على العنصر المستهلِك نفسه، فأي قيمة تجي من --tkfan فوقه ما تصل أبدًا — الإعلان على العنصر يغلب الوراثة دايم. النتيجة المقيسة: .tkfan تكتب calc(74px + 10.8*--g) وتُقرا «تتنفّس ٧٤→٩٦»، والرزمة تنقاس ١٤٢٫٢٤px عرضًا *على كل بوابة* — من ٣٢٠×٥٦٨ إلى ٤٣٠×٩٣٢ ما تغيّرت ولا بكسل. أكبر جسم زينة بالشاشة ما ينحني ولا مرّة على أقصر شاشة. العلاج بالطبقة الصحيحة: العدّة ما تعلن --bw على .tkback أبدًا، بل تحلّها مرّة وحدة في اسم خاصّ لها --cardw مع افتراضها ٩٦. فالورقة الواقفة وحدها (parts.html) تبقى ٩٦، والورقة داخل رزمة ترث مقاس الرزمة. القيمة تُقرا مرّة، وكل الأبناء يرثون --cardw. */ /* ============================================================ ٧-ب · ‎.tkcardbody‎ — **جسم الورقة**، مكوّنًا واحدًا ٢٠٢٦-٠٧-٢٩ · الدورة ٣ · الجولة ١. ليش انبنى، ومو زخرفة: لجنة التدقيق قالت «كشفُ الحزّة يُقرا لسانَ ورقٍ ممزّق في أهمّ ركنٍ بالشاشة — يبي مكوّن ورقة حقيقي». والعلّة انقاست ولا انذوّقت: **الورقة ما كان لها حافّة**. ‎.tkback‎ كانت غلافًا فيه دورانٌ وظلّ ‎drop-shadow‎، ووجهًا فيه خامةٌ ونصف قطر — وبس. ولا شريطَ نورٍ فوق، ولا شريطَ ظلٍّ تحت، يعني **ولا واحدة من حقائق الضوء الأربع** اللي يفرضها القانون الأول على كل جسمٍ مرفوع. وجسمٌ بلا حافّة، إذا انقصّ منه ركنٌ بنافذة، ما يبقى منه إلا **لون**: مساحةٌ كريمية بلا طرف. وهذا بالضبط تعريف «ورقٍ ممزّق»، ومو مسألة موضعٍ ولا زاويةٍ ولا حجم — الثلاثة جُرّبت من الجولة ٤ إلى الجولة ٥ وما انحلّت. الفرق بين «ورقة» و«لطخة» طرفٌ مضيء وطرفٌ مُظلَّل، ولا شيء غيره. والرِّم ‎inset‎ لأن هذا هو الفرق كلّه: الوجه مقصوصٌ بـ‎clip-path‎، والمتصفّح يرسم ‎filter → clip-path → mask‎، فالظلّ **الخارجي** ينمحي مع القصّ والغائر ينجو (‎_probe/clipshadow.html‎). فالحافّة لازم تكون غائرة أو ما تكون. والظلّ الخارجي يبقى وين هو أصلًا: على الغلاف، بـ‎--drop-card‎. و‎--rim-paper‎ رمزٌ قايم من قبل، مكتوبٌ لهذا الغرض حرفيًّا («رِم الورق … نور المصباح على الورق»)، وكان يستعمله ‎.tkcardface‎ وحده — أي إن **الوجه كان له حافّة والظهر ما له**، وهما نفس المادة تحت نفس المصباح. فالمكوّن هنا توحيدٌ لا اختراع. الحدود: ‎.tkcardbody‎ يملك الهندسة والضوء؛ والمادة (كرتون الظهر، الخامة، الحزّة) تبقى في ‎.tkback‎ فوقه. ورقةٌ وجهها لفوق (‎.tkcardface‎) ما تنضمّ له اليوم لأنها عنصرٌ واحد بلا ‎.fc‎ يحمل القصّ — والدمج مبلَّغ، ما هو معمولًا بالسكوت. ============================================================ */ .tkcardbody{position:relative;display:block; --cardw:var(--bw,96px); width:var(--cardw);aspect-ratio:63/88; transform:rotate(var(--rot,0deg));transform-origin:50% 60%; filter:brightness(var(--dim,1)) var(--drop-card)} .tkcardbody>.fc{position:absolute;inset:0; border-radius:calc(var(--cardw)*.045); /* استثناء المادة — قانون الورقة */ box-shadow:var(--rim-paper)} .tkback{ /* الطبقتان اللي ما فيهما خامة، مرمَّزتان هنا لأن الكسوة تعيد بناء الخلفية كاملةً فوق الخامة (انظر .tkback>.fc تحت). لو انكتبتا مرّتين — هنا وهناك — لانفصلت النسخة الثانية عن الأولى بأول تعديل، وهذا بالضبط العطب اللي أقفلته الجولة ٥: رقمٌ ينبَتّ عن مصدره صامتًا. اسمٌ واحد، بيتٌ واحد. */ --lit-card:radial-gradient(74% 56% at 86% 5%, rgba(var(--lit-paper-rgb),.55), rgba(var(--lit-paper-rgb),0) 66%); --card-bed:linear-gradient(196deg,var(--p-back-hi) 0%,var(--p-back-lo) 100%)} /* ٢٠٢٦-٠٧-٢٩ · ظهر تَك صار **خامة مولّدة** تحمل العلامة الجديدة (شكل ٧) — بدل ما كان اسمًا و١٥٢ مركّبَين بالنصّ. ═══ والخامة ما انعرضت ولا مرّة · ٢٠٢٦-٠٧-٢٩ · الجولة ١ ═══ كان مكتوبًا هنا ‎var(--im-back, none) center/cover‎ — أي إن **القالب** هو اللي يستهلك الفتحة. وهذا نفس العطب المقيس اللي أقفلته الكسوة لـ‎--im-weave‎ قبله بيوم: الـ‎url()‎ جوّا خاصيّة مخصّصة ينحلّ نسبةً للملف اللي **يستعملها** لا اللي يعلنها. الإعلان في ‎app_client/frontend-tak/styles/tak.css‎ يقول ‎url("../assets/back-v3.jpg")‎ — وهو صحيح من بيته — وهذا السطر يستعمله من ‎design/tak/‎، فينحلّ إلى ‎design/assets/back-v3.jpg‎ وهذا مجلّد **ما هو موجودًا أصلًا**. مقيسًا لا مستنتَجًا (‎node _probe/fan.mjs‎ يطبع الرابط المحلول ورمز الخادم عليه): http://localhost:8452/design/assets/back-v3.jpg → HTTP 404 يعني الأربع ورقات — أكبر جسم بالردهة — كانت تنرسم تدرّجًا كرتونيًّا سادًّا من يوم ما انشحنت الخامة. «ورق كريمي فاضي» اللي انقرا على الشاشة ما كان حكم ذوق: كان ٤٠٤. والعلاج نفس علاج الجوخ بالحرف: **القاعدة اللي تستعمل الفتحة تعيش عند الإعلان** — في ‎styles/tak.css‎ عند ‎.tkback.has-art>.fc‎. والقالب هنا يبقى بلا خامة (وهذا صحيح: القالب ما يعرف وين الخامات)، ويحتفظ بطبقتيه — الوهج فوق والفراش تحت — مرمَّزتين في ‎--lit-card‎ و‎--card-bed‎ فوق، فالكسوة تدسّ الخامة بينهما بلا ما تعيد كتابة ولا تدرّج. وترتيب الطبقات قانون: **الوهج يبقى فوق الخامة** — الورقة ورقةٌ مضاءة بنفس الشمس، مو صورةً ملصوقة. */ /* الموضع والشكل ونصف القطر والحافّة كلها من ‎.tkcardbody>.fc‎ فوق — وما تنعاد هنا. اللي يبقى للظهر مادّتُه وقصّتُه. */ /* ---- الورقة ما تنقصّ · حكم صاحب البيت ٢٠٢٦-٠٧-٣١ · الجولة ٣ ---- نصّه: «قصّ الورق من الركن الأعلى، الحزّة في الورق ما هي زينة أبدًا، شيلها». والقصّ انشال من **كل** ورقة، لا من واحدة. وكان قبله على ثلاثٍ من الأربع، والرابعة وحدها ‎.is-uncut‎ — والحجّة اللي انكتبت لها يوم ذاك هي حجّته حرفًا، وهذا اللي يخلّي هالتعميم نظيفًا لا تنازلًا: «ظهرٌ ما ينكشف منه إلا ركنٌ من نافذة … المكشوف ما فيه ولا حافّة ورقة كاملة، ولا ركن، ولا نسبة — يُقرا قصاصة ورق ممزّقة، أي عطب رندر»، وثلاثة قرّاء مستقلّين سمّوه أضعف جسم بالشاشة (المقيس على ٣٩٠×٨٤٤ بتكبير ٨×: ‎_probe/a-crop.py‎ على لقطة ‎a-shot‎). العلّة نفسها في الرزمة الظاهرة: ركنٌ مقصوص من ورقةٍ **مرئيّة كاملةً** يُقرا تمزيقًا لا توقيعًا، لأن الحزّة توقيعُ **سطحٍ يُضغط أو لوحٍ**، والورقة لا هذا ولا ذاك. فالورقة اليوم تحتفظ بركنها وبنسبة ٦٣:٨٨ سليمة، والطاولة تبان فوقها ويمينها داخل نفس فتحة اللوح، فتُقرا ورقةً مدسوسةً تحت اللوح لا شكلًا مقصوصًا منه. و‎.is-uncut‎ انطوى بدل ما يُترك: صنفٌ يستثني من قاعدةٍ ما عادت قايمة هو صنفٌ ميّت بتعليقٍ حيّ يشرح حالةً خاصّة ما لها وجود — وهذا بالضبط الشكل اللي يعلّم اللي بعدنا إن الملف يوصف شجرةً ثانية. (وبيوت الحزّة الباقية معدودة ومقروءة من الملف لا من الذاكرة: ‎grep -nE '^\s*--nt:[0-9]|clip-path:(path|polygon)\([^)]'‎ — اللوح والفعل الأساسي والدفتر، وكلها تُضغط أو تُقرا صحيفة.) */ .tkback>.fc{background:var(--lit-card),var(--card-bed)} /* الإطار الصامت — خيط، بعرض شعرة، يضوي فوق ويغيب تحت */ .tkback:not(.has-art)>.fc::after{content:"";position:absolute;inset:7.5%; border-radius:calc(var(--cardw)*.018); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kh) 46%,transparent), inset 0 1px 0 rgba(var(--lit-paper-rgb),.50)} .tkback.has-art>.w{display:none} .tkback>.w{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:calc(var(--cardw)*.055); padding-top:calc(var(--cardw)*.070); font-family:var(--fd);font-weight:var(--w-display);font-size:calc(var(--cardw)*.26);line-height:1.5; /* ١٩٦ لا ١٩٨: كانت هذي ثالث زاوية شمس بالنظام، وتنرسم ثلاث مرّات على الشاشة الأولى، وشقيقتها اللي تحتها بسطر واحد ١٩٦. القانون زاوية وحدة واستثناءان مكتوبان، ولا ثالث. */ /* الوقفات انسحبت داخلًا (٢٠٢٦-٠٧-٣١): كانت ‎--kh 72%‎ و‎--kh-d 100%‎، والتدرّج يغطّي **صندوق الورقة كامله** بينما ‎background-clip:text‎ ما يبقي منه إلا ما يقع تحت الحرف — والحرف يقعد في وسط الصندوق، فوقفة الـ١٠٠٪ (ركنٌ في زاوية التدرّج) ما تلمس حبرًا أبدًا. مقيسًا: ‎--kh-d‎ يحكم **صفر بكسل** على كل صفحةٍ في السلسلة (‎node _probe/a-govern.mjs --src /design/tak/parts.html‎)، أي رمزٌ حيٌّ في القاعدة وميّتٌ على الشاشة. الوقفتان الآن ٦٢٪ و٨٨٪ فتقعان تحت الحرف، والرمز يحكم. */ background:linear-gradient(196deg,var(--kh-sun) 0%,var(--kh-l) 34%,var(--kh) 62%,var(--kh-d) 88%); -webkit-background-clip:text;background-clip:text;color:transparent} /* ---- العلامة تحت «تَك» — ١٥٢، لا ‎♠ ♥ ♦ ♣‎ ---- ٢٠٢٦-٠٧-٢٨ · الجولة ٥. كان هنا صفّ رموز اللعب الأربعة، وكان مسمًّى عطبًا في الجولة ٣ وشُحن جولتين بعدها. والعلّة إن أربعة رموز أممية هي **أكثر علامة قابلة للتبادل** يقدر تطبعها لعبة ورق: هي على ظهر كل بوكر وكل سوليتير وكل رزمة بلاستيك في الدنيا، فتقول «ورق» وما تقول ولا حرف عن بلوت ولا عن هذا البيت. و١٥٢ **هدف الصكّة** — الرقم اللي يعرفه كل من لعب بلوت، وهو نفسه اللي يناديه السطر السند تحت الفعل الأساسي («صكّة كاملة لين ١٥٢»). فالردهة صارت تقول لعبتها برقمها، مرّتين، بلغة واحدة: مرّة بالكلام على الزرّ، ومرّة زينةً على الظهر. ثلاثة مرشّحين رُندروا على المقاس المشحون وقُرئوا (٩٦px، ‎design/tak/parts.html‎): «صن حكم» أميري ١٣px — سطر عريض من حافّة لحافّة، يُقرا نصًّا لا علامة، ويصير لطخة عند ٩٦ «أبناط» أميري ١٣px — رفيع ومتّصل، يذوب على الكرتون «١٥٢» زين ٨٠٠ ١١px — مضغوط، وثلاثة أشكال منفصلة تصمد والظهر ينرسم أربع مرّات بالردهة بحجم همسة، فالقرار قرار قراءة قبل ما يكون قرار ذوق. وليش ‎direction:ltr‎ باقية: **لأن العلامة أرقام غربية** (حكم صاحب البيت: الأرقام غربية دايم)، والأرقام ترتيبها عالميّ يمشي يسار-يمين داخل أي نصّ، فالعزل ‎unicode-bidi:isolate‎ يحميها من انقلاب سياق الـRTL حولها. لو كانت العلامة كلمةً عربية لانقلبت القاعدة إلى ‎rtl‎ حتمًا — وهذا اللي رجّح الرقم كذلك: ما يحتاج سياقًا يصحّحه. و‎--fu‎ لا ‎--fs‎: العدّة تقول «زين … والواجهة **وكل الأرقام**»، وأرقام الدفتر (‎.tkledger .n‎) تشحن ‎--fu‎ نفسه — فوجه الأرقام بالنظام واحد لا اثنان. ورقعة الرموز ‎--fs‎ ما لها شغل بالأرقام، وقد صارت بلا مستهلك — مبلَّغة لصاحبها، وما تنحذف هنا لأن مولّد الـJSON يقرأها. و‎--w-control‎ (٨٠٠) لا ‎--w-support‎ (٤٠٠): رُندر الاثنان وقُرئا على ٩٦px، والأربعمئة تنحف عند هذا المقاس حتى تُقرا ظِلًّا لا حبرًا — لأن الرقم مملوء بتدرّج الخيط، ووقفته الوسطى ‎--kh-l‎ تقع على أعرض جزء من الساق فتُنحّفه بصريًّا. وما فيه وسط: ٥٠٠ و٦٠٠ ممنوعتان في كل الكسوة، فالاختيار ٤٠٠ أو ٨٠٠. والوزن ما يخالف قانون الخيط: القانون «شعرة» يخصّ الخيط **خطًّا مرسومًا** (إطار الظهر)، والعلامة حبرٌ لا خطّ. وانحذفت معها ‎font-variant-emoji:text‎ و‎font-feature-settings‎: الاثنتان انوجدتا لمنع الوجه الملوّن عن رموز اللعب، والأرقام ما لها شكل إيموجي أصلًا — إعلانٌ سببه راح ينحذف معه. والاحتياط أسفلَ (‎@supports not (background-clip:text)‎) باقٍ على حاله ويشمل الكلمة والرقم معًا. والذهب هنا ‎--kh‎ الخيط لا النحاس، وبلا ‎letter-spacing‎ أبدًا. */ .tkback>.w::after{content:"152";display:block; direction:ltr;unicode-bidi:isolate; font-family:var(--fu);font-weight:var(--w-control);font-size:calc(var(--cardw)*.115);line-height:1.4; background:linear-gradient(196deg,var(--kh-sun),var(--kh-l) 40%,var(--kh)); -webkit-background-clip:text;background-clip:text;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .tkback>.w,.tkback>.w::after{background:none;color:var(--kh)}} /* ---- الرزمة — أثاث طاولة، مو ملصق. مطلقة داخل .stage فما تاخذ ولا بكسل من الإيقاع الرأسي، ومقاسها مربوط بنَفَس التخطيط. ---- */ .tkfan{position:absolute;inset-inline-start:0;top:0;width:100%;height:100%; pointer-events:none;--bw:96px} /* ---- ‎--o‎ صارت نسبةً من **الورقة** لا من المسرح ---- ٢٠٢٦-٠٧-٢٩ · الجولة ١. كانت ‎calc(var(--o) * 1%)‎ — أي نسبةً من عرض المسرح — و‎--t‎ جنبها نسبةٌ من الورقة. رقمان بوحدتين على نفس الجسم. والنتيجة إن **شكل الرزمة نفسه يتغيّر مع البوابة**: المكشوف من كل ورقة = الفرجة ÷ عرض الورقة، والفرجة تمشي مع المسرح والورقة تمشي مع النَفَس، فما يتساويان. المقيس على البناء اللي كان (‎node _probe/fan.mjs‎، ‎--o: -10 · 3 · 16‎): 360×800 → ٤٥٫٦٪ من الورقة · 375×667 → ٥٦٫٧٪ 390×750 → ٥٣٫٠٪ · 390×844 → ٤٧٫٤٪ أي رزمةٌ مضمومة على شاشة ومفرودة على ثانية — بلا ما يطلبها أحد. والسجلّ كان يعرف نصف هالعطب من الجولة ٤: التعليق عند ‎.tkfan>:last-child‎ يقول «بالنسبة المئوية ما كانت تنضبط… فالطرفان ما يلتقيان إلا على بوابة وحدة» — ونُقلت ورقةٌ وحدة للبكسل وبقيت الثلاث على النسبة. الآن الاثنتان من الورقة: ‎--t‎ كسرٌ من عرضها، و‎--o‎ نسبةٌ مئوية منه. فالرزمة شكلٌ واحد على كل بوابة، والفرجة تُقرا مباشرةً: «‎--o‎ ٦٨ يعني الأخت تكشف ٦٨٪ من أختها». */ .tkfan>*{position:absolute;top:calc(var(--bw) * var(--t,-.20)); inset-inline-end:calc(var(--o,0) * var(--bw) / 100); --cw:var(--bw)} /* ‎.tkcardface-graded‎ انحذفت (٢٠٢٦-٠٧-٢٨ · الجولة ٥). كانت أداة خفض إشباع لورقة وجه طرف ثالث (LGPL)، وتلك الورقة انأرشفت خارج ‎app_client/‎ في الجولة ٣ — فبقيت القاعدة بلا مستهلك جولتين، في *القالب*، حيث أي جولة جاية تقدر تمدّ يدها لها. وخفض الإشباع علاجٌ لعرَض لا لعلّة: إذا كان الجسم أعلى كروما من الشاشة كلها، يُستبدل الجسم — وهذا اللي صار فعلًا، صار ظهر تَك. أداةٌ ميتة في القالب أخطر من أداة ميتة في الكسوة. */ /* ============================================================ ٨ · العلامة — «الحزّة» شريحة بنسبة ورقة بلوت مقلوبة (88:63)، محزوزة من ركنها الأعلى جهة البداية، محفوفة بحدّ نحاسي يضوي جهة المصباح ويغيب جهة الظل، و«تَك» فيها نحاسًا مصقولًا. التوقيع هو الظلّ الخارجي، مو الحرف: على تغبيش ٧px تذوب الكلمة ويبقى الشكل — مستطيل بنسبة ورقة، بحزّة وحدة عميقة. ولهذا الحزّة صارت ملك العلامة، مو ملك الأزرار. درجة وحدة عميقة (٢١٪ من العرض)، مو درجتين: على ٣٦px الدرجتان ٥px لكل وحدة فتنمسخان قطريًّا. الوحدة تُقرا «مقصوصة» بكل مقاس. الفتحة U+064E حقيقية داخل الكلمة — ما فيه ولا خط مرسوم باليد. والكلمة كلها تُملأ بتدرّج نحاسي بـbackground-clip:text، فالفتحة لأنها أعلى حبر تقع تلقائيًّا بأنصع وقفة: قانون الشمس يشتغل وحده. خلوص الفتحة مهندَس مو مرجوّ: .w صندوق مرن align-items:center زائد padding-top صريح، فينزاح المركز البصري للأسفل — وهذا يحصّنه من ارتفاع صاعد أميري الزائد. hero ١٢٣×٨٨ · Amiri 47/1.66 · pt 13 badge ٥٠×٣٦ · Amiri 19/1.66 · pt 6 والخلوص نفسه — بالبكسل — **ما ينكتب هنا** (٢٠٢٦-٠٧-٢٨ · الجولة ٥): كان مكتوبًا في هذا الملف وحده مرّتين متناقضتين، ١١٫٧/٥٫٢ هنا و١٣٫٠/٦٫٠ بعد ثلاثين سطرًا، وثالثة ١٣٫٣/٥٫٨ في MOLD وKIT — ثلاثة أزواج لقياسٍ واحد، ولا واحد منها يقدر أحد يعيده: ما فيه مِسبار يطبع خلوص الفتحة. فالأرقام انحذفت كلها. اللي يبقى هو البناء اللي يضمن الخلوص (المرن + الحشوة الصريحة) والقانون تحته. ومن يبي رقمًا فليشحن رِجًّا يطبعه — والقاعدة من هالجولة: **رقمٌ ما يقدر أحد يولّده عيبٌ، صحّ أو غلط.** قانون: أقل ارتفاع للشريحة ٢٤px. تحتها الشريحة وحدها بلا كلمة — فتحة بحجم بكسل تُقرا وسخًا، وهذا أسوأ من غيابها. ملاحظة: clip-path:path() مطلق بالبكسل — ما يتمدّد مع العنصر. لأي مقاس جديد: عمق الحزّة N، رأس محدّب T=0.35N، داخلي C=0.31N، والمسار الداخلي بإزاحة i بأنصاف R−i / T−i / C+i. ---- الانقلاب، الجولة ٤ (٢٠٢٦-٠٧-٢٨) — ولا بكسل هندسة تحرّك ---- العلّة مقيسة: العلامة كانت ثالث أعلى جسم على شاشتها هي. على تغبيش ٦px، وبقياس كل جسم مقابل *محيطه هو* (حلقة ١٤px حوله، لا وسيط أرضٍ عام — والعلامة تقعد في ركن المصباح حيث الجوخ أنصع ما يكون، فأي رقم عام يجاملها): قبل بعد العلامة : محيطها 1.495:1 **3.257:1** لمعة العلامة 0.08433 0.27465 الزرّ الأساسي 0.36617 0.36617 (باقٍ أعلى ١٫٣٣×) الرزمة 0.41464 0.41464 (باقية أعلى ١٫٥١×) العلامة : اللوح ‎—‎ 2.125:1 (٢٫٦٧× لمعةً) ووجه الشريحة مقابل الطاولة، مسحًا لكل موضع (الوجه ٣px داخل مقابل السرير ١px برّا): أسوأ بكسل ١٫٠٠٢ → **٢٫٤٢١**، ووسيط ١٫٥٢٧ → **٤٫٤٧٨**. والكلمة انقلبت معها: حبرها الآن أغمق شي بالشريحة، ومقيس بالرندر الفرقي (رندران، واحد بالكلمة وواحد بالكلمة مُطفأة الملء، فالصفيحة تحت كل بكسل حبر معروفة بالضبط): الكلمة : الصفيحة **٥٫٩٧٤:١** (أسوأ بكسل مُشبَع من ٤٢٠٨) وتحليليًّا (أنصع وقفة محرَّرة مقابل أنصع بكسل صفيحة تحت الحبر): **٦٫٢٢٧:١**. وخلوص الفتحة U+064E ما تحرّك — والرقم انحذف، انظر §٨ فوق: كان هنا زوجٌ ثالث يناقض الزوج المكتوب في نفس الملف وفي MOLD، ولا مِسبار يطبع أيًّا منها. وصراحة لازمة عن الحدّ النحاسي: هو **ما يخضع لقانون ٣:١**، لا قبل ولا بعد. مسحًا لكل بكسل: فوق ٤٫٤٦٣ · يمين ٢٫٠٠٧ · تحت ١٫٠٠١ · يسار ١٫٠٠٥ — لأن سلّم النحاس المصقول ينزل إلى ليله (--a-night) عند طرف الظلّ، وبكسل حدٍّ غامق على سرير غامق ما يوصل ٣:١ رياضيًّا (نفس الحقيقة الهندسية اللي بُني عليها --edge-floor). الفرق إن حدود الأدوات انتقلت لأرضية مضيئة، والعلامة ما تقدر: خيطها النحاسي *هو* الاستثناء المكتوب. واللي تغيّر إن حدّ الجسم ما عاد يقع على الخيط: الصفيحة نفسها صارت تحمل الحافّة (٢٫٤٢١ أسوأ بكسل بدل ١٫٠٠٢). ============================================================ */ .tkmark{position:relative;display:block;width:123px;height:88px;padding:0;border:0; background:linear-gradient(196deg,var(--a-sun) 0%,var(--a-pol) 15%,var(--a-brz) 40%,var(--a-shade) 72%,var(--a-night) 100%); clip-path:path("M 18,0 L 88,0 A 9,9 0 0 1 97,9 L 97,18 A 8,8 0 0 0 105,26 L 114,26 A 9,9 0 0 1 123,35 L 123,70 A 18,18 0 0 1 105,88 L 18,88 A 18,18 0 0 1 0,70 L 0,18 A 18,18 0 0 1 18,0 Z"); filter:drop-shadow(-2px 3px 3px rgba(var(--sh-rgb),.55)) drop-shadow(-9px 14px 20px rgba(var(--sh-rgb),.60))} .tkmark .face{position:absolute;inset:0; background: var(--lamp-catch), linear-gradient(196deg,var(--mark-face-hi) 0%,var(--mark-face) 46%,var(--mark-face-lo) 100%); clip-path:path("M 18,2 L 92,2 A 7,7 0 0 1 99,9 L 99,18 A 10,10 0 0 0 109,28 L 114,28 A 7,7 0 0 1 121,35 L 121,70 A 16,16 0 0 1 105,86 L 18,86 A 16,16 0 0 1 2,70 L 2,18 A 16,16 0 0 1 18,2 Z")} .tkmark .w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--fd);font-weight:var(--w-display);font-size:47px;line-height:1.66; /* محاذاة بصرية للحرف، مو مسافة تخطيط — فتبقى فيزيائية. صندوق الـflex يوسّط صندوق التقدّم، وحبر «تَك» بأميري ما هو موسّطًا داخله. الكلمة عربية دايمًا وما تنعكس أبدًا، فلو صارت padding-inline-end وانحطّت الشريحة داخل dir=ltr انقلبت الحشوة والحرف ما ينقلب — فينكسر التوسيط. نفس صنف إزاحات الضوء. */ padding-top:13px;padding-right:8px; /* الكلمة انقلبت مع الصفيحة (الجولة ٤): حبر غامق محفور في مرج مضاء، بدل نحاس ناصع على وجه غامق. والوقفات من *الطرف الليلي* لسلّم النحاس المصقول لا من طرفه الشمسي — فالخيط باقٍ خيطًا، بس في الظل. ولماذا ما هي --a-shade نفسها: مقيسة تحليليًّا على الصفيحة الجديدة، أنصع وقفة يقدر يلبسها الحبر وهو محافظ على ٤٫٥:١ فوق أنصع بكسل صفيحة لمعتُها ≤ ٠٫٠٣٠. و--a-shade عندها ٠٫٠٤٦٦ فتعطي ٣٫٧٢ — تحت الأرضية. فمزجناها بحبر الورق: البرونز يبقى دافئًا (H≈٣٦) ويهبط تحت السقف. وهذي صراحة لازمة: **على صفيحة مضيئة كفاية عشان تكسب شاشتها، النحاس عند ٤٫٥:١ يصير برونزًا غامقًا — ما يبقى ذهبًا.** الذهب الباقي هو حدّ الشريحة نفسه، وهو الاستثناء المكتوب أصلًا. */ background:linear-gradient(196deg, color-mix(in srgb,var(--a-shade) 55%,var(--ink)) 0%, color-mix(in srgb,var(--a-shade) 34%,var(--ink)) 30%, var(--ink) 66%, color-mix(in srgb,var(--ink) 76%,var(--a-night)) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; /* ولا ظلّ نصّ. الظلّ الغامق القديم (-1px 2px 3px) كان لحبرٍ ناصع على وجه غامق، وانقلب معناه. وجُرّب بداله حرف نور تحت الحبر مثل «الكلمة محفورة بالنحاس» على الزرّ الأساسي — ورُندر الاثنان جنب بعض على ١×: أميري ٤٧px حروفها رفيعة، والنسخة المضيئة المزاحة بكسلًا تاكل أسفل كل ضربة فتُقرا الكلمة مُغبَّشة ورماديّة بدل محفورة. الأنظف بلا ظلّ. مقيسة بالنظر على رندر ١× لا على مبدأ. */ text-shadow:none} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .tkmark .w{background:none;color:var(--ink)}} /* الاحتياطي ينقلب معها */ @media (forced-colors:active){.tkmark .w{background:none;color:CanvasText;forced-color-adjust:none}} /* الشارة — ٣٦px، علامة الترويسة داخل اللعبة */ .tkmark-badge{width:50px;height:36px; filter:drop-shadow(-1px 2px 2px rgba(var(--sh-rgb),.55)) drop-shadow(-4px 6px 9px rgba(var(--sh-rgb),.50)); clip-path:path("M 7.5,0 L 35,0 A 4,4 0 0 1 39,4 L 39,7.5 A 3.5,3.5 0 0 0 42.5,11 L 46,11 A 4,4 0 0 1 50,15 L 50,28.5 A 7.5,7.5 0 0 1 42.5,36 L 7.5,36 A 7.5,7.5 0 0 1 0,28.5 L 0,7.5 A 7.5,7.5 0 0 1 7.5,0 Z")} .tkmark-badge .face{clip-path:path("M 7.5,1.5 L 38,1.5 A 2.5,2.5 0 0 1 40.5,4 L 40.5,7.5 A 5,5 0 0 0 45.5,12.5 L 46,12.5 A 2.5,2.5 0 0 1 48.5,15 L 48.5,28.5 A 6,6 0 0 1 42.5,34.5 L 7.5,34.5 A 6,6 0 0 1 1.5,28.5 L 1.5,7.5 A 6,6 0 0 1 7.5,1.5 Z")} .tkmark-badge .w{font-size:19px;line-height:1.66;padding-top:6px;padding-right:3px} /* فيزيائية بقصد — انظر أعلاه */ /* ---- اللوح المحزوز — البيت الثاني للحزّة، بمقاس كبير. نفس البناء: الغلاف يحمل الحدّ المتدرّج والظل (filter، لأن القصّ والقناع كلاهما يقصّ box-shadow)، والوجه بداخله بإزاحة ١٫٥px بنفس الشكل. الشكل ما عاد مسارًا مطلقًا. المسار كان مقفولًا على ٣٥٠×٤٢٠، فاللوح ما يقدر يتمدّد ولا يطول مع محتواه — وعلى ٣٦٠ كان ينزّ ٣٠px تحت القصّ ويصير ركنه حدًّا حادًّا. البناء الجديد ثلاث قطع، والاتحاد هو الافتراضي: ١ · الأركان الأربعة = border-radius عادي. ما ينمسخ مهما تغيّر العرض أو الطول، لأنه ما ينمط أصلًا. ٢ · الحزّة = قناع بمربّع ثابت ٥٨×٥٨px مثبّت على الركن الأعلى-يمين. مقاسه بالبكسل، فالحزّة تبقى ٤٤ عرضًا و٥٨ عمقًا على ٣٢٠ وعلى ٤٣٠ سواء — توقيع، مو نسبة. ٣ · مستطيلان يكمّلان بقيّة الجسم. القيم داخل المربّعين هي نفس أنصاف المسار القديم حرفًا بحرف: خارجي ١٤/١٢/١٤، وداخلي ١٢٫٥/١٣٫٥/١٢٫٥. مقيسة: الصندوق المرسوم مطابق للمسار القديم على ٣٥٠×٤٢٠. ---- */ /* عطب مقيس ومصلَّح (٢٠٢٦-٠٧-٢٨) — ورثناه من الجولة ١، وما هو من القناع: ترتيب الرسم في CSS هو filter ثم clip-path ثم mask. يعني الظلّ يتولّد أولًا ثم ينقصّ. فأي عنصر يحمل القصّ والظلّ *على نفسه* يفقد ظلّه الخارجي بالكامل. مقيسة بتجربة مضبوطة (_probe/clipshadow.html): صندوق عادي بظلّ ......... ٤٨٩٢ بكسل ظلّ نفسه + clip-path ......... صفر نفسه + mask .............. صفر غلاف يحمل الظلّ وابنه يحمل القناع ... ٤٨٩٢ صفر يعني ما فيه ظلّ خارجي أصلًا. فاللوح كان قاعدًا مسطّحًا على الطاولة — وهذا بالضبط «فشل الارتفاع» اللي MOLD يسمّيه سبب «بيسك». والعلاج ما هو تغيير آلة الشكل (clip-path يسقط بنفس السقوط)، بل الطبقات: الجلد أخٌ للمحتوى لا أبٌ له — لأن الظلّ على أبٍ يسيل على كل زرّ بداخله. */ .tknotch{position:absolute;inset:0;z-index:0;pointer-events:none; --nt:58px; /* ضلع مربّع الحزّة — ثابت بالبكسل */ /* نصف قطر أركان اللوح = --r-sheet، ما هو رقمًا مكتوبًا باليد. كان ٢٦px مضبوطًا هنا بينما tokens.css §٥ وMOLD كلاهما يقول إن اللوح المحزوز «صحيفة» بنصف ٢٨ — والحشوة العليا مشتقّة من ٢٨ نفسها (--pad-rail = --r-sheet − --r-btn-1 = ١٠). يعني الرقم اليدوي كان يكسر تداخل الأنصاف المحفور بالـcalc: ٢٦ − ١٨ = ٨ لا ١٠. انصلح ٢٠٢٦-٠٧-٢٨ · الجولة ٤. */ --nr:var(--r-sheet); --nt-o:url("data:image/svg+xml;utf8,"); --nt-i:url("data:image/svg+xml;utf8,"); filter:drop-shadow(0 1px 5px rgba(var(--sh-rgb),.55)) /* الحجب حول القاعدة */ drop-shadow(-3px 5px 6px rgba(var(--sh-rgb),.50)) drop-shadow(-12px 20px 30px rgba(var(--sh-rgb),.60))} /* الحدّ المتدرّج — يُرسم خلفيّةً لا box-shadow، لأن القناع يقصّ الظلال. عطب مقيس ومصلَّح (٢٠٢٦-٠٧-٢٨ · الجولة ٤): هذا الحدّ كان **الرامب الخامس** في النظام، وما كان في جدول الحوافّ بـMOLD أصلًا — أكبر جسم بالشاشة، ساقطًا سهوًا من الجدول اللي يقول «أدناها ٣٫٢٥٩». وكان مبنيًّا على الشكل اللي ألغاه قانون الحافّة في الجولة ٣: نور ٤٠٪ فوق ينزل إلى ‎rgba(4,22,13,.55)‎ تحت. مقيسًا بمسح كل بكسل على المحيط كامل (‎_probe/a-edge.py‎، الحزّة مستثناة): تحت ١٫٠٠٠ · يسار ١٫٠٠٠ · يمين ١٫٠٠١ · فوق ١٫٣٥٧ يعني ثلاثة حوافّ من أربعة بلا أي حدٍّ مقروء إطلاقًا. الآن على ‎--edge-floor‎ مثل بقيّة النظام: نور فوق، وأرضية ثابتة عند طرف الظلّ، وما ينزل تحتها أبدًا. */ .tknotch>.face{position:absolute;inset:0;border-radius:var(--nr); background:linear-gradient(196deg, var(--lit-edge-hi) 0%, var(--lit-edge-mid) 24%, var(--lit-edge-lo) 54%, var(--edge-floor) 100%); -webkit-mask-image:var(--nt-o),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); mask-image:var(--nt-o),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); -webkit-mask-size:var(--nt) var(--nt),calc(100% - var(--nt)) 100%,var(--nt) calc(100% - var(--nt)); mask-size:var(--nt) var(--nt),calc(100% - var(--nt)) 100%,var(--nt) calc(100% - var(--nt)); -webkit-mask-position:right top,left top,right bottom; /* فيزيائية — ما تنقلب بالـRTL */ mask-position:right top,left top,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat} /* الوجه — نفس الشكل بإزاحة ١٫٥px، فالحدّ يبقى بعرض واحد حول الحزّة كلها. وهو اللي يحمل طرف الجسم المُظلَّل بعد ما ارتفع الحدّ فوق الأرضية: --rim-lo داخليًّا، تمامًا كما يفعل .tkledger::after المقنّع. والقناع يمحو الظلّ **الخارجي** وحده — الغائر ينرسم داخل الشكل ثم ينقصّ معه، فيبقى. مقيس على المركّب، مو مفترضًا (انظر التقرير). */ .tknotch>.face::after{content:"";position:absolute;inset:1.5px; border-radius:calc(var(--nr) - 1.5px); box-shadow:var(--rim-lo); /* لقطة هادية لا كاملة (٢٠٢٦-٠٧-٢٨ · الجولة ٣): اللوح أكبر سطح مرفوع بالشاشة، ولقطة ٢٢٪ كانت ترفع ركنه الأعلى-يمين إلى لمعة ٠٫١٦٠ — وعندها *ما فيه حبر بالنظام* يقدر يعطي ٤٫٥:١ فوقه، ولا حتى --tx السادّ (مقيسة ٤٫٠٣). والرِّيل يقعد هناك بالضبط. السطوح الكبيرة تاخذ --lamp-catch-q، والأجسام الصغيرة تاخذ الكاملة: كل ما كبر السطح قلّت حصّته من نفس المصباح. */ background: var(--lamp-catch-q), linear-gradient(196deg,var(--s-panel-hi) 0%,var(--s-panel) 44%,var(--s-panel-lo) 100%); -webkit-mask-image:var(--nt-i),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); mask-image:var(--nt-i),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); -webkit-mask-size:var(--nt) var(--nt),calc(100% - var(--nt)) 100%,var(--nt) calc(100% - var(--nt)); mask-size:var(--nt) var(--nt),calc(100% - var(--nt)) 100%,var(--nt) calc(100% - var(--nt)); -webkit-mask-position:right top,left top,right bottom; mask-position:right top,left top,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat} /* ============================================================ ٨٫٥ · الطاولة الصغيرة — سطرٌ يقول مين على الطاولة الجولة ٧ · ٢٠٢٦-٠٧-٢٩ — الصورة انشالت والخبر بقي. حكم صاحب البيت على الورقات الأربع الصغار اللي كانت تحفّ السطر: «هذي ما تبيّن زينة، شيلها — تقدر تكتب هنا شي». فانشالت، وما انبدلت بعلامةٍ ثانية: لا نقطة ولا شرطة ولا حرف يقعد مقعد الورقة. والصفّ صار جملةً واحدة: أنت وخويّك ضد سيكل وخويّه. والصورة هنا سقطت مرّتين قبل الحكم، وهذا هو السبب المقيس اللي يخلّي هذا الصفّ كلامًا ولا يرجع رسمًا: · الجولة ٣ — أربع علامات صغار مصفوفة محوريًّا تُقرا اصطلاح «مربّع الاختيار»: ☑ أنت ☑ خويّك ضد ☐ سيكل ☐ خويّه. · الجولة ٤ — انبدلت بورقات مقلوبة مايلة عشان الميل يكسر الاصطلاح. وانكسر فعلًا، بس صارت أربع ورقات بمقاس همسة على شاشةٍ فيها ورقٌ كبير أصلًا، وكل واحدة تطلب حدًّا متدرّجًا وخيطًا وثلاث طبقات قصّ وماسحًا مايلًا يخصّها وحدها. الأولى بدّلت اصطلاحًا باصطلاح، والثانية اشترت الشكل بثمنٍ يطلب رِجًّا يقيسه. والثالثة — الكلام — ما لها ثمن من هذا النوع: الجملة تقول «اثنان مقابل اثنين» بالنحو، الواو تجمع كل خويّين و«ضد» تفصل اليدين. ولهذا **انحذف قانون الفرج** (بين اليدين ≥ ضعف داخل اليد، على كل بوابة) ومعه فرجة اليد وspace-between والمسارب الثلاثة: ما عاد فيه فرجٌ يحمل المعنى، فما فيه فرجٌ ينعاير ولا ينكسر على بوابة ضيّقة. والحبر --tx السادّ، ولا --tx2 هنا: الرِّيل يقعد على الركن الحارّ من اللوح، وهناك ما فيه إلا السادّ يعطي ٤٫٥:١. (وهدوء جهة سيكل كان يعيش في وجه ورقته ومقاسها وميلها؛ وراحت الورقة، فما بقي شي يهدّي — والاسم يُقرا مثل أخوانه، وهذا أصدق.) الرِّج: **_probe/a-ink.py** — يُعاد قبل أي ادّعاء. والمقاس 1rem والرفعة ١٫٧٥ — لا ١٦px ولا ١٫٥٥: جذر النظام html{font-size:112.5%} في tokens.css §٧-ب، والـrem هي اللي توصّل الرفعة العربية للزجاج وتوصّل معها مقاس متصفّح القارئ؛ ورقمٌ مطلق هنا يبطّلهما. و١٫٧٥ رفعة كل سطر سند بالنظام (.tkfield-lb و.tkledger .k و.tkb-stack .sub) فما لها استثناء. والأسماء داخل دايم — «سيكل» اسمٌ يجي من الخادم، والعزل هو اللي يخلّي اسمًا لاتينيًّا يقعد جنب العربي بلا ما ينقلب ترتيب الجملة. والمعنى يوصل للجميع بنفس الطريق: النصّ نفسه يقول مين على الطاولة وإنهم اثنان مقابل اثنين، فما فيه شي ينوصل بالصورة وحدها عشان يحتاج بديلًا في aria. وrole=group مع اسمه إطارٌ للسطر لا حاملٌ للمعنى. ولا نحاس هنا ولا خيط: النحاس محرّم على أي شي ما ينضغط، و--kh رجع لبيتٍ واحد — ظهر تَك في الرزمة — يوم راحت ظهور المقاعد. ---- المقيس · الرِّج هو المرجع، لا هذا التعليق ---- ما ينقاس برِجٍّ يعيش في _probe/ ما ينكتب هنا رقمًا. ١ · الرفّ تحت لسان الحزّة — أرضية الرِّيل مشتقّة من العدّة: min-height = ‎--pad-notch − --pad-rail‎ = ضلع الدرجة ‎--notch-step‎. فالشرط ‎--pad-rail + الرِّيل ≥ --pad-notch‎ ينمسك **بالبناء**: لو ضمر المحتوى إلى سطرٍ واحد فالأرضية هي اللي تمسك الرفّ، ولو طال زاد الخلوص ولا نقص. والقاعدة في MOLD حدٌّ أدنى لا مساواة — «الزيادة مسموحة، والنقص لا». وهذي هي الشعرة اللي نجا منها هذا التغيير، وتستاهل تنكتب: **الكود كان صحيحًا والشرح كان غلط.** الـmin-height المشتقّة شاحنة من الجولة ٤، لكن النصّ اللي تحتها كان يبرّر الرفّ بمحتواه — «الرِّيل = ورقة (--sw × ٨٨/٦٣) + سطر اسم، والشرط محفوظ بفارق واسع» — يعني يعلّق القانون على جسمين صاحب البيت شالهما في هذي الجولة. لو كان القارئ صدّق الشرح وشال معهما الأرضية، وقع الرفّ وما اشتكى حارس. **والتبرير الغلط أعمر من القيمة الغلط:** القيمة تنقاس فتنكشف، والتبرير يُقرا فيُصدَّق ويُعاد بناء العطب عليه. فالشرح الآن يقول اللي يقوله الكود: الأرضية من العدّة، والمحتوى ضيف عليها. ٢ · الخلوص الأفقي عن لسان الحزّة، اشتقاقًا لا نقلًا: padding-right = ‎--pad-notch − --pin-inline‎، فحافّة المحتوى اليمنى تقعد على بُعد ‎--pad-notch‎ من حافّة اللوح، أي ‎--pad-rail‎ داخل ضلع العضّة ‎--notch-step‎. و--pin-inline مرآة حشوة .pin الجانبية، ومكتوبة في الجلد جنب الحشوة نفسها (styles/tak.css) لأن بيتها هناك — فما فيه في المكوّن رقم خلوصٍ مكتوب باليد يتعتّق يوم تتحرّك الحشوة. وأرضيتها 0px: الجهل يعطي خلوصًا أوسع، والأوسع مسموح. وهي padding-right فيزيائية لا padding-inline-end: العضّة قناع مثبّت على right top وما ينقلب بالـRTL. ٣ · الهروب والقصّ — السطر يلفّ ولا ينقصّ: ما فيه nowrap ولا text-overflow ولا overflow على هذا الصندوق. اللي ما يسع ينزل سطرًا ثانيًا، والأرضية تحتمله والصفحة تدفع طوله؛ وما ينقصّ بالنقاط ولا يطلع على الطاولة. (والقصّ القديم — nowrap مع ellipsis على — انحذف معاه: كان يحرس مسربًا، وما عاد فيه مسارب. وهو نفسه كان ينقصّ «سيكل» على ٣٢٠ بفارق أقلّ من بكسل — عيبٌ راح مع المسارب.) وoverflow:hidden محرّم على الحاويات العربية لأنه يقصّ التشكيل، وما فيه منه هنا حرف. **وموضع الكسر منصوص، مو متروك للجشع:** فرجةٌ وحدة تنكسر — اللي بين اليدين — والباقي   في index.html. ولو انتركن كلهن، لفّ المتصفّح عند آخر فرجة تسع فطلع «أنت وخويّك ضد سيكل / وخويّه»: شقٌّ *داخل* اليد و«وخويّه» يتيمة. وبالنصّ يجي اللفّ على حدّ الفريقين: «أنت وخويّك / ضد سيكل وخويّه». الرِّج: **_probe/a-rects.html?w=&h=&sel=.tkseats** — يلزم STABLE=true، وOVERFLOW_X صفر، ولا .tkseats في BLEED_X، وطول الصندوق يقول كم سطرًا انلفّ (سطر = 1.75rem، وأرضية الصندوق ٤٤ فما تحتها ما يبان). والمقيس بنفس الأمر (٢٠٢٦-٠٧-٢٩): البوابات الأربع (٣٦٠×٨٠٠ · ٣٧٥×٦٦٧ · ٣٩٠×٧٥٠ · ٣٩٠×٨٤٤) كلها سطرٌ واحد والصندوق ٤٤٫٠٠؛ وأضيقها فسحةً ٣٦٠. و?w=334 يسع بسطر و?w=332 يلفّ — فحدّ اللفّ بينهما، وهو تحت أضيق بوابة مشحونة. وعلى ٣٢٠ يلفّ سطرين (٦٣٫٠٠) — ولفٌّ نظيف أشرف من قصٍّ، وهذي البوابة أصلًا تحت أرضية المشروع بتمرير مقيس. ٤ · وثمن الطول: كل بكسل يطوله الرِّيل فوق أرضيته ياخذه من أرضية الطول المتاح للصفحة بلا تمرير، بكسلًا ببكسل. الرِّج: **_probe/gates.html?gates=390xH,…** — يطبع التمرير المقيس تحت كل إطار، وبـ‎?sa=‎ ينقاس على الطول المتاح. ٥ · الحدّ — ما عاد في §٨٫٥ جسمٌ يلبس حدًّا متدرّجًا: الورقات الأربع كانت الوحيدة، وراحت معها أربعة صفوف من OBJECTS في _probe/a-edge.py وماسح الظلّ المايل كلّه. السطر نصّ، والنصّ يُقاس بالحبر لا بالحدّ. ============================================================ */ /* السطر — صندوقٌ واحد بلا شبكة ولا مسارب. والأرضية هي رفّ الحزّة، والسطر يقعد في أعلاها طبيعيًّا: مع حشوة .pin العليا (--pad-rail) يطلع مركزه البصري داخل نطاق اللسان (٠..--notch-step) بلا توسيطٍ مكتوب. وتوسيطه في الرفّ ينزّله تحت مركز اللسان لا فوقه، فالطبيعي أصدق من المعاير — ومع ذلك ما فيه هنا رقم: الرفّ والحشوة كلاهما مشتقّ. */ .tkseats{min-height:calc(var(--pad-notch) - var(--pad-rail)); padding-right:calc(var(--pad-notch) - var(--pin-inline,0px)); font-weight:var(--w-support);font-size:1rem;line-height:1.75;color:var(--tx)} /* ============================================================ ٩ · الدفتر — نفس الفكرة، ومادة جديدة. سطح الطاولة، مو ورقة معتّقة: التعتيق تحلّل، والتحلّل يُقرا أرشيفًا. الأرقام غربية دايم — حكم صاحب البيت. ============================================================ */ /* عطبان مقيسان ومصلَّحان (٢٠٢٦-٠٧-٢٨ · الجولة ٣): ١ · الدفتر كان تعبئة متدرّجة + شعرات داخلية، بلا أي حدّ متدرّج — وهو البناء الوحيد اللي تحرّمه ترويسة هذا الملف بالحرف («تعبئة مسطّحة + شعرة + غائر خافت على مستوى واحد»). الآن ياخذ الحدّ الحقيقي: جلد مقصوص يحمل التدرّج، ووجهٌ بإزاحة ١٫٥px فوقه — نفس بناء اللوح المحزوز. ٢ · الدفتر كان السطح الكبير الوحيد بأركان سادّة. الثلاثة أسطح لازم تتكلّم نفس اللغة، فانتقلت له الحزّة بدرجة أصغر — الدفتر عريضٌ قصير، والدرجة ٥٨ تاكل ربع طوله. والمقاس ما ينكتب هنا: هو مكتوب مرّةً وحدة تحت، ‎--nt‎ على ‎.tkledger‎ نفسها. (كان مكتوبًا هنا «٣٦ بدل ٥٨» والمشحون ٣٢ — رقمٌ واحد في مكانين، والشرح هو اللي غلط. أُصلح ٢٠٢٦-٠٧-٢٨ · الجولة ٥.) الجلد أخٌ للمحتوى لا أبٌ له: ::before و::after إخوة لـ.lg-head و.lg-cells داخل نفس الصندوق. القناع يمحو box-shadow، فالظلّ الخارجي ينحمل بـfilter:drop-shadow على الجلد نفسه — لو انحطّ على .tkledger لسال على المحتوى، ولو انحطّ box-shadow على الجلد لانمحى بالقناع. مقيسة في §٨. */ .tkledger{position:relative;border-radius:var(--r-plate);padding:16px 20px 18px; --nt:32px; /* ضلع مربّع الحزّة — ثابت بالبكسل. عضّة ٢٤٫٣×٢٤٫٣ */ --bite:calc(var(--nt) * 44 / 58); /* ضلع العضّة نفسها — مشتقّ، ما ينكتب بيده */ --lg-gap:10px; /* فرجة الأعمدة، والفاصل يعيش في نصّها */ --nr:var(--r-plate); --nt-o:url("data:image/svg+xml;utf8,"); --nt-i:url("data:image/svg+xml;utf8,")} .tkledger>*{position:relative;z-index:1} .tkledger::before,.tkledger::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; border-radius:var(--nr); -webkit-mask-size:var(--nt) var(--nt),calc(100% - var(--nt)) 100%,var(--nt) calc(100% - var(--nt)); mask-size:var(--nt) var(--nt),calc(100% - var(--nt)) 100%,var(--nt) calc(100% - var(--nt)); -webkit-mask-position:right top,left top,right bottom; /* فيزيائية — ما تنقلب بالـRTL */ mask-position:right top,left top,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat} /* الجلد — الحدّ المتدرّج، ويحمل الظلّ الخارجي كامل */ .tkledger::before{ background-image:var(--edge); -webkit-mask-image:var(--nt-o),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); mask-image:var(--nt-o),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); filter:drop-shadow(0 1px 4px rgba(var(--sh-rgb),.50)) drop-shadow(-3px 5px 6px rgba(var(--sh-rgb),.48)) drop-shadow(-10px 17px 26px rgba(var(--sh-rgb),.56))} /* الوجه — نفس الشكل بإزاحة ١٫٥px، فالحدّ يبقى بعرض واحد حول الحزّة كلها */ /* واللقطة هنا **الهادية**، مثل اللوح بالضبط، وهذا قانونٌ قديم طبّق على سطحٍ جديد لا استثناءٌ له (٢٠٢٦-٠٧-٢٩ · الجولة ٧): القانون مكتوب فوق عند ‎.tknotch>.face::after‎ — «السطوح الكبيرة تاخذ ‎--lamp-catch-q‎، والأجسام الصغيرة تاخذ الكاملة: كل ما كبر السطح قلّت حصّته من نفس المصباح». والدفتر كان شريطًا منطويًا على سطرٍ واحد، فكان جسمًا صغيرًا بحقّ. وبهذي الجولة صار لوحًا بسطرين و«دفترك» انتقل إلى ركنه **الأعلى-يمين** — أي إلى بؤرة اللقطة نفسها، وهي بالضبط الحالة اللي انكتب لها القانون. والثمن انقاس قبل ما ينصلح: «دفترك» على اللقطة الكاملة يعطي ‎4.471:1‎ — **تحت أرضية الحبر ٤٫٥** — وهو ‎--tx‎ السادّ، أي أسطع حبرٍ بالنظام، فما فيه حبرٌ يعلو عليه ينقذه. العلاج في السطح لا في الحبر، تمامًا كما انتهى إليه اللوح في الجولة ٣. الأمر اللي يعيد الرقمين: انظر MOLD §الحبر. */ .tkledger::after{inset:1.5px;border-radius:calc(var(--nr) - 1.5px); background-image:var(--lamp-catch-q), linear-gradient(196deg,var(--s-panel-hi) 0%,var(--s-panel) 46%,var(--s-panel-lo) 100%); box-shadow:var(--rim-lo); -webkit-mask-image:var(--nt-i),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); mask-image:var(--nt-i),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)} /* الحزّة تاكل من الركن الأعلى-يمين فيزيائيًّا، والعنوان يقعد هناك بالضبط في RTL. الخلوص فيزيائي لأن الشكل فيزيائي: padding-right لا padding-inline-end. نفس صنف .tkmark .w. والمقدار مشتقّ من --bite، ما هو رقمًا مكتوبًا: لو تحرّكت --nt يتحرّك الخلوص معها. العنوان صار سطرًا فوق الأعمدة (§الكسوة)، فصار داخل نطاق العضّة رأسيًّا — والخلوص هنا هو اللي يمنعه يطلع في الهوا المقصوص. */ .tkledger .lg-head{display:flex;align-items:center;gap:12px; padding-right:calc(var(--bite) + 8px)} /* --ty-plate ياخذ ١٫٥٥ سطرًا، وهي رقعة صحيفة لا رأس شريط. العنوان هنا سطر واحد بكلمة واحدة، فالسطر ينضمّ على الكلمة والفرق ينزل للأعمدة تحت — والرقعة ما تنقصّ بالـline-height، تنقصّ بالقصّ، وما فيه قصّ. */ .tkledger h2{margin:0;font:var(--ty-plate);line-height:1.06;color:var(--tx)} .tkledger .lg-hr{flex:1;height:1px;background:linear-gradient(270deg,rgba(var(--lit-rgb),.26),rgba(var(--lit-rgb),0))} /* ثلاثة أعمدة متساوية بالبناء، مو بالرجاء: شبكة ١fr×٣ تاخذ عرض الصحيفة كامل. و1fr = minmax(auto,1fr)، يعني العمود ما ينزل تحت محتواه الأدنى أبدًا — فلمّا يكبر خطّ القارئ، العمود العريض ياخذ حقّه والعمودان الباقيان يردّان الفرق، والصفّ يبقى صفًّا. وما فيه lg-cells{flex:0 1 auto} يقيس نفسه على محتواه ويخلّي الفاضي كله بطرفٍ واحد. */ .tkledger .lg-cells{display:grid;grid-template-columns:repeat(3,1fr); column-gap:var(--lg-gap);align-items:end;margin-block-start:10px} /* عمودٌ مرن لا صندوق نصّ، وهذا مقيس: ‎.tkink‎ عنصر inline-block، فلو كان العمود صندوق نصٍّ لقعدت على خطّ القاعدة وجرّت معها نزول السطر — فيطول عمود «رقمك» عن جارَيه ويطلع «٥٨٪» أعلى من «١٢٨» و«٧٤». المرن يبلّك العنصر فيقصّ الذيل. */ .tkledger .lg-cell{display:flex;flex-direction:column;align-items:center; text-align:center;position:relative} /* الفاصل يعيش في نصّ الفرجة، لا على حافّة العمود. وهذا هو اللي يخلّي دايرة القلم ما تركب عليه بالبناء: أقصى ما يوصله المحتوى حافّةُ عموده، فيبقى بينه وبين الخيط نصفُ فرجة مهما ضاق العمود. */ .tkledger .lg-cell+.lg-cell::after{content:"";position:absolute;top:4px;bottom:4px; inset-inline-start:calc(var(--lg-gap) / -2);width:1px; background:linear-gradient(180deg,rgba(var(--tx-rgb),0),rgba(var(--tx-rgb),.13),rgba(var(--tx-rgb),0))} .tkledger .n{display:block;font-family:var(--fu);font-weight:var(--w-lead);font-size:1.6875rem;line-height:1.25; color:var(--tx);font-variant-numeric:tabular-nums lining-nums} /* ١٫٧٥ باقية، وهي رفعة كل سطر سند بالنظام (§٨٫٥ يسمّيها). جُرّب تنزيلها إلى ١٫٥ يوم انضاف سطر العنوان — تشتري ٤٫٥px من طول الشريط — وانرفض: رفعتان لسطر السند تعني قانونًا واحدًا في ملفَّين بنصّين، وهو العطب اللي انسمّى بهذا المشروع ثلاث مرّات. والطول انشترى من الحشوة والهامش، لا من الرفعة. والرصاصة اللي تحت الحرف (٠٫٣٧٥ من المقاس) هي اللي يقعد عليها أسفل دايرة القلم، و--ink-b صفر لأجلها. */ .tkledger .k{display:block;font-family:var(--fu);font-weight:var(--w-support);font-size:1rem;line-height:1.75;color:var(--tx3)} /* دايرة الحبر — العقيق، هنا فقط وعلى هالرقم وحده. مرسومة سكونًا، بلا حركة: هذي علامة على رقم، مو فرحة طاولة. والشاشة عندها نبضة خمول وحدة — لمعة الزر الأساسي — ولا زيادة. وحبر يعتمد وجوده على أنيميشن ممكن ما تشتغل = عيب، مو صنعة. الهندسة صارت مربوطة بالصندوق، مو مقاسًا مطلقًا: الـsvg ينشدّ على صندوق الرقم بهامش صريح لكل جهة (--ink-t/b/s/e)، وviewBox ١٠٠×١٠٠ بـpreserveAspectRatio:none. فالهامش متساوٍ عند أي مقاس خطّ وأي عرض رقم، و«٥٨٪» ما تنقصّ من فوق ولا يركب الحبر على علامة النسبة. عرض القلم ثابت بالشاشة بـnon-scaling-stroke، فالمطّ ما يسمّن الخط في محور دون الآخر. والحبر جسم على سطح مضاء: يلقّط المصباح فوق-يمين بتدرّج على القلم نفسه، ويرمي ظلًّا خفيفًا يسار-تحت. مطفي — ولا وهج. */ /* الهامش الجانبي صار حشوةً، مو إزاحةً سالبة (٢٠٢٦-٠٧-٢٩ · الجولة ٧)، والفرق بينهما هو الفرق بين «تنضبط بالضبط» و«تنضبط بالبناء»: الـsvg مطلق، فما يدخل في حساب مقاس العمود الأدنى. يعني الشبكة ما «تعرف» بالدايرة أصلًا، فتقدر تضيّق العمود تحتها — وهذا اللي كان يصير: على جذر ٢٤ ينضغط عمود «رقمك» لأن «قامت لك» تاخذ حقّها، فتعبر الدايرة الفاصل. والخلوص ما ينشرى بتصغير الدايرة: على رندر ٤× (‎a-shot.html?w=390&h=844‎ ثم ‎a-crop.py‎) الحلقة تمرّ ملاصقةً لـ«٪»، فأي نزول في الهامش يخلّي القلم يشطب الرقم. العلاج إن .tkink تحمل الهامش حشوةً على نفسها، فمقاسها الطبيعي = الرقم + الهامشين = عرض الدايرة. عندها العمود ما ينزل تحت الدايرة أبدًا، وأقصى ما توصله الدايرة حافّةُ عمودها — والفاصل يقعد في نصّ الفرجة، فيبقى بينهما نصف فرجة مهما ضاق العمود. الباقي الوحيد هو انتفاخ الصندوق المحيط من الميلان (٤°)، وهو نصف طولِ الدايرة × جيب ٤ — يطبعه ‎node _probe/ledger-fit.mjs‎ في عمود clear مع كل خانة. */ .tkink{position:relative;display:inline-block; padding-inline:var(--ink-s) var(--ink-e); --ink-t:8px;--ink-b:0px;--ink-s:10px;--ink-e:10px} /* المقاس مكتوب صراحةً، مو auto: الـsvg عنصر مُستبدَل، وإذا كان مطلقًا بأربع إزاحات وعرضه وطوله auto فالمتصفّح يحلّهما من نسبة الـviewBox (١:١) لا من صندوق الإزاحات — فتطلع الدايرة مربّعًا يبلع الكلمة تحته. والنسب هنا تنحلّ على صندوق الحشوة لأن الأب هو الحاوي: ‎100%‎ عرضًا = الرقم + الهامشين بالضبط. */ .tkink svg{position:absolute;pointer-events:none;overflow:visible; inset-block-start:calc(var(--ink-t) * -1); inset-inline-start:0; width:100%; height:calc(100% + var(--ink-t) + var(--ink-b)); transform:rotate(-4deg);transform-origin:50% 50%; filter:drop-shadow(-1px 2px 1.5px rgba(var(--sh-rgb),.55))} .tkink svg path{fill:none;stroke:url(#tk-ink);stroke-width:2.4;stroke-linecap:round} @supports not (color:paint(x)){} .tkink svg .lg-a{stop-color:var(--aqeeq-sun)} .tkink svg .lg-b{stop-color:var(--aqeeq-lit)} .tkink svg .lg-c{stop-color:var(--aqeeq-dim)} /* ============================================================ ١٠ · الدخول — الردهة تتركّب بنفسها في ~٥٠٠ms ٥ عناصر (i = ٠..٤) × ٥٥ms تدرّج + ٢٨٠ms = ٥٠٠ms. السلسلة متّصلة: ما فيه رقم مقفول. كان i=3 فاضيًا فيصير بالسلسلة فراغ ١١٠ms — الردهة تتوقّف ثم تكمل. انصلح ٢٠٢٦-٠٧-٢٨. آمنة الفشل بثلاث طرق: الحالة المستقرّة مكتوبة على .tkin نفسه، والحركة محبوسة خلف .js اللي يضيفه السكربت، وخلف تفضيل الحركة. لو ما اشتغل شي — المحتوى ظاهر. ============================================================ */ .tkin{opacity:1;transform:none} @keyframes tk-rise{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}} @keyframes tk-rise-tilt{from{opacity:0;transform:translateY(18px) rotate(var(--rot,-8deg)) scale(.94)} to{opacity:1;transform:rotate(var(--rot,-8deg))}} @keyframes tk-sweep{0%{background-position:180% 0}17%{background-position:-80% 0}100%{background-position:-80% 0}} @media (prefers-reduced-motion:no-preference){ .js .tkin{animation:tk-rise var(--t-enter) var(--ease-out) both; animation-delay:calc(var(--i,0) * 55ms)} .js .tkin-tilt{animation-name:tk-rise-tilt} /* نبضة الخمول الوحيدة بالشاشة — على الفعل الأساسي فقط. ٨٨٤ms عبور كل ٥٫٢s. بيضا دايم: ذهبي يلمع بالدوران يُقرا معدنًا. */ .js .tkb-1::after{animation:tk-sweep 5.2s linear 1200ms infinite} } @media (prefers-reduced-motion:reduce){ .tak *,.tak *::before,.tak *::after{animation:none!important;transition:none!important} .tkin{opacity:1!important;transform:none!important} .tkin-tilt{transform:rotate(var(--rot,-8deg))!important} .tkb-1::after{background-position:-80% 0} } /* ---- خطّافات اللقطة: .is-hover / .is-focus / .is-active تفرض حالة للتصوير بلا متصفّح تفاعلي. خاملة في الإنتاج. ---- */ /* علامة سيكل — صورةٌ بلونها، لا قناع. القاعدة المكتوبة هنا سابقًا («العلامة جسمٌ يلوّن بالسياق») تنطبق على ختم تَك: حبرٌ واحد يرث. وعلامة سيكل حبران — ذهبٌ للورق، وبنفسجيٌّ للوكيل. والبنفسجي ٥٫٦٪ من حبر العلامة: هو **الغمزة** نفسها، فلو ورّثناها ‎currentColor‎ انطفت الإشارة وصار المرسوم ورقتين بلا ساكن. فالعلامة هنا ثابتٌ من الهوية لا حبرٌ في نظام، وتُقرأ من الأصل الشفّاف كما هو — والدليل مكتوب في README: «do not regenerate or redraw the mark». */ /* (كان: قناعٌ لا صورة. ‎‎ ما ترث ‎currentColor‎: تطبع لونها وتسكت. القناع يخلّي البكسل شكلًا، واللون يجي من السياق — فتبقى العلامة «جسمًا في النظام يلوّن بالحبر»، وهو الشرط اللي انكتب يوم أُدمجت العلامة الأولى. النسبة مكتوبة لأن ‎‎ ما له نسبة ذاتية مثل ‎‎؛ وبدونها ‎height:auto‎ ينزل صفرًا وتختفي العلامة. */ .tkmark-img{aspect-ratio:512/499;height:auto; background:url("../../app_client/frontend-tak/assets/saikal-mark.png") center/contain no-repeat}