/* ============================================================================
   زخارف قوالب مجموعة «secondary» — tenants/presets/secondary.py (press math tech)
   ============================================================================
   الملف ده للقاعدة الخاصة بقالب واحد بس: ``Preset.signature``. base.html
   بيحمّله لوحده (مش الست ملفات) لأي منصة قالبها من المجموعة دي، بعد
   details.css، وبيحط ``data-signature="<key>"`` على ``<html>`` لما المفتاح
   مش فاضي.

   كل قاعدة هنا تبدأ بـ:
     html[data-signature="<key>"] .theme-student <hook>
   والـhooks هي نفسها اللي في details.css:
     [data-tpl="hero"] [data-tpl="hero-panel"] (+ ::before ::after و > span)
     [data-tpl="heading"] [data-tpl="section"] [data-tpl="card"]
     [data-tpl="badge"] [data-tpl="cover"]
   ألوان من ``var(--tc-*)`` بس (قراية، مفيش تعريف ``--tc-`` هنا — ده
   مكانه base.html). مسطّح: لا تدرّج ناعم ولا زجاج ولا ظل مبلور.

   tenants.tests_preset_quality بيتأكد إن كل signature متحطّة في قالب من
   المجموعة ليها قاعدة هنا — مفتاح من غير قاعدة بيبان في الصفحة ولا بيرسم.
   ========================================================================== */


/* ── «مطبعة» (press): ترويسة جرنال ────────────────────────────────────────
   خطّين فوق الهيرو (تقيل + رفيع، زي ترويسة الصفحة الأولى) — والخط المزدوج
   بتاع أول قسم تحت الهيرو بيقفلها من تحت، فمفيش خط تالت هنا. وخط تقيل فوق
   كل عنوان قسم زي رأس باب في الجرنال. الألوان حبر النص بس — جرنال بلون
   طباعة واحد. */
html[data-signature="press"] .theme-student [data-tpl="hero"]::before {
  content: '';
  position: absolute;
  /* تحت الناف العايم مباشرة، مش وراه. */
  inset-block-start: 6.25rem;
  inset-inline: max(1.5rem, calc((100% - 75rem) / 2));
  height: 8px;
  border-block-start: 4px solid var(--tc-text);
  border-block-end: 1px solid var(--tc-text);
  pointer-events: none;
}
/* رأس الباب: مش على عناوين صفحة الكورس (``font-almarai``) — دي جوّه كارت
   جنب أيقونة، وخط فوقها كان هيقطع الكارت نصّين. */
html[data-signature="press"] .theme-student [data-tpl="heading"]:not(.font-almarai) {
  padding-block-start: 0.35em;
  border-block-start: 4px solid var(--tc-text);
}
/* علامات الغلاف: details.css بيفتّح لون الفعل، بس فعل «مطبعة» هو نفس البنّي
   الغامق فكانت بتطلع بيج باهت على بنّي. لون الورق نفسه — حبر ورق، زي
   الكليشيه. */
html[data-signature="press"] .theme-student [data-tpl="cover"] [stroke="#FFB020"] {
  stroke: var(--tc-bg);
}
html[data-signature="press"] .theme-student [data-tpl="cover"] [fill="#FFB020"] {
  fill: var(--tc-bg);
}


/* ── «مربّعات» (math): محور إحداثيات ومسطرة ────────────────────────────────
   لوحة الهيرو (الرئيسية على الديسكتوب) بقت ورقة رسم بياني: محورين بتدريج
   بلون النص، قطع مكافئ بالأزرق وجذريه، ورأسه نقطة برتقالي. وعلى كل هيرو
   (موبايل كمان) مسطرة متدرّجة على الحافة التحتانية. الأشكال SVG كـ``mask``
   عشان اللون ييجي من التوكن؛ الـviewBox بنفس نسبة اللوحة (٥:٤) فالتمدد
   مابيعوّجش الخطوط. */
