/* «سابر»: calm and professional (owner, 2026-10-28: «نريد حلة هادئة»؛ «اجعله احترافياً وجمّل شكله… واصنع لوغو وحسّن
   المظهر والألوان»). Deep sea teal for the brand, a warm paper ground, and one amber signal. Mishkat's fonts (SIL OFL). */
@font-face { font-family: 'Cairo'; font-weight: 200 1000; font-display: swap; src: url(fonts/cairo-arabic-f8c2790b.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FD3E-FD3F, U+FD41, U+FDF2-FDFD, U+FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 200 1000; font-display: swap; src: url(fonts/cairo-latin-ff64b48b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Readex Pro'; font-weight: 160 700; font-display: swap; src: url(fonts/readexpro-arabic-1a432d26.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FD3E-FD3F, U+FD41, U+FDF2-FDFD, U+FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Readex Pro'; font-weight: 160 700; font-display: swap; src: url(fonts/readexpro-latin-87022255.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 400 700; font-display: swap; src: url(fonts/notonaskharabic-arabic-bb07eddb.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FD3E-FD3F, U+FD41, U+FDF2-FDFD, U+FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 400 700; font-display: swap; src: url(fonts/notonaskharabic-latin-55cc6294.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --bg: #f7f9f9; --surface: #ffffff; --raise: #f7f9f9;
  --ink: #0f1419; --soft: #536471; --faint: #66737f; --line: #e6ecf0; --line-2: #cfd9de;
  --brand: #13294b; --brand-2: #1f4e8c; --accent: #1f5fbf; --signal: #e09b12;
  --sea: #e8eef6; --land: #e6e3dc; --land-line: #ffffff; --hl: #1f4e8c; --hl-2: #5b86c5;
  --g-rasmi: #24467e; --g-muakkad: #0e6a73; --g-ghayr: #835700; --g-nizaa: #a9441b; --g-khata: #a8283a; --g-bila: #7b6f72;
  --side-a: #1f4e8c; --side-b: #8a4a12; --logo: #13294b;
  --shadow: 0 1px 2px rgba(15, 20, 25, .04);
  --font-display: "Cairo", "Readex Pro", system-ui, sans-serif;
  --font-ui: "Readex Pro", "Cairo", system-ui, sans-serif;
  --font-read: "Noto Naskh Arabic", Georgia, serif;
  --wide: 1120px; --read: var(--wide);  /* every page as wide as the home (owner, 2026-10-28: «اجعل كل الصفحات بعرض واحد واسع كالرئيسية») */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15202b; --surface: #192734; --raise: #1e2c3a;
    --ink: #e7ecef; --soft: #a3b0bc; --faint: #8796a3; --line: #2b3a48; --line-2: #38444d;
    --brand: #a9c4ec; --brand-2: #7ea6e0; --accent: #6cb2f0; --signal: #f2b33a;
    --sea: #172532; --land: #22313f; --land-line: #15202b; --hl: #2f5f9e; --hl-2: #4d7fc0;
    --g-rasmi: #a3bdeb; --g-muakkad: #6cc3cb; --g-ghayr: #dcb059; --g-nizaa: #ee9067; --g-khata: #f0838d; --g-bila: #c6babd;
    --side-a: #7ea6e0; --side-b: #eba36a; --logo: #24497a;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #15202b; --surface: #192734; --raise: #1e2c3a;
  --ink: #e7ecef; --soft: #a3b0bc; --faint: #8796a3; --line: #2b3a48; --line-2: #38444d;
  --brand: #a9c4ec; --brand-2: #7ea6e0; --accent: #6cb2f0; --signal: #f2b33a;
  --sea: #172532; --land: #22313f; --land-line: #15202b; --hl: #2f5f9e; --hl-2: #4d7fc0;
  --g-rasmi: #a3bdeb; --g-muakkad: #6cc3cb; --g-ghayr: #dcb059; --g-nizaa: #ee9067; --g-khata: #f0838d; --g-bila: #c6babd;
  --side-a: #7ea6e0; --side-b: #eba36a; --logo: #24497a;
  --shadow: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 16px; }
.read { max-width: var(--read); margin: 0 auto; padding: 0 16px; }

/* ───────── head ───────── */
.top-bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.top-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand svg > rect:first-child { fill: var(--logo); }
.theme { order: 3; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; padding: 0; }
.theme:hover { background: var(--raise); color: var(--ink); }
.theme svg { width: 18px; height: 18px; }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}
.brand b { font: 900 24px/1 var(--font-display); color: var(--brand); letter-spacing: 0; }
.brand small { display: block; font-size: 12px; color: var(--soft); margin-top: 3px; }
nav.tabs { display: flex; gap: 4px; font-size: 14.5px; margin-inline-start: auto; }
nav.tabs a { padding: 7px 12px; border-radius: 8px; color: var(--soft); }
nav.tabs a:hover { background: var(--raise); color: var(--ink); }
nav.tabs a.on { color: var(--brand); font-weight: 600; background: color-mix(in srgb, var(--hl) 10%, transparent); }
@media (max-width: 640px) { .brand small { display: none; } .theme { order: 2; margin-inline-start: auto; } nav.tabs { order: 4; width: 100%; justify-content: space-between; padding-bottom: 8px; margin: 0; } }

/* ───────── small parts ───────── */
/* one calm hue per grade, clear without shouting (owner, 2026-10-28: «واضحة من ناحية اللون ولكن غير فاقعة»؛ the first of two options) */
.g { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-ui); padding: 5px 9px 6px; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); white-space: nowrap; vertical-align: 2px; }
.g::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.g-rasmi { --c: var(--g-rasmi); } .g-muakkad { --c: var(--g-muakkad); } .g-ghayr { --c: var(--g-ghayr); }
.g-nizaa { --c: var(--g-nizaa); } .g-khata { --c: var(--g-khata); text-decoration: line-through; }
/* «بلا دليل» lighter than the rest, and nothing like «إعلان رسمي» (owner, 2026-10-28): no fill, a dashed edge, a hollow dot */
.g-bila { --c: var(--g-bila); background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--c) 45%, transparent); font-weight: 500; }
.g-bila::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.g.quiet { padding: 0; background: none; font-weight: 500; }
.kick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 13px/1.4 var(--font-ui); color: var(--accent); }
.kick .ago { color: var(--faint); font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 20%, transparent); }
.sec-head { display: flex; align-items: center; gap: 12px; margin: 44px 0 14px; }
.sec-head h2 { margin: 0; font: 800 17px/1.3 var(--font-display); }
.sec-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); font-size: 14.5px; }
.more::after { content: "←"; }

