/* Fonts are served from this site (fonts/, SIL Open Font License): no
   third-party requests, so visitors' browsers never contact Google. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-serif-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}

/* CSP lives in _headers only (see CLAUDE.md) — no <meta> CSP here, so there
   is a single policy to reason about instead of an intersection of two. */

/* ─ TOKENS ─ */
:root{
  --bg:#f6f7f9;--surface:#ffffff;--surface2:#f0f2f5;--line:#dde2e8;--line2:#c9d0d9;
  --ink:#121a24;--ink2:#46525f;--ink3:#6b7684;
  --accent:#1f5fae;--accent-soft:#e6eef8;
  --s1:#b4322d;--s2:#c4621f;--s3:#9a7a12;--s4:#2f7d4f;--s5:#1d5e3a;
  --ok:#2f7d4f;--warn:#9a7a12;--err:#b4322d;
  --warn-soft:#fbf5e3;--err-soft:#fbeceb;--ok-soft:#e8f4ed;
  --shadow:0 1px 2px rgba(18,26,36,.06),0 4px 16px rgba(18,26,36,.05);
  --radius:12px;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b111a;--surface:#111a26;--surface2:#16212f;--line:#223143;--line2:#2e4157;
    --ink:#e7edf4;--ink2:#a9b6c4;--ink3:#7b8a9b;
    --accent:#6aa5f0;--accent-soft:#16263b;
    --s1:#ef6b63;--s2:#f0934f;--s3:#d9b44a;--s4:#5cbf83;--s5:#3fa36b;
    --ok:#5cbf83;--warn:#d9b44a;--err:#ef6b63;
    --warn-soft:#2a2414;--err-soft:#2c1717;--ok-soft:#132a1e;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#0b111a;--surface:#111a26;--surface2:#16212f;--line:#223143;--line2:#2e4157;
  --ink:#e7edf4;--ink2:#a9b6c4;--ink3:#7b8a9b;
  --accent:#6aa5f0;--accent-soft:#16263b;
  --s1:#ef6b63;--s2:#f0934f;--s3:#d9b44a;--s4:#5cbf83;--s5:#3fa36b;
  --ok:#5cbf83;--warn:#d9b44a;--err:#ef6b63;
  --warn-soft:#2a2414;--err-soft:#2c1717;--ok-soft:#132a1e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
}

/* ─ BASE ─ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;min-height:100vh;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-weight:600;line-height:1.25}
.serif{font-family:var(--serif);font-weight:400}
.muted{color:var(--ink2)}
.faint{color:var(--ink3)}
.small{font-size:13px}
.xs{font-size:12px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr-only:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:100;background:var(--surface);padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ─ HEADER ─ */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand-title{font-family:var(--serif);font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.brand-title:hover{text-decoration:none}
.brand-title{display:inline-flex;align-items:center;gap:10px}
.logo-mark{display:block;flex-shrink:0;color:var(--ink)}
.footer-brand{display:inline-flex;align-items:center;gap:8px}
.brief-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brief-brand-name{font-family:var(--serif);font-size:20px;color:var(--ink)}
.brief-brand-kind{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-inline-start:1px solid var(--line2);padding-inline-start:10px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.header-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex-shrink:0}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.err{background:var(--err)}
.dot.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);color:var(--ink2)}
.icon-btn:hover{border-color:var(--line2);color:var(--ink)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 12px;font-size:14px;font-weight:500;color:var(--ink2);border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink);text-decoration:none}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

/* ─ LAYOUT ─ */
main.wrap{padding-top:28px;padding-bottom:56px}
.page-head{margin-bottom:22px}
.page-title{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.01em}
.page-desc{color:var(--ink2);max-width:760px;margin-top:6px}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.section{margin-top:28px}
.section-title{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}