@media (min-width: 768px) {
  html[data-signature="math"] .theme-student [data-tpl="hero-panel"] {
    background-color: var(--tc-surface);
    box-shadow: -8px 8px 0 0 var(--tc-primary);
  }
  html[data-signature="math"] .theme-student [data-tpl="hero-panel"]::before,
  html[data-signature="math"] .theme-student [data-tpl="hero-panel"]::after {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-signature="math"] .theme-student [data-tpl="hero-panel"]::before {
    background: var(--tc-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M24 280H478M150 392V24M466 270l14 10-14 10M140 36l10-14 10 14'/%3E%3Cpath d='M70 272v16M110 272v16M190 272v16M230 272v16M270 272v16M310 272v16M350 272v16M390 272v16M430 272v16M142 40h16M142 80h16M142 120h16M142 160h16M142 200h16M142 240h16M142 320h16M142 360h16' stroke-width='2'/%3E%3Cpath d='M300 280v50' stroke-width='2' stroke-dasharray='6 6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M24 280H478M150 392V24M466 270l14 10-14 10M140 36l10-14 10 14'/%3E%3Cpath d='M70 272v16M110 272v16M190 272v16M230 272v16M270 272v16M310 272v16M350 272v16M390 272v16M430 272v16M142 40h16M142 80h16M142 120h16M142 160h16M142 200h16M142 240h16M142 320h16M142 360h16' stroke-width='2'/%3E%3Cpath d='M300 280v50' stroke-width='2' stroke-dasharray='6 6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="math"] .theme-student [data-tpl="hero-panel"]::after {
    background: var(--tc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cpath d='M130 -31 Q300 691 470 -31' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='237' cy='280' r='8'/%3E%3Ccircle cx='363' cy='280' r='8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cpath d='M130 -31 Q300 691 470 -31' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='237' cy='280' r='8'/%3E%3Ccircle cx='363' cy='280' r='8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  /* رأس القطع: إحداثيات فيزيائية (left/top) لأن الرسمة نفسها مش بتنعكس
     مع RTL — المنحنى في SVG بإحداثيات ثابتة. */
  html[data-signature="math"] .theme-student [data-tpl="hero-panel"] > span {
    inset: auto;
    left: calc(60% - 11px);
    top: calc(82.5% - 11px);
    width: 22px;
    height: 22px;
    opacity: 1;
    border-radius: 50%;
    background: var(--tc-accent);
    border: 3px solid var(--tc-text);
  }
}
/* المسطرة: على الخط اللي فوق كل قسم من أقسام الرئيسية (``divider='rule'``)
   تدريج نازل منه — شرطة قصيرة كل ١٢px وطويلة كل ٦٠px، زي حافة مسطرة.
   حدود حادة (``repeating-linear-gradient`` بوقفات متلاصقة، مش تدرّج). وعلى
   الموبايل كمان: اللوحة مش ظاهرة هناك، والمسطرة هي اللي بتقول «رياضة». */
html[data-signature="math"] .theme-student [data-tpl="section"] {
  position: relative;
  border-top-color: color-mix(in srgb, var(--tc-text) 45%, transparent);
}
html[data-signature="math"] .theme-student [data-tpl="section"]::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 14px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to left, color-mix(in srgb, var(--tc-text) 45%, transparent) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(to left, color-mix(in srgb, var(--tc-text) 30%, transparent) 0 1px, transparent 1px 12px);
  background-size: 100% 14px, 100% 7px;
  background-position: top right, top right;
  background-repeat: no-repeat;
}


/* ── «تيرمنال» (tech): محرّر كود وسطر أوامر ────────────────────────────────
   QA (٢٠٢٦-٠٩-٢٣): الهيرو كان شبكة غامقة فاضية و«$» على العنوان هي العلامة
   الوحيدة — شكله قريب من «سبورة». دلوقتي أول حاجة الطالب يشوفها شباك محرّر
   كود: شريط عنوان بتلات نُقط وتاب اسم ملف، عمود أرقام سطور، سطور كود متلوّنة
   مرسومة كشرايط (أخضر = كلمات محجوزة، أبيض = أسماء، رمادي = تعليق)، وكيرسر
   بيومض. نفس الشباك بيتصغّر على الموبايل لشريط فيه أول كام سطر — اللوحة
   الكبيرة مش ظاهرة هناك، والمدرس اللي بيبيع برمجة لازم يبان كده على الموبايل
   كمان. الكروت شبابيك (شريط عنوان بنُقط) والفاصل بين الأقسام تعليق «//».

   الشباك بالكود نفسه LTR (الأرقام على الشمال والنُقط على الشمال): ده محرّر
   فيه كود، والكود بيتكتب شمال ليمين حتى في منهج عربي. الكروت بقى محتواها
   عربي، فنُقطها على بداية السطر (يمين). */

/* الشباك: الأرضية نفسها طبقات مصمتة (``linear-gradient(c, c)`` = لون واحد،
   مش تدرّج) — شريط العنوان، خط تحته، وعمود الأرقام — والتلات نُقط دواير
   بحافة حادة. */
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] {
  --tech-bar: 2.5rem;
  --tech-gutter: 2.75rem;
  --tech-line: color-mix(in srgb, var(--tc-text) 16%, transparent);
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  direction: ltr;
  border: 1px solid color-mix(in srgb, var(--tc-text) 24%, transparent);
  border-radius: var(--tc-radius-card, 8px);
  background-color: var(--tc-footer-bg);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--tc-text) 32%, transparent) 0 5px, transparent 5.5px),
    radial-gradient(circle, color-mix(in srgb, var(--tc-text) 32%, transparent) 0 5px, transparent 5.5px),
    radial-gradient(circle, var(--tc-primary) 0 5px, transparent 5.5px),
    linear-gradient(var(--tech-line), var(--tech-line)),
    linear-gradient(var(--tech-line), var(--tech-line)),
    linear-gradient(var(--tc-surface), var(--tc-surface)),
    linear-gradient(color-mix(in srgb, var(--tc-text) 4%, transparent), color-mix(in srgb, var(--tc-text) 4%, transparent));
  background-size:
    12px 12px, 12px 12px, 12px 12px,
    100% 1px,
    1px 100%,
    100% var(--tech-bar),
    var(--tech-gutter) 100%;
  background-position:
    14px 14px, 32px 14px, 50px 14px,
    0 var(--tech-bar),
    var(--tech-gutter) var(--tech-bar),
    0 0,
    0 var(--tech-bar);
  background-repeat: no-repeat;
}
/* ‹hero-panel› ليه تلات حاجات تترسم بس (::before و::after والـspan)، و``mask``
   بيقص العنصر وكل اللي جوّاه — فكل لون كود لازم يبقى أخ مش ابن:
     ::before       الأسماء والتعليق (لون النص، التعليق بشفافية)
     ::after        الكلمات المحجوزة والنص (أخضر)
     > span         الكيرسر نفسه (static في الـflow، فأولاده الـabsolute
                    بيتقاسوا على اللوحة مش عليه)
     > span::before تاب الملف
     > span::after  أرقام السطور
   الماسكات بمقاس ثابت (مش متمدّدة) متثبّتة فوق على الشمال: اللوحة الأصغر
   بتقص سطور، مابتعوّجهاش. */
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"]::before,
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"]::after {
  content: '';
  position: absolute;
  inset: calc(var(--tech-bar) + 10px) 0 0 calc(var(--tech-gutter) + 14px);
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"]::before {
  background: var(--tc-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='312'%3E%3Crect x='0' y='9' width='176' height='8' rx='1' fill-opacity='0.4'/%3E%3Crect x='40' y='35' width='92' height='8' rx='1'/%3E%3Crect x='138' y='35' width='22' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='64' y='61' width='44' height='8' rx='1'/%3E%3Crect x='138' y='61' width='84' height='8' rx='1'/%3E%3Crect x='78' y='87' width='112' height='8' rx='1'/%3E%3Crect x='196' y='87' width='14' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='72' y='113' width='56' height='8' rx='1'/%3E%3Crect x='136' y='113' width='20' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='164' y='113' width='96' height='8' rx='1' fill-opacity='0.8'/%3E%3Crect x='72' y='165' width='150' height='8' rx='1'/%3E%3Crect x='84' y='217' width='92' height='8' rx='1'/%3E%3Crect x='0' y='269' width='70' height='8' rx='1'/%3E%3Crect x='76' y='269' width='10' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='162' y='269' width='10' height='8' rx='1' fill-opacity='0.55'/%3E%3C/svg%3E") no-repeat 0 0 / 400px 312px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='312'%3E%3Crect x='0' y='9' width='176' height='8' rx='1' fill-opacity='0.4'/%3E%3Crect x='40' y='35' width='92' height='8' rx='1'/%3E%3Crect x='138' y='35' width='22' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='64' y='61' width='44' height='8' rx='1'/%3E%3Crect x='138' y='61' width='84' height='8' rx='1'/%3E%3Crect x='78' y='87' width='112' height='8' rx='1'/%3E%3Crect x='196' y='87' width='14' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='72' y='113' width='56' height='8' rx='1'/%3E%3Crect x='136' y='113' width='20' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='164' y='113' width='96' height='8' rx='1' fill-opacity='0.8'/%3E%3Crect x='72' y='165' width='150' height='8' rx='1'/%3E%3Crect x='84' y='217' width='92' height='8' rx='1'/%3E%3Crect x='0' y='269' width='70' height='8' rx='1'/%3E%3Crect x='76' y='269' width='10' height='8' rx='1' fill-opacity='0.55'/%3E%3Crect x='162' y='269' width='10' height='8' rx='1' fill-opacity='0.55'/%3E%3C/svg%3E") no-repeat 0 0 / 400px 312px;
}
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"]::after {
  background: var(--tc-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='312'%3E%3Crect x='0' y='35' width='32' height='8' rx='1'/%3E%3Crect x='24' y='61' width='32' height='8' rx='1'/%3E%3Crect x='114' y='61' width='18' height='8' rx='1'/%3E%3Crect x='48' y='87' width='22' height='8' rx='1'/%3E%3Crect x='48' y='139' width='38' height='8' rx='1'/%3E%3Crect x='24' y='217' width='52' height='8' rx='1'/%3E%3Crect x='90' y='269' width='66' height='8' rx='1' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat 0 0 / 400px 312px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='312'%3E%3Crect x='0' y='35' width='32' height='8' rx='1'/%3E%3Crect x='24' y='61' width='32' height='8' rx='1'/%3E%3Crect x='114' y='61' width='18' height='8' rx='1'/%3E%3Crect x='48' y='87' width='22' height='8' rx='1'/%3E%3Crect x='48' y='139' width='38' height='8' rx='1'/%3E%3Crect x='24' y='217' width='52' height='8' rx='1'/%3E%3Crect x='90' y='269' width='66' height='8' rx='1' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat 0 0 / 400px 312px;
}
/* الكيرسر: آخر السطر السابع (بعد شريط x=72..222). بيومض بـ``background-color``
   مش ``opacity`` — الـopacity كانت هتطفّي التاب والأرقام اللي جوّاه معاه. */
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] > span {
  position: static;
  display: block;
  width: 9px;
  height: 16px;
  margin: calc(var(--tech-bar) + 10px + 161px) 0 0 calc(var(--tech-gutter) + 14px + 230px);
  opacity: 1;
  background: var(--tc-primary);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] > span {
    animation: tpl-tech-cursor 1.1s steps(1, end) infinite;
  }
}
@keyframes tpl-tech-cursor {
  50% { background-color: transparent; }
}
/* تاب الملف المفتوح: بلون المحرّر وخط أخضر فوقه، زي التاب النشط. */
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] > span::before {
  content: 'lesson_01.py';
  position: absolute;
  inset: 0 auto auto 72px;
  height: var(--tech-bar);
  padding: 0 1rem;
  border-inline: 1px solid var(--tech-line);
  border-top: 2px solid var(--tc-primary);
  background: var(--tc-footer-bg);
  font: 500 12px/calc(var(--tech-bar) - 2px) ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  color: var(--tc-text);
}
/* أرقام السطور: نص حقيقي بخط ثابت العرض، نفس ارتفاع سطر الشرايط (٢٦px). */
html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] > span::after {
  content: '1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12';
  position: absolute;
  inset: calc(var(--tech-bar) + 10px) auto auto 0;
  width: var(--tech-gutter);
  padding-right: 0.7rem;
  white-space: pre;
  text-align: right;
  font: 12px/26px ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  color: color-mix(in srgb, var(--tc-text) 38%, transparent);
}
/* الموبايل: نفس الشباك شريط تحت الزراير — شريط العنوان وأول ٣ سطور. مش
   لوحة ٥:٤: كانت هتدفع أول كورس تحت الشاشة. الكيرسر بيطلع برّه الشريط
   فبيتقص، والماسك المتثبّت فوق بيوري أول السطور بس. */
