/* ==========================================================================
   SISIGHT MVP — minimal, presentation-style layout
   One signature element: the six-bloc rosette, worn as a seal on every topic photo.
   Motion follows the project standards: strong ease-out for enter/exit, ease-in-out for
   on-screen movement, the drawer curve for panels; UI motion stays at or under 300 ms.
   ========================================================================== */
:root{
  color-scheme: light;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --track-display: -.034em;
  --track-tight: -.016em;
  --lh-body: 1.6;
  --lh-head: 1.1;
  --fs-small: .8125rem;
  --fs-label: .875rem;

  /* surfaces and ink: display type wears the brand navy */
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --surface-3: #ECEFF4;
  --ink: #00133B;
  --ink-2: #364055;
  --muted: #5E6779;
  --faint: #8C94A3;
  --line: #DFE3EA;
  --line-soft: #EBEEF2;
  --line-strong: #C9D0DA;

  --brand: #1854C4;
  --brand-ink: #123F94;
  --brand-wash: #E6EEFB;
  --brand-faint: #F2F6FD;
  --navy: #00133B;
  --on-brand: #FFFFFF;
  --hero-bg: #00133B;
  --hero-accent: #9DBDF7;

  /* semantic (always paired with an icon and a label) */
  --agree: #0B7A55;  --agree-wash: #E5F4EE; --agree-line: #CFE8DD;
  --contest: #955A0E; --contest-mark: #C27A16; --contest-wash: #FDF3E2; --contest-line: #F0DEBF;
  --hot: #B83838; --hot-wash: #FCEBEB; --hot-line: #F3D3D3;

  /* six blocs: colour identifies, never ranks (validated: adjacent CVD ΔE ≥ 8, normal ΔE ≥ 15) */
  --b-eu: #5B3FAE; --b-ru: #A3306B; --b-cn: #C0561F; --b-ir: #1597AC; --b-gcc: #0E7A45; --b-us: #3B7FEA;
  --b-off: #D4D9E1;

  /* charts and maps (ordinal ramps validated; light end ≥ 2:1 on surface) */
  --viz-line: #1854C4;
  --viz-wash: rgba(24,84,196,.10);
  --viz-grid: #E7EAF0;
  --viz-axis: #C9CFD9;
  --map-land: #DCE1E9;
  --map-stroke: #FFFFFF;
  --map-bg: #F4F6F9;
  --cov-1: #6DA7EC; --cov-2: #256ABF; --cov-3: #0D366B;
  --imp-1: #E8925A; --imp-2: #C45F22; --imp-3: #843A0C;
  --band-track: #E3EAF7;
  --band-fill: #1854C4;

  /* the night-map cover under every photo */
  --night: #0A1633; --night-land: #18294F; --night-glow: #8EC1FF;

  --shadow-1: 0 1px 2px rgba(0,19,59,.06);
  --shadow-2: 0 1px 2px rgba(0,19,59,.06), 0 8px 24px rgba(0,19,59,.08);
  --shadow-3: 0 2px 6px rgba(0,19,59,.10), 0 24px 56px rgba(0,19,59,.18);
  --scrim: rgba(4,10,24,.48);
  --glass: rgba(255,255,255,.86);
  --glass-edge: rgba(0,19,59,.08);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0A0E15;
  --surface: #111725;
  --surface-2: #141B2A;
  --surface-3: #1B2334;
  --ink: #F1F4F9;
  --ink-2: #C8CFDC;
  --muted: #9AA4B6;
  --faint: #6E7890;
  --line: #222D44;
  --line-soft: #1A2336;
  --line-strong: #33415C;
  --brand: #6B9BF2;
  --brand-ink: #A9C4F7;
  --brand-wash: rgba(107,155,242,.15);
  --brand-faint: rgba(107,155,242,.07);
  --navy: #E6ECF7;
  --on-brand: #0A0E15;
  --hero-bg: #0F1C38;
  --hero-accent: #9DBDF7;
  --agree: #4CC795; --agree-wash: rgba(76,199,149,.10); --agree-line: rgba(76,199,149,.24);
  --contest: #F0B45B; --contest-mark: #F0B45B; --contest-wash: rgba(240,180,91,.10); --contest-line: rgba(240,180,91,.26);
  --hot: #F07B7B; --hot-wash: rgba(240,123,123,.12); --hot-line: rgba(240,123,123,.28);
  --b-eu: #5E59BB; --b-ru: #BC3A6A; --b-cn: #D07843; --b-ir: #0B9DB3; --b-gcc: #157E2C; --b-us: #3797E9;
  --b-off: #33405A;
  --viz-line: #6B9BF2;
  --viz-wash: rgba(107,155,242,.12);
  --viz-grid: #1F2940;
  --viz-axis: #33415C;
  --map-land: #24304A;
  --map-stroke: #111725;
  --map-bg: #141B2A;
  --cov-1: #1C5CAB; --cov-2: #3987E5; --cov-3: #9EC5F4;
  --imp-1: #9A4A18; --imp-2: #DE7A3A; --imp-3: #F6BE90;
  --band-track: #1E2A42;
  --band-fill: #6B9BF2;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-3: 0 2px 8px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
  --scrim: rgba(0,0,0,.62);
  --glass: rgba(10,14,21,.82);
  --glass-edge: rgba(255,255,255,.07);
}
html[lang="ar"]{
  --font-ui: 'Cairo', 'Inter', system-ui, sans-serif;
  --font-display: 'Cairo', 'Inter', system-ui, sans-serif;
  --track-display: 0; --track-tight: 0; --lh-body: 1.85; --lh-head: 1.4;
  --fs-small: .875rem; --fs-label: .9375rem;
}
html[lang="fa"]{
  --font-ui: 'Estedad', 'Vazirmatn', 'Inter', system-ui, sans-serif;
  --font-display: 'Estedad', 'Vazirmatn', 'Inter', system-ui, sans-serif;
  --track-display: 0; --track-tight: 0; --lh-body: 1.9; --lh-head: 1.45;
  --fs-small: .875rem; --fs-label: .9375rem;
}

/* ============================== base ============================== */
*,*::before,*::after{box-sizing: border-box}
html{-webkit-text-size-adjust: 100%; text-size-adjust: 100%}
html,body{margin: 0; padding: 0}
body{
  font-family: var(--font-ui); font-size: 1rem; line-height: var(--lh-body);
  color: var(--ink-2); background: var(--bg); min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility;
}
:root[data-theme-switching] *, :root[data-theme-switching] *::before, :root[data-theme-switching] *::after{transition: none!important}
h1,h2,h3,h4,p,figure{margin: 0}
/* Estedad's tabular Persian figures are set far too wide; proportional figures read correctly */
html[lang="fa"] *{font-variant-numeric: normal!important}
:lang(ar), :lang(fa){font-feature-settings: normal; letter-spacing: 0}
button[lang="ar"]{font-family: 'Cairo', system-ui, sans-serif}
button[lang="en"]{font-family: 'Inter', system-ui, sans-serif}
h1,h2,h3,h4{color: var(--ink); font-weight: 700}
a{color: inherit; text-decoration: none}
button{font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit}
input,select{font: inherit; color: inherit}
img,svg{display: block}
svg{overflow: visible}
::selection{background: var(--brand-wash)}
:focus{outline: none}
:focus-visible{outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px}
[hidden]{display: none!important}
.sr-only{position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0}
.skip{position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .875rem}
.skip:focus{top: 12px}
.num{font-variant-numeric: tabular-nums}
.flip-rtl{transform: none}
[dir="rtl"] .flip-rtl{transform: scaleX(-1)}
.main{display: block; min-height: 60vh}
.main:focus{outline: none}
:root{--gutter: 32px}
.wrap{width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter)}
/* narrow keeps the left edge of the page grid and only limits the measure */
.wrap.narrow > *{max-width: 780px}

/* wordmark */
.wordmark{font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: 1; direction: ltr; unicode-bidi: isolate; display: inline-flex; font-size: 1.1875rem}
.wordmark .si{color: var(--brand)} .wordmark .sight{color: var(--navy)}
.brand{display: flex; align-items: center; gap: 10px; flex-shrink: 0}
.brand .mark{width: 28px; height: 28px; color: var(--brand)}