/* ─ CARDS ─ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card-title{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-title .spacer{flex:1}

/* ─ HERO ─ */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.gauge{width:220px;text-align:center}
.gauge svg{width:100%;height:auto;display:block}
.gauge-label{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;padding:3px 12px;border-radius:999px}
.hero-title{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2}
.hero-text{color:var(--ink2);margin-top:8px;max-width:640px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:20px}
.hero .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface2)}
.kpi-val{font-size:22px;font-weight:700;line-height:1.2}
.kpi-label{font-size:13px;color:var(--ink2);margin-top:2px}
.kpi-src{font-size:12px;color:var(--ink3);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ─ TAGS ─ */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:5px;white-space:nowrap}
.tag-live{background:var(--ok-soft);color:var(--ok)}
.tag-base{background:var(--surface2);color:var(--ink3);border:1px solid var(--line)}
.tag-ai{background:var(--accent-soft);color:var(--accent)}
.tag-err{background:var(--err-soft);color:var(--err)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.ev-src{font-size:12.5px;white-space:nowrap}
.feed-sum{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.45}
.feed-meta strong{color:var(--ink2);font-weight:600}
.news-day{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:22px 0 4px}

/* ─ PILLAR LIST (overview) ─ */
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 120px 48px;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line);text-align:start;width:100%;border-radius:6px}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--surface2)}
.prow-name{font-weight:600;font-size:14px}
.prow-sum{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.bar > span{display:block;height:100%;border-radius:99px}
.prow-score{font-weight:700;text-align:end;font-size:15px}
.trend{font-size:12px;font-weight:600;white-space:nowrap}

/* ─ PILLAR CARDS ─ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:start;grid-auto-flow:dense}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border-top:3px solid var(--pc)}
.pcard.open{grid-column:1/-1}
.pcard-head{display:block;width:100%;text-align:start;padding:16px 18px}
.pcard-head:hover{background:var(--surface2)}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pcard-name{font-weight:600;font-size:15px}
.pcard-weight{font-size:12px;color:var(--ink3)}
.pcard-score{font-size:26px;font-weight:700;line-height:1;text-align:end}
.pcard-label{font-size:12px;font-weight:600;text-align:end}
.pcard-sum{font-size:14px;color:var(--ink2);margin-top:8px}
.spark{display:block;width:100%;height:36px;margin-top:10px}
.pcard-body{padding:4px 18px 18px;border-top:1px solid var(--line)}
.pcard-body .grid{margin-top:14px}
.narrative{color:var(--ink);max-width:880px;margin-top:14px}
.evidence{list-style:none;display:flex;flex-direction:column;gap:8px}
.evidence li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;font-size:14px;color:var(--ink2)}
.evidence time{font-size:12.5px;font-weight:600;color:var(--ink3);padding-top:1px}
.ind{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface2)}
.ind-l{font-size:12.5px;color:var(--ink2)}
.ind-v{font-size:18px;font-weight:700}
.ind-c{font-size:12.5px;font-weight:600}

/* ─ CHARTS ─ */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--sans);fill:var(--ink3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:6px;vertical-align:-1px}
.hbar{display:grid;grid-template-columns:110px minmax(0,1fr) 90px;align-items:center;gap:10px;font-size:13.5px;margin-bottom:8px}
.hbar .bar{height:12px}
.hbar-v{text-align:end;color:var(--ink2)}

/* ─ FEED ─ */
.feed{display:flex;flex-direction:column}
.feed-item{display:block;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.feed-item:last-child{border-bottom:none}
.feed-item:hover{text-decoration:none;background:var(--surface2)}
.feed-title{font-size:14px;font-weight:500;line-height:1.4}
.feed-meta{font-size:12.5px;color:var(--ink3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}

/* ─ BUTTONS & INPUTS ─ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid var(--line2);background:var(--surface);color:var(--ink);white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn-primary{color:#0b111a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#0b111a}}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);color:#fff}
:root[data-theme="dark"] .btn-primary:hover:not(:disabled){color:#0b111a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled){color:#0b111a}}
.btn-sm{padding:5px 10px;font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;font-weight:500;color:var(--ink2)}
.chip:hover{color:var(--ink);border-color:var(--ink3)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
input[type="date"],input[type="search"]{font:inherit;font-size:14px;padding:7px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);color:var(--ink)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─ NOTES ─ */
.note{border-radius:10px;padding:12px 14px;font-size:14px;border:1px solid var(--line);background:var(--surface2);color:var(--ink2)}
.note-warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--ink)}
.note-err{background:var(--err-soft);border-color:color-mix(in srgb,var(--err) 35%,transparent);color:var(--ink)}
.note strong{color:var(--ink)}
.alert{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.alert .spacer{flex:1}

/* ─ TABLES ─ */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:start;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:end}