@media (max-width: 767px) {
  html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] {
    aspect-ratio: auto;
    height: calc(var(--tech-bar) + 10px + 78px + 6px);
    margin-block-start: 2rem;
  }
  /* السطر التالت من غير كيرسر كان بيبان متقطّع — الكيرسر ينزل على آخر
     السطر التاني. */
  html[data-signature="tech"] .theme-student [data-tpl="hero-panel"] > span {
    margin-top: calc(var(--tech-bar) + 10px + 57px);
    margin-left: calc(var(--tech-gutter) + 14px + 226px);
  }
}

/* ── عناوين الأقسام: أمر ─────────────────────────────────────────────────
   «$» بالأخضر قبله وكيرسر بلوك بيومض بعده. الـ«$» ديكور: ``/ ''`` بيخلّي
   قارئ الشاشة يسكت عنه. */
html[data-signature="tech"] .theme-student [data-tpl="heading"]::before {
  content: '$' / '';
  display: inline-block;
  margin-inline-end: 0.45em;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-weight: 700;
  color: var(--tc-primary);
}
html[data-signature="tech"] .theme-student [data-tpl="heading"]::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.95em;
  margin-inline-start: 0.3em;
  vertical-align: -0.12em;
  background: var(--tc-primary);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-signature="tech"] .theme-student [data-tpl="heading"]::after {
    animation: tpl-tech-caret 1.1s steps(1, end) infinite;
  }
}
@keyframes tpl-tech-caret {
  50% { opacity: 0; }
}