/* ───────── maps ───────── */
.map { width: 100%; height: auto; background: var(--sea); }
.map .land { fill: var(--land); stroke: var(--land-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .hl { fill: var(--hl); stroke: var(--land-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .clabel { font-family: var(--font-display); font-weight: 800; fill: #fff; paint-order: stroke; stroke: color-mix(in srgb, var(--hl) 80%, #000); stroke-width: .35em; stroke-linejoin: round; text-anchor: middle; }
.map .olabel { font-family: var(--font-display); font-weight: 600; fill: var(--soft); text-anchor: middle; }
.map .plabel { font-family: var(--font-ui); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: .3em; stroke-linejoin: round; }
.media { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--sea); }

/* ───────── home ───────── */
.lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.lead .media { border-radius: 12px; min-height: 280px; }
.lead .media svg { width: 100%; height: 100%; }
.lead h2 { margin: 10px 0 10px; font: 800 clamp(19px, 2.2vw, 24px)/1.55 var(--font-display); }
.lead p.short { margin: 0 0 16px; font: 400 16.5px/1.95 var(--font-read); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; padding: 14px; } .lead .media { min-height: 0; aspect-ratio: 4 / 3; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fact { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 10px; }
.fact .n { font: 800 21px/1.1 var(--font-display); color: var(--brand); }
.fact .l { font-size: 12.5px; color: var(--soft); margin: 5px 0 8px; line-height: 1.5; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr 1fr; } }
.mini { margin: 16px 0 12px; display: grid; gap: 8px; }
.mini div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 14px; line-height: 1.7; }
.mini time { font-size: 12px; color: var(--faint); padding-top: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card .media { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.card .body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.card h3 { margin: 0; font: 700 15.5px/1.6 var(--font-display); }
.card p { margin: 0; font: 400 14.5px/1.85 var(--font-read); color: var(--soft); }
.lines { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.lines li + li { border-top: 1px solid var(--line); }
.lines a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 16px; font-size: 15px; }
.lines a:hover { background: var(--raise); }
.lines small { font-size: 12.5px; color: var(--faint); white-space: nowrap; }

/* ───────── the feed ───────── */
.feed { margin-top: 26px; display: grid; gap: 12px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; }
.post .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--faint); }
.post .story { color: var(--accent); font-weight: 600; }
.post p { margin: 0; font: 400 16.5px/1.9 var(--font-read); }
.post .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--soft); flex-wrap: wrap; }

/* ───────── a story ───────── */
.hero { margin: 22px 0 0; }
.hero .media { border-radius: 16px; }
h1 { font: 800 clamp(20px, 2.8vw, 26px)/1.55 var(--font-display); margin: 16px 0 10px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.nabdha { margin: 0; font: 400 17.5px/2.05 var(--font-read); }
.story-facts { margin: 20px 0 0; }
.latest { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--signal) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); font-size: 15px; line-height: 1.85; }
.latest b { color: var(--ink); }
section.open { margin-top: 28px; }
section.open > h2 { font: 800 16.5px/1.4 var(--font-display); margin: 0 0 10px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; font: 400 16.5px/1.95 var(--font-read); }
.box ul { margin: 0; padding-inline-start: 18px; }
.box li + li { margin-top: 6px; }
.rumor { border: 1px dashed var(--g-bila); }
.drawers { margin-top: 32px; border-top: 1px solid var(--line); }
.drawer { border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.drawer > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary .dt { font: 700 15.5px/1.4 var(--font-display); display: flex; align-items: center; gap: 10px; }
.drawer > summary .dt::before { content: ""; width: 9px; height: 9px; border-inline-end: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s; margin-inline-end: 4px; }
.drawer[open] > summary .dt::before { transform: rotate(225deg); }
.drawer > summary .dh { font: 600 12px/1 var(--font-ui); color: var(--soft); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; }
.dbody { padding: 0 0 22px; }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.claims li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; font: 400 16.5px/1.95 var(--font-read); }
.claims li .g { margin-inline-end: 8px; }
.note { display: block; font: 400 13px/1.7 var(--font-ui); color: var(--soft); margin-top: 6px; }
.qa { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 15px; margin: 0; }
.qa dt { font-weight: 600; color: var(--accent); }
.qa dd { margin: 0; font-family: var(--font-read); line-height: 1.9; }
@media (max-width: 560px) { .qa { grid-template-columns: 1fr; } .qa dd { margin-bottom: 8px; } }
.dispute { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.dispute h3 { margin: 0; padding: 11px 16px; font: 700 16px/1.5 var(--font-ui); background: var(--raise); border-bottom: 1px solid var(--line); }
.sides { display: grid; grid-template-columns: 1fr 1fr; }
.side { padding: 13px 16px; font: 400 16px/1.9 var(--font-read); }
.side + .side { border-inline-start: 1px solid var(--line); }
.side .who { font: 700 13.5px/1.4 var(--font-ui); margin-bottom: 4px; color: var(--side-a); }
.side + .side .who { color: var(--side-b); }
@media (max-width: 620px) { .sides { grid-template-columns: 1fr; } .side + .side { border-inline-start: 0; border-top: 1px solid var(--line); } }
.timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 20px 14px; font: 400 16px/1.85 var(--font-read); }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline .t { display: block; font: 600 13px/1.5 var(--font-ui); color: var(--accent); }
sup.r { font: 600 11px/1 var(--font-ui); }
sup.r a { color: var(--accent); background: var(--raise); border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; margin-inline-start: 2px; cursor: pointer; }
.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sources li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.7; scroll-margin-top: 90px; }
.sources li:target { outline: 2px solid var(--accent); }
.sources .num { display: inline-block; min-width: 24px; font-weight: 700; color: var(--accent); }
.sources .who { font-weight: 700; }
.sources .from { color: var(--soft); font-size: 12.5px; }
.sources a { color: var(--accent); }
.sources .ttl { unicode-bidi: plaintext; color: var(--soft); }
.pop { position: absolute; z-index: 50; max-width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 14px; line-height: 1.7; }
.pop[hidden] { display: none; }