/* ============================== primitives ============================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 16px; border-radius: 11px; font-size: .9375rem; font-weight: 600; line-height: 1.2;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn svg{width: 17px; height: 17px; flex-shrink: 0}
.btn:active{transform: scale(.97)}
.btn.primary{background: var(--brand); border-color: var(--brand); color: var(--on-brand)}
.btn.ghost{background: transparent; border-color: transparent; color: var(--ink-2)}
.btn.sm{min-height: 34px; padding: 5px 12px; font-size: .875rem; border-radius: 10px}
.btn[aria-pressed="true"]{background: var(--brand-wash); border-color: transparent; color: var(--brand-ink)}
@media (hover: hover) and (pointer: fine){
  .btn:hover{border-color: var(--line-strong)}
  .btn.primary:hover{background: var(--brand-ink); border-color: var(--brand-ink)}
  .btn.ghost:hover{background: var(--surface-3)}
}
.icon-btn{width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 11px; color: var(--ink-2); flex-shrink: 0;
  transition: transform 160ms var(--ease-out), background-color 150ms ease}
.icon-btn svg{width: 20px; height: 20px}
.icon-btn:active{transform: scale(.94)}
@media (hover: hover) and (pointer: fine){ .icon-btn:hover{background: var(--surface-3)} }
.link{font-size: .875rem; font-weight: 600; color: var(--brand); padding: 4px 6px; border-radius: 6px}
@media (hover: hover) and (pointer: fine){ .link:hover{color: var(--brand-ink)} }

.pill{display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-3); color: var(--muted); border: 1px solid transparent}
html[lang="ar"] .pill, html[lang="fa"] .pill{font-size: .8125rem; height: 28px}
.pill svg{width: 13px; height: 13px}
.pill.hot{background: var(--hot-wash); color: var(--hot); border-color: var(--hot-line)}
.pill.warn{background: var(--contest-wash); color: var(--contest); border-color: var(--contest-line)}
.pill.ok{background: var(--agree-wash); color: var(--agree); border-color: var(--agree-line)}
.pill.brand{background: var(--brand-wash); color: var(--brand-ink)}
.pill.pro{background: #0E1830; color: #DDE7FB; border-color: transparent; height: 20px; font-size: .6875rem; padding: 0 7px; letter-spacing: .02em}
:root[data-theme="dark"] .pill.pro{background: #E6ECF7; color: #0E1830}

.chip{display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 13px; border-radius: 99px; font-size: .875rem; font-weight: 550;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); max-width: 100%;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease}
html[lang="ar"] .chip, html[lang="fa"] .chip{font-size: .9375rem}
.chip svg{width: 14px; height: 14px; flex-shrink: 0}
.chip .c{font-size: .75rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums}
.chip i.dot{width: 8px; height: 8px}
.chip:active{transform: scale(.97)}
.chip.on{background: var(--ink); border-color: var(--ink); color: var(--bg)}
.chip.on .c{color: inherit; opacity: .7}
.chip:disabled{opacity: .42; cursor: default}
.chip:disabled:active{transform: none}
@media (hover: hover) and (pointer: fine){ .chip:not(.on):not(:disabled):hover{border-color: var(--line-strong); color: var(--ink)} }

i.dot{display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0}
i.dot.hollow{background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint)}

/* segmented control with a sliding indicator (220 ms ease-in-out) */
.seg{position: relative; display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-3); isolation: isolate; flex-shrink: 0}
.seg button{position: relative; z-index: 1; height: 32px; padding: 0 13px; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color 150ms ease}
html[lang="ar"] .seg button, html[lang="fa"] .seg button{font-size: .9375rem}
.seg button[aria-pressed="true"]{color: var(--ink)}
.seg .ind{position: absolute; z-index: 0; top: 3px; left: 0; height: 32px; border-radius: 8px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,19,59,.1), 0 0 0 1px rgba(0,19,59,.04); will-change: transform}
:root[data-theme="dark"] .seg .ind{background: #2A3550; box-shadow: none}
.seg[data-ready] .ind{transition: transform 220ms var(--ease-in-out), width 220ms var(--ease-in-out)}
@media (hover: hover) and (pointer: fine){ .seg button:not([aria-pressed="true"]):hover{color: var(--ink)} }

.panel{background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; min-width: 0}
.kicker{font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin-bottom: 12px}
.note{font-size: var(--fs-small); color: var(--muted); line-height: 1.6; margin-top: 16px; max-width: 82ch}
.note.center{text-align: center; margin-inline: auto}
button.more{display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .9375rem; font-weight: 600; color: var(--brand); padding: 4px 0; border-radius: 6px}
@media (hover: hover) and (pointer: fine){ button.more:hover{color: var(--brand-ink)} }

/* source logo: the site's own icon over a bloc-coloured monogram; the strip at the foot is the registered bloc */
.logo{--sz: 32px; position: relative; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); flex-shrink: 0; overflow: hidden;
  border-radius: calc(var(--sz) * .26); background: var(--bc); color: #fff; direction: ltr; box-shadow: 0 0 0 1px var(--line)}
.logo b{font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: calc(var(--sz) * .36); letter-spacing: -.02em; line-height: 1}
.logo.l3 b{font-size: calc(var(--sz) * .3)}
.logo.l4 b{font-size: calc(var(--sz) * .25); letter-spacing: -.04em}
.logo img{position: absolute; inset: 0; width: 100%; height: 100%; padding: 14%; object-fit: contain; background: #fff; opacity: 0; transition: opacity 200ms ease}
.logo img.ok{opacity: 1}
.logo::after{content: ""; position: absolute; inset-inline: 0; bottom: 0; height: max(2px, calc(var(--sz) * .08)); background: var(--bc); z-index: 1}
.logo.xs{--sz: 18px; border-radius: 5px}
.logo.xs b{display: none}
.logo.sm{--sz: 24px}
.logo.lg{--sz: 40px}
.logo.xl{--sz: 56px}
.logos{display: inline-flex; align-items: center}
.logos .logo{box-shadow: 0 0 0 2px var(--bg)}
.logos .logo + .logo{margin-inline-start: -6px}
.logos .more{margin-inline-start: 8px; font-size: .75rem; font-weight: 650; color: var(--muted)}

/* ============================== rosette ============================== */
.rose{position: relative; flex-shrink: 0; direction: ltr}
.rose svg{display: block}
.rose .guide{fill: none; stroke: var(--line-strong); stroke-width: 1}
.rose .spoke{stroke: var(--line); stroke-width: 1}
.rose .arm{stroke-linecap: round}
.rose .vtx{fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5}
.rose .end{stroke: var(--surface); stroke-width: 2}
.rose .lbl{position: absolute; line-height: 1.15; width: max-content; max-width: 76px; pointer-events: none}
.rose .lbl.t{transform: translate(-50%, -100%); text-align: center}
.rose .lbl.b{transform: translate(-50%, 0); text-align: center}
.rose .lbl.r{transform: translate(0, -50%); text-align: left}
.rose .lbl.l{transform: translate(-100%, -50%); text-align: right}
.rose .lbl b{display: block; font-size: .75rem; font-weight: 700; color: var(--ink-2)}
.rose .lbl span{display: block; font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums}
html[lang="ar"] .rose .lbl b, html[lang="fa"] .rose .lbl b{font-size: .8125rem}
.rose .lbl.off b{color: var(--faint); font-weight: 600}
.rose .hit{fill: transparent; cursor: default}

/* the seal: the rosette on a disc over each topic photo */
.seal{position: absolute; inset-inline-end: 14px; bottom: 14px; z-index: 1; padding: 6px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,19,59,.06), 0 1px 2px rgba(0,19,59,.14), 0 8px 24px rgba(0,19,59,.22)}
.seal.lg{inset-inline-end: 18px; bottom: 18px; padding: 8px}
:root[data-theme="dark"] .seal{background: #1B2334; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.55)}

/* photo box: NASA imagery, with a night-map cover of the topic's places underneath */
.ph{position: relative; overflow: hidden; background: var(--night); isolation: isolate}
.ph .cover{position: absolute; inset: 0; width: 100%; height: 100%}
.ph .cover use{fill: var(--night-land); stroke: var(--night)}
.ph .cover .glow circle{fill: var(--night-glow)}
.ph img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1}
.ph.thumb{width: 96px; height: 68px; border-radius: 12px; flex-shrink: 0}

/* tooltip (shared) */
.tip{position: fixed; z-index: 120; pointer-events: none; max-width: 260px; padding: 8px 10px; border-radius: 10px;
  background: var(--ink); color: var(--surface); font-size: .8125rem; line-height: 1.4; box-shadow: var(--shadow-3);
  opacity: 0; transform: scale(.97); transform-origin: var(--tip-origin, 50% 100%);
  transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out)}