/* ── البادچ: خط ثابت العرض بين قوسين زاوية، زي وسم ────────────────────── */
html[data-signature="tech"] .theme-student [data-tpl="badge"] {
  /* من غير ``monospace`` العام في الآخر: خطوط الكود مافيهاش عربي، والحرف
     الناقص بيدوّر في باقي القايمة — فالعربي يقع على خط المتن مش على خط
     النظام. */
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', var(--tc-font-body);
  letter-spacing: 0;
}

/* ── الكروت: شباك ──────────────────────────────────────────────────────
   الحد العلوي بقى شريط عنوان (١٫٥rem) بتلات نُقط على بداية السطر — الحد
   نفسه شفاف والشريط والنُقط طبقات خلفية من ``border-box``، فمفيش عنصر زيادة
   ولا تعارض مع ``overflow-hidden`` بتاع الكارت. الحافة المزاحة الخضرا فضلت:
   هي اللي بتفصل الكارت عن الأرضية الغامقة من غير ظل مبلور. */
html[data-signature="tech"] .theme-student [data-tpl="card"] {
  --tpl-card-border: 1.5rem 1px 1px;
  border-color: color-mix(in srgb, var(--tc-primary) 45%, var(--tc-surface));
  border-top-color: transparent;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--tc-text) 35%, transparent) 0 4px, transparent 4.5px),
    radial-gradient(circle, color-mix(in srgb, var(--tc-text) 35%, transparent) 0 4px, transparent 4.5px),
    radial-gradient(circle, var(--tc-primary) 0 4px, transparent 4.5px),
    linear-gradient(color-mix(in srgb, var(--tc-primary) 45%, var(--tc-surface)), color-mix(in srgb, var(--tc-primary) 45%, var(--tc-surface))),
    linear-gradient(var(--tc-footer-bg), var(--tc-footer-bg));
  background-origin: border-box;
  background-size: 10px 10px, 10px 10px, 10px 10px, 100% 1px, 100% 1.5rem;
  background-position:
    right 12px top 7px,
    right 28px top 7px,
    right 44px top 7px,
    0 calc(1.5rem - 1px),
    0 0;
  background-repeat: no-repeat;
  box-shadow: -5px 5px 0 0 var(--tc-primary);
}
html[data-signature="tech"] .theme-student [data-tpl="card"]:hover {
  box-shadow: -8px 8px 0 0 var(--tc-primary);
}

