/* ثلاثة خطوط: رقعة للعناوين الكبرى، كوفي حديث للعناوين والأرقام، نسخ للمتن. */
@font-face { font-family: 'Rakkas'; font-weight: 400; font-display: swap; src: url('/assets/fonts/rakkas.woff2') format('woff2'); }
@font-face { font-family: 'Fustat'; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/fustat.woff2') format('woff2'); }
@font-face { font-family: 'Scheherazade'; font-weight: 400; font-display: swap; src: url('/assets/fonts/scheherazade-400.woff2') format('woff2'); }
@font-face { font-family: 'Scheherazade'; font-weight: 700; font-display: swap; src: url('/assets/fonts/scheherazade-700.woff2') format('woff2'); }

/* الوضع الافتراضي «مخطوط»: لازورد، زنجفر، ذهب، زمرّد، عاج. كل سطح يعرّف حبره وأرضه. */
:root {
  --bg: #f7f0e1; --bg2: #fdf8ec; --fg: #1d1a16; --fg2: #443e35; --fg3: #7a7163; --rule: rgba(29,26,22,.17);
  --a: #c8381f; --b: #17327d; --hl: rgba(201,150,46,.26); --hum: #c8381f; --mac: #17327d;
  --ok: #0e5447; --okfg: #f7f0e1; --frame: #c9962e; --foot: #1d1a16;
  --title: 'Rakkas', 'Fustat', serif; --kufi: 'Fustat', 'Noto Kufi Arabic', system-ui, sans-serif; --naskh: 'Scheherazade', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  --read: 43rem; --wide: 70rem; --ease: cubic-bezier(.2,.7,.2,1); --c: 18px;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='5'%3E%3Crect x='17' y='17' width='66' height='66'/%3E%3Crect x='17' y='17' width='66' height='66' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E");
  --star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='17' y='17' width='66' height='66'/%3E%3Crect x='17' y='17' width='66' height='66' transform='rotate(45 50 50)'/%3E%3C/svg%3E");
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.2'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3Cpath d='M0 60h17.6M102.4 60H120M60 0v17.6M60 102.4V120'/%3E%3C/g%3E%3C/svg%3E");
  --lattice-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='1.2'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3Cpath d='M0 60h17.6M102.4 60H120M60 0v17.6M60 102.4V120'/%3E%3C/g%3E%3C/svg%3E");
  --lat: var(--lattice);
}
.f-lapis, [data-surface="home"] .top { --bg: #17327d; --bg2: #1f3f96; --fg: #f7f0e1; --fg2: #d6dcf0; --fg3: #a4b2df; --rule: rgba(247,240,225,.22); --a: #e9bc57; --b: #ff9473; --hl: rgba(233,188,87,.28); --hum: #ffa88c; --mac: #a9dcff; }
.f-green { --bg: #0e5447; --bg2: #13645a; --fg: #f4f1e1; --fg2: #cfe2d5; --fg3: #95bcab; --rule: rgba(244,241,225,.22); --a: #e9bc57; --b: #f4f1e1; --hl: rgba(233,188,87,.28); }
.f-red { --bg: #c8381f; --bg2: #d5482f; --fg: #fdf6e6; --fg2: #ffe2d6; --fg3: #ffc7b4; --rule: rgba(253,246,230,.32); --a: #fdf6e6; --b: #ffd98a; }
.f-mint, [data-surface="plain"] { --bg: #e3eee2; --bg2: #f1f6ee; --fg: #0f332b; --fg2: #2a4b43; --fg3: #5b7a70; --rule: rgba(15,51,43,.2); --a: #c8381f; --b: #17327d; --hl: rgba(200,56,31,.15); }
[data-surface="study"], .f-night { --bg: #0f1838; --bg2: #18244f; --fg: #f0eadb; --fg2: #c6c6d2; --fg3: #8f95b6; --rule: rgba(240,234,219,.16); --a: #ff9473; --b: #e9bc57; --hl: rgba(233,188,87,.22); --hum: #ffa88c; --mac: #a9dcff; --ok: #5fd0a3; --okfg: #0f1838; }
[data-surface="ledger"], .f-teal { --bg: #0b3d36; --bg2: #104a42; --fg: #eef4e7; --fg2: #bdd5c8; --fg3: #88ab9d; --rule: rgba(238,244,231,.17); --a: #e9bc57; --b: #86e3cf; --hl: rgba(134,227,207,.2); --hum: #ffa88c; --mac: #86e3cf; }
.f-ivory { --bg: #f7f0e1; --bg2: #fdf8ec; --fg: #1d1a16; --fg2: #443e35; --fg3: #7a7163; --rule: rgba(29,26,22,.17); --a: #c8381f; --b: #17327d; --hl: rgba(201,150,46,.26); --hum: #c8381f; --mac: #17327d; }

/* وضع «ليل» */
[data-theme="layl"] { --bg: #0c1029; --bg2: #151a3c; --fg: #f3eddf; --fg2: #cfcedb; --fg3: #9196b5; --rule: rgba(243,237,223,.15); --a: #ff8f6e; --b: #8fb6ff; --hl: rgba(233,188,87,.24); --hum: #ffa88c; --mac: #a9dcff; --ok: #5fd0a3; --okfg: #0c1029; --frame: #e9bc57; --foot: #070918; }
[data-theme="layl"] :is(.f-ivory, .f-mint, [data-surface="plain"]), [data-theme="layl"][data-surface="plain"] { --bg: #0d2320; --bg2: #143029; --fg: #eef5e8; --fg2: #c3d8cb; --fg3: #86a99b; --rule: rgba(238,245,232,.16); --a: #ff8f6e; --b: #e9bc57; --hl: rgba(233,188,87,.22); --hum: #ffa88c; --mac: #a9dcff; }
[data-theme="layl"] .f-ivory { --bg: #151a3c; --bg2: #1c2250; --fg: #f3eddf; --fg2: #cfcedb; --fg3: #9196b5; }
[data-theme="layl"] :is(.f-night, [data-surface="study"]), [data-theme="layl"][data-surface="study"] { --bg: #070918; --bg2: #10143a; --a: #e9bc57; --b: #ff8f6e; }
[data-theme="layl"] :is(.f-teal, [data-surface="ledger"]), [data-theme="layl"][data-surface="ledger"] { --bg: #06201c; --bg2: #0c2d27; }
[data-theme="layl"] .f-lapis, [data-theme="layl"][data-surface="home"] .top { --bg: #16225c; --bg2: #1d2c72; }
[data-theme="layl"] .f-green { --bg: #0c332c; --bg2: #11423a; }
[data-theme="layl"] .f-red { --bg: #5b1d12; --bg2: #6d2618; --fg: #fdf1e6; --fg2: #f2cfc2; --fg3: #d9a493; --a: #ffd08a; --b: #ffb49b; }

/* وضع «ورق»: أرض واحدة هادئة وحبر أسود وحمرة */
[data-theme="waraq"], [data-theme="waraq"] :is(.f-lapis, .f-green, .f-red, .f-night, .f-teal, .f-ivory, .f-mint, [data-surface]), [data-theme="waraq"][data-surface="home"] .top {
  --bg: #fbf9f4; --bg2: #ffffff; --fg: #141312; --fg2: #3b3936; --fg3: #77736c; --rule: rgba(20,19,18,.14); --a: #b3261e; --b: #1d3a8a; --hl: rgba(179,38,30,.13); --hum: #b3261e; --mac: #1d3a8a; --ok: #1d3a8a; --okfg: #fff; --frame: #b3261e; --foot: #141312; --lat: var(--lattice-dark); }
[data-theme="waraq"] .f-lapis, [data-theme="waraq"][data-surface="home"] .top { --bg: #eef1f8; --a: #1d3a8a; --b: #b3261e; }
[data-theme="waraq"] .f-green { --bg: #eff5f0; --a: #0e5447; }
[data-theme="waraq"] .f-red { --bg: #f9ebe7; --rule: rgba(179,38,30,.25); }
[data-theme="waraq"] :is(.f-night, [data-surface="study"]), [data-theme="waraq"][data-surface="study"] { --bg: #f4f6fb; --a: #1d3a8a; --b: #b3261e; }
[data-theme="waraq"] :is(.f-teal, [data-surface="ledger"]), [data-theme="waraq"][data-surface="ledger"] { --bg: #f3f8f5; --a: #0e5447; --mac: #0e5447; }
[data-theme="waraq"] .f-mint { --bg: #f3f7ef; }

/* وضع «فيروز»: فيروزي وكحلي ورملي ومرجاني */
[data-theme="fayruz"] { --bg: #eef8f6; --bg2: #ffffff; --fg: #0d2a35; --fg2: #2d4a55; --fg3: #62808a; --rule: rgba(13,42,53,.16); --a: #d8482a; --b: #0a6c73; --hl: rgba(10,108,115,.16); --hum: #d8482a; --mac: #0a6c73; --ok: #0a6c73; --okfg: #fff; --frame: #e0a63a; --foot: #0d2a35; }
[data-theme="fayruz"] .f-ivory { --bg: #ffffff; --bg2: #eef8f6; --fg: #0d2a35; --fg2: #2d4a55; --fg3: #62808a; --rule: rgba(13,42,53,.16); --a: #d8482a; --b: #0a6c73; --hl: rgba(10,108,115,.16); --hum: #d8482a; --mac: #0a6c73; }
[data-theme="fayruz"] :is(.f-mint, [data-surface="plain"]), [data-theme="fayruz"][data-surface="plain"] { --bg: #fff5e6; --bg2: #fffaf1; --fg: #3b2608; --fg2: #5b4322; --fg3: #8d7650; --rule: rgba(59,38,8,.18); --a: #d8482a; --b: #0a6c73; --hl: rgba(216,72,42,.15); }
[data-theme="fayruz"] :is(.f-night, [data-surface="study"]), [data-theme="fayruz"][data-surface="study"] { --bg: #0d2a35; --bg2: #143846; --fg: #eef8f6; --fg2: #c2d8dc; --fg3: #86a5ad; --rule: rgba(238,248,246,.16); --a: #ffb15e; --b: #7fe0d3; --hl: rgba(127,224,211,.2); --hum: #ffa88c; --mac: #7fe0d3; --ok: #7fe0d3; --okfg: #0d2a35; }
[data-theme="fayruz"] :is(.f-teal, [data-surface="ledger"]), [data-theme="fayruz"][data-surface="ledger"] { --bg: #10243f; --bg2: #183356; --fg: #eef4fb; --fg2: #c3d1e6; --fg3: #8a9fc2; --rule: rgba(238,244,251,.17); --a: #ffb15e; --b: #7fe0d3; --hl: rgba(127,224,211,.2); --hum: #ffa88c; --mac: #7fe0d3; }
[data-theme="fayruz"] .f-lapis, [data-theme="fayruz"][data-surface="home"] .top { --bg: #0a6c73; --bg2: #0e7f87; --fg: #f4fbf9; --fg2: #d2ecea; --fg3: #9fd0cd; --rule: rgba(244,251,249,.24); --a: #ffd27a; --b: #ffb39c; --hum: #ffd0c0; --mac: #ffffff; }
[data-theme="fayruz"] .f-green { --bg: #10243f; --bg2: #183356; --fg: #eef4fb; --fg2: #c3d1e6; --fg3: #8a9fc2; --rule: rgba(238,244,251,.2); --a: #7fe0d3; --b: #ffb15e; }
[data-theme="fayruz"] .f-red { --bg: #d8482a; --bg2: #e35a3d; }

.f-lapis, .f-green, .f-red, .f-night, .f-teal, .f-ivory, .f-mint { background: var(--bg); color: var(--fg2); }
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); transition: background .5s; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 8.5rem; }
body { margin: 0; background: var(--bg); color: var(--fg2); font-family: var(--naskh); font-size: 1.45rem; line-height: 1.9; transition: background .5s, color .5s; overflow-wrap: break-word; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
::selection { background: var(--a); color: var(--bg); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
a { color: var(--a); text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
a:hover { color: var(--fg); }
strong { color: var(--fg); font-weight: 700; }
p { margin: 0 0 1.4rem; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--kufi); color: var(--fg); margin: 0; text-wrap: balance; font-weight: 700; line-height: 1.5; }
h1 { font-family: var(--title); font-weight: 400; }
h3 { font-family: var(--kufi); font-size: 1.12rem; font-weight: 700; margin: 2.75rem 0 .7rem; color: var(--a); }
bdi { unicode-bidi: isolate; font-family: var(--kufi); }
main { flex: 1; }
.read { max-width: var(--read); margin-inline: auto; padding-inline: 1.5rem; }
.wide { max-width: var(--wide); margin-inline: auto; padding-inline: 1.5rem; }
section { margin-top: 5.5rem; }
@media (max-width: 640px) { body { font-size: 1.3rem; line-height: 1.85; } .read, .wide { padding-inline: 1.15rem; } section { margin-top: 3.8rem; } :root { --c: 12px; } }

/* نجمة ثمانية من مربّعين: علامة البحث، ووعاء كل رقم */
.st { position: relative; display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; font-family: var(--kufi); font-weight: 600; font-style: normal; color: var(--a); line-height: 1; }
.st::before { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; transition: transform .8s var(--ease); }
a:hover .st::before, .st:hover::before { transform: rotate(90deg); }
.cut { clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }

/* حركة: دخول عند التمرير وشريط تقدّم، حيث يدعمهما المتصفح */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  main > section, main > .band { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 200px; }
  .bar { animation: growx linear both; animation-timeline: view(); animation-range: entry 10% entry 320px; transform-origin: right; } } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress { position: fixed; top: 0; inset-inline: 0; height: 3px; background: var(--a); transform-origin: right; transform: scaleX(0); z-index: 60; }
@supports (animation-timeline: scroll()) { .progress { animation: growx linear both; animation-timeline: scroll(root); } }

/* ── الشريط العلوي ─────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); color: var(--fg2); }
.top-in { max-width: 82rem; margin-inline: auto; padding: .55rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--title); font-weight: 400; font-size: 1.7rem; color: var(--fg); line-height: 1.2; white-space: nowrap; }
.brand .st { width: 1.5em; height: 1.5em; color: var(--a); }
.brand .st::before { -webkit-mask-image: var(--star-fill); mask-image: var(--star-fill); }
.brand:hover { color: var(--fg); }
.eds { display: flex; gap: 1.7rem; margin-inline: auto; overflow-x: auto; scrollbar-width: none; font-family: var(--kufi); font-weight: 600; }
.eds::-webkit-scrollbar { display: none; }
.eds a { position: relative; color: var(--fg3); font-size: .98rem; padding: .5rem 0; white-space: nowrap; line-height: 1.6; }
.eds a::after { content: ''; position: absolute; inset-inline: 0; bottom: .1rem; height: 2px; background: var(--a); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.eds a:hover { color: var(--fg); } .eds a:hover::after, .eds a[aria-current="page"]::after { transform: scaleX(1); }
.eds a[aria-current="page"] { color: var(--fg); }
.eds a b { font-weight: 500; }
@media (max-width: 900px) { .top-in { flex-wrap: wrap; gap: .2rem 1rem; padding-inline: 1.15rem; } .eds { order: 3; width: 100%; justify-content: space-between; gap: 1rem; } .brand { margin-inline-end: auto; } }

/* ختم الشفافية: خانة لصاحب البحث وخانة للآلة */
.seal { display: inline-flex; align-items: stretch; font-family: var(--kufi); font-weight: 600; font-size: .82rem; line-height: 1; white-space: nowrap; border: 1px solid var(--rule); transition: border-color .25s; }
.seal span { padding: .5rem .8rem; }
.seal .h { color: var(--hum); }
.seal .m { color: var(--mac); border-inline-start: 1px solid var(--rule); }
a.seal:hover, .seal[aria-current] { border-color: var(--fg); }
.seal.big { font-size: 1rem; } .seal.big span { padding: .7rem 1.2rem; }
@media (max-width: 420px) { .top .seal span { padding: .45rem .55rem; } }

.rail { position: sticky; top: 4.05rem; z-index: 40; background: var(--bg2); border-bottom: 1px solid var(--rule); font-family: var(--kufi); font-weight: 600; }
.rail-in { max-width: 82rem; margin-inline: auto; padding: 0 1.5rem; display: flex; gap: 2.2rem; overflow-x: auto; scrollbar-width: none; }
.rail-in::-webkit-scrollbar { display: none; }
.rail a { color: var(--fg3); font-size: .95rem; white-space: nowrap; padding: .65rem 0 .55rem; border-bottom: 3px solid transparent; line-height: 1.6; }
.rail a:hover { color: var(--fg); }
.rail a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--a); }
@media (max-width: 900px) { .rail { top: 6.3rem; } .rail-in { padding-inline: 1.15rem; gap: 1.5rem; } }

/* ── رأس الصفحة الداخلية ────────────────────────────────────── */
.page-head { padding-block: 4.5rem 3rem; }
.page-head h1 { font-size: clamp(3rem, 9vw, 5.8rem); line-height: 1.3; }
.page-head .sub { margin: 1rem 0 0; color: var(--fg3); max-width: 40rem; }
.toc { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.8rem; font-family: var(--kufi); font-weight: 600; }
.toc a { position: relative; color: var(--fg2); font-size: .98rem; padding-inline-start: 1.1rem; line-height: 2; }
.toc a::before { content: ''; position: absolute; inset-inline-start: 0; top: .72em; width: .55em; height: .55em; background: var(--a); -webkit-mask: var(--star-fill) center / contain no-repeat; mask: var(--star-fill) center / contain no-repeat; transition: transform .5s var(--ease); }
.toc a:hover { color: var(--a); } .toc a:hover::before { transform: rotate(90deg) scale(1.3); }
.sec-h { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.sec-h.center { justify-content: center; text-align: center; margin-bottom: 2.6rem; }
.sec-h h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }
.sec-h .st { font-size: 1.05rem; }
.lead { color: var(--fg3); max-width: 42rem; }

/* ── المدخل ────────────────────────────────────────────────── */
.hero { position: relative; margin: 0; padding: clamp(2.5rem, 8vh, 5rem) 0 clamp(3.5rem, 9vh, 6rem); text-align: center; background-image: var(--lat); background-size: 120px; overflow: hidden; }
.hero .wide { position: relative; }
.emblem { display: block; width: clamp(6.5rem, 17vw, 10rem); height: auto; margin: 0 auto 2rem; overflow: visible; }
.emblem rect { fill: none; stroke: var(--a); stroke-width: 3; }
.emblem .core { fill: var(--b); stroke: none; }
.kicker { margin: 0 0 1rem; color: var(--a); font-family: var(--kufi); font-weight: 500; font-size: 1.05rem; }
.hero h1 { font-size: clamp(2.7rem, 9vw, 6.6rem); line-height: 1.35; max-width: 16ch; margin-inline: auto; }
.hero .signed { margin: 2.4rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .emblem rect { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink 1.3s var(--ease) .15s forwards; }
  .emblem .sq2 { transform-box: fill-box; transform-origin: center; animation: ink 1.3s var(--ease) .15s forwards, turn 1.2s var(--ease) 1.35s both; }
  .emblem .core { opacity: 0; transform-box: fill-box; transform-origin: center; animation: bloom .9s var(--ease) 2.3s forwards; }
  .emblem g { transform-box: fill-box; transform-origin: center; animation: spin 140s linear 3.4s infinite; }
  .hero .kicker, .hero h1, .hero .signed { opacity: 0; animation: rise .9s var(--ease) forwards; }
  .hero .kicker { animation-delay: .5s; } .hero h1 { animation-delay: .7s; } .hero .signed { animation-delay: 1.1s; }
}
.emblem .sq2 { transform: rotate(45deg); transform-box: fill-box; transform-origin: center; }
@keyframes ink { to { stroke-dashoffset: 0; } }
@keyframes turn { from { transform: rotate(0); } to { transform: rotate(45deg); } }
@keyframes bloom { from { opacity: 0; transform: scale(.2) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.results-sec { margin-top: 0; padding-block: 3.5rem 1rem; }
.results { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.results li { counter-increment: r; border-bottom: 1px solid var(--rule); }
.results li:last-child { border-bottom: 0; }
.results a { position: relative; display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: 1.2rem; padding: 1.8rem .6rem; color: var(--fg); transition: background .35s, padding .35s var(--ease); }
.results a::before { content: ''; grid-area: 1 / 1; width: 4.4rem; height: 4.4rem; background: var(--a); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; transition: transform .9s var(--ease); }
.results a::after { content: counter(r); grid-area: 1 / 1; width: 4.4rem; text-align: center; font-family: var(--kufi); font-weight: 600; font-size: 1.5rem; color: var(--a); }
.results a span { font-size: clamp(1.45rem, 3.3vw, 2.25rem); font-weight: 700; line-height: 1.75; }
.results a:hover { background: var(--bg2); padding-inline-start: 1.4rem; color: var(--fg); }
.results a:hover::before { transform: rotate(135deg); }
@media (max-width: 640px) { .results a { grid-template-columns: 3.2rem 1fr; gap: .8rem; padding-block: 1.3rem; } .results a::before, .results a::after { width: 3.2rem; } .results a::before { height: 3.2rem; } .results a::after { font-size: 1.15rem; } }
.band { margin-top: 4.5rem; padding: 4.5rem 0; }
.band + .band { margin-top: 0; }
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: center; }
.split h2 { font-size: clamp(2rem, 4.8vw, 3.2rem); margin-bottom: 1rem; }
.split p { max-width: 30rem; }
.split figure { margin: 0; }
.more { display: inline-block; font-family: var(--kufi); font-weight: 600; font-weight: 600; font-size: 1rem; padding: .7rem 1.7rem; background: var(--a); color: var(--bg); line-height: 1.6; transition: transform .3s var(--ease), background .25s; --c: 10px; }
.more:hover { background: var(--fg); color: var(--bg); transform: translateY(-3px); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2rem; } .band { padding: 3.2rem 0; } }
.editions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ed { display: flex; flex-direction: column; padding: 2rem 1.8rem 2.1rem; min-height: 25rem; transition: transform .45s var(--ease); --c: 26px; }
.ed:hover { transform: translateY(-8px) rotate(-.4deg); color: var(--fg2); }
.ed .st { font-size: 1.15rem; margin-bottom: 1.4rem; }
.ed h3 { margin: 0 0 .4rem; font-family: var(--kufi); font-size: 1.6rem; font-weight: 700; color: var(--fg); line-height: 1.45; }
.ed > p { margin: 0; font-size: 1.08rem; line-height: 1.9; }
.spec { margin-top: auto; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.spec p, .spec ol { margin: 0; }
.ed-plain .spec p { font-size: 1.5rem; font-weight: 700; line-height: 1.75; color: var(--fg); }
.ed-proof .spec ol { list-style: none; padding: 0; counter-reset: s; display: grid; gap: .45rem; }
.ed-proof .spec li { counter-increment: s; display: flex; gap: .7rem; align-items: baseline; font-size: 1.05rem; color: var(--fg); line-height: 1.7; }
.ed-proof .spec li::before { content: counter(s); font-family: var(--kufi); font-weight: 600; font-size: .9rem; color: var(--b); }
.mini { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; }
.mini b { font-family: var(--kufi); font-weight: 600; font-size: .9rem; color: var(--a); line-height: 2.3; }
.mini p { font-size: 1.05rem; line-height: 1.95; }
@media (max-width: 900px) { .editions { grid-template-columns: 1fr; } .ed { min-height: 0; } .spec { margin-top: 1.6rem; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: .5rem 1rem; text-align: center; border-inline-start: 1px solid var(--rule); }
.stat:first-child { border-inline-start: 0; }
.stat b { display: block; font-family: var(--kufi); font-weight: 600; font-size: clamp(2.4rem, 6.5vw, 4.4rem); color: var(--fg); line-height: 1.2; }
.stat span { font-size: 1rem; color: var(--fg2); line-height: 1.6; display: block; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } .stat:nth-child(3) { border-inline-start: 0; } }
.ledger-door { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 2.8rem 3rem; color: var(--fg2); background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 2.4rem 2.4rem; transition: transform .45s var(--ease); --c: 26px; }
.ledger-door:hover { transform: translateY(-6px); color: var(--fg2); }
.ledger-door h2 { font-size: clamp(2rem, 5vw, 3rem); }
.ledger-door p { margin: .3rem 0 0; max-width: 34rem; }
@media (max-width: 640px) { .ledger-door { padding: 1.8rem 1.5rem; } }

/* ── البنود والنقول ────────────────────────────────────────── */
.entry { padding: 1.3rem 0; border-top: 1px solid var(--rule); }
.entry:last-of-type { border-bottom: 1px solid var(--rule); }
.entry > .tag { display: block; font-size: 1rem; font-weight: 700; color: var(--a); }
.entry > p { margin-bottom: .7rem; } .entry > p:last-child { margin-bottom: 0; }
.quoted { color: var(--fg); background: linear-gradient(transparent 58%, var(--hl) 58%); padding-inline: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
blockquote { position: relative; margin: 1.2rem 0; padding: 1.2rem 1.2rem 1rem; text-align: center; color: var(--fg); font-size: 1.22em; font-weight: 400; line-height: 2.1; border-block: 3px double var(--b); background: var(--bg2); }
blockquote p { margin: 0; }
blockquote cite { display: block; margin-top: .2rem; font-family: var(--kufi); font-style: normal; font-weight: 500; font-size: .85rem; color: var(--fg3); }
.fnref { line-height: 0; font-size: .62em; font-family: var(--kufi); font-weight: 600; }
.fnref a { padding: 0 2px; }
.notes { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 1.02rem; line-height: 1.9; color: var(--fg3); counter-reset: fn; }
.notes li { counter-increment: fn; position: relative; padding-inline-start: 2.4em; margin-bottom: .5rem; overflow-wrap: anywhere; }
.notes li::before { content: counter(fn); position: absolute; inset-inline-start: 0; color: var(--a); font-family: var(--kufi); font-weight: 600; font-size: .85em; }
.notes li:target { background: var(--hl); }
.notes bdi, .lib bdi, .files bdi { font-size: .84em; direction: ltr; }

/* ── البرهان: صفحة مخطوط ─────────────────────────────────────── */
.thm-sec { padding-top: 2rem; border-top: 3px double var(--rule); }
.theorem { margin: 1.8rem .4rem 2.4rem; padding: 1.8rem 2rem 1.9rem; background: var(--bg2); border: 1.5px solid var(--b); outline: 1.5px solid var(--frame); outline-offset: 5px; }
.theorem .tag { display: block; font-size: 1.05rem; font-weight: 700; color: var(--a); margin-bottom: .4rem; }
.theorem p { margin: 0; color: var(--fg); font-size: clamp(1.45rem, 3.5vw, 1.9rem); font-weight: 700; line-height: 1.85; }
.proof { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: step; }
.proof > li { counter-increment: step; position: relative; padding-inline-start: 3.4rem; padding-bottom: .15rem; }
.proof > li::before { content: ''; position: absolute; inset-inline-start: 0; top: .25rem; width: 2.3rem; height: 2.3rem; background: var(--b); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.proof > li::after { content: counter(step); position: absolute; inset-inline-start: 0; top: .25rem; width: 2.3rem; line-height: 2.3rem; text-align: center; font-family: var(--kufi); font-weight: 600; font-size: .9rem; color: var(--b); }
.by { display: inline-block; color: var(--b); font-size: .88rem; font-weight: 700; white-space: nowrap; padding: 0 .6rem; border: 1px solid currentColor; line-height: 1.9; vertical-align: .15em; }
.qed { display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: var(--fg); font-weight: 700; margin: .6rem 0 2rem; padding: 1.1rem 1.3rem; border-block: 1.5px solid var(--a); }
.qed::after { content: ''; flex: none; width: 1.1rem; height: 1.1rem; background: var(--a); -webkit-mask: var(--star-fill) center / contain no-repeat; mask: var(--star-fill) center / contain no-repeat; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.5rem; }
@media (max-width: 640px) { .cases { grid-template-columns: 1fr; } }
.case { border: 1.5px solid var(--b); padding: 1.2rem 1.3rem; background: var(--bg2); display: flex; flex-direction: column; gap: .4rem; }
.case .tag { font-size: 1.05rem; font-weight: 700; color: var(--b); }
.case p { margin: 0; }
.case .clash { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--rule); color: var(--fg); font-weight: 700; font-size: 1.08rem; }

/* ── الاعتراضات ────────────────────────────────────────────── */
.qa { padding: 3rem 0; border-top: 3px double var(--rule); display: grid; gap: 1rem; }
.qa h2 { font-size: clamp(1.5rem, 3.8vw, 2.1rem); line-height: 1.7; }
.qa h2::before { content: 'اعتراض'; display: block; font-family: var(--naskh); font-size: 1.05rem; font-weight: 700; color: var(--a); margin-bottom: .2rem; }
.qa .ans > p:first-child::before { content: 'الجواب'; display: block; font-size: 1.05rem; font-weight: 700; color: var(--b); }
@media (min-width: 900px) { [data-surface="qa"] .read { max-width: var(--wide); } .qa { grid-template-columns: 21rem 1fr; gap: 4rem; } .qa h2 { position: sticky; top: 9.5rem; align-self: start; } }

/* ── الرسوم ────────────────────────────────────────────────── */
figure { margin: 2.5rem 0; }
.plate { padding: 1.8rem 1.2rem 1.4rem; background: var(--bg2); border: 1px solid var(--rule); }
figure svg { display: block; width: 100%; height: auto; max-width: 31rem; margin-inline: auto; overflow: visible; }
figcaption { margin: 1.1rem auto 0; font-size: 1rem; color: var(--fg3); text-align: center; line-height: 1.8; max-width: 32rem; }
svg text { font-family: var(--kufi); fill: var(--fg); }
svg .sub { fill: var(--fg3); font-size: 12px; }
svg .node rect { fill: var(--bg); stroke-width: 1.6; transition: fill .25s; }
svg .premise rect { stroke: var(--a); } svg .thm rect { stroke: var(--b); }
svg a:hover .node rect, svg a:focus-visible .node rect { fill: var(--hl); }
svg .edge { stroke: var(--fg3); stroke-width: 1.6; fill: none; } svg .edge.gold { stroke: var(--a); } svg .edge.cut { stroke-dasharray: .09 .07; }
svg .head { fill: var(--fg3); } svg .head.gold { fill: var(--a); }
svg .band-r { fill: var(--hl); stroke: var(--a); stroke-width: 1.6; }
svg .cross { stroke: var(--fg); stroke-width: 2.2; } svg .lbl { font-size: 12.5px; fill: var(--fg2); }

/* ── جدول المواقف ──────────────────────────────────────────── */
.mark { display: inline-block; width: .95rem; height: .95rem; vertical-align: -.08em; border: 2px solid transparent; border-radius: 50%; }
.mark.yes { background: var(--ok); border-color: var(--ok); }
.mark.part { border-color: var(--b); background: linear-gradient(to left, var(--b) 50%, transparent 50%); }
.mark.no { border-color: var(--fg3); background: transparent; }
a.mark { transition: transform .2s var(--ease); } a.mark:hover { transform: scale(1.6); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.legend { font-family: var(--kufi); font-weight: 600; font-size: .92rem; color: var(--fg3); display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; margin: 1.5rem 0 .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .5rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
table.positions { margin: .5rem 0 1rem; }
table.positions th, table.positions td { padding: .5rem .4rem; border-bottom: 1px solid var(--rule); vertical-align: middle; text-align: start; font-weight: 400; }
table.positions tbody tr:not(.school):hover { background: var(--bg2); }
table.positions thead th { font-size: .95rem; color: var(--fg3); line-height: 1.6; vertical-align: bottom; padding-bottom: .8rem; }
table.positions thead th .qn { display: block; color: var(--fg); font-weight: 700; font-size: 1.2rem; }
table.positions tbody th[scope="row"] { color: var(--fg); white-space: nowrap; font-weight: 700; }
table.positions tr.school th { font-family: var(--kufi); color: var(--a); font-weight: 700; font-size: 1.15rem; padding-top: 1.9rem; border-bottom: 1.5px solid var(--a); }
table.positions td.pos, table.positions thead th:nth-child(n+3) { text-align: center; width: 7.5rem; }
table.positions .when { width: 36%; white-space: nowrap; }
.strip { display: inline-block; position: relative; width: calc(100% - 3.8rem); height: 1px; background: var(--rule); vertical-align: middle; }
.strip i { position: absolute; top: -4px; width: 9px; height: 9px; margin-inline-start: -4px; background: var(--b); transform: rotate(45deg); }
.yr { display: inline-block; width: 3.4rem; text-align: end; font-family: var(--kufi); font-size: .9rem; color: var(--fg3); }
@media (max-width: 640px) { table.positions .when { display: none; } table.positions td.pos, table.positions thead th:nth-child(n+3) { width: 4.2rem; } table.positions thead th { font-size: .7rem; } table.positions thead th .qn { font-size: .95rem; } }
.tally { margin: 1rem 0 .5rem; display: grid; gap: .9rem; }
.tally-row { display: grid; grid-template-columns: 12rem 1fr; align-items: center; gap: 1rem; }
.tally-name { font-weight: 700; color: var(--fg); line-height: 1.5; }
.tally-bar { display: flex; gap: 3px; height: 2.7rem; }
.seg { display: flex; align-items: center; justify-content: center; min-width: 2.3rem; font-family: var(--kufi); font-size: 1.05rem; }
.seg b { font-weight: 600; }
.seg.yes { background: var(--ok); color: var(--okfg); } .seg.part { background: var(--b); color: var(--bg); }
.seg.no { border: 1.5px solid var(--fg3); color: var(--fg2); }
@media (max-width: 640px) { .tally-row { grid-template-columns: 1fr; gap: .15rem; } }
details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 1.1rem 0; color: var(--fg); font-family: var(--kufi); font-weight: 600; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--a); } details[open] summary::after { content: '−'; }
ul.ev, ul.ev ul { list-style: none; margin: 0; padding: 0; }
ul.ev > li { padding: .8rem 0; border-top: 1px solid var(--rule); font-size: 1.1rem; }
ul.ev ul li { margin-top: .3rem; } ul.ev a { font-size: .95rem; white-space: nowrap; }

/* ── أشرطة ─────────────────────────────────────────────────── */
.bars { display: grid; gap: .65rem; margin: 1rem 0 1.5rem; }
.bar-row { display: grid; grid-template-columns: 12rem 1fr 4.5rem; gap: 1rem; align-items: center; }
.bar-name { color: var(--fg); line-height: 1.5; } .bar-track { display: block; height: 1rem; background: var(--rule); }
.bar { display: block; height: 100%; min-width: 3px; background: var(--a); }
.bar-val { color: var(--fg); font-family: var(--kufi); font-weight: 600; text-align: start; }
@media (max-width: 640px) { .bar-row { grid-template-columns: 6.6rem 1fr 3.4rem; gap: .5rem; font-size: 1rem; } }

/* ── النسخة المبسّطة: حرف كبير، وكل فصل على لونه ─────────────── */
[data-surface="plain"] body, body[data-surface="plain"] { font-size: 1.65rem; line-height: 1.9; }
[data-surface="plain"] .read { max-width: 45rem; }
.lead-sec { margin-top: 0; }
.big { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 700; line-height: 1.75; color: var(--fg); margin-bottom: 1.8rem; }
.roots { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: root; display: grid; gap: 1.6rem; }
.roots li { counter-increment: root; position: relative; padding-inline-start: 3.4rem; }
.roots li::before { content: ''; position: absolute; inset-inline-start: 0; top: .2rem; width: 2.5rem; height: 2.5rem; background: var(--a); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.roots li::after { content: counter(root); position: absolute; inset-inline-start: 0; top: .2rem; width: 2.5rem; line-height: 2.5rem; text-align: center; font-family: var(--kufi); font-weight: 600; font-size: 1rem; color: var(--a); }
.roots blockquote { margin: .6rem 0 0; }
.chapter { margin-top: 5rem; padding: 4.5rem 0; }
.chapter + .chapter { margin-top: 0; }
.chapter .st { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: 1.2rem; }
.chapter h2 { font-size: clamp(2.1rem, 6.2vw, 3.5rem); line-height: 1.5; margin-bottom: 1.5rem; }
.take { margin: 2rem 0 0; padding: 1.2rem 1.4rem; font-size: clamp(1.45rem, 3.6vw, 1.85rem); font-weight: 700; line-height: 1.85; color: var(--fg); border-block: 1.5px solid var(--a); }
@media (max-width: 640px) { body[data-surface="plain"] { font-size: 1.42rem; } .chapter { padding: 3rem 0; margin-top: 3.5rem; } }

/* ── نسخة الدرس: متن وهامش وأرقام فقرات ─────────────────────── */
[data-surface="study"] .wide { max-width: 74rem; }
.pn { position: absolute; inset-inline-start: 0; top: .1rem; font-family: var(--kufi); font-weight: 600; font-size: .85rem; color: var(--fg3); width: 2.4rem; line-height: 2.6; }
.pn:hover, .par:target > .pn { color: var(--a); }
.par { position: relative; padding-inline-start: 3rem; scroll-margin-top: 9.5rem; }
.par:target { background: var(--hl); }
.app { display: grid; grid-template-columns: 15rem 1fr; gap: .3rem 2.5rem; padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.app .pn { top: 1.5rem; }
.app header { display: flex; flex-direction: column; line-height: 1.7; }
.app header b { font-family: var(--kufi); font-size: 1.2rem; font-weight: 700; color: var(--fg); }
.app header span { font-size: 1rem; color: var(--fg3); }
.app header a { font-size: 1rem; margin-top: .3rem; color: var(--b); }
.app p { margin: 0; font-size: 1.18rem; line-height: 2.1; color: var(--fg3); }
mark { background: linear-gradient(transparent 58%, var(--hl) 58%); color: var(--fg); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } .par { padding-inline-start: 2.3rem; } }
.niza { padding-top: 1.8rem; border-top: 3px double var(--rule); }
.niza .where { font-size: 1.05rem; color: var(--b); padding: .6rem 1rem; border-inline-start: 3px solid var(--b); background: var(--bg2); max-width: 46rem; line-height: 1.9; }
.niza p.par { max-width: 54rem; }
.masail { list-style: none; margin: 0; padding: 0; }
.masail li { padding-block: 1.8rem; border-top: 1px solid var(--rule); padding-inline-start: 5rem; }
.masail li .pn { top: 1.7rem; width: 3.4rem; height: 3.4rem; line-height: 3.4rem; text-align: center; font-size: 1.15rem; color: var(--a); }
.masail li .pn::before { content: ''; position: absolute; inset: 0; background: var(--a); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; transition: transform .8s var(--ease); }
.masail li:hover .pn::before { transform: rotate(90deg); }
.masail h3 { margin: 0 0 .5rem; font-family: var(--naskh); font-size: clamp(1.4rem, 3.4vw, 1.85rem); font-weight: 700; line-height: 1.7; color: var(--fg); }
.masail p { margin: 0; color: var(--fg3); max-width: 46rem; }
.masail p a { white-space: nowrap; margin-inline-start: .4rem; font-weight: 700; }
@media (max-width: 640px) { .masail li { padding-inline-start: 3.6rem; } .masail li .pn { width: 2.7rem; height: 2.7rem; line-height: 2.7rem; font-size: .95rem; } }
.lib-cols { columns: 2; column-gap: 3.5rem; }
.lib-group { break-inside: avoid; margin-bottom: 1.8rem; }
.lib-group h3 { margin: 0 0 .3rem; font-family: var(--kufi); font-size: 1.25rem; font-weight: 700; color: var(--a); }
.lib { list-style: none; margin: 0; padding: 0; }
.lib li { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: .55rem 0; border-top: 1px solid var(--rule); line-height: 1.7; }
.lib li a { color: var(--fg); font-weight: 700; } .lib li a:hover { color: var(--a); }
.lib li span { grid-column: 1; font-size: 1rem; color: var(--fg3); }
.lib li bdi { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--fg3); }
@media (max-width: 860px) { .lib-cols { columns: 1; } }
.files { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.files li { display: grid; grid-template-columns: 15rem 1fr; gap: .2rem 2rem; padding: .9rem 0; border-top: 1px solid var(--rule); }
.files li:last-child { border-bottom: 1px solid var(--rule); }
.files span { color: var(--fg3); }
@media (max-width: 700px) { .files li { grid-template-columns: 1fr; } }

/* ── الشفافية: سجلّ الآلة على ورق بيانيّ ────────────────────── */
[data-surface="ledger"] main { background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 2.4rem 2.4rem; background-position: center top; }
.duo { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border: 1.5px solid var(--fg3); --c: 26px; }
.duo > div { padding: 2.4rem 2.2rem 2.5rem; }
.duo .m { border-inline-start: 1.5px solid var(--fg3); background: var(--bg2); }
.duo .role { font-size: 1.1rem; font-weight: 700; }
.duo .h .role { color: var(--hum); } .duo .m .role { color: var(--mac); }
.duo .name { font-family: var(--title); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.8rem); color: var(--fg); line-height: 1.5; }
.duo p { margin: .4rem 0 0; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } .duo .m { border-inline-start: 0; border-top: 1.5px solid var(--fg3); } .duo > div { padding: 1.6rem 1.4rem; } }
.panel { background: var(--bg); border: 1.5px solid var(--fg3); padding: 2rem 2.1rem; }
@media (max-width: 640px) { .panel { padding: 1.3rem 1.15rem; } }
.meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.meter { padding: 1.1rem 1rem 1rem; background: var(--bg2); border-top: 3px solid var(--b); }
.meter.cost { border-top-color: var(--a); }
.meter b { display: block; font-family: var(--kufi); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--fg); line-height: 1.4; }
.meter span { display: block; font-size: 1rem; color: var(--fg3); line-height: 1.6; }
@media (max-width: 760px) { .meters { grid-template-columns: repeat(2, 1fr); } }
table.ledger th, table.ledger td { text-align: start; padding: .6rem 0; border-bottom: 1px solid var(--rule); font-weight: 400; vertical-align: top; }
table.ledger tr:last-child th, table.ledger tr:last-child td { border-bottom: 0; }
table.ledger th { color: var(--fg3); width: 58%; padding-inline-end: 1rem; } table.ledger td { color: var(--fg); font-family: var(--kufi); font-weight: 500; }
table.ledger tr.sum th, table.ledger tr.sum td { color: var(--a); font-weight: 700; border-top: 1.5px solid var(--a); }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ''; position: absolute; inset-inline-start: .62rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--fg3); }
.steps li { position: relative; padding-inline-start: 2.6rem; padding-bottom: 1.5rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ''; position: absolute; inset-inline-start: 0; top: .7rem; width: 1.3rem; height: 1.3rem; background: var(--mac); -webkit-mask: var(--star-fill) center / contain no-repeat; mask: var(--star-fill) center / contain no-repeat; }
.steps li.h::before { background: var(--hum); }
.steps .who { display: block; font-size: 1.05rem; font-weight: 700; color: var(--mac); line-height: 1.8; text-align: start; }
.steps li.h .who { color: var(--hum); }
.steps p { margin: 0; }

/* ── التذييل ───────────────────────────────────────────────── */
.next { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 6rem 0 0; padding: 2.2rem 0 1.4rem; border-top: 3px double var(--rule); color: inherit; }
.next small { display: block; font-size: 1.05rem; color: var(--fg3); }
.next b { font-family: var(--title); font-size: clamp(2.2rem, 6vw, 3.8rem); color: var(--fg); font-weight: 400; line-height: 1.5; transition: color .25s; }
.next .st { font-size: 1.4rem; }
.next:hover b { color: var(--a); }
footer { margin-top: 4rem; background: var(--foot); color: #b9b1a1; --rule: rgba(247,240,225,.2); --hum: #ffa88c; --mac: #a9dcff; --fg: #f7f0e1; }
.foot { max-width: 82rem; margin-inline: auto; padding: 2.4rem 1.5rem 2.8rem; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: space-between; font-size: 1.05rem; line-height: 1.85; }
.foot p { margin: 0; max-width: 36rem; }
.foot .fig { font-weight: 700; color: #e9bc57; }

/* ── مبدّل الألوان ─────────────────────────────────────────── */
.modes { display: flex; align-items: center; gap: .7rem; padding-inline: .3rem; }
.modes button { width: 1.05rem; height: 1.05rem; padding: 0; border: 0; cursor: pointer; transform: rotate(45deg); background: linear-gradient(135deg, var(--x) 50%, var(--y) 50%); box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--fg3); transition: transform .45s var(--ease), box-shadow .25s; }
.modes button:hover { transform: rotate(225deg) scale(1.25); }
.modes button[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3.5px var(--fg); transform: rotate(45deg) scale(1.2); }
@media (max-width: 560px) { .top .seal { display: none; } .fl { opacity: .12; } .fl:nth-of-type(3) { display: none; } }

/* ── الحركة ────────────────────────────────────────────────── */
a.inl, .read p > a:not(.more), .wide > p > a { background: linear-gradient(currentColor, currentColor) right 100% / 100% 1px no-repeat; transition: background-size .4s var(--ease), color .2s; }
.read p > a:not(.more):hover, .wide > p > a:hover { background-size: 0 1px; background-position: left 100%; }
.fl { position: absolute; width: var(--s, 4rem); height: var(--s, 4rem); background: var(--a); opacity: .22; pointer-events: none; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.hero h1 .w { display: inline-block; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(26px); } }
@keyframes drift { to { background-position: 120px 120px; } }
@keyframes drift-grid { to { background-position: calc(50% + 2.4rem) 2.4rem; } }
@keyframes float { 50% { transform: translateY(-18px) rotate(45deg); } 100% { transform: rotate(90deg); } }
@keyframes word { from { opacity: 0; transform: translateY(.55em) rotate(3deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pulse { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(3.5rem); } to { opacity: 1; transform: none; } }
@keyframes roll { from { transform: rotate(-180deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes frame-in { from { outline-offset: 22px; outline-color: transparent; } }
@keyframes nudge { 50% { transform: translateX(-7px); } }
@keyframes shine { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: drift 26s linear infinite; }
  .fl { animation: float var(--d, 16s) ease-in-out infinite; }
  .hero h1 .w { opacity: 0; animation: word .9s var(--ease) forwards; animation-delay: calc(.75s + var(--w) * .11s); }
  .hero h1 { opacity: 1 !important; animation: none !important; }
  .brand .st::before { animation: spin 40s linear infinite; }
  .next .st { animation: nudge 2.4s var(--ease) infinite; }
  .more { background-image: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size: 250% 100%; background-position: 150% 0; }
  .more:hover { animation: shine .8s ease; }
  [data-surface="ledger"] main { animation: drift-grid 14s linear infinite; }
  .ed .spec { transition: transform .45s var(--ease); } .ed:hover .spec { transform: translateX(-6px); }
  .stat b { transition: transform .4s var(--ease); } .stat:hover b { transform: translateY(-6px) scale(1.06); }
  .meter { transition: transform .35s var(--ease); } .meter:hover { transform: translateY(-5px); }
  .case, .plate { transition: transform .4s var(--ease), box-shadow .4s; } .case:hover { transform: translateY(-4px); }
  table.positions tbody tr { transition: background .25s; }
}
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .results li { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 5% entry 75%; }
  .results a::before, .chapter > .read > .st::before, .sec-h .st::before, .masail .pn::before { animation: spin linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .plate .edge:not(.cut) { stroke-dasharray: 1; animation: ink linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; }
  .plate .node { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  .theorem { animation: frame-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  .qed::after { animation: pulse linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
  .proof > li, .steps li, .entry, .app, .masail li, .qa, .ed, .stat, .meter, blockquote, .case { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  .proof > li::before, .roots li::before, .steps li::before { animation: roll linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
  table.positions .mark { animation: pulse linear both; animation-timeline: view(); animation-range: entry 0% entry 120%; }
  .emblem { animation: emblem-out linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
} }
@keyframes hero-out { to { opacity: .15; transform: translateY(-50px) scale(.96); } }
@keyframes emblem-out { to { transform: rotate(180deg) scale(1.5); } }

/* حركة الظهور في المتصفحات التي لا تدعم الحركة المرتبطة بالتمرير (ومنها متصفحات الهاتف): يضيف السكربت .io ثم .in عند الظهور */
.io .rv { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.io .rv.in { opacity: 1; transform: none; }
.io .results li.rv { transform: translateX(3rem); } .io .results li.rv.in { transform: none; }
.io .results li:nth-child(2) { transition-delay: .12s; } .io .results li:nth-child(3) { transition-delay: .24s; }
.io .ed:nth-child(2), .io .stat:nth-child(2), .io .meter:nth-child(2) { transition-delay: .1s; }
.io .ed:nth-child(3), .io .stat:nth-child(3), .io .meter:nth-child(3) { transition-delay: .2s; }
.io .stat:nth-child(4), .io .meter:nth-child(4) { transition-delay: .3s; }
.io .plate.rv .edge:not(.cut) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease; transition-delay: calc(.35s + var(--i, 0) * .22s); }
.io .plate.rv.in .edge { stroke-dashoffset: 0; }
.io .plate.rv .node { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.2s + var(--i, 0) * .22s); }
.io .plate.rv.in .node { opacity: 1; transform: none; }
.io .bar-row.rv .bar { transform: scaleX(0); transform-origin: right; transition: transform 1s var(--ease) .2s; }
.io .bar-row.rv.in .bar { transform: none; }
.io .tally-row.rv .tally-bar { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--ease) .15s; }
.io .tally-row.rv.in .tally-bar { clip-path: inset(0); }
.io .results li.in a::before, .io .masail li.in .pn::before, .io .sec-h.in .st::before, .io .chapter .st.in::before { animation: spin 1.3s var(--ease) both; }
.io .proof > li.in::before, .io .steps li.in::before, .io .roots li.in::before { animation: roll .8s var(--ease) both; }
.io .theorem.in { animation: frame-in 1s var(--ease) both; }
.io .qed.in::after { animation: pulse .8s var(--ease) .3s both; }
.io table.positions tr.in .mark { animation: pulse .6s var(--ease) both; }
.io table.positions tr.rv { transform: none; transition: opacity .5s; }
/* لمسة الإصبع بدل مرور المؤشر */
@media (hover: none) {
  .ed:active, .results a:active, .ledger-door:active, .more:active, .next:active { transform: scale(.975); transition: transform .12s; }
  a:active .st::before, .next:active .st::before { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .top, .rail, .next, footer, .progress { display: none !important; } body { background: #fff !important; color: #111 !important; } }