.tip.on{opacity: 1; transform: scale(1)}
.tip.instant{transition-duration: 0ms}
.tip b{font-weight: 700}
.tip .k{display: flex; align-items: center; gap: 7px}
.tip .k i{width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0}
.tip .sub{opacity: .72; font-size: .75rem}
:root[data-theme="dark"] .tip{background: #E9EEF7; color: #0E1420}

/* ============================== shell ============================== */
.topnav{position: sticky; top: 0; z-index: 60; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 0 var(--glass-edge)}
.topnav-in{max-width: 1200px; margin-inline: auto; padding-inline: 32px; height: 64px; display: flex; align-items: center; gap: 8px}
.topnav .brand{margin-inline-end: 24px}
.nav{display: flex; gap: 2px}
.nav a{display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 10px; font-size: .9375rem; font-weight: 600; color: var(--muted);
  transition: color 150ms ease, background-color 150ms ease}
html[lang="ar"] .nav a, html[lang="fa"] .nav a{font-size: 1rem}
.nav a[aria-current="page"]{color: var(--ink); background: var(--surface-3)}
@media (hover: hover) and (pointer: fine){ .nav a:not([aria-current="page"]):hover{color: var(--ink)} }
.spacer{flex: 1}
.searchbtn{display: inline-flex; align-items: center; gap: 10px; height: 40px; min-width: 210px; padding: 0 10px 0 12px; border-radius: 11px;
  background: var(--surface-3); color: var(--muted); font-size: .875rem; border: 1px solid transparent; transition: border-color 150ms ease}
.searchbtn svg{width: 17px; height: 17px; flex-shrink: 0}
.searchbtn kbd{margin-inline-start: auto; font-family: var(--font-ui); font-size: .6875rem; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px; background: var(--surface); direction: ltr}
@media (hover: hover) and (pointer: fine){ .searchbtn:hover{border-color: var(--line-strong)} }
.mob{display: none}
.tabbar{display: none}

.foot{margin-top: 112px; border-top: 1px solid var(--line); background: var(--surface)}
.foot-in{display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 28px 64px; align-items: start; padding-block: 44px 52px}
.foot-brand p{margin-top: 12px; font-size: var(--fs-small); color: var(--muted); max-width: 42ch}
.foot-brand .mark{width: 22px; height: 22px}
.foot-brand .wordmark{font-size: 1rem}
.foot-links{display: grid; gap: 10px; justify-items: start; font-size: .9375rem; font-weight: 600}
.foot-links a, .foot-links button{color: var(--ink-2); padding: 2px 0; border-radius: 4px; transition: color 150ms ease}
@media (hover: hover) and (pointer: fine){ .foot-links a:hover, .foot-links button:hover{color: var(--brand)} }
.foot-place{font-size: var(--fs-small); color: var(--muted)}

/* ============================== Topics: feed + dashboard ============================== */
.feed-head{display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; padding-top: 64px}
.dateline{grid-column: 1 / -1; font-size: .9375rem; font-weight: 600; color: var(--muted); margin-bottom: 12px}
.display{font-family: var(--font-display); font-weight: 800; font-size: clamp(2.375rem, 1.35rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: var(--track-display); color: var(--ink); text-wrap: balance}
html[lang="ar"] .display, html[lang="fa"] .display{line-height: 1.3}
.stats{display: flex; flex-wrap: wrap; align-items: center; font-size: .9375rem; color: var(--muted); row-gap: 4px}
.stats span + span{border-inline-start: 1px solid var(--line-strong); margin-inline-start: 14px; padding-inline-start: 14px}
.feed-head .stats{padding-bottom: .9em; justify-content: flex-end}

.filterbar{display: flex; align-items: center; gap: 12px; margin-top: 36px; padding-top: 22px;
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat}
.cats{display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 3px; margin: -3px}
.cats::-webkit-scrollbar{display: none}
.cat-pill{flex-shrink: 0; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: transparent; font-size: .9375rem; font-weight: 600; color: var(--ink-2);
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease}
.cat-pill[aria-pressed="true"]{background: var(--ink); border-color: var(--ink); color: var(--bg)}
.cat-pill:active{transform: scale(.97)}
@media (hover: hover) and (pointer: fine){ .cat-pill:not([aria-pressed="true"]):hover{border-color: var(--line-strong); color: var(--ink)} }
.dash-btn{flex-shrink: 0}
.dash-btn .count{min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: var(--on-brand); font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums}
.active{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px}
.active .res{margin-inline-start: auto; font-size: var(--fs-small); color: var(--muted)}

.grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 36px; margin-top: 40px}
.tcard{position: relative; display: flex; flex-direction: column; min-width: 0}
.tcard .stretch{position: absolute; inset: 0; z-index: 2; border-radius: 18px}
.tcard .stretch:focus-visible{outline-offset: 8px}
.tcard-media{position: relative}
.tcard .ph{aspect-ratio: 16 / 10; border-radius: 18px}
.tcard-body{display: flex; flex-direction: column; gap: 10px; padding-top: 22px; min-width: 0}
.tmeta{display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--muted)}
.tmeta .cat{color: var(--brand); font-weight: 600}
.tcard-h{font-family: var(--font-display); font-weight: 750; font-size: 1.5rem; line-height: 1.22; letter-spacing: var(--track-tight); color: var(--ink); text-wrap: balance; transition: color 150ms ease}
html[lang="ar"] .tcard-h, html[lang="fa"] .tcard-h{line-height: 1.55; font-weight: 800}
.tcard .dek{font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch}
.stat{display: flex; align-items: baseline; gap: 12px; margin-top: 2px}
.stat b{font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: var(--track-display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums}
.stat span{font-size: .9375rem; color: var(--muted); line-height: 1.4}
.likely{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line)}
.likely .lbl{grid-column: 1 / -1; font-size: var(--fs-small); font-weight: 600; color: var(--muted)}
.likely .tt{grid-column: 1 / -1; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.4}
.likely b{font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap}
.tfoot{display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; font-size: var(--fs-small); color: var(--muted)}
.tfoot .logos{margin-inline-start: auto}
.tcard:active .tcard-media{transform: scale(.99)}
.tcard-media{transition: transform 200ms var(--ease-out)}
@media (hover: hover) and (pointer: fine){ .tcard:hover .tcard-h{color: var(--brand)} }

.tcard.lead{grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center}
.tcard.lead .ph{aspect-ratio: 4 / 3}
.tcard.lead .tcard-body{padding-top: 0; gap: 14px}
.tcard.lead .tcard-h{font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.08; font-weight: 800; letter-spacing: var(--track-display)}
html[lang="ar"] .tcard.lead .tcard-h, html[lang="fa"] .tcard.lead .tcard-h{line-height: 1.45}
.tcard.lead .stat b{font-size: 2.75rem}

.latest{margin-top: 104px}
.sec-row{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px}
.sec-row h2, .related h2{font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: var(--track-tight); color: var(--ink)}
.rows{list-style: none; margin: 0; padding: 0}
.lrow{position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line)}
.rows .lrow:last-child{border-bottom: 1px solid var(--line)}
.lrow .stretch{position: absolute; inset: 0; z-index: 1; border-radius: 8px}
.lrow .d{font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; line-height: 1.4}
.lrow .h{font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.45; transition: color 150ms ease}
.lrow .sub{display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; font-size: var(--fs-small); color: var(--muted)}
.lrow .srcs{display: inline-flex; flex-wrap: wrap; gap: 6px 14px}
.lrow .sn{display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2)}
.lrow .part a{position: relative; z-index: 2; color: var(--brand); font-weight: 600}
@media (hover: hover) and (pointer: fine){ .lrow:hover .h{color: var(--brand)} }