/* ── الفاصل: سطر تعليق ─────────────────────────────────────────────────
   الخط المتقطّع (``divider='dashed'``) بيبدأ بـ«//» أخضر على بداية السطر —
   تعليق كود بيقفل القسم اللي فوق. الرقعة ورا الـ«//» بلون الأرضية بتقطع
   الخط عشان الحرفين مايتشطبوش. */
html[data-signature="tech"] .theme-student [data-tpl="section"] {
  position: relative;
}
html[data-signature="tech"] .theme-student [data-tpl="section"]::before {
  content: '//' / '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: max(1.5rem, calc((100% - 75rem) / 2));
  padding-inline: 0.5rem;
  transform: translateY(-50%);
  background: var(--tc-page-canvas, var(--tc-bg));
  font: 700 1rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  color: var(--tc-primary);
  pointer-events: none;
}
/* نفس سبب details.css مع الموجة: ``overflow-x: hidden`` على الموبايل بيخلّي
   الـy ``auto`` وبيقص نص الـ«//» اللي فوق حافة القسم. */
@media (max-width: 768px) {
  html[data-signature="tech"] .theme-student [data-tpl="section"] {
    overflow-x: clip;
  }
}


/* ── «معمل» (lab): جزيء بحلقة بنزين ─────────────────────────────────────────
   روابط بلون النص، ذرّات بالأساسي، وذرّة واحدة بلون الفعل — رسمة كتاب
   كيميا مش صورة ستوك. */