/* ───────── the method ───────── */
.prose h2 { font: 800 17.5px/1.4 var(--font-display); margin: 30px 0 8px; }
.prose p { font: 400 17px/2 var(--font-read); margin: 0 0 12px; }
.gtable { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gtable td, .gtable th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.gtable th { font-weight: 600; color: var(--soft); font-size: 12.5px; background: var(--raise); }

/* ───────── foot ───────── */
footer.foot { margin-top: 64px; background: var(--surface); border-top: 1px solid var(--line); }
footer.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 28px; font-size: 13.5px; color: var(--soft); }
footer.foot nav { display: flex; gap: 18px; }

/* ───────── a pulse, not a dry page (owner, 2026-10-28: «نريده فيه بعض النبض وليس جافاً») ───────── */
@keyframes beat { from { transform: scale(1); opacity: .55; } to { transform: scale(2.8); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.live-dot { position: relative; box-shadow: none; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal); animation: beat 2.2s ease-out infinite; will-change: transform, opacity; }
.post, .stat { animation: rise .5s ease-out both; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; } .card:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .live-dot::after, .post, .stat { animation: none; } }

/* the sign that agents do the work, and the line of what they did */
.ai-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--font-ui); color: var(--brand); background: color-mix(in srgb, var(--hl) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hl) 25%, var(--line)); padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.ai-pill:hover { border-color: var(--hl); }
.pulse-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--soft); }
.pulse-line b { color: var(--ink); font-weight: 700; }
.pulse-line .go { margin-inline-start: auto; color: var(--accent); font-weight: 600; }
.sec-head h2::before { content: ""; display: inline-block; width: 5px; height: 18px; background: var(--signal); border-radius: 3px; margin-inline-end: 9px; vertical-align: -3px; }