.empty{display: grid; justify-items: center; gap: 8px; padding: 56px 24px; margin-top: 40px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 18px; color: var(--muted)}
.empty b{color: var(--ink); font-size: 1.0625rem}
.empty .btn{margin-top: 8px}

/* ============================== Topic: title band + slides ============================== */
.topic-hero{background: var(--hero-bg); color: #fff; padding: 22px 0 72px}
.topic-hero .back{display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.72); padding: 4px 2px; transition: color 150ms ease}
.topic-hero .back svg{width: 16px; height: 16px}
@media (hover: hover) and (pointer: fine){ .topic-hero .back:hover{color: #fff} }
.topic-hero :focus-visible{outline-color: #fff}
.hero-grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: center; margin-top: 30px}
.topic-hero .cat{font-size: .9375rem; font-weight: 600; color: var(--hero-accent)}
.topic-h{font-family: var(--font-display); font-weight: 800; font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.375rem); line-height: 1.06; letter-spacing: var(--track-display); color: #fff; margin-top: 14px; text-wrap: balance}
html[lang="ar"] .topic-h, html[lang="fa"] .topic-h{line-height: 1.42}
.topic-h.long{font-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.1}
html[lang="ar"] .topic-h.long, html[lang="fa"] .topic-h.long{line-height: 1.45}
.topic-hero .dek{font-size: 1.1875rem; line-height: 1.6; color: rgba(255,255,255,.82); margin-top: 20px; max-width: 52ch}
.hero-meta{display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px; font-size: .9375rem; color: rgba(255,255,255,.7)}
.topic-hero .pill{background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: #fff}
.topic-hero .pill.hot svg{color: #FF9C9C}
.topic-hero .pill.warn{color: #FFD18A}
.topic-hero .pill.pro{background: #fff; color: #00133B}
.hero-actions{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px}
.topic-hero .btn{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff}
.topic-hero .btn[aria-pressed="true"]{background: #fff; border-color: #fff; color: #00133B}
@media (hover: hover) and (pointer: fine){ .topic-hero .btn:hover{background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32)} }
.hero-ph{position: relative}
.hero-media .ph{aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255,255,255,.08)}
.hero-media figcaption{margin-top: 12px; font-size: .75rem; color: rgba(255,255,255,.55)}
.hero-media:has(.noimg) figcaption{display: none}
.pending-hero .hero-text{max-width: 820px; margin-top: 28px}

.subnav{position: sticky; top: 64px; z-index: 50; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 0 var(--glass-edge)}
.subnav .wrap{display: flex; gap: 6px; height: 54px; overflow-x: auto; scrollbar-width: none}
.subnav .wrap::-webkit-scrollbar{display: none}
.subnav a{flex-shrink: 0; display: inline-flex; align-items: center; padding: 2px 10px 0; font-size: .9375rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; border-radius: 0; transition: color 150ms ease, border-color 150ms ease}
.subnav a[aria-current="true"]{color: var(--ink); border-bottom-color: var(--brand)}
@media (hover: hover) and (pointer: fine){ .subnav a:hover{color: var(--ink)} }

.slide{padding-block: 96px; scroll-margin-top: 118px}
.slide.alt{background: var(--surface)}
.slide-h{display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 36px}
.slide-h h2{font-family: var(--font-display); font-weight: 800; font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.625rem); line-height: 1.08; letter-spacing: var(--track-display); color: var(--ink); text-wrap: balance; max-width: 24ch}
html[lang="ar"] .slide-h h2, html[lang="fa"] .slide-h h2{line-height: 1.45}
.slide-h .tools{display: flex; align-items: center; gap: 10px}
.slide-h .count{font-size: .9375rem; font-weight: 600; color: var(--muted)}
.slide .lead{font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: 62ch; margin: -16px 0 36px}

/* numbers */
.kpis{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px}
.kpis.n3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.kpi{border-top: 2px solid var(--ink); padding-top: 18px; min-width: 0}
.kpi b{display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 1.45rem + 2vw, 3.25rem); line-height: 1.04; letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: balance}
.kpi span{display: block; margin-top: 12px; font-size: .9375rem; line-height: 1.45; color: var(--muted); max-width: 30ch}
.numbers .note{margin-top: 28px}
.numbers-row{display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; margin-top: 72px; align-items: start}
.numbers.side{display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start}
.numbers.side .kpis{grid-template-columns: repeat(2, minmax(0, 1fr))}
.numbers.side .kpis.n3 .kpi:last-child{grid-column: 1 / -1}
.about h3, .cov-tile h3{font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 20px}
.tbars{display: grid; gap: 16px}
.tbar{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 34px; gap: 18px; align-items: center; font-size: .9375rem}
.tbar .nm{color: var(--ink-2); line-height: 1.35}
.tbar .track{position: relative; height: 8px; border-radius: 99px; background: var(--band-track); overflow: hidden}
.tbar .track i{position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; background: var(--brand)}
.tbar b{font-weight: 700; color: var(--ink); text-align: end; font-variant-numeric: tabular-nums}
.about .note{margin-top: 20px}
.cov-tile{display: grid; justify-items: center; text-align: center; padding: 26px 20px 24px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line)}
.cov-tile h3{margin-bottom: 10px}
.cov-tile .cap{font-size: .9375rem; font-weight: 600; color: var(--ink); margin-top: 8px}
.cov-tile .cap-sub{font-size: var(--fs-small); color: var(--muted); margin-top: 2px}

/* outcomes */
.outs{display: grid}
.out{display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 260px) 92px; gap: 28px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line)}
.out:last-child{border-bottom: 1px solid var(--line)}
.out-t b{display: block; font-size: 1.0625rem; font-weight: 650; color: var(--ink); line-height: 1.4}
.out-t span{display: block; margin-top: 4px; font-size: .9375rem; color: var(--muted); line-height: 1.5}
.out-t em{display: inline-block; margin-top: 6px; font-style: normal; font-size: var(--fs-small); font-weight: 600; color: var(--brand)}
.out-n{font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: var(--track-tight); color: var(--ink); text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums}
.band{position: relative; height: 10px; border-radius: 99px; background: var(--band-track)}
.band i{position: absolute; inset-block: 0; border-radius: 99px; background: var(--band-fill)}
.band .tick{position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--surface); opacity: .9}
.actions{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px}

/* insight */
.split-lbl{font-size: .9375rem; font-weight: 600; color: var(--brand); margin-bottom: 12px}
.split{font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.3; letter-spacing: var(--track-tight); color: var(--ink); text-wrap: pretty}
html[lang="ar"] .split, html[lang="fa"] .split{line-height: 1.65}
.prose{margin-top: 28px; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2)}
html[lang="ar"] .prose, html[lang="fa"] .prose{line-height: 1.95}
.prose p{max-width: 68ch}
.agreed{margin-top: 36px; padding: 24px 28px; border-radius: 20px; background: var(--brand-faint); border: 1px solid var(--brand-wash)}
.agreed h3{display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--brand-ink); margin-bottom: 10px}
.agreed h3 svg{width: 18px; height: 18px; flex-shrink: 0}
.agreed p{font-size: 1.0625rem; line-height: 1.75; color: var(--ink)}
html[lang="ar"] .agreed p, html[lang="fa"] .agreed p{line-height: 1.95}
.agreed button.more{margin-top: 10px}