@media (min-width: 768px) {
  html[data-signature="lab"] .theme-student [data-tpl="hero-panel"] {
    background-color: var(--tc-surface);
    background-image: var(--tc-hero-bg, none);
    box-shadow: -8px 8px 0 0 var(--tc-text);
  }
  html[data-signature="lab"] .theme-student [data-tpl="hero-panel"]::before {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M250 110 L306 142 L306 206 L250 238 L194 206 L194 142 Z'/%3E%3Cpath d='M262 124 L300 146M262 224 L300 202M200 150 L200 198'/%3E%3Cpath d='M306 142 L380 100M306 206 L380 250M194 142 L120 100M250 238 L250 318M194 206 L130 250'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M250 110 L306 142 L306 206 L250 238 L194 206 L194 142 Z'/%3E%3Cpath d='M262 124 L300 146M262 224 L300 202M200 150 L200 198'/%3E%3Cpath d='M306 142 L380 100M306 206 L380 250M194 142 L120 100M250 238 L250 318M194 206 L130 250'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="lab"] .theme-student [data-tpl="hero-panel"]::after {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Ccircle cx='380' cy='100' r='22'/%3E%3Ccircle cx='120' cy='100' r='16'/%3E%3Ccircle cx='250' cy='318' r='20'/%3E%3Ccircle cx='130' cy='250' r='14'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Ccircle cx='380' cy='100' r='22'/%3E%3Ccircle cx='120' cy='100' r='16'/%3E%3Ccircle cx='250' cy='318' r='20'/%3E%3Ccircle cx='130' cy='250' r='14'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="lab"] .theme-student [data-tpl="hero-panel"] > span {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Ccircle cx='380' cy='250' r='26'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Ccircle cx='380' cy='250' r='26'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}