/* ─ BRIEFING ─ */
.brief{max-width:820px}
.brief h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.brief h3:first-child{margin-top:0}
.brief p{margin-bottom:10px}
.brief ul{margin-block:0 10px;margin-inline:20px 0}
.brief li{margin-bottom:6px}
.thinking{display:flex;gap:10px;align-items:center;color:var(--ink2)}
.brief-head{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:20px;max-width:820px}
.brief-title{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin:6px 0 12px}
.brief-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 20px;font-size:13px}
.brief-meta dt{color:var(--ink3);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.brief-meta dd{color:var(--ink)}
.brief ol{margin-block:0 10px;margin-inline:22px 0}
.brief-sources{list-style:none;margin-inline-start:0!important}
.brief-sources li{font-size:13.5px}
.brief-sources time{display:inline-block;min-width:92px;color:var(--ink3);font-weight:600;font-size:12.5px}

/* ─ METHOD ─ */
.prose{max-width:780px}
.prose p{margin-bottom:12px;color:var(--ink2)}
.prose p strong{color:var(--ink)}
.prose ul{margin-block:0 12px;margin-inline:20px 0;color:var(--ink2)}
.prose li{margin-bottom:6px}
.rubric{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rubric div{border:1px solid var(--line);border-inline-start:4px solid var(--c);border-radius:8px;padding:10px 12px;background:var(--surface)}
details{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 16px}
details summary{cursor:pointer;font-weight:600}
details[open] summary{margin-bottom:10px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--surface2);padding:2px 6px;border-radius:5px}

/* ─ FOOTER ─ */
.footer{border-top:1px solid var(--line);background:var(--surface);padding:22px 0;font-size:13px;color:var(--ink3)}
.footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ─ RESPONSIVE ─ */
@media (max-width:900px){
  .cols-2,.cols-3{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .hero-text{margin-inline:auto}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  body{font-size:14.5px}
  .brand-title{font-size:20px}
  .page-title{font-size:25px}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .prow{grid-template-columns:minmax(0,1fr) 64px 36px}
  .prow .trend-word{display:none}
  .kpis,.hero .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{text-align:start;justify-items:stretch}
  .gauge{margin:0 auto}
  .hbar{grid-template-columns:90px minmax(0,1fr) 76px}
  .card{padding:16px}
}

/* ─ HOW IT WORKS ─ */
.welcome{margin-bottom:20px}
.how-stage{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface2);overflow:hidden;aspect-ratio:2/1;margin-bottom:12px}
.how-stage.small{aspect-ratio:4/3}
.how-stage>svg{position:absolute;inset:0;width:100%;height:100%}
.how-pill{fill:var(--surface);stroke:var(--line2);stroke-width:1}
.how-pill.acc{fill:var(--accent-soft);stroke:var(--accent)}
.how-pdot{fill:var(--accent)}
.how-src{font:500 13.5px var(--sans);fill:var(--ink)}
.how-src.acc{font-weight:700;fill:var(--accent)}
.how-flow{fill:none;stroke:var(--accent);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.how-flow.run{animation:howflow 1.1s linear infinite}
@keyframes howflow{to{stroke-dashoffset:-20}}
.how-hub{fill:var(--surface);stroke:var(--accent);stroke-width:1.5;filter:drop-shadow(0 4px 14px rgba(31,95,174,.12))}
.how-hubl{font:700 15px var(--sans);fill:var(--accent)}
.how-hubs{font:500 12px var(--sans);fill:var(--ink3)}
.how-dot{transition:fill .7s ease}
.how-track{fill:var(--surface);stroke:var(--line)}
.how-score{font:700 12px var(--sans);fill:var(--ink2)}
.how-plbl{font:500 12.5px var(--sans);fill:var(--ink2)}
.how-ainode{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.how-ring{fill:none;stroke:var(--accent);stroke-width:2}
.how-ailbl{font:700 15px var(--sans);fill:var(--accent)}
.how-aisub{font:500 12px var(--sans);fill:var(--ink3)}
.how-link{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round}
.how-docic{fill:var(--surface);stroke:var(--ink3);stroke-width:1.3}
.how-docln{stroke:var(--line2);stroke-width:1.5;stroke-linecap:round}
.how-dlbl{font:600 12.5px var(--sans);fill:var(--ink2)}
.how-needle{fill:var(--ink)}
.how-gnum{font-family:var(--serif);font-size:46px;fill:var(--ink)}
.how-glbl{font:600 14px var(--sans)}
.how-stage.small .how-src,.how-stage.small .how-hubl,.how-stage.small .how-ailbl{font-size:21px}
.how-stage.small .how-hubs,.how-stage.small .how-aisub,.how-stage.small .how-dlbl,.how-stage.small .how-score{font-size:17px}
.how-stage.small .how-plbl{font-size:18px}
.how-stage.small .how-gnum{font-size:64px}
.how-stage.small .how-glbl{font-size:20px}
.how-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:3% 5%;opacity:0;transition:opacity .55s ease;pointer-events:none}
.how-ov.on{opacity:1;pointer-events:auto}
.how-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow);width:min(520px,100%);color:var(--ink);transform:translateY(10px) scale(.98);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.how-ov.on .how-card{transform:none}
.how-doc>*{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.how-ov.on .how-doc>*{opacity:1;transform:none}
.how-doc-brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:15px}
.how-doc-brand .k{font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-inline-start:1px solid var(--line2);padding-inline-start:8px}
.how-doc-title{font-family:var(--serif);font-size:19px;line-height:1.25;margin:6px 0 8px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.how-doc-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;font-size:11.5px;margin-bottom:6px}
.how-doc-meta b{display:block;font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.how-doc-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line);padding:5px 0 3px}
.how-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(560px,100%)}
.how-out a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;transform:scale(.88);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
.how-out a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.how-ov.on .how-out a{transform:none;opacity:1}
.how-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;justify-content:center;font-size:12.5px;color:var(--ink2);margin-top:6px}
.how-tags span:not(.tag){margin-inline-end:6px}
.how-ctrl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.how-ctrl .chip[aria-current="step"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.how-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:14px}
.how-bar i{display:block;height:100%;width:0;background:var(--accent)}
.how-steps{list-style:none}
.how-steps li{padding:10px 0;border-top:1px solid var(--line)}
.how-steps h3{font-size:17px;margin-bottom:4px}
.how-steps .n{color:var(--accent)}
.how-steps p{color:var(--ink2);max-width:780px}
.how-steps .how-stat{font-weight:600;color:var(--accent);margin-top:4px}
.how.js .how-steps li{display:none;border:0;padding:0}
.how.js .how-steps li.on{display:block}
@media (max-width:600px){
  .how-out{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .how-out a{min-height:40px;font-size:12.5px;padding:4px}
  .how-tags{display:none}
  .how-card{padding:8px 10px}
  .how-doc-meta{display:none}
  .how-doc-title{font-size:14px;margin:4px 0;padding-bottom:4px}
  .how-doc-sec{font-size:9.5px;padding:3px 0 2px}
  .how-doc-brand .k{display:none}
  .how-ctrl .chip{padding:4px 9px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.how *{transition:none!important}}

/* ─ PRINT ─ */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface2:#fff;--ink:#000;--ink2:#222;--ink3:#555;--line:#ccc;--shadow:none}
  .site-header{position:static}
  .tabs,.no-print,.footer,.alert{display:none!important}
  #app[data-tab="briefing"] .site-header{display:none}
  .how-stage{display:none}
  .how.js .how-steps li{display:block}
  .card,.pcard{break-inside:avoid}
}

/* ─ ARABIC EDITION (dir=rtl) ─
   Arabic is set in IBM Plex Sans Arabic; Latin words inside it (source
   names, figures) fall through to Inter. Letter-spacing and capitals are
   switched off: spacing breaks Arabic letter joining. Charts stay
   left-to-right, as in Arabic financial and policy publications. */
html[dir=rtl]{--sans:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;--serif:'IBM Plex Sans Arabic','DM Serif Display',serif}
html[dir=rtl] body{font-size:16px;line-height:1.75}
html[dir=rtl] *{letter-spacing:0!important}
html[dir=rtl] .eyebrow,html[dir=rtl] .tag,html[dir=rtl] th,html[dir=rtl] .news-day,html[dir=rtl] .brief h3,html[dir=rtl] .brief-meta dt,html[dir=rtl] .brief-brand-kind,html[dir=rtl] .how-doc-sec,html[dir=rtl] .how-doc-meta b,html[dir=rtl] .how-doc-brand .k{text-transform:none}
html[dir=rtl] .page-title,html[dir=rtl] .hero-title,html[dir=rtl] .brief-title,html[dir=rtl] .brand-title,html[dir=rtl] .brief-brand-name{font-weight:700}
html[dir=rtl] .page-title{font-size:28px}
html[dir=rtl] .hero-title{font-size:25px;line-height:1.4}
html[dir=rtl] .narrative,html[dir=rtl] .brief,html[dir=rtl] .prose{line-height:1.9}
html[dir=rtl] .chart,html[dir=rtl] .spark,html[dir=rtl] .gauge svg,html[dir=rtl] .how-stage>svg{direction:ltr}
html[dir=rtl] .ltr{direction:ltr;unicode-bidi:isolate}
[lang=en]{font-family:'Inter',system-ui,sans-serif}

/* ─ GLANCES, GOVERNORATE MAP, LANGUAGE BUTTON ─ */
.glances{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.glance{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none}
.glance:hover{border-color:var(--accent)}
.glance-v{font-size:22px;font-weight:700;line-height:1.2}
.glance-l{font-size:13.5px;color:var(--ink2)}
.glance-s{font-size:12px;color:var(--ink3)}
/* Tile map: positions follow geography, so it never mirrors in Arabic. */
.gmap{display:grid;gap:6px;direction:ltr}
.gtile{border-radius:10px;padding:8px 9px;min-height:74px;background:color-mix(in srgb,var(--accent) calc(var(--sh)*100%),var(--surface));border:1px solid var(--line);color:var(--ink);overflow:hidden}
.gtile-n{font-size:12px;font-weight:600;line-height:1.25}
.gtile-v{font-size:17px;font-weight:700;margin-top:2px}
.gtile-s{font-size:10.5px;color:var(--ink2);line-height:1.35}
.gtile[style*="--sh:0.6"],.gtile[style*="--sh:0.7"],.gtile[style*="--sh:0.8"],.gtile[style*="--sh:0.9"],.gtile[style*="--sh:1"]{color:#fff}
.gtile[style*="--sh:0.6"] .gtile-s,.gtile[style*="--sh:0.7"] .gtile-s,.gtile[style*="--sh:0.8"] .gtile-s,.gtile[style*="--sh:0.9"] .gtile-s,.gtile[style*="--sh:1"] .gtile-s{color:rgba(255,255,255,.85)}
html[dir=rtl] .gtile{direction:rtl;text-align:start}
.lang-btn{font-weight:600}
.lang-btn:lang(ar){font-family:'IBM Plex Sans Arabic',sans-serif}
@media (max-width:560px){.gtile{min-height:64px;padding:6px}.gtile-v{font-size:14px}.gtile-s{display:none}}
html[dir=rtl] .ind-v,html[dir=rtl] .ind-c{direction:ltr;unicode-bidi:isolate;text-align:right}

.digest{list-style:none;margin:0;padding:0}
.digest li{padding:10px 0;border-bottom:1px solid var(--line)}
.digest li:last-child{border-bottom:0}
.digest li p{margin:0;font-size:14.5px;line-height:1.55}
.digest .digest-src{margin-top:4px;font-size:12px;color:var(--ink3)}