/* framing */
.frames{border-top: 1px solid var(--line)}
.frame{display: grid; grid-template-columns: 210px minmax(0, 1fr) 40px; gap: 10px 28px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line)}
.fb{display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding-top: 3px}
.fb i.dot{width: 10px; height: 10px}
.fb b{font-size: 1rem; font-weight: 700; color: var(--ink)}
.fb span{flex-basis: 100%; padding-inline-start: 20px; font-size: var(--fs-small); color: var(--muted)}
.fk p{font-size: 1.125rem; font-weight: 600; color: var(--ink); line-height: 1.45}
.frame.silent .fk p{font-weight: 400; color: var(--muted)}
html[lang="en"] .frame.silent .fk p{font-style: italic}
.fk .ft{margin-top: 16px; font-size: 1rem; font-weight: 400; line-height: 1.75; color: var(--ink-2); max-width: 70ch}
.flogos{display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px}
.sn{display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 550; color: var(--ink-2); border-radius: 6px; transition: color 150ms ease}
button.sn:active{transform: scale(.97)}
@media (hover: hover) and (pointer: fine){ button.sn:hover{color: var(--brand)} }
.fx{width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); transition: background-color 150ms ease}
.fx svg{width: 18px; height: 18px; transition: transform 220ms var(--ease-out)}
.fx[aria-expanded="true"] svg{transform: rotate(180deg)}
@media (hover: hover) and (pointer: fine){ .fx:hover{background: var(--surface-3); color: var(--ink)} }

/* lanes, impacts, holds, timeline, experts */
.lanes{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--line)}
.lane{padding: 22px 0; border-bottom: 1px solid var(--line)}
.lane p{font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.45}
.impacts{border-top: 1px solid var(--line)}
.impact{display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line)}
.impact .pill{justify-self: start}
.impact .prose{margin-top: 0; font-size: 1rem}
.impact button.more{margin-top: 8px}
.holds{display: grid; grid-template-columns: 1fr 1fr; gap: 56px}
.hcol h3{display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; padding-bottom: 14px; border-bottom: 2px solid currentColor}
.hcol h3 svg{width: 18px; height: 18px}
.hcol.a h3{color: var(--agree)} .hcol.d h3{color: var(--contest)}
.hcol ul{list-style: none; margin: 0; padding: 0}
.hcol li{display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.55; color: var(--ink)}
.hcol li svg{width: 16px; height: 16px; margin-top: 4px}
.hcol.a li svg{color: var(--agree)} .hcol.d li svg{color: var(--contest-mark)}
.hcol .who{display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--muted)}
.hcol .pill{margin-top: 8px}
.tl{list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line)}
.tl li{display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.6; color: var(--ink-2)}
.tl .d{font-size: .9375rem; font-weight: 700; color: var(--brand)}
.experts{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px}
.expert{display: grid; gap: 14px; align-content: start}
.expert .nm{display: flex; align-items: center; gap: 12px}
.expert .nm b{display: block; font-size: 1rem; color: var(--ink); line-height: 1.35}
.expert .nm div span{display: block; font-size: var(--fs-small); color: var(--muted); line-height: 1.4}
.expert p{font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2)}
.expert a.on{font-size: var(--fs-small); font-weight: 600; color: var(--brand)}
.initials{width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; font-size: .8125rem; font-weight: 800; flex-shrink: 0; direction: ltr}
.slide.alt .initials{background: var(--bg)}

/* sources on a topic */
.stiles{display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px}
.stile{display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: start;
  transition: border-color 150ms ease, transform 160ms var(--ease-out)}
.stile:active{transform: scale(.98)}
.stile .nm{min-width: 0}
.stile .nm b{display: block; font-size: .9375rem; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.stile .nm span{display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-small); color: var(--muted)}
.stile i.dot{width: 8px; height: 8px}
@media (hover: hover) and (pointer: fine){ .stile:hover{border-color: var(--line-strong)} }

/* maps */
.mapcard{border-radius: 22px; overflow: hidden; background: var(--map-bg); border: 1px solid var(--line)}
.map{position: relative; direction: ltr; overflow: hidden}
.map svg{width: 100%; height: auto; overflow: hidden}
.map use{fill: var(--map-land); stroke: var(--map-stroke)}
.map .dot{stroke: var(--map-bg)}
.map .dot.sel{stroke: var(--ink); stroke-width: 1.4}
.map .mlbl{position: absolute; transform: translate(5px, -50%); font-size: .8125rem; font-weight: 650; color: var(--ink); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px var(--map-bg), 0 0 3px var(--map-bg), 0 0 6px var(--map-bg)}
.map .mlbl.l{transform: translate(calc(-100% - 5px), -50%)}
.map .mlbl.t{transform: translate(-50%, calc(-100% - 4px))}
.map .mlbl.b{transform: translate(-50%, 4px)}
html[lang="ar"] .map .mlbl, html[lang="fa"] .map .mlbl{font-size: .875rem}
.map-foot{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 32px; padding: 18px 22px 20px; border-top: 1px solid var(--line); background: var(--surface)}
.mapdesc{flex: 1 1 380px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 72ch}
.mapdesc b{color: var(--ink)}
.map-legend{display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 3px; font-size: var(--fs-small); color: var(--muted)}
.map-legend .ramp{display: inline-flex; align-items: center; gap: 7px}
.map-legend .ramp i{width: 10px; height: 10px; border-radius: 50%}
.maps-t{display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px}