/* the narrow screen: nothing wider than the phone */
.lead > *, .cards > *, .facts > *, .sides > * { min-width: 0; }
.by { font-size: 12px; color: var(--soft); margin-inline-start: 6px; }
.fact .by { display: block; margin: 5px 0 0; }

/* the agents' page */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 6px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; }
.stat .n { font: 800 24px/1.1 var(--font-display); color: var(--brand); }
.stat .l { font-size: 12.5px; color: var(--soft); margin-top: 6px; line-height: 1.5; }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.agent { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.agent b { font: 700 16px/1.4 var(--font-display); }
.agent .who { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.agent p { margin: 0; font-size: 14px; color: var(--soft); line-height: 1.75; }
.agent a { font-size: 13px; color: var(--accent); font-weight: 600; }
table.work { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.work td, table.work th { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
table.work th { font-weight: 600; color: var(--soft); font-size: 12px; background: var(--raise); }
.table-wrap { overflow-x: auto; }
pre.instr { direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-word; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.worklog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.worklog li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.8; }
.worklog .t { color: var(--accent); font-weight: 600; }

.topic { font: 600 11.5px/1 var(--font-ui); color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 9%, transparent); border-radius: 5px; padding: 4px 7px 5px; }

/* the story at the home's width: the way back, a main column and a side one (owner, 2026-10-28) */
.crumbs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; font-size: 13px; color: var(--soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "‹"; margin-inline-end: 6px; color: var(--faint); }
.crumbs a { color: var(--soft); }
.crumbs a:hover, .crumbs a[aria-current] { color: var(--accent); }
.crumbs .back { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 600; }
.crumbs .back:hover { border-color: var(--accent); color: var(--accent); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "head aside" "body aside"; gap: 0 44px; margin-top: 10px; }
.s-head { grid-area: head; }
.s-body { grid-area: body; }
.s-aside { grid-area: aside; align-self: start; position: sticky; top: 84px; display: grid; gap: 14px; margin-top: 18px; }
.s-head .kick { margin-top: 6px; }
.standfirst { margin: 0 0 12px; font: 400 17px/1.9 var(--font-read); color: var(--soft); }
.s-head .hero { margin: 4px 0 20px; }
.s-head .hero .media { aspect-ratio: 3.2 / 1; }
.s-head .hero .media svg { width: 100%; height: 100%; }
.s-aside .facts { grid-template-columns: 1fr; }
.s-aside .latest { margin: 0; }
.toc { display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; }
.toc b { font: 700 13px/1.4 var(--font-ui); color: var(--soft); margin-bottom: 4px; }
.toc a { color: var(--ink); padding: 3px 0; }
.toc a:hover { color: var(--accent); }
h2.group { font: 800 15px/1.4 var(--font-display); color: var(--soft); margin: 30px 0 0; }
h2.group + .drawers { margin-top: 8px; }
@media (max-width: 960px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "aside" "body"; }
  .s-aside { position: static; margin-top: 0; }
  .s-aside .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-head .hero .media { aspect-ratio: 2.2 / 1; }
}
@media (max-width: 480px) { .s-aside .facts { grid-template-columns: 1fr 1fr; } }

/* «مصادرنا» (owner, 2026-10-28) */
.outlets { list-style: none; margin: 0 0 8px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.outlets li { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; padding: 12px 16px; margin: 0; }
.outlets li + li { border-top: 1px solid var(--line); }
.outlets li:target { background: color-mix(in srgb, var(--signal) 12%, var(--surface)); }
.outlets b { font: 700 15.5px/1.6 var(--font-ui); min-width: 0; }
.outlets b a { color: var(--ink); text-decoration: none; }
.outlets b a:hover { color: var(--accent); }
.outlets .uses { font: 600 12.5px/1.6 var(--font-ui); color: var(--soft); white-space: nowrap; }
.outlets .meta { grid-column: 1 / -1; font: 400 13px/1.8 var(--font-ui); color: var(--soft); }
.sources a.who { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--faint); }
/* a place on a map: one size on the screen everywhere, still; only the dot of a story still unfolding beats */
.map .pt, .map .pt-edge, .map .pt-halo { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map .pt-halo { stroke: var(--signal); stroke-opacity: .22; stroke-width: 22px; }
.map .pt-edge { stroke: var(--surface); stroke-width: 13px; }
.map .pt { stroke: var(--signal); stroke-width: 9px; }
.brand .beta { font: 600 10.5px/1 var(--font-ui); font-style: normal; color: var(--soft); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 5px 4px; margin-inline-start: 7px; vertical-align: 5px; }
.conflict { font: 500 13.5px/1.7 var(--font-ui); color: var(--g-nizaa); background: color-mix(in srgb, var(--g-nizaa) 8%, transparent); border-radius: 8px; padding: 7px 11px; margin: 10px 0 0; }
/* the keyboard's place, always visible (review, 2026-10-28, row 31) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }