/* Jordan in Numbers — premium editorial theme (light + dark).
   Provisional brand tokens from logo_vector.svg until the official palette is confirmed.
   No inline styles anywhere (CSP style-src 'self'): every visual rule lives here. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: optional; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700 800; font-display: optional; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: optional; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700 800; font-display: optional; }

/* ---------- Tokens ---------- */
:root {
    color-scheme: light;
    --navy: #183672;
    --navy-deep: #0D1F44;
    --blue: #3D81D0;
    --blue-light: #4A90D9;
    --sand: #C9A77A;
    --sand-soft: #F4EDE2;

    --bg: #FFFFFF;
    --bg-soft: #F5F8FC;
    --surface: #FFFFFF;
    --ink: #172234;
    --heading: #183672;
    --muted: #556275;      /* ≥4.5:1 on --bg-soft */
    --line: #E3E8F0;
    --link: #2766B0;       /* ≥4.5:1 on white */
    --accent: #2766B0;
    --on-accent: #FFFFFF;
    --header-bg: rgba(255, 255, 255, .86);
    --shadow: 0 1px 2px rgba(23, 34, 52, .04), 0 8px 24px rgba(23, 34, 52, .06);
    --shadow-lift: 0 2px 4px rgba(23, 34, 52, .06), 0 16px 40px rgba(23, 34, 52, .12);
    --hero-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%);
    --fallback: linear-gradient(150deg, #E8D3B0 0%, #C9A77A 45%, #8A6A45 100%);
    --band-fade: linear-gradient(90deg, rgba(13, 31, 68, .94) 0%, rgba(24, 54, 114, .78) 45%, rgba(24, 54, 114, .2) 100%);
    --badge-line: #8A94A6;
    --caveat-bg: #FFF8E6; --caveat-line: #F0D58C;
    --footer-bg: #0D1F44; --footer-ink: #DCE5F4;
    --spark: #3D81D0;
    --tile-icon-bg: linear-gradient(135deg, #F5F8FC, #F4EDE2);
    --q1: #E8F0FA; --q2: #B9D2F0; --q3: #7FAEE3; --q4: #3D81D0; --q5: #183672;
    --hatch-bg: #F5F8FC; --hatch-line: #B6C2D4;
    --map-stroke: #FFFFFF;
    --img-dim: none;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
    --radius: 14px;
    --font: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
:root:lang(ar) { --font: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }

/* Dark tokens. Applied when the system is dark (unless the visitor forced light), or when forced dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0B1426; --bg-soft: #111E36; --surface: #142341;
        --ink: #E6ECF5; --heading: #F2F6FC; --muted: #A8B4C7; --line: #24365A;
        --link: #8CB8F0; --accent: #4A90D9; --on-accent: #0B1426;
        --header-bg: rgba(11, 20, 38, .86);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .5);
        --hero-bg: linear-gradient(180deg, #0B1426 0%, #0F1B33 100%);
        --fallback: linear-gradient(150deg, #3A3022 0%, #6B5236 50%, #2A2117 100%);
        --badge-line: #7F8CA3;
        --caveat-bg: #2A2414; --caveat-line: #6B5A2A;
        --footer-bg: #070E1C; --footer-ink: #C3CEE0;
        --spark: #6FA8EC;
        --tile-icon-bg: linear-gradient(135deg, #111E36, #1A2A47);
        --q1: #1E3354; --q2: #2B5486; --q3: #3E78BE; --q4: #6FA8EC; --q5: #BFD9F7;
        --hatch-bg: #142341; --hatch-line: #3A4F74;
        --map-stroke: #5A7199;
        --img-dim: brightness(.82) saturate(.95);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0B1426; --bg-soft: #111E36; --surface: #142341;
    --ink: #E6ECF5; --heading: #F2F6FC; --muted: #A8B4C7; --line: #24365A;
    --link: #8CB8F0; --accent: #4A90D9; --on-accent: #0B1426;
    --header-bg: rgba(11, 20, 38, .86);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .5);
    --hero-bg: linear-gradient(180deg, #0B1426 0%, #0F1B33 100%);
    --fallback: linear-gradient(150deg, #3A3022 0%, #6B5236 50%, #2A2117 100%);
    --badge-line: #7F8CA3;
    --caveat-bg: #2A2414; --caveat-line: #6B5A2A;
    --footer-bg: #070E1C; --footer-ink: #C3CEE0;
    --spark: #6FA8EC;
    --tile-icon-bg: linear-gradient(135deg, #111E36, #1A2A47);
    --q1: #1E3354; --q2: #2B5486; --q3: #3E78BE; --q4: #6FA8EC; --q5: #BFD9F7;
    --hatch-bg: #142341; --hatch-line: #3A4F74;
    --map-stroke: #5A7199;
    --img-dim: brightness(.82) saturate(.95);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg); overflow-x: hidden; }
h1, h2, h3 { line-height: 1.15; color: var(--heading); margin: 0 0 var(--s4); letter-spacing: -.01em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { letter-spacing: 0; line-height: 1.35; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 var(--s4); }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, .nav-menu-label:focus-visible {
    outline: 3px solid var(--blue-light); outline-offset: 2px; border-radius: 6px;
}
img { max-width: 100%; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--s5); }
@media (max-width: 600px) { .wrap { padding-inline: var(--s4); } }
.bleed { margin-inline: calc(50% - 50vw); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: var(--s4); top: var(--s2); background: var(--surface); padding: var(--s2); z-index: 100; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); }
:lang(ar) .eyebrow { letter-spacing: 0; font-size: .9rem; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.section { margin-top: var(--s8); }
.section-title { margin-bottom: var(--s5); }
.more { font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------- Buttons & inputs ---------- */
button, .button {
    font: inherit; font-weight: 600; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px;
    padding: var(--s3) var(--s5); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s2);
    transition: transform .15s ease, box-shadow .15s ease;
}
button:hover, .button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
input, select { font: inherit; color: var(--ink); background: var(--surface); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50; background: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: var(--s5); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--heading); flex: none; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.bm-o { fill: var(--navy); }
.bm-i { fill: var(--blue); }
:root[data-theme="dark"] .bm-o { fill: #E6ECF5; }
:root[data-theme="dark"] .bm-i { fill: #8CB8F0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bm-o { fill: #E6ECF5; } :root:not([data-theme="light"]) .bm-i { fill: #8CB8F0; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.05rem; }
.brand-by { font-size: .72rem; color: var(--muted); font-weight: 600; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
.nav-panel { display: flex; align-items: center; gap: var(--s5); flex: 1; }
.nav { display: flex; align-items: center; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; }
.nav a, .nav-menu-label {
    display: block; padding: var(--s2) var(--s3); border-radius: 999px; color: var(--ink); text-decoration: none;
    font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap;
}
.nav a:hover, .nav-menu-label:hover, .nav a.is-active { background: var(--bg-soft); color: var(--heading); }
.nav-menu-label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.submenu {
    position: absolute; top: 100%; inset-inline-start: 0; min-width: 240px; list-style: none; margin: 0; padding: var(--s2);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-menu:hover .submenu, .has-menu:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { border-radius: 10px; font-weight: 500; }
.site-search { margin-inline-start: auto; }
.site-search input { width: 200px; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); }
.header-tools { display: flex; align-items: center; gap: var(--s2); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border: 1px solid var(--line); }
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-to-dark svg { fill: currentColor; stroke: none; }
.theme-to-light { display: none; }
:root[data-theme="dark"] .theme-to-light { display: inline-flex; }
:root[data-theme="dark"] .theme-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-to-light { display: inline-flex; }
    :root:not([data-theme="light"]) .theme-to-dark { display: none; }
}
.lang-switch { font-weight: 700; text-decoration: none; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: 999px; color: var(--link); }
.lang-switch:hover { background: var(--bg-soft); }

@media (max-width: 1080px) {
    .header-row { flex-wrap: wrap; }
    .nav-burger { display: inline-flex; margin-inline-start: auto; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: 12px; border: 1px solid var(--line); }
    .burger-lines, .burger-lines::before, .burger-lines::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s ease, opacity .2s ease; }
    .burger-lines::before, .burger-lines::after { content: ""; position: absolute; inset-inline-start: 0; }
    .burger-lines::before { top: -6px; }
    .burger-lines::after { top: 6px; }
    .nav-panel { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--s3); padding-bottom: var(--s4); }
    .nav-toggle:checked ~ .nav-panel { display: flex; }
    .nav-toggle:checked + .nav-burger .burger-lines { transform: rotate(45deg); }
    .nav-toggle:checked + .nav-burger .burger-lines::before { transform: translateY(6px) rotate(-90deg); }
    .nav-toggle:checked + .nav-burger .burger-lines::after { opacity: 0; }
    .nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--blue-light); outline-offset: 2px; }
    .nav { flex-direction: column; align-items: stretch; }
    .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 var(--s4); min-width: 0; background: transparent; }
    .nav-menu-label::after { display: none; }
    .site-search { margin-inline-start: 0; }
    .site-search input { width: 100%; }
}

/* ---------- Image slots ---------- */
.img-fallback { background: var(--fallback); position: relative; overflow: hidden; }
.img-fallback::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 15%, rgba(255, 255, 255, .28), transparent 45%),
                repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 23px);
}
picture img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-dim); }

/* ---------- Home hero (split) ---------- */
.hero-split { background: var(--hero-bg); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--s7); align-items: center; padding-block: var(--s7) var(--s8); }
.hero-search { display: flex; gap: var(--s2); max-width: 600px; margin-top: var(--s5); padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: var(--s2) var(--s4); font-size: 1.02rem; }
.hero-search input:focus-visible { outline: none; }
.hero-search:focus-within { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.hero-stats { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.hero-stats a { display: block; text-decoration: none; padding-inline-start: var(--s3); border-inline-start: 3px solid var(--sand); }
.hero-stat-value { display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-stat-label { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.hero-visual { position: relative; }
.hero-media img { object-position: 78% 50%; } /* keep the hillside of houses (right side of the photo) in frame */
.hero-media { display: block; width: 100%; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); }
.float-card {
    position: absolute; inset-inline-start: -28px; bottom: 34px; display: flex; flex-direction: column; gap: 2px;
    background: var(--surface); color: var(--ink); text-decoration: none; padding: var(--s4) var(--s5);
    border-radius: var(--radius); box-shadow: var(--shadow-lift); border: 1px solid var(--line); min-width: 200px;
    transition: transform .2s ease;
}
.float-card:hover { transform: translateY(-3px); }
.float-card-title { font-size: .82rem; font-weight: 700; color: var(--heading); }
.float-card-value { font-size: 1.8rem; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.15; }
.float-card-meta { font-size: .75rem; color: var(--muted); }
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6); }
    .hero-media { aspect-ratio: 16 / 10; }
    .float-card { inset-inline-start: var(--s4); bottom: var(--s4); }
}
@media (max-width: 520px) { .hero-stats { grid-template-columns: 1fr; } }

/* ---------- Page heads & topic band ---------- */
.page-head { padding-block: var(--s7) var(--s5); }
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.topic-band { position: relative; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: var(--s6); }
.topic-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.topic-media.pattern { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); }
.topic-media.pattern::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(60deg, transparent 0 28px, rgba(255, 255, 255, .05) 28px 29px),
                repeating-linear-gradient(-60deg, transparent 0 28px, rgba(255, 255, 255, .05) 28px 29px);
}
.topic-band::after { content: ""; position: absolute; inset: 0; background: var(--band-fade); }
:root[dir="rtl"] .topic-band::after { transform: scaleX(-1); }
.topic-band-text { position: relative; z-index: 1; width: 100%; padding-block: var(--s7) var(--s6); color: #FFFFFF; }
.topic-band-text h1 { color: #FFFFFF; margin-bottom: var(--s2); }
.topic-band-text .lead { color: rgba(255, 255, 255, .9); }
.topic-band-text .eyebrow { color: #F0D9B5; }

/* ---------- KPI cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); padding: 0; margin: 0; list-style: none; }
.kpi {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5);
    display: flex; flex-direction: column; gap: var(--s1); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.kpi-title { font-size: .9rem; color: var(--muted); margin: 0; font-weight: 600; }
.kpi-title a { color: inherit; text-decoration: none; }
.kpi-title a:hover { color: var(--link); text-decoration: underline; }
.kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-unit { font-size: .82rem; color: var(--muted); }
.kpi-meta { font-size: .78rem; color: var(--muted); margin-top: auto; padding-top: var(--s2); }
.spark { width: 100%; height: 34px; margin-top: var(--s2); overflow: visible; }
.spark polyline { fill: none; stroke: var(--spark); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .spark-dashed { stroke-dasharray: 4 4; }
.kpis-single { grid-template-columns: minmax(230px, 380px); }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px var(--s2); border-radius: 999px; border: 1px dashed var(--badge-line); color: var(--muted); width: fit-content; }
.untranslated { font-size: .7rem; color: var(--muted); border: 1px solid var(--line); padding: 0 var(--s1); border-radius: 4px; }

/* ---------- Topic tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); list-style: none; padding: 0; margin: 0; }
.tile {
    display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile-media { display: block; width: 100%; aspect-ratio: 16 / 9; }
.tile-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--tile-icon-bg); color: var(--accent); }
.tile-icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-body { display: block; padding: var(--s4) var(--s5) var(--s5); }
.tile h3 { margin-bottom: var(--s2); }
.tile p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ---------- Facts + map teaser ---------- */
.duo { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.fact { border-inline-start: 4px solid var(--sand); background: var(--bg-soft); padding: var(--s4) var(--s5); border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.fact-text { font-size: 1.06rem; color: var(--ink); margin: 0 0 var(--s2); }
.fact-source { font-size: .8rem; color: var(--muted); margin: 0; }
.map-teaser { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); }
.map-teaser .map svg { max-height: 360px; }
.map-teaser p { color: var(--muted); }

/* ---------- Charts ---------- */
.chart { margin: var(--s5) 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.chart figcaption { margin-bottom: var(--s3); }
.chart-title { font-weight: 700; color: var(--heading); display: block; font-size: 1.05rem; }
.chart-meta { font-size: .82rem; color: var(--muted); }
.chart-canvas { width: 100%; height: 320px; }
.chart details { margin-top: var(--s3); font-size: .9rem; }
.chart summary { cursor: pointer; color: var(--link); font-weight: 600; }
.data-table { border-collapse: collapse; margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line); text-align: start; }
.table-scroll { max-height: 320px; overflow: auto; }
.source-note { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s4); }
.link-list { columns: 2 240px; padding-inline-start: var(--s5); }

/* ---------- Explorer ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; background: var(--bg-soft); border: 1px solid var(--line); padding: var(--s4); border-radius: var(--radius); }
.filters label { display: flex; flex-direction: column; gap: var(--s1); font-size: .85rem; color: var(--muted); }
.filters input, .filters select { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 10px; }
.filter-q { flex: 1 1 260px; }
.result-count { color: var(--muted); font-size: .9rem; margin-top: var(--s4); }
.results { list-style: none; padding: 0; margin: 0; }
.result { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line); border-radius: 8px; }
.result:hover { background: var(--bg-soft); }
.result-title { font-weight: 700; text-decoration: none; }
.result-meta { grid-column: 1; font-size: .85rem; color: var(--muted); }
.result-value { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; text-align: end; }
.result-value small { display: block; font-weight: 400; color: var(--muted); }
.empty { padding: var(--s6) 0; }
.empty a { margin-inline-end: var(--s3); }
.pager { display: flex; gap: var(--s4); justify-content: center; align-items: center; padding: var(--s5) 0; }
.crumbs { padding-top: var(--s5); font-size: .9rem; }
.meta, .note { color: var(--muted); font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Governorate map ---------- */
.map-controls { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; background: var(--bg-soft); border: 1px solid var(--line); padding: var(--s4); border-radius: var(--radius); }
.map-controls label { display: flex; flex-direction: column; gap: var(--s1); font-size: .85rem; color: var(--muted); }
.map-controls select { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 10px; max-width: 100%; }
.map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--s6); align-items: start; margin-top: var(--s5); }
@media (max-width: 760px) { .map-layout { grid-template-columns: 1fr; } }
.map svg { width: 100%; height: auto; max-height: 78vh; display: block; }
.map path { stroke: var(--map-stroke); stroke-width: 1.5; transition: opacity .15s; }
.map a:hover path, .map a:focus-visible path { opacity: .85; stroke: var(--ink); stroke-width: 2.5; }
.map a:focus-visible { outline: none; }
.q1 { fill: var(--q1); background: var(--q1); }
.q2 { fill: var(--q2); background: var(--q2); }
.q3 { fill: var(--q3); background: var(--q3); }
.q4 { fill: var(--q4); background: var(--q4); }
.q5 { fill: var(--q5); background: var(--q5); }
path.nodata { fill: url(#hatch); }
.hatch-bg { fill: var(--hatch-bg); }
.hatch-line { stroke: var(--hatch-line); stroke-width: 2; }
.map path.sel { stroke: var(--ink); stroke-width: 3; }
.legend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); }
.legend ul { list-style: none; padding: 0; margin: var(--s3) 0; }
.legend li { display: flex; align-items: center; gap: var(--s2); font-size: .9rem; font-variant-numeric: tabular-nums; padding: 2px 0; }
.swatch { width: 18px; height: 14px; border: 1px solid var(--line); border-radius: 3px; flex: none; }
.swatch.nodata { background: repeating-linear-gradient(45deg, var(--hatch-bg) 0 3px, var(--hatch-line) 3px 5px); }
.legend-title { margin-top: 0; font-size: 1.1rem; }
.legend-year { color: var(--muted); font-weight: 400; }
.legend-unit, .legend-source { color: var(--muted); font-size: .88rem; }
.ranking { margin-top: var(--s6); width: 100%; max-width: 560px; }
.ranking caption { text-align: start; font-weight: 700; padding-bottom: var(--s2); color: var(--heading); }
.gov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.gov-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); }
.gov-card h2 { font-size: 1rem; margin: 0 0 var(--s2); }
.gov-card.highlight { border-color: var(--accent); box-shadow: 0 0 0 2px var(--blue-light); }

/* ---------- Discover / stories ---------- */
.story { max-width: 820px; }
.story-text { font-size: 1.1rem; line-height: 1.75; }
.story-map { margin: var(--s5) 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.story-map .map svg { max-height: 60vh; }
.caveat { margin-top: var(--s6); background: var(--caveat-bg); border: 1px solid var(--caveat-line); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.caveat h2 { margin: 0 0 var(--s2); font-size: 1rem; color: var(--ink); }

/* ---------- About / Sources ---------- */
.about-logo { display: block; width: min(320px, 70%); height: auto; margin-bottom: var(--s5); background: #FFFFFF; padding: var(--s4); border-radius: var(--radius); box-shadow: var(--shadow); }
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--s6); }
.prose li { margin-bottom: var(--s2); }
.source-block { border-top: 1px solid var(--line); padding: var(--s5) 0; }
.source-block h2 { margin: 0 0 var(--s2); font-size: 1.15rem; }
.source-block .licence { font-size: .9rem; color: var(--muted); }
.error-page { padding-block: var(--s8); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s8); background: var(--footer-bg); color: var(--footer-ink); padding-top: var(--s7); font-size: .92rem; }
.site-footer a { color: #FFFFFF; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: #FFFFFF; margin-bottom: var(--s3); }
:lang(ar) .footer-col h2 { letter-spacing: 0; font-size: .95rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.footer-col a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); }
.brand-light .brand-name { color: #FFFFFF; }
.brand-light .brand-by { color: var(--footer-ink); }
.site-footer .bm-o { fill: #FFFFFF; }
.site-footer .bm-i { fill: var(--blue-light); }
.footer-brand .disclaimer { margin-top: var(--s4); max-width: 46ch; }
.footer-brand .initiative { font-weight: 600; color: #FFFFFF; }
.footer-sources { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--s6); padding-block: var(--s4) var(--s5); font-size: .82rem; }
.footer-sources p { margin: 0; }

/* ---------- Share ---------- */
.share-btn {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: var(--s2);
    padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    color: var(--link); font-size: .82rem; font-weight: 600; text-decoration: none; line-height: 1.6;
}
.share-btn:hover { background: var(--bg-soft); border-color: var(--link); }
.share-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.share-btn svg circle { fill: currentColor; stroke: none; }
.tiles > li { position: relative; }
.tiles > li > .share-btn { position: absolute; top: var(--s3); inset-inline-end: var(--s3); margin: 0; box-shadow: var(--shadow); }
.fact .share-btn { margin-top: var(--s3); }
.legend .share-btn, .story-map .share-btn { margin-top: var(--s3); }
.share-menu {
    position: absolute; z-index: 60; display: flex; flex-direction: column; min-width: 230px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.share-menu [role=menuitem] {
    display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; box-shadow: none;
    color: var(--ink); font: inherit; font-size: .92rem; text-align: start; text-decoration: none; cursor: pointer;
}
.share-menu [role=menuitem]:hover, .share-menu [role=menuitem]:focus-visible { background: var(--bg-soft); transform: none; }
.share-toast {
    position: fixed; inset-inline: 0; bottom: var(--s5); z-index: 70; width: fit-content; margin: 0 auto; padding: 10px 18px;
    border-radius: 999px; background: var(--heading); color: var(--bg); font-weight: 600; opacity: 0; transition: opacity .2s ease;
}
.share-toast.is-on { opacity: 1; }
.share-page { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: var(--s6); align-items: start; margin-bottom: var(--s7); }
.share-preview { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.share-options h2 { font-size: 1.05rem; margin: 0 0 var(--s3); }
.share-links { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; padding: 0; margin: 0 0 var(--s5); }
@media (max-width: 760px) { .share-page { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}