/* chart */
.chart-row.has-bars{display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start}
.chart{position: relative; direction: ltr}
.chart svg{width: 100%; height: auto; touch-action: pan-y}
.chart .grid line{stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges}
.chart .base{stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges}
.chart .line{fill: none; stroke: var(--viz-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round}
.chart .area{fill: var(--viz-wash)}
.chart .pt{fill: var(--viz-line); stroke: var(--surface); stroke-width: 2}
.chart .evl{stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges}
.chart .evm{fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2}
.chart .evn{fill: var(--ink-2); font-size: 9px; font-weight: 700}
html[lang="ar"] .chart .evn, html[lang="fa"] .chart .evn{font-size: 10px}
.chart .xhair{stroke: var(--ink); stroke-width: 1; opacity: .35; shape-rendering: crispEdges}
.chart .hl{fill: var(--viz-line); stroke: var(--surface); stroke-width: 2.5}
.chart .ax{position: absolute; font-size: .75rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none}
html[lang="ar"] .chart .ax, html[lang="fa"] .chart .ax{font-size: .8125rem}
.chart .ax.y{transform: translate(-100%, -50%); padding-right: 8px}
.chart .ax.x{transform: translate(-50%, 0)}
.chart .endlbl{position: absolute; transform: translate(-100%, -130%); padding-right: 8px; text-align: right; line-height: 1.2; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 6px var(--surface)}
.chart .endlbl b{display: block; font-size: 1rem; color: var(--ink); font-weight: 800}
.chart .endlbl span{font-size: .75rem; color: var(--muted)}
.chart-focus{outline: none}
.chart-focus:focus-visible{outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px}
.events{list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px}
.events li{display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: .875rem; line-height: 1.5; color: var(--ink-2)}
html[lang="ar"] .events li, html[lang="fa"] .events li{font-size: .9375rem}
.events i{width: 20px; height: 20px; border-radius: 50%; border: 1.25px solid var(--ink-2); display: grid; place-items: center; font-style: normal; font-size: .6875rem; font-weight: 700; color: var(--ink-2); margin-top: 1px}
html[lang="ar"] .events i, html[lang="fa"] .events i{font-size: .75rem; line-height: 1}
.events b{font-weight: 650; color: var(--ink)}
.bars{display: grid; gap: 18px}
.barrow .top{display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .9375rem}
.barrow .top span{color: var(--muted)}
.barrow .top b{color: var(--ink); font-weight: 700; text-align: end}
.bar{position: relative; height: 12px; border-radius: 4px; background: var(--band-track)}
.bar i{position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: var(--band-fill)}
.bar i.range{opacity: .45}

.datatable{margin-top: 16px}
.datatable summary{display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: .875rem; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; border-radius: 6px}
.datatable summary::-webkit-details-marker{display: none}
.datatable summary svg, .method summary svg{width: 15px; height: 15px; transition: transform 180ms var(--ease-out)}
[dir="rtl"] .datatable summary svg, [dir="rtl"] .method summary svg{transform: scaleX(-1)}
.datatable[open] summary svg, .method[open] summary svg{transform: rotate(90deg)}
.tablewrap{overflow-x: auto; margin-top: 10px}
.srct{width: 100%; border-collapse: collapse; font-size: .875rem}
.srct th{text-align: start; font-size: var(--fs-small); font-weight: 600; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1px solid var(--line)}
[dir="rtl"] .srct th{padding: 0 0 10px 14px}
.srct td{padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; color: var(--ink-2)}
[dir="rtl"] .srct td{padding: 11px 0 11px 14px}
.srct td.nm{font-weight: 600; color: var(--ink); white-space: nowrap}
.srct td:nth-child(2), .srct td:nth-child(3){white-space: nowrap}

.matrix{width: 100%; border-collapse: separate; border-spacing: 0}
.matrix th{font-size: var(--fs-small); font-weight: 600; color: var(--muted); padding: 8px 6px; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--line); line-height: 1.3}
.matrix th:first-child{text-align: start}
.matrix td{padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line-soft)}
.matrix td:first-child{text-align: start; font-size: .9375rem; color: var(--ink); font-weight: 550}
.matrix .cell{width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums}
.matrix .c0{color: var(--faint)}
.matrix .c1{background: var(--cov-1); color: #0B2447}
.matrix .c2{background: var(--cov-3); color: #fff}
:root[data-theme="dark"] .matrix .c1{color: #fff}
:root[data-theme="dark"] .matrix .c2{color: #0B2447}

.method{margin-top: 80px; padding-block: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.method summary{display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 1rem; font-weight: 700; color: var(--ink); border-radius: 6px}
.method summary::-webkit-details-marker{display: none}
.method p{margin-top: 14px; font-size: .9375rem; line-height: 1.75; color: var(--muted); max-width: 74ch}
.method p b{color: var(--ink-2)}
.related{margin-top: 96px}
.related .grid{margin-top: 28px}

.pending{margin-top: 32px; padding: 36px 28px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 20px}
.pending h3{font-size: 1.1875rem; margin-bottom: 8px}
.pending p{color: var(--muted); max-width: 56ch; margin-inline: auto}

/* ============================== Outcomes ============================== */
.page-head{padding-top: 64px}
.page-head .sub{font-size: 1.1875rem; line-height: 1.55; color: var(--muted); margin-top: 16px; max-width: 58ch}
.page-head .stats{margin-top: 20px}
.page-tools{margin-top: 32px}
.page-head + .wrap{margin-top: 24px}
/* one topic per row: the topic on the left, its outcomes on the right */
.oblock{display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 64px; align-items: start; padding-block: 48px; border-bottom: 1px solid var(--line)}
.oblock > :not(.ohead){grid-column: 2}
.oblock > .ohead{grid-column: 1; grid-row: 1 / span 3}
.oblock .outs .out:first-child{border-top: 0; padding-top: 4px}
.oblock .outs .out:last-child{border-bottom: 0}
.ohead{display: flex; flex-direction: column; align-items: stretch; gap: 16px; border-radius: 16px}
.ohead .ph.thumb{width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 16px}
.ohead .ot{display: grid; gap: 2px; min-width: 0; flex: 1}
.ohead .cat{font-size: var(--fs-small); font-weight: 600; color: var(--brand)}
.ohead b{font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: var(--track-tight); color: var(--ink); transition: color 150ms ease}
.ohead .date{font-size: var(--fs-small); color: var(--muted)}
.ohead .go{display: none}
@media (hover: hover) and (pointer: fine){ .ohead:hover b{color: var(--brand)} }
.inds{margin: 12px 0 0; padding-inline-start: 22px; display: grid; gap: 10px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2)}
.inds li::marker{color: var(--brand); font-weight: 700}

/* ============================== Sources ============================== */
.reg-tools{margin-top: 36px}
.reg-tools .cats{flex: none}
.rgroup{margin-top: 52px}
.rgroup-h{display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 18px}
.rgroup-h i.dot{width: 12px; height: 12px}
.rgroup-h h2{font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: var(--track-tight); color: var(--ink)}
.rgroup-h span{font-size: var(--fs-small); color: var(--muted)}
.rtiles{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px}
.rtile{display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: start;
  transition: border-color 150ms ease, transform 160ms var(--ease-out)}
.rtile:active{transform: scale(.98)}
.rtile .nm{min-width: 0; flex: 1}
.rtile .nm b{display: block; font-size: .9375rem; color: var(--ink); line-height: 1.3}
.rtile .nm span{display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--muted); line-height: 1.35}
@media (hover: hover) and (pointer: fine){ .rtile:hover{border-color: var(--line-strong)} }
.live{display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 650; color: var(--agree); white-space: nowrap}
html[lang="ar"] .live, html[lang="fa"] .live{font-size: .8125rem}
.live::before{content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--agree); box-shadow: 0 0 0 3px var(--agree-wash)}

/* ============================== How to read ============================== */
.shape-demo{display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: center}
.h2{font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; line-height: 1.15; letter-spacing: var(--track-tight); color: var(--ink)}
.shape-demo .body{margin-top: 14px; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); max-width: 60ch}
.legend{list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; color: var(--muted)}
.legend li{display: flex; align-items: center; gap: 10px}
.legend i{width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0}
.legend i.hollow{box-shadow: inset 0 0 0 1.5px var(--faint)}
.mgrid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px}
.mcard h3{font-size: 1.1875rem; font-weight: 750; color: var(--ink); margin-bottom: 8px}
.mcard p{font-size: 1rem; line-height: 1.7; color: var(--ink-2)}
.std{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px}
.std .mcard > svg{width: 24px; height: 24px; color: var(--brand); margin-bottom: 12px}
.pipe{list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step}
.pipe li{position: relative; padding: 30px 28px 0 0; border-top: 2px solid var(--line-strong); counter-increment: step}
[dir="rtl"] .pipe li{padding: 30px 0 0 28px}
.pipe li::before{content: counter(step); position: absolute; top: -16px; inset-inline-start: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--line-strong); font-size: .8125rem; font-weight: 800; color: var(--ink)}
html[lang="ar"] .pipe li::before{content: counter(step, arabic-indic)}
html[lang="fa"] .pipe li::before{content: counter(step, persian)}
.slide.alt .pipe li::before{background: var(--surface)}
.pipe li.gate{border-top-color: var(--brand)}
.pipe li.gate::before{background: var(--brand); border-color: var(--brand); color: var(--on-brand)}
.pipe h3{font-size: 1.0625rem; font-weight: 750; color: var(--ink); margin-bottom: 8px}
.pipe p{font-size: .9375rem; line-height: 1.6; color: var(--muted)}

/* ============================== dialogs ============================== */
dialog{border: 0; padding: 0; background: transparent; color: inherit; max-width: none; max-height: none; overflow: visible}
dialog::backdrop{background: var(--scrim); opacity: 0; transition: opacity 250ms var(--ease-out)}
dialog[open].shown::backdrop{opacity: 1}
dialog.instant, dialog.instant::backdrop{transition: none!important}
dialog.pal{margin: 10vh auto auto}
.modal{width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); margin: auto; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-3); overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transform: scale(.96); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out)}
.modal.wide{width: min(880px, calc(100vw - 32px))}
.modal.shown{opacity: 1; transform: scale(1)}
.modal.closing{transition-duration: 180ms}
.modal-h{display: flex; align-items: flex-start; gap: 16px; padding: 22px 20px 18px 24px; border-bottom: 1px solid var(--line-soft)}
[dir="rtl"] .modal-h{padding: 22px 24px 18px 20px}
.modal-h .x{margin-inline-start: auto; margin-top: -4px; margin-inline-end: -6px}
.modal-b{padding: 18px 24px 24px; overflow-y: auto; overscroll-behavior: contain}
.modal h2{font-size: 1.375rem; line-height: 1.3; letter-spacing: var(--track-tight)}
.modal .sub{font-size: .9375rem; color: var(--muted); margin-top: 3px}
.modal .kicker{margin-top: 24px}
.flags{display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px}
.bflag{display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 99px; background: var(--surface-3); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); white-space: nowrap}
.bflag i.dot{width: 8px; height: 8px}
.kv{display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: .9375rem}
.kv .k{color: var(--muted)}
.kv .v{color: var(--ink); font-weight: 600; text-align: end}
.kv .v a{display: inline-flex; align-items: center; gap: 6px; color: var(--brand); direction: ltr}
.kv .v a svg{width: 14px; height: 14px}
.handling{margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft)}
.handling .kicker{margin: 0 0 6px}
.handling p{font-size: .9375rem; line-height: 1.6; color: var(--ink-2)}
.modal-b .lrow{grid-template-columns: 76px minmax(0, 1fr); padding: 14px 0}
.modal-b .lrow .h{font-size: 1rem}
@media (hover: hover) and (pointer: fine){ .modal-b a.lrow:hover .h{color: var(--brand)} }

.drawer{position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(460px, 100vw); background: var(--surface); box-shadow: var(--shadow-3); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 340ms var(--ease-drawer)}
[dir="rtl"] .drawer{transform: translateX(-100%)}
.drawer.shown, [dir="rtl"] .drawer.shown{transform: none}
.drawer.closing{transition-duration: 240ms}
.sheet{position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: var(--shadow-3); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 360ms var(--ease-drawer)}
.sheet.shown{transform: translateY(0)}
.sheet.closing{transition-duration: 280ms}
.sheet .grab{width: 38px; height: 5px; border-radius: 99px; background: var(--line-strong); margin: 8px auto 0; flex-shrink: 0}
.panel-h{display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 16px}
.panel-h h2{font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: var(--track-tight); color: var(--ink); line-height: 1.2}
.panel-h .sub{font-size: .9375rem; color: var(--muted); margin-top: 6px; line-height: 1.5}
.panel-h .x{margin-inline-start: auto; margin-top: -6px; margin-inline-end: -8px}
.dash-search{display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 24px 6px; padding: 0 14px; border-radius: 12px; background: var(--surface-3); border: 1px solid transparent; color: var(--muted);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease}
.dash-search:focus-within{border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-wash)}
.dash-search svg{width: 18px; height: 18px; flex-shrink: 0}
.dash-search input{flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: .9375rem; color: var(--ink)}
.dash-search input::placeholder{color: var(--faint)}
.panel-b{flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 24px}
.facet{padding-block: 20px; border-bottom: 1px solid var(--line-soft)}
.facet:last-child{border-bottom: 0}
.facet h3{display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .9375rem; font-weight: 700; color: var(--ink)}
.facet h3 .sel{min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: var(--on-brand); font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center}
.facet .chips{display: flex; flex-wrap: wrap; align-items: center; gap: 8px}
.dash-empty{padding: 40px 0; text-align: center; color: var(--muted)}
.panel-f{display: flex; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line)}
.panel-f .btn{flex: 1}
.panel-f .btn.primary{flex: 2}
.menu{display: grid; gap: 18px; padding-bottom: calc(24px + env(safe-area-inset-bottom))}
.mrow{display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--ink)}
.mlink{display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-block: 1px solid var(--line); font-weight: 600; color: var(--ink)}
.mlink svg{width: 18px; height: 18px; color: var(--muted)}

/* search palette: opens instantly (keyboard, used many times a day) */
.palette{width: min(640px, calc(100vw - 24px)); margin: 0 auto; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-3); overflow: hidden; border: 1px solid var(--line)}
dialog.pal::backdrop{background: var(--scrim); opacity: 1; transition: none}
.pal-in{display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line)}
.pal-in svg{width: 19px; height: 19px; color: var(--muted); flex-shrink: 0}
.pal-in input{flex: 1; min-width: 0; height: 58px; border: 0; background: transparent; font-size: 1.0625rem; color: var(--ink); outline: none}
.pal-in kbd{font-family: var(--font-ui); font-size: .6875rem; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px}
.pal-res{max-height: min(440px, 56vh); overflow-y: auto; padding: 6px}
.pal-g{font-size: var(--fs-small); font-weight: 600; color: var(--muted); padding: 10px 12px 6px}
.pal-item{display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; color: var(--ink-2); font-size: .9375rem; cursor: pointer}
.pal-item .ic{width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; flex-shrink: 0; color: var(--muted)}
.pal-item .ic svg{width: 16px; height: 16px}
.pal-item .tt{min-width: 0; flex: 1}
.pal-item .tt b{display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.pal-item .tt span{display: block; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.pal-item[aria-selected="true"]{background: var(--brand-wash)}
.pal-item[aria-selected="true"] .ic{background: var(--brand); color: #fff}
.pal-empty{padding: 28px 16px; text-align: center; color: var(--muted); font-size: .9375rem}
.pal-foot{display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted)}

/* plans */
.plans{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.plan{display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface)}
.plan.hi{border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash)}
.plan h3{display: flex; align-items: center; gap: 8px; font-size: 1.125rem}
.plan .who{font-size: .875rem; color: var(--muted); line-height: 1.5}
.plan ul{list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; font-size: .9375rem; color: var(--ink-2); line-height: 1.45}
.plan li{display: flex; gap: 8px}
.plan li svg{width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--agree)}
.plan .btn{margin-top: auto; width: 100%}

/* radar */
.radar{position: relative; direction: ltr; max-width: 360px; margin: 0 auto}
.radar svg{width: 100%; height: auto}
.radar .ring{fill: none; stroke: var(--line); stroke-width: 1}
.radar .axis{stroke: var(--line); stroke-width: 1}
.radar .shape{stroke-width: 2; stroke-linejoin: round}
.radar .ax{position: absolute; transform: translate(-50%, -50%); font-size: .75rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; width: 110px}
html[lang="ar"] .radar .ax, html[lang="fa"] .radar .ax{font-size: .8125rem}

/* toasts: bottom-centre, interruptible, exit faster than entry */
.toasts{position: fixed; z-index: 150; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px)}
.toast{pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 12px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: .9375rem; font-weight: 500; box-shadow: var(--shadow-3);
  opacity: 1; transform: translateY(0); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out)}
@starting-style{ .toast{opacity: 0; transform: translateY(100%)} }
.toast.out{opacity: 0; transform: translateY(100%); transition-duration: 240ms}
.toast svg{width: 17px; height: 17px; flex-shrink: 0}
.toast .ok{color: #6EDBA8}
:root[data-theme="dark"] .toast{background: #E9EEF7; color: #0E1420}
:root[data-theme="dark"] .toast .ok{color: #0B7A55}

/* ============================== responsive ============================== */
@media (max-width: 1099px){
  .numbers-row, .numbers.side{grid-template-columns: minmax(0, 1fr) 300px; gap: 48px}
  .kpis{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .kpis.n3{grid-template-columns: repeat(3, minmax(0, 1fr))}
  .chart-row.has-bars{grid-template-columns: minmax(0, 1fr)}
  .hero-grid{gap: 44px}
  .searchbtn{min-width: 0; width: 40px; padding: 0; justify-content: center; background: transparent}
  .searchbtn span, .searchbtn kbd{display: none}
  .topnav .brand{margin-inline-end: 12px}
}
@media (max-width: 899px){
  .tcard.lead{grid-template-columns: minmax(0, 1fr); gap: 0}
  .tcard.lead .tcard-body{padding-top: 24px}
  .tcard.lead .ph{aspect-ratio: 16 / 9}
  .hero-grid{grid-template-columns: minmax(0, 1fr)}
  .hero-media{order: -1}
  .hero-media .ph{aspect-ratio: 16 / 9}
  .numbers-row, .numbers.side{grid-template-columns: minmax(0, 1fr)}
  .cov-tile{max-width: 420px}
  .std{grid-template-columns: 1fr 1fr}
  .pipe{grid-template-columns: 1fr 1fr; row-gap: 40px}
  .foot-in{grid-template-columns: 1fr 1fr}
  .foot-brand{grid-column: 1 / -1}
  .frame{grid-template-columns: 170px minmax(0, 1fr) 40px; column-gap: 20px}
}
@media (max-width: 759px){
  :root{--gutter: 16px}
  .topnav-in{padding-inline: 16px}
  .topnav-in{height: 56px; gap: 4px}
  .topnav .nav{display: none}
  .topnav .brand{margin-inline-end: 0}
  .searchbtn{width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent}
  .searchbtn span, .searchbtn kbd{display: none}
  .desk{display: none!important}
  .mob{display: inline-grid}
  .tabbar{display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 60; inset-inline: 0; bottom: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 -1px 0 var(--glass-edge)}
  .tabbar a{display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; font-size: .75rem; font-weight: 600; color: var(--muted); transition: transform 160ms var(--ease-out)}
  html[lang="ar"] .tabbar a, html[lang="fa"] .tabbar a{font-size: .8125rem}
  .tabbar a svg{width: 22px; height: 22px}
  .tabbar a:active{transform: scale(.94)}
  .tabbar a[aria-current="page"]{color: var(--brand)}
  .foot{margin-top: 80px; padding-bottom: calc(68px + env(safe-area-inset-bottom))}
  .foot-in{grid-template-columns: minmax(0, 1fr); padding-block: 36px 32px}
  .toasts{bottom: calc(84px + env(safe-area-inset-bottom))}

  .feed-head{grid-template-columns: minmax(0, 1fr); padding-top: 36px}
  .feed-head .stats{grid-column: 1; justify-content: flex-start; padding-bottom: 0; margin-top: 16px}
  .filterbar{margin-top: 28px; padding-top: 16px; gap: 8px}
  .cats{-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent)}
  [dir="rtl"] .cats{-webkit-mask-image: linear-gradient(270deg, #000 82%, transparent); mask-image: linear-gradient(270deg, #000 82%, transparent)}
  .cat-pill{height: 36px; padding: 0 14px; font-size: .875rem}
  .dash-btn{min-height: 36px; padding: 6px 12px}
  .grid{grid-template-columns: minmax(0, 1fr); gap: 52px; margin-top: 28px}
  .tcard .ph, .tcard.lead .ph{aspect-ratio: 16 / 10; border-radius: 16px}
  .tcard-h{font-size: 1.375rem}
  .tcard.lead .tcard-h{font-size: 1.875rem}
  .tcard.lead .stat b{font-size: 2.25rem}
  .latest{margin-top: 72px}
  .lrow{grid-template-columns: 64px minmax(0, 1fr); gap: 12px}

  .seal{inset-inline-end: 12px; bottom: 12px}
  .seal.lg .rose{width: 88px!important; height: 88px!important}
  .tcard.lead .seal .rose{width: 76px!important; height: 76px!important}
  .seal.lg .rose svg, .tcard.lead .seal .rose svg{width: 100%; height: 100%}
  .topic-hero{padding: 14px 0 48px}
  .hero-grid{margin-top: 14px; gap: 26px}
  .hero-media .ph{border-radius: 18px}
  .topic-hero .dek{font-size: 1.0625rem}
  .subnav{top: 56px}
  .subnav .wrap{height: 50px}
  .slide{padding-block: 60px; scroll-margin-top: 106px}
  .slide-h{margin-bottom: 28px}
  .slide .lead{font-size: 1.0625rem; margin-bottom: 28px}
  .kpis, .kpis.n3, .numbers.side .kpis{grid-template-columns: 1fr 1fr; gap: 32px 20px}
  .kpis.n3 .kpi:last-child{grid-column: 1 / -1}
  .kpi b{font-size: 2.125rem}
  .kpi span{font-size: .875rem}
  .numbers-row{margin-top: 52px; gap: 44px}
  .cov-tile{max-width: none}
  .tbar{grid-template-columns: minmax(0, 1fr) 34px; row-gap: 6px}
  .tbar .nm{grid-column: 1 / -1}
  .out{grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 18px 0}
  .out-t{grid-column: 1; grid-row: 1}
  .out-n{grid-column: 2; grid-row: 1; font-size: 1.125rem}
  .out-band{grid-column: 1 / -1; grid-row: 2}
  .frame{grid-template-columns: minmax(0, 1fr) 40px; padding: 20px 0}
  .fb{grid-column: 1; grid-row: 1}
  .fx{grid-column: 2; grid-row: 1}
  .fk{grid-column: 1 / -1}
  .fb span{flex-basis: auto; padding-inline-start: 0}
  .fk p{font-size: 1.0625rem}
  .lanes, .holds, .experts, .mgrid, .std, .maps-t{grid-template-columns: minmax(0, 1fr)}
  .holds{gap: 40px}
  .experts{gap: 36px}
  .impact{grid-template-columns: minmax(0, 1fr); gap: 10px}
  .tl li{grid-template-columns: minmax(0, 1fr); gap: 4px}
  .events{grid-template-columns: minmax(0, 1fr)}
  .panel{padding: 18px; border-radius: 16px}
  .map-foot{padding: 14px 16px 16px}
  .stiles, .rtiles{grid-template-columns: minmax(0, 1fr)}
  .shape-demo{grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px}
  .pipe{grid-template-columns: minmax(0, 1fr)}
  .page-head{padding-top: 36px}
  .page-head .sub{font-size: 1.0625rem}
  .oblock{grid-template-columns: minmax(0, 1fr); padding-block: 36px}
  .oblock > :not(.ohead), .oblock > .ohead{grid-column: 1; grid-row: auto}
  .ohead{flex-direction: row; align-items: center; gap: 14px; margin-bottom: 8px}
  .ohead .ph.thumb{width: 76px; height: 56px; aspect-ratio: auto; border-radius: 12px}
  .oblock .outs .out:first-child{border-top: 1px solid var(--line); padding-top: 18px}
  .ohead b{font-size: 1.25rem}
  .srct thead{display: none}
  .srct, .srct tbody, .srct tr, .srct td{display: block; width: 100%}
  .srct tr{padding: 12px 0; border-bottom: 1px solid var(--line-soft)}
  .srct td{border: 0; padding: 2px 0!important; white-space: normal!important}
  .modal{width: calc(100vw - 20px); max-height: calc(100vh - 40px)}
  .plans{grid-template-columns: minmax(0, 1fr)}
  .panel-h, .panel-b, .panel-f{padding-inline: 18px}
  .dash-search{margin-inline: 18px}
}

/* accessibility preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition-property: opacity, color, background-color, border-color!important}
  .modal, .modal.shown{transform: none!important}
  .sheet, .drawer, [dir="rtl"] .drawer{transform: none!important; opacity: 0; transition: opacity 200ms ease!important}
  .sheet.shown, .drawer.shown{opacity: 1}
  .toast, .toast.out{transform: none!important}
  @starting-style{ .toast{transform: none} }
  .btn:active, .chip:active, .cat-pill:active, .icon-btn:active, .stile:active, .rtile:active, .tcard:active .tcard-media, button.sn:active, .tabbar a:active{transform: none}
  .seg[data-ready] .ind{transition: none}
}
@media (prefers-reduced-transparency: reduce){
  .topnav, .tabbar, .subnav{background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none}
}
@media (prefers-contrast: more){
  :root{--line: #B9C0CC; --line-soft: #CDD3DC; --muted: #4A5163}
  .panel, .stile, .rtile, .mapcard{border-color: var(--line-strong)}
}
@media print{
  .topnav, .tabbar, .subnav, .hero-actions, .toasts, .filterbar, .foot{display: none!important}
  .topic-hero{background: none; color: #000}
  .topic-h, .topic-hero .dek{color: #000}
  .slide{padding-block: 32px; break-inside: avoid}
}

/* links out to the source article and the analyst's piece */
.srct td.dt{white-space: nowrap; color: var(--muted)}
.srct a.ext{color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px}
.srct a.ext:hover{color: var(--brand); text-decoration-color: currentColor}
.srct a.ext svg, .expert .xlink svg{display: inline-block; width: 13px; height: 13px; margin-inline-start: 5px; vertical-align: -1px; opacity: .7}
.expert p.xlinks{display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-small); line-height: 1.4}
.expert a.xlink{font-weight: 600; color: var(--brand)}
[dir="rtl"] .srct a.ext svg, [dir="rtl"] .expert .xlink svg{transform: scaleX(-1)}

/* figure values that run long in translation (e.g. «نحو ١٥٠ كيلومتراً») step down a size instead of wrapping */
.kpi b.long{font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.12}
.stat b.long{font-size: 1.5rem; white-space: normal}
.tcard.lead .stat b.long{font-size: 2rem}