/*!
 * Albourse (البورصة) · اقرأ السوق بوضوح — design system
 * "Vivid shell, editorial content": bento dashboards (home, markets, tools) + calm editorial prose (lessons).
 * RTL-first (logical properties everywhere). Theme lives on <html data-theme="dark|light">.
 * Docs: docs/DESIGN.md · Gallery: styleguide.html
 *
 *  01 Tokens            08 Buttons              15 Strategy & tool cards     22 Forms & calculators
 *  02 Reset & base      09 Chips & badges       16 Page heroes               23 Data viz
 *  03 Typography        10 Change chips/status  17 Home hero & pulse         24 TradingView frame
 *  04 Layout            11 Cards & bento tiles  18 Editorial prose           25 States & skeletons
 *  05 Header & nav      12 Market cards         19 Callouts & blocks         26 Footer
 *  06 Drawer & search   13 Pulse tiles          20 Tables                    27 Motion & reveal
 *  07 Ticker            14 News                 21 Accordion, tabs, TOC      28 Responsive, a11y, print
 */

/* ======================================================================
   01 · TOKENS
   ====================================================================== */
:root {
  /* type families */
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif;
  --font-head: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-num: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  /* Naskh for headlines; Latin glyphs fall through to IBM Plex Sans first (sans alias for Latin inside Arabic headlines) */
  --font-serif: "IBM Plex Sans", "Markazi Text", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale (px floors keep Arabic ≥ 12px) */
  --fs-2xs: 12px;
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-base: 16px;
  --fs-md: 17.5px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: clamp(24px, 0.9vw + 18px, 32px);
  --fs-3xl: clamp(28px, 1.1vw + 20px, 40px);
  --fs-4xl: clamp(30px, 1.6vw + 20px, 52px);
  --fs-hero: clamp(32px, 1.9vw + 20px, 60px);
  --lh-body: 1.8;
  --lh-head: 1.45; /* floor for multi-line Alexandria headings: line-1 dots (في) must clear line-2 ascenders */

  /* spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --gap: 16px;
  --pad: 24px;
  --gutter: 32px;
  --section-y: clamp(64px, 6vw, 104px);
  --container: 1320px;
  --measure: 68ch;

  /* radii */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 700ms;

  /* chrome */
  --header-h: 72px;
  --ticker-h: 44px;
  --z-header: 50;
  --z-menu: 60;
  --z-overlay: 80;

  /* market gradients — white text is AA (≥ 5:1) at every stop, in both themes */
  --grad-saudi: linear-gradient(150deg, #032d2a 0%, #075550 48%, #0a706b 100%);
  --grad-us: linear-gradient(150deg, #0f1757 0%, #1d2c96 50%, #2d43c2 100%);
  --grad-crypto: linear-gradient(150deg, #561f04 0%, #873806 50%, #a64f09 100%);
  --grad-academy: linear-gradient(150deg, #200f49 0%, #461d9c 55%, #5f2cc7 100%);
  /* tools (non-options calculators): neutral slate, never a market hue */
  --grad-tools: linear-gradient(150deg, #151b29 0%, #2a3448 55%, #3c4a64 100%);
  /* brand signature: the rising alef of the wordmark and the mark, Saudi teal at the baseline → US azure at the tip
     (light theme: the darker AA pair, below). Logo only: never a UI fill. */
  --grad-brand: linear-gradient(0deg, #19c9b4 0%, #4d90ff 100%);
  --on-vivid: #ffffff;
  --on-vivid-2: rgba(255, 255, 255, .86);
  /* dark ink for white pills on vivid gradients and photos (.btn--on-vivid, «خاص» on the lead story) */
  --on-vivid-ink: #0b1020;
  /* fixed AA colours for change chips sitting on white pills over vivid gradients */
  --pos-fixed: #077a3e;
  --neg-fixed: #c22b3d;
  /* breaking news («عاجل»): deep red with white text (6.6:1) in both themes */
  --breaking: #b42318;
  --on-breaking: #ffffff;
}

/* ---------- dark (default) ---------- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07090e;
  --bg-soft: #0b0e15;
  --surface: #10131b;
  --surface-2: #161a24;
  --surface-3: #1d222e;
  --surface-hero: #0b0e16;
  --border: rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .15);
  --text: #f1f3f8;
  --text-2: #b4bccb;
  --text-3: #8f98aa;
  --brand: #f1f3f8;
  --brand-2: #8cb2ff;
  --brand-ink: #0a0d14;
  --link: #9ab9ff;
  --focus: #9ab9ff;
  --pos: #4bdd85;
  --pos-soft: rgba(75, 221, 133, .13);
  --neg: #ff6f82;
  --neg-soft: rgba(255, 111, 130, .13);
  --flat: #a5aec0;
  --flat-soft: rgba(165, 174, 192, .12);
  --warn: #f6b955;
  --warn-soft: rgba(246, 185, 85, .13);
  --info: #7aa9ff;
  --info-soft: rgba(122, 169, 255, .13);
  --danger: #ff7d8c;
  --danger-soft: rgba(255, 125, 140, .12);
  --saudi: #22c3c0;
  --saudi-ink: #5ad6d2;
  --saudi-soft: rgba(34, 195, 192, .13);
  --us: #7e95ff;
  --us-ink: #a6b6ff;
  --us-soft: rgba(126, 149, 255, .14);
  --crypto: #ff9c45;
  --crypto-ink: #ffb87a;
  --crypto-soft: rgba(255, 156, 69, .13);
  --academy: #b18aff;
  --academy-ink: #c9adff;
  --academy-soft: rgba(177, 138, 255, .14);
  --commodity: #dcc15e;
  --commodity-ink: #e8d184;
  --commodity-soft: rgba(220, 193, 94, .13);
  --economy: #9aadc8;
  --economy-ink: #bac7da;
  --economy-soft: rgba(154, 173, 200, .13);
  --highlight: linear-gradient(90deg, rgba(34, 195, 192, .58), rgba(47, 124, 246, .55));
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .035), 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .5), 0 16px 36px -20px rgba(0, 0, 0, .9);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .5), 0 32px 64px -28px rgba(0, 0, 0, .95);
  --header-bg: rgba(7, 9, 14, .76);
  --grid-dot: rgba(255, 255, 255, .055);
  --tv-chart-bg: #10131b;
  --tv-chart-grid: rgba(148, 163, 184, .10);
  --skeleton: rgba(255, 255, 255, .05);
  --skeleton-shine: rgba(255, 255, 255, .07);
  --img-fallback: #121620;
  /* heat-map % on its own tint (AA at the strongest tile) */
  --heat-pos-ink: #7debaa;
  --heat-neg-ink: #ff9aa8;
}

/* ---------- light ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f7;
  --bg-soft: #ebeef3;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --surface-3: #eceff4;
  --surface-hero: #ffffff;
  --border: rgba(16, 24, 40, .09);
  --border-strong: rgba(16, 24, 40, .17);
  --text: #0b1020;
  --text-2: #3e4657;
  --text-3: #5a6274;
  --brand: #0b1020;
  --brand-2: #2457d6;
  --brand-ink: #ffffff;
  --grad-brand: linear-gradient(0deg, #0a7a74 0%, #1f5ed6 100%);
  --link: #2251c9;
  --focus: #2457d6;
  --pos: #077a3e;
  --pos-soft: #e1f4e8;
  --neg: #c22b3d;
  --neg-soft: #fce8ea;
  --flat: #5a6274;
  --flat-soft: #eef0f4;
  --warn: #965800;
  --warn-soft: #fcf0d9;
  --info: #1f5ed6;
  --info-soft: #e7eefc;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --saudi: #0b7e7a;
  --saudi-ink: #086a66;
  --saudi-soft: #e0f3f2;
  --us: #3b4fd6;
  --us-ink: #2f40b8;
  --us-soft: #e9ecfd;
  --crypto: #e07a12;
  --crypto-ink: #9d4f09;
  --crypto-soft: #fff0e1;
  --academy: #7646e4;
  --academy-ink: #6332cc;
  --academy-soft: #f1ebfe;
  --commodity: #a47c10;
  --commodity-ink: #7a5c0b;
  --commodity-soft: #faf3dd;
  --economy: #55657f;
  --economy-ink: #46546b;
  --economy-soft: #edf0f5;
  --highlight: rgba(255, 196, 41, .45);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 30px -18px rgba(16, 24, 40, .22);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, .06), 0 30px 60px -26px rgba(16, 24, 40, .34);
  --header-bg: rgba(243, 244, 247, .82);
  --grid-dot: rgba(15, 23, 42, .075);
  --tv-chart-bg: #ffffff;
  --tv-chart-grid: rgba(15, 23, 42, .06);
  --skeleton: rgba(15, 23, 42, .055);
  --skeleton-shine: rgba(255, 255, 255, .75);
  --img-fallback: #eef0f5;
  --heat-pos-ink: #055a2c;
  --heat-neg-ink: #981c2d;
}

/* accent hook: any element can set data-accent / .accent-* to recolour its children (dots, chips, bands) */
.accent-saudi, [data-accent="saudi"] { --accent: var(--saudi); --accent-ink: var(--saudi-ink); --accent-soft: var(--saudi-soft); --accent-grad: var(--grad-saudi); }
.accent-us, [data-accent="us"] { --accent: var(--us); --accent-ink: var(--us-ink); --accent-soft: var(--us-soft); --accent-grad: var(--grad-us); }
.accent-crypto, [data-accent="crypto"] { --accent: var(--crypto); --accent-ink: var(--crypto-ink); --accent-soft: var(--crypto-soft); --accent-grad: var(--grad-crypto); }
.accent-academy, [data-accent="academy"] { --accent: var(--academy); --accent-ink: var(--academy-ink); --accent-soft: var(--academy-soft); --accent-grad: var(--grad-academy); }
.accent-commodity, [data-accent="commodity"], [data-accent="commodities"] { --accent: var(--commodity); --accent-ink: var(--commodity-ink); --accent-soft: var(--commodity-soft); }
.accent-economy, [data-accent="economy"], [data-accent="fx"] { --accent: var(--economy); --accent-ink: var(--economy-ink); --accent-soft: var(--economy-soft); }
.accent-tools, [data-accent="tools"] { --accent: var(--economy); --accent-ink: var(--economy-ink); --accent-soft: var(--economy-soft); --accent-grad: var(--grad-tools); }
.accent-news, [data-accent="news"] { --accent: var(--economy); --accent-ink: var(--economy-ink); --accent-soft: var(--economy-soft); }

/* ======================================================================
   02 · RESET & BASE
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* the ONLY anchor offset: a jumped-to heading lands ~20px under the sticky header (never add scroll-margin-top on top of it) */
  scroll-padding-top: calc(var(--header-h) + 20px);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(1000px 520px at 88% -160px, color-mix(in srgb, var(--saudi) 7%, transparent), transparent 70%),
    radial-gradient(900px 560px at 6% -80px, color-mix(in srgb, var(--us) 7%, transparent), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
button { cursor: pointer; }
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul, ol)[role="list"], .list-reset { list-style: none; padding: 0; }
table { border-collapse: collapse; }
code, samp { font-family: var(--font-mono); font-size: .86em; }
:not(pre) > code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--brand-2) 32%, transparent); color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only, .vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* .sr-only is absolutely positioned: every chip that carries screen-reader text is its containing block,
   so that text can never escape a horizontal scroll rail and widen the phone layout */
.chg, .fchip, .filter-chips, .badge, .cat, .chip, .lchip, .tag, .tabs__list { position: relative; }
.skip-link {
  position: fixed; inset-inline-start: 16px; top: -80px; z-index: 200;
  padding: 10px 18px; border-radius: 12px; background: var(--brand); color: var(--brand-ink);
  font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lg); transition: top var(--t-fast) var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; }

/* inline SVG icons from the sprite (main.js injects <svg id="tn-sprite">) */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon--fill { fill: currentColor; stroke: none; }
[dir="rtl"] .icon--flip, .icon--dir { transform: scaleX(1); }

/* ======================================================================
   03 · TYPOGRAPHY
   ====================================================================== */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: var(--lh-head); color: var(--text); text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
.display { font-family: var(--font-head); font-weight: 800; line-height: 1.45; }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }
/* numbers: LTR isolation for digits/symbols ONLY (never wrap Arabic words in .num) */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.num-display { font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; direction: ltr; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }
/* a bracketed or radical math group inside Arabic text («√(الأيام ÷ 365)», «(105 − 100) + 2.50»): one LTR run,
   so brackets and the radical never mirror or drift. An Arabic word inside goes in its own <span> (isolated below), otherwise
   the digits after it turn into Arabic numbers and «÷ 365» flips. Keep each .math short (one group); Arabic operators join groups. */
.math { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.math > * { unicode-bidi: isolate; }
.unit { font-size: max(12px, .82em); font-weight: 500; color: var(--text-3); margin-inline-start: .25em; }
[lang="en"] { font-family: var(--font-body); }
.text-2 { color: var(--text-2); }
.text-3, .muted { color: var(--text-3); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.lead { font-size: var(--fs-md); line-height: 1.85; color: var(--text-2); max-width: 60ch; }
.lead b, .lead strong { color: var(--text); font-weight: 600; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 14px 4px 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); line-height: 1.4;
}
.eyebrow .dot, .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent, var(--text-3));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--text-3)) 20%, transparent);
}
kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface-2);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-2); line-height: 1; direction: ltr;
}
.link { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.link:hover { text-decoration-color: currentColor; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm);
  color: var(--accent-ink, var(--text)); text-decoration: none; min-height: 32px;
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); }
.link-arrow:hover .icon, a:hover > .link-arrow .icon { transform: translateX(-4px); }

/* highlighter that draws under ONE key phrase (RTL: grows from the right) */
.hl { position: relative; isolation: isolate; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -.1em -.12em; bottom: .14em; height: .36em;
  background: var(--highlight); border-radius: 4px; transform-origin: right center; transform: skewX(-10deg) scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
  .hl::after { animation: tn-hl 1s .45s var(--ease) both; }
}
@keyframes tn-hl { from { transform: skewX(-10deg) scaleX(0); } to { transform: skewX(-10deg) scaleX(1); } }

/* ======================================================================
   04 · LAYOUT
   ====================================================================== */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.container--narrow { --container: 880px; }
.container--wide { --container: 1440px; }
.section { padding-block: var(--section-y) 0; }
.section--tight { padding-block: var(--sp-12) 0; }
.section--alt { margin-top: var(--section-y); padding-block: var(--section-y); background: var(--bg-soft); border-block: 1px solid var(--border); }
.section--alt + .section { padding-top: var(--section-y); }
main { display: block; padding-bottom: var(--section-y); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-2)); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 260px), 100%), 1fr)); gap: var(--gap); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }

/* numbered section header with ink rule (01 الأسواق …) */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-4) var(--sp-8);
  padding-top: var(--sp-5); margin-bottom: var(--sp-8); border-top: 2px solid var(--text);
}
.section-head__label {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.4;
}
.section-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-3); direction: ltr; unicode-bidi: isolate; }
.section-head__label .rule { width: 22px; height: 2px; border-radius: 2px; background: var(--accent, var(--border-strong)); }
.section-head__title { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.45; margin-top: var(--sp-1); }
.section-head__lead { margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-md); max-width: 62ch; }
.section-head__action { align-self: end; }
.section-head--plain { border-top: 0; padding-top: 0; }

/* bento grid: 12 → 6 → 2 columns */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); grid-auto-flow: dense; }
.bento > * { min-width: 0; grid-column: span 12; }
.bento .s-2 { grid-column: span 2; } .bento .s-3 { grid-column: span 3; } .bento .s-4 { grid-column: span 4; }
.bento .s-5 { grid-column: span 5; } .bento .s-6 { grid-column: span 6; } .bento .s-7 { grid-column: span 7; }
.bento .s-8 { grid-column: span 8; } .bento .s-9 { grid-column: span 9; } .bento .s-12 { grid-column: span 12; }
.bento .r-2 { grid-row: span 2; } .bento .r-3 { grid-row: span 3; }

/* editorial article grid: content + sticky TOC sidebar (sidebar sits on the left in RTL) */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: var(--sp-12); align-items: start; }
.article-layout__main { min-width: 0; }
.article-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: var(--sp-5); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.article-layout--wide-aside { grid-template-columns: minmax(0, 1fr) 320px; }

/* ======================================================================
   05 · HEADER & NAV
   ====================================================================== */
#tn-header { display: contents; }
/* reserve the injected header's height (incl. its 1px border) until main.js builds it; the only child before that is the <noscript> nav */
#tn-header:empty, #tn-header:not(:has(.site-header)) { display: block; height: calc(var(--header-h) + 1px); }
body[data-ticker] #tn-header:empty, body[data-ticker] #tn-header:not(:has(.site-header)) { height: calc(var(--header-h) + 1px + var(--ticker-h)); }
/* without JavaScript: a plain link row, so every page still links to the seven sections */
.noscript-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding: 8px max(16px, calc((100% - var(--container)) / 2)); border-bottom: 1px solid var(--border); background: var(--surface); }
.noscript-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text); text-decoration: none; }
.noscript-nav a:hover { text-decoration: underline; }
@media (scripting: none) { #tn-header { display: block; height: auto !important; } }
/* the footer's height is reserved until main.js draws it; the static policy links inside (.footer-fallback) are what
   readers and crawlers get without JavaScript, or when main.js fails to load */
#tn-footer:not(:has(.site-footer)) { display: block; min-height: 420px; }
.footer-fallback { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px; padding: 24px max(16px, calc((100% - var(--container)) / 2)); border-top: 1px solid var(--border); background: var(--surface); }
.footer-fallback a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.footer-fallback a:hover { color: var(--text); text-decoration: underline; }
@media (scripting: none) { #tn-footer { min-height: 0 !important; } }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.header-bar { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-5); }
.brand { position: relative; display: inline-flex; align-items: center; flex: none; color: var(--text); text-decoration: none; border-radius: 14px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
/* the masthead «البورصة» is the logo (no tile beside it: see main.js brandHTML). Alexandria 800 in ink, never tracked
   (letter-spacing breaks the Arabic joins); only its alef carries colour */
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 27px; line-height: 1.2; letter-spacing: 0; color: var(--text); white-space: nowrap; }
/* the rising alef, switched on by main.js (html.tn-wm) once Alexandria has loaded: the real letter stays in the text
   and a bar is painted over it, one stem wide (.174em) and one stem taller than the lam (1.058em vs .884em), its top
   cut at 45° and high on the outer side, teal at the baseline → azure at the tip (--grad-brand) */
.tn-wm .brand__alef {
  display: inline-block; vertical-align: baseline; overflow: hidden;  /* overflow ≠ visible: its baseline is its bottom edge */
  width: .174em; height: 1.058em; margin-inline: .072em; margin-block-start: -.1em; /* Alexandria's side bearings; no taller line */
  color: transparent; background: var(--grad-brand);
  clip-path: polygon(0 .174em, 100% 0, 100% 100%, 0 100%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;       /* prints even with «background graphics» off */
}
@media (prefers-reduced-motion: no-preference) {
  .tn-wm .brand__alef { transition: transform var(--t-med) var(--ease-spring); }
  .brand:hover .brand__alef, .brand:focus-visible .brand__alef { transform: translateY(-.09em); } /* the alef ticks up */
}
.brand__tag { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
/* the drawer's head is a short bar: the wordmark alone, at the phone header's size */
.drawer__head .brand__name { font-size: 24px; }
.drawer__head .brand__tag { display: none; }

.main-nav { margin-inline: auto; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 11px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--text); background: var(--surface-3); }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--text); background: var(--surface-3); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent, var(--text-3)); }
/* a short label for compact desktops (1024–1279); the full label stays the link's accessible name */
.nav-link__short { display: none; }
.nav-link--academy .nav-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px var(--academy-soft); }
.nav-item.has-menu .nav-link { padding-inline-end: 6px; border-start-end-radius: 0; border-end-end-radius: 0; }
.nav-caret {
  display: grid; place-items: center; width: 26px; height: 44px; margin-inline-start: -2px; padding: 0;
  border: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: transparent; color: var(--text-3);
  transition: color var(--t-fast), background-color var(--t-fast);
}
[dir="rtl"] .nav-caret { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.nav-caret .icon { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease); }
.nav-item.has-menu:hover > .nav-link, .nav-item.has-menu:hover > .nav-caret, .nav-item.is-open > .nav-link, .nav-item.is-open > .nav-caret { background: var(--surface-3); color: var(--text); }
.nav-item.is-open .nav-caret .icon { transform: rotate(180deg); }
.nav-item.has-menu .nav-link[aria-current="page"] + .nav-caret { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); clip-path: inset(0 0 0 -1px); }
.nav-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-start: -8px; z-index: var(--z-menu);
  width: 330px; padding: 8px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background: var(--surface); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.nav-menu::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; }
.nav-item.is-open > .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.nav-menu__link {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none;
}
.nav-menu__link:hover, .nav-menu__link:focus-visible { background: var(--surface-2); }
.nav-menu__link[aria-current="page"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.nav-menu__icon { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text-2)); }
.nav-menu__icon .icon { width: 18px; height: 18px; }
.nav-menu__title { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.nav-menu__desc { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.nav-menu__sep { height: 1px; margin: 6px 10px; background: var(--border); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.main-nav + .header-actions { margin-inline-start: 0; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 0;
  border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.95); }
.search-trigger { width: auto; padding-inline: 12px 10px; gap: 10px; display: inline-flex; align-items: center; font-size: var(--fs-sm); color: var(--text-3); }
.search-trigger__label { display: none; }
.search-trigger .kbd { display: none; }
.theme-toggle { overflow: hidden; }
.theme-toggle .icon { position: absolute; transition: transform 480ms var(--ease-spring), opacity 260ms var(--ease); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme-toggle .i-moon { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle .i-sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
.menu-toggle { display: none; }
.header-cta { flex: none; }

/* breaking-news bar (main.js renderBreakingBar): under the header, only while an own post is «عاجل»; dismissible */
.breaking-bar {
  position: relative; z-index: 3; border-bottom: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  background: linear-gradient(to left, color-mix(in srgb, var(--danger) 14%, var(--surface)), var(--surface) 70%);
}
.breaking-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.breaking-bar__badge { flex: none; border-radius: var(--radius-pill); gap: 5px; }
.breaking-bar__badge .icon { width: 13px; height: 13px; }
.breaking-bar__link {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--text);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breaking-bar__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.breaking-bar__time { flex: none; font-family: var(--font-mono); font-size: 13px; color: var(--text-3); direction: ltr; }
.breaking-bar__close { flex: none; width: 36px; height: 36px; }
@media (max-width: 699px) {
  .breaking-bar__inner { gap: 8px; min-height: 44px; padding-block: 6px; }
  .breaking-bar__time { display: none; }
  .breaking-bar__link { font-size: 15.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ======================================================================
   06 · DRAWER (mobile) & SEARCH PALETTE
   ====================================================================== */
dialog { padding: 0; border: 0; color: var(--text); background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(3, 5, 10, .58); }
html[data-theme="light"] dialog::backdrop { background: rgba(15, 20, 35, .38); }
html.is-locked { overflow: hidden; }

.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(400px, 100vw); height: 100dvh;
  background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg);
  overflow-y: auto; overscroll-behavior: contain;
}
[dir="rtl"] .drawer { inset: 0 0 0 auto; }
.drawer[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] { animation: tn-drawer-in .32s var(--ease); }
  .drawer[open]::backdrop { animation: tn-fade-in .3s var(--ease); }
}
@keyframes tn-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes tn-fade-in { from { opacity: 0; } to { opacity: 1; } }
.drawer__head { position: sticky; top: 0; z-index: 1; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); } /* flex: none — never squeezed by a long drawer */
.drawer__search {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); min-height: 48px; margin: 16px 16px 4px; padding: 0 14px;
  border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-3); font-size: 15px; text-align: start;
}
.drawer__nav { padding: 8px 16px 12px; }
.drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drawer__link {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 14px; border-radius: 14px;
  font-size: 16.5px; font-weight: 600; color: var(--text); text-decoration: none;
}
.drawer__link:hover, .drawer__link[aria-current="page"] { background: var(--surface-2); }
.drawer__link[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--border); }
.drawer__link .nav-dot { width: 9px; height: 9px; }
.drawer__sub { list-style: none; margin: 0 0 6px; padding: 2px 0 6px; padding-inline-start: 35px; display: grid; gap: 0; border-inline-start: 0; }
.drawer__sub a { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.drawer__sub a:hover, .drawer__sub a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.drawer__info { margin: 0 16px 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.drawer__info ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.drawer__info a { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--text-2); text-decoration: none; }
.drawer__info a:hover, .drawer__info a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.drawer__foot { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 10px; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -12px 24px -18px rgba(0, 0, 0, .45); }
.drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 600; }
.drawer__note { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

.palette {
  margin: min(12vh, 120px) auto auto; width: min(680px, calc(100vw - 24px));
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; max-height: min(640px, 80dvh); }
@media (prefers-reduced-motion: no-preference) {
  .palette[open] { animation: tn-pop .22s var(--ease); }
}
@keyframes tn-pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.palette__bar { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-height: 62px; border-bottom: 1px solid var(--border); }
.palette__bar .icon { color: var(--text-3); }
.palette__input { flex: 1; min-width: 0; height: 60px; border: 0; background: transparent; font-size: 17px; color: var(--text); outline: none; }
.palette__input::placeholder { color: var(--text-3); }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__close { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.palette__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px; margin: 0; list-style: none; }
.palette__group { padding: 12px 12px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.palette__item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 12px; border-radius: 12px; color: var(--text); text-decoration: none; cursor: pointer;
}
.palette__item[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.palette__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text-2)); }
.palette__ico .icon { width: 18px; height: 18px; }
.palette__title { font-size: 15px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.palette__title mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.palette__meta { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.palette__kind { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.palette__empty { padding: 36px 20px; text-align: center; color: var(--text-3); }
.palette__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); background: var(--surface-2); }
.palette__foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ======================================================================
   07 · TICKER STRIP
   ====================================================================== */
.ticker {
  position: relative; display: flex; align-items: stretch; height: var(--ticker-h); overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border);
}
.ticker__viewport {
  position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 48px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 48px, #000 calc(100% - 56px), transparent 100%);
}
.ticker__toggle {
  position: relative; z-index: 2; flex: none; display: none; place-items: center; width: 44px; height: 100%; padding: 0;
  border: 0; border-inline-end: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.ticker__toggle:hover { color: var(--text); background: var(--surface-2); }
.ticker__toggle:focus-visible { outline-offset: -3px; }
.ticker__toggle .icon { width: 16px; height: 16px; }
.ticker__toggle .i-play, .ticker.is-paused .ticker__toggle .i-pause { display: none; }
.ticker.is-paused .ticker__toggle .i-play { display: block; }
.ticker.is-running .ticker__toggle { display: grid; }
.ticker__track { display: flex; width: max-content; height: 100%; }
.ticker__list { display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker.is-running .ticker__track { animation: tn-tick var(--ticker-dur, 80s) linear infinite; }
  .ticker__viewport:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .ticker__list[aria-hidden="true"], .ticker.is-running .ticker__toggle { display: none; }
}
@keyframes tn-tick { from { transform: translateX(0); } to { transform: translateX(50%); } }
.tk { flex: none; }
.tk a, .tk > span {
  display: flex; align-items: center; gap: 9px; height: 100%; padding-inline: 18px; white-space: nowrap;
  font-size: 13.5px; color: var(--text); text-decoration: none; border-inline-start: 1px solid var(--border);
}
.tk a:hover { background: var(--surface-2); }
.tk__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--text-3)); flex: none; }
.tk__name { font-weight: 600; }
.tk__px { font-weight: 500; color: var(--text-2); }
.tk .chg { height: 22px; font-size: 12px; padding: 0 7px; }
.ticker__label {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; display: none; align-items: center; gap: 8px;
  padding-inline: 16px 14px; background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text-2);
}

/* ======================================================================
   08 · BUTTONS
   ====================================================================== */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 0 22px;
  border-radius: 14px; border: 1px solid transparent; background: var(--surface-3); color: var(--text);
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn .icon { width: 18px; height: 18px; }
.btn .icon--arrow { transition: transform var(--t-med) var(--ease-spring); }
.btn:hover .icon--arrow { transform: translateX(-4px); }
.btn--primary {
  background: var(--brand); color: var(--brand-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -14px color-mix(in srgb, var(--brand) 70%, transparent);
}
html[data-theme="dark"] .btn--primary { background: linear-gradient(180deg, #ffffff 0%, #e4e8f1 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 10px 30px -12px rgba(140, 178, 255, .45); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 34px -14px color-mix(in srgb, var(--brand) 80%, transparent); transform: translateY(-1px); }
html[data-theme="dark"] .btn--primary:hover { box-shadow: 0 16px 36px -12px rgba(140, 178, 255, .6); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-3); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--soft { background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text)); }
.btn--soft:hover { background: color-mix(in srgb, var(--accent, var(--text-3)) 20%, transparent); }
.btn--academy { background: var(--grad-academy); color: #fff; box-shadow: 0 10px 26px -14px rgba(95, 44, 199, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn--academy:hover { box-shadow: 0 16px 34px -12px rgba(95, 44, 199, .85); }
.btn--on-vivid { background: var(--on-vivid); color: var(--on-vivid-ink); }
.btn--on-vivid:hover { background: #f0f2f7; }
.btn--sm { --btn-h: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.btn--lg { --btn-h: 56px; padding: 0 28px; border-radius: 16px; font-size: 16.5px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--btn-h); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ======================================================================
   09 · CHIPS & BADGES
   ====================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 2px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none;
}
a.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip .icon { width: 14px; height: 14px; }
/* category / market chip */
.cat {
  display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text-2));
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none;
}
.cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--text-3)); flex: none; }
.cat--saudi { --accent: var(--saudi); --accent-ink: var(--saudi-ink); --accent-soft: var(--saudi-soft); }
.cat--us { --accent: var(--us); --accent-ink: var(--us-ink); --accent-soft: var(--us-soft); }
.cat--crypto { --accent: var(--crypto); --accent-ink: var(--crypto-ink); --accent-soft: var(--crypto-soft); }
.cat--economy { --accent: var(--economy); --accent-ink: var(--economy-ink); --accent-soft: var(--economy-soft); }
.cat--commodities, .cat--commodity { --accent: var(--commodity); --accent-ink: var(--commodity-ink); --accent-soft: var(--commodity-soft); }
.cat--academy { --accent: var(--academy); --accent-ink: var(--academy-ink); --accent-soft: var(--academy-soft); }
/* small rectangular badges: strategy type, level, misc */
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; stroke-width: 2; }
.badge--income { background: var(--academy-soft); color: var(--academy-ink); border-color: transparent; }
.badge--debit { background: var(--us-soft); color: var(--us-ink); border-color: transparent; }
.badge--credit { background: var(--saudi-soft); color: var(--saudi-ink); border-color: transparent; }
.badge--hedge { background: var(--economy-soft); color: var(--economy-ink); border-color: transparent; }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
/* «عاجل»: deep red with white in both themes (tokens --breaking / --on-breaking) */
.badge--breaking { background: var(--breaking); color: var(--on-breaking); border-color: transparent; }
.badge--breaking .icon { fill: currentColor; stroke: none; }
/* «خاص»: the site's own post (content/news) — ink pill, never a section hue */
.badge--own { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
/* outlook (direction) */
.outlook .icon { width: 14px; height: 14px; }
.outlook--up .icon { color: var(--pos); }
.outlook--down .icon { color: var(--neg); }
.outlook--flat .icon { color: var(--text-3); }
.outlook--mild .icon { color: var(--pos); }
/* level bars */
.level .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.level .bars i { width: 3px; border-radius: 1px; background: var(--border-strong); }
.level .bars i:nth-child(1) { height: 5px; } .level .bars i:nth-child(2) { height: 8.5px; } .level .bars i:nth-child(3) { height: 12px; }
.level[data-level="1"] .bars i:nth-child(-n+1), .level[data-level="2"] .bars i:nth-child(-n+2), .level[data-level="3"] .bars i:nth-child(-n+3) { background: currentColor; }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* filter chips (toggle buttons, aria-pressed) */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fchip:hover { color: var(--text); border-color: var(--text-3); }
.fchip[aria-pressed="true"], .fchip[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.fchip .dot { box-shadow: none; width: 7px; height: 7px; }
.fchip__count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; }
.fchip[aria-pressed="true"] .fchip__count, .fchip[aria-selected="true"] .fchip__count { background: color-mix(in srgb, var(--brand-ink) 18%, transparent); color: var(--brand-ink); }

/* ======================================================================
   10 · CHANGE CHIPS (triple-encoded) & MARKET STATUS
   ====================================================================== */
.chg {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; flex: none;
  background: var(--flat-soft); color: var(--flat); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chg > [aria-hidden] { display: inline-flex; align-items: center; gap: 4px; }
.chg__icon { width: 8px; height: 8px; fill: currentColor; flex: none; }
.chg--up { background: var(--pos-soft); color: var(--pos); }
.chg--down { background: var(--neg-soft); color: var(--neg); }
.chg--down .chg__icon { transform: rotate(180deg); }
.chg--na { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); font-weight: 500; }
.chg--lg { height: 30px; padding: 0 11px; font-size: 14px; border-radius: 10px; }
.chg--lg .chg__icon { width: 9px; height: 9px; }
.chg--plain { background: transparent; padding: 0; height: auto; }
/* on vivid gradients: solid white pill keeps red/green AA */
.chg--on-vivid { background: #fff; }
.chg--on-vivid.chg--up { color: var(--pos-fixed); }
.chg--on-vivid.chg--down { color: var(--neg-fixed); }
.chg--on-vivid.chg--flat { color: #4b5466; }
.chg--on-vivid.chg--na { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; }

/* market session status: [data-status] is filled by main.js */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); line-height: 1.4; white-space: nowrap; color: var(--text-3); }
.status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--text-3)); flex: none; }
.status__label { font-weight: 700; color: var(--sc-text, var(--text-2)); }
.status__name { font-weight: 700; color: var(--text); }
[data-state="open"] { --sc: var(--pos); --sc-text: var(--text); }
[data-state="closed"] { --sc: var(--text-3); --sc-text: var(--text-2); }
[data-state="pre"], [data-state="auction"], [data-phase="post"] { --sc: var(--warn); --sc-text: var(--warn); }
@media (prefers-reduced-motion: no-preference) {
  [data-state="open"] .status__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sc, var(--pos));
    animation: tn-ping 2.4s var(--ease) infinite;
  }
}
@keyframes tn-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs);
}
.status--on-vivid { color: var(--on-vivid-2); }
.status--on-vivid .status__label { color: #fff; }
.status-pill.status--on-vivid { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
.status--on-vivid[data-state="open"] { --sc: #7cf2b5; }
.status--on-vivid[data-state="pre"], .status--on-vivid[data-state="auction"], .status--on-vivid[data-phase="post"] { --sc: #ffd27a; }
.status--on-vivid[data-state="closed"] { --sc: rgba(255, 255, 255, .7); }
.stamp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.stamp .icon { width: 14px; height: 14px; }
.stamp b { color: var(--text-2); font-weight: 600; }

/* ======================================================================
   11 · CARDS & BENTO TILES
   ====================================================================== */
.card, .tile {
  position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.tile { padding: var(--pad); }
.tile--flush { padding: 0; overflow: hidden; }
.tile--soft { background: var(--accent-soft, var(--surface-2)); border-color: transparent; box-shadow: none; }
.card--hover, .tile--hover { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.card--hover:hover, .tile--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
a.tile, a.card { color: inherit; text-decoration: none; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.stretched:focus-visible { outline: none; }
.stretched:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.tile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); }
.tile__title { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.45; display: flex; align-items: center; gap: 10px; }
.tile__title .icon { color: var(--accent, var(--text-3)); }
.tile__sub { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/* stat / metric tile */
.stat { padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.stat__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); line-height: 1.45; }
.stat__value { margin-top: 4px; font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat__value.pos { color: var(--pos); } .stat__value.neg { color: var(--neg); }
/* p.stat__value.num is LTR, so its own "start" would be the left: align it with the card's RTL label and text values instead */
.stat__value.num { text-align: -webkit-match-parent; text-align: match-parent; } /* Chrome/Safari need the prefixed keyword */
/* non-numeric value («متوسط إلى مرتفع»): body face, smaller, so a KPI row keeps one rhythm */
.stat__value--text { font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.55; }
.stat__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }

/* CTA band (mesh) */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8);
  align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-xl); color: #fff;
  background:
    radial-gradient(55% 130% at 100% 0%, rgba(34, 195, 192, .55), transparent 62%),
    radial-gradient(45% 120% at 0% 100%, rgba(255, 156, 69, .5), transparent 62%),
    radial-gradient(55% 110% at 40% 125%, rgba(126, 149, 255, .7), transparent 66%),
    radial-gradient(40% 90% at 22% 0%, rgba(177, 138, 255, .38), transparent 70%),
    #0c1022;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 72%); mask-image: linear-gradient(to left, #000, transparent 72%);
}
.cta-band__title { font-family: var(--font-head); font-size: clamp(26px, 1vw + 18px, 38px); font-weight: 800; line-height: 1.45; color: #fff; }
.cta-band__text { margin-top: 10px; color: rgba(255, 255, 255, .88); font-size: var(--fs-md); max-width: 48ch; }
.cta-band__actions { display: grid; gap: 12px; }
.cta-band__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none;
  transition: background-color var(--t-fast), transform var(--t-med) var(--ease);
}
.cta-band__link:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.cta-band__ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.cta-band__link b { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.cta-band__link small { display: block; font-size: 13px; color: rgba(255, 255, 255, .82); line-height: 1.5; }
.cta-band__link .icon--arrow { transition: transform var(--t-med) var(--ease-spring); }
.cta-band__link:hover .icon--arrow { transform: translateX(-4px); }
.cta-band__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cta-band__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 600; }

/* ======================================================================
   12 · MARKET CARDS  (vivid head + body)  [data-market-card]
   ====================================================================== */
.mcard { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.mcard__head { position: relative; isolation: isolate; overflow: hidden; color: var(--on-vivid); background: var(--accent-grad, var(--grad-us)); padding: 22px 22px 0; }
.mcard__head::before {
  content: ""; position: absolute; z-index: -1; width: 70%; height: 80%; inset-inline-end: -20%; bottom: -40%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 70%, transparent), transparent); opacity: .55;
}
.mcard__head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.mcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mcard__name { font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.45; color: #fff; }
.mcard__name a { color: inherit; text-decoration: none; }
.mcard__name a:hover { text-decoration: underline; text-underline-offset: .3em; }
.mcard__sub { font-size: 13px; color: var(--on-vivid-2); line-height: 1.5; }
.mcard__value { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; }
.mcard__px { font-family: var(--font-head); font-size: clamp(30px, 1.2vw + 20px, 38px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: #fff; }
.mcard__note { margin-top: 6px; font-size: 12.5px; color: var(--on-vivid-2); line-height: 1.5; }
.mcard__chart { position: relative; height: 116px; margin: 8px -22px 0; }
.mcard__chart svg { width: 100%; height: 100%; }
.mcard__period {
  position: absolute; top: 4px; inset-inline-end: 22px; z-index: 1; padding: 2px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .24); line-height: 1.7;
}
.mcard__body { display: flex; flex-direction: column; flex: 1; padding: 6px 22px 20px; }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.qrow__name { min-width: 0; font-weight: 600; font-size: 14.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow__code { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-3); margin-inline-start: 6px; }
.qrow__px { font-size: 14.5px; font-weight: 600; text-align: end; }
.qrow .chg { min-width: 76px; justify-content: center; }
a.qrow:hover .qrow__name { color: var(--accent-ink, var(--text)); }
.mcard__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.lchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.lchip:hover { color: var(--accent-ink, var(--text)); background: var(--accent-soft, var(--surface-3)); border-color: transparent; }
.lchip .icon { width: 14px; height: 14px; }

/* 52-week range bar */
.range { padding: 14px 0 2px; }
.range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--text-3); margin-bottom: 9px; line-height: 1.5; }
.range__top b { color: var(--text); font-weight: 600; font-size: 13px; }
.range__bar { position: relative; height: 8px; border-radius: 8px; background: var(--surface-3); direction: ltr; }
.range__fill { position: absolute; inset-block: 0; left: 0; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--text-3) 25%, transparent), color-mix(in srgb, var(--text-2) 70%, transparent)); }
.range__mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.range__ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--text-3); }
.range__ends span:first-child { order: 2; }
.range--mini { padding: 0; min-width: 120px; }
.range--mini .range__bar { height: 6px; }
.range--mini .range__mark { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2.5px; }
.range--mini .range__ends { margin-top: 4px; font-size: 12px; }

/* ======================================================================
   13 · PULSE TILES  [data-pulse]
   ====================================================================== */
.pulse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pulse-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.qt {
  container-type: inline-size;
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 13px 10px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--border);
  color: inherit; text-decoration: none; transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med);
}
a.qt:hover { transform: translateY(-2px); background: var(--surface); border-color: color-mix(in srgb, var(--accent, var(--text-3)) 45%, var(--border)); }
.qt--lead { grid-column: span 2; padding: 14px 16px 12px; }
.qt__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qt__badge {
  flex: none; display: grid; place-items: center; min-width: 36px; height: 34px; padding: 0 5px; border-radius: 11px;
  background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text-2));
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; direction: ltr; letter-spacing: -.02em;
}
.qt__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qt__name { font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt__sub { font-size: 12px; color: var(--text-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt__period { flex: none; font-size: 12px; color: var(--text-3); line-height: 1.4; text-align: end; }
.qt__period b { display: block; font-weight: 600; color: var(--text-2); }
.qt__mid { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; min-width: 0; }
.qt__px { font-size: clamp(14px, 10.4cqi, 17px); font-weight: 600; line-height: 1.25; white-space: nowrap; }
.qt .chg { height: 22px; padding: 0 6px; gap: 3px; font-size: clamp(12px, 7.4cqi, 12.5px); }
/* below ~162px of tile the chip text stops shrinking at 12px: 1px less padding a side keeps the chip as wide as before */
@container (max-width: 162px) { .qt:not(.qt--lead) .chg { padding-inline: 5px; } }
.qt--lead .chg { height: 24px; padding: 0 8px; font-size: 12.5px; }
.qt--lead .qt__px { font-family: var(--font-head); font-size: clamp(24px, 7cqi, 30px); font-weight: 700; line-height: 1.15; }
.qt__period b.neg, .qt__period b.pos { font-weight: 700; }
.qt__period b.neg { color: var(--neg); }
.qt__period b.pos { color: var(--pos); }
.qt--lead .qt__badge { min-width: 40px; height: 38px; border-radius: 12px; }
.qt--lead .qt__name { font-size: 15.5px; }
.qt__spark { position: relative; flex: 1; min-height: 36px; margin-top: 8px; }
.qt--lead .qt__spark { min-height: 58px; }
.qt__spark .spark { position: absolute; inset: 0; width: 100%; height: 100%; }

/* sparkline (TN.sparkline) — colour by trend of the drawn series, never by market */
.spark { width: 100%; height: 100%; overflow: visible; color: var(--flat); }
.spark--up { color: var(--pos); }
.spark--down { color: var(--neg); }
.spark .spark__line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark__dot { fill: none; stroke: currentColor; stroke-linecap: round; }
.spark .spark__halo { fill: none; stroke: currentColor; stroke-linecap: round; opacity: .22; }
/* reference level (the 3.75 peg of a pegged pair, or the flat line of a series without data): visible, never louder than the line */
.spark .spark__base { stroke: var(--text-3); stroke-width: 1.25; stroke-dasharray: 4 4; }
/* muted line (no period label next to it): the change chip carries red/green; the end dot shows today's direction */
.spark--muted { color: var(--text-3); }
.spark--muted .spark__line { stroke: var(--text-2); }
.spark .spark__dot--up, .spark .spark__halo--up { stroke: var(--pos); }
.spark .spark__dot--down, .spark .spark__halo--down { stroke: var(--neg); }
.spark .spark__dot--flat, .spark .spark__halo--flat { stroke: var(--flat); }

/* ======================================================================
   14 · NEWS  [data-news]
   ====================================================================== */
.news-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.news-bento > * { min-width: 0; display: flex; flex-direction: column; }
.news-bento > * > * { flex: 1 1 auto; }
.news-bento__feature { grid-column: span 6; grid-row: span 2; }
.news-bento__latest { grid-column: span 3; grid-row: span 2; }
.news-bento__popular { grid-column: span 3; grid-row: span 2; }
.news-bento__card { grid-column: span 3; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: var(--gap); }
.news-list { display: grid; gap: 12px; }
.news-compact { display: grid; }

.ncard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med); }
.ncard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.ncard__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--img-fallback); flex: none; }
.ncard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease), transform .9s var(--ease); }
.ncard__img.is-loaded { opacity: 1; }
.ncard:hover .ncard__img { transform: scale(1.045); }
.ncard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 8px 0; }
.ncard__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ncard__title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.ncard__title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 100% 96%; transition: background-size .35s var(--ease); }
.ncard:hover .ncard__title a, .ncard__title a:focus-visible { background-size: 100% 1px; }
.ncard__summary { font-size: 14px; color: var(--text-2); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard__meta { margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.ncard__src { font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }
.ncard__meta time { white-space: nowrap; }
.ncard__ext { width: 14px; height: 14px; margin-inline-start: auto; flex: none; color: var(--text-3); }

/* featured overlay story */
.ncard--feature { padding: 0; overflow: hidden; min-height: 560px; justify-content: flex-end; border: 0; color: #fff; background: #0a0d14; }
.ncard--feature .ncard__media { position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9; border-radius: 0; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
.ncard--feature .ncard__img { object-position: center 30%; }
.ncard--feature .ncard__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4, 6, 12, .96) 0%, rgba(4, 6, 12, .78) 34%, rgba(4, 6, 12, .2) 66%, rgba(4, 6, 12, 0) 100%); }
.ncard--feature .ncard__body { position: relative; flex: none; padding: 28px 30px 26px; gap: 14px; }
.ncard--feature .ncard__title { color: #fff; font-size: clamp(26px, 1.1vw + 18px, 36px); font-weight: 700; line-height: 1.45; -webkit-line-clamp: 4; }
.ncard--feature .ncard__summary { color: rgba(255, 255, 255, .86); font-size: 15.5px; -webkit-line-clamp: 2; max-width: 60ch; }
.ncard--feature .ncard__meta, .ncard--feature .ncard__ext { color: rgba(255, 255, 255, .78); }
.ncard--feature .ncard__src { color: #fff; }
.ncard--feature .cat { background: rgba(255, 255, 255, .16); color: #fff; }
.ncard--feature .cat::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.ncard__flag {
  position: absolute; top: 18px; inset-inline-start: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 12px;
  border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(4, 6, 12, .62); border: 1px solid rgba(255, 255, 255, .16);
}
.ncard__flag .icon { width: 15px; height: 15px; }

/* list row: thumb + text */
.ncard--row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 10px; align-items: start; }
.ncard--row .ncard__media { border-radius: 12px; }
.ncard--row .ncard__body { padding: 2px 0 4px; gap: 8px; }
.ncard--row .ncard__title { font-size: 18px; -webkit-line-clamp: 2; }

/* compact: text-only */
.ncard--compact { padding: 14px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; }
.ncard--compact:hover { transform: none; box-shadow: none; }
.ncard--compact .ncard__body { padding: 0; gap: 6px; }
.ncard--compact .ncard__title { font-size: 18px; -webkit-line-clamp: 2; }

/* own posts (content/news): «خاص» and «عاجل» next to the category chip */
.ncard__tags .badge, .latest__meta .badge { min-height: 22px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 12px; }
.ncard--feature .badge--own { background: var(--on-vivid); color: var(--on-vivid-ink); }

/* category artwork (TNNews.art): every aggregated story — publishers' photos are never shown; an own post's photo sits on top */
.nfb {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; color: var(--accent, var(--text-3));
  background:
    radial-gradient(115% 135% at var(--nfb-x, 82%) 0%, color-mix(in srgb, var(--accent, var(--text-3)) 30%, transparent) 0%, transparent 62%),
    radial-gradient(80% 110% at 0% 100%, color-mix(in srgb, var(--accent, var(--text-3)) 16%, transparent) 0%, transparent 66%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--text-3)) 12%, var(--surface-2)) 0%, var(--img-fallback) 100%);
}
html[data-theme="light"] .nfb {
  background:
    radial-gradient(115% 135% at var(--nfb-x, 82%) 0%, color-mix(in srgb, var(--accent, var(--text-3)) 22%, transparent) 0%, transparent 62%),
    radial-gradient(80% 110% at 0% 100%, color-mix(in srgb, var(--accent, var(--text-3)) 10%, transparent) 0%, transparent 66%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--text-3)) 9%, #fff) 0%, var(--img-fallback) 100%);
}
.nfb__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.nfb__art * { vector-effect: non-scaling-stroke; }
.nfb__grid { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 5; opacity: .8; }
.nfb__wick { stroke: currentColor; stroke-width: 1.2; opacity: .42; }
.nfb__body { fill: currentColor; opacity: .3; }
.nfb__body.is-up { opacity: .62; }
.nfb__line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.nfb__line--bold { stroke-width: 2.8; }
.nfb__dot { fill: currentColor; }
.nfb__dot--sm { opacity: .55; }
.nfb__halo { fill: currentColor; opacity: .18; }
.nfb__bar { fill: currentColor; opacity: .2; }
.nfb__ring { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .3; }
.nfb__ring.is-on { opacity: .55; stroke-width: 1.6; }
.nfb__sweep { stroke: currentColor; stroke-width: 1.4; opacity: .45; stroke-dasharray: 3 5; }
.nfb__geo { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .3; }
.nfb__fade { -webkit-mask-image: radial-gradient(85% 120% at 85% 15%, #000 20%, transparent 85%); mask-image: radial-gradient(85% 120% at 85% 15%, #000 20%, transparent 85%); }
.nfb__stripe { stroke: currentColor; stroke-width: 6; opacity: .09; }
.nfb__star { fill: currentColor; opacity: .5; }
.nfb__hex { fill: none; stroke: currentColor; stroke-width: 1; opacity: .26; }
.nfb__hex.is-on { fill: currentColor; fill-opacity: .2; stroke-opacity: 1; opacity: .7; }
.nfb__link { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; stroke-dasharray: 4 4; }
.nfb__wave { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .3; }
.nfb__wave.is-on { stroke-width: 2.6; opacity: .85; }
/* the section's icon, large and faint, bleeding off the inline-end corner */
.nfb__mark {
  position: absolute; bottom: -24%; inset-inline-end: -5%; height: 118%; width: auto; aspect-ratio: 1; max-width: none;
  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent, var(--text-3)); opacity: .12; transform: rotate(-8deg);
}
html[data-theme="light"] .nfb__mark { opacity: .1; }
.nfb__glyph {
  position: absolute; top: 12px; inset-inline-start: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 13px; color: var(--accent-ink, var(--text-2)); background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.nfb__glyph .icon { width: 20px; height: 20px; }
/* with the section's name (the brief page's large artwork) */
.nfb__glyph--label { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 42px; padding: 0 12px 0 14px; top: 16px; inset-inline-start: 16px; }
.nfb__glyph--label b { font-size: 14px; font-weight: 700; line-height: 1; color: var(--text); white-space: nowrap; }
/* the lead story is a dark card in both themes: dark-tinted art, lighter strokes */
.ncard--feature .nfb, html[data-theme="light"] .ncard--feature .nfb, .nfb--dark, html[data-theme="light"] .nfb--dark {
  color: color-mix(in srgb, var(--accent, #9aadc8) 72%, #fff);
  background:
    radial-gradient(115% 135% at var(--nfb-x, 82%) 0%, color-mix(in srgb, var(--accent, #9aadc8) 42%, transparent) 0%, transparent 62%),
    radial-gradient(80% 110% at 0% 100%, color-mix(in srgb, var(--accent, #9aadc8) 22%, transparent) 0%, transparent 66%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent, #9aadc8) 22%, #0d111a) 0%, #0a0d14 100%);
}
.ncard--feature .nfb__grid { stroke: rgba(255, 255, 255, .16); }
.ncard--feature .nfb__mark, html[data-theme="light"] .ncard--feature .nfb__mark { color: #fff; opacity: .1; }
/* the lead story names its section in its body: no glyph chip on its artwork */
.ncard--feature .nfb__glyph { display: none; }

/* الأحدث timeline */
.latest { display: flex; flex-direction: column; padding: 20px 22px 12px; }
.latest__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.latest__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.3; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: tn-ping 2.2s var(--ease) infinite; }
}
.latest__tz { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.latest__list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.latest__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.latest__item:last-child { border-bottom: 0; }
.latest__time { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-3); padding-top: 3px; direction: ltr; text-align: start; }
.latest__time small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12px; line-height: 1.4; white-space: nowrap; direction: rtl; text-align: left; }
.latest__link { font-family: var(--font-serif); font-size: 17.5px; font-weight: 600; line-height: 1.5; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.latest__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--text-3); }
.latest__meta .cat { min-height: 22px; padding-inline: 8px; font-size: 12px; }

/* الأكثر قراءة */
.popular { display: flex; flex-direction: column; padding: 20px 22px 12px; }
.popular__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.3; padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.popular__title .icon { color: var(--crypto); }
.popular__list { list-style: none; margin: 0; padding: 0; counter-reset: pop; flex: 1; display: flex; flex-direction: column; }
.popular__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.popular__item:last-child { border-bottom: 0; }
.popular__item::before { counter-increment: pop; content: counter(pop); font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--text-3); opacity: .55; font-variant-numeric: tabular-nums; transition: opacity var(--t-med), color var(--t-med); }
.popular__item:hover::before { opacity: 1; color: var(--accent, var(--text)); }
.popular__link { font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.popular__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.popular__meta { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }

/* news filter (news.html) */
.news-filter__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: var(--sp-6); }
.news-filter__search { position: relative; flex: 1 1 280px; max-width: 420px; }
.news-filter__search .icon { position: absolute; inset-inline-start: 14px; top: 50%; margin-top: -10px; color: var(--text-3); pointer-events: none; }
.news-filter__search .input { padding-inline-start: 44px; }
.news-filter__status { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-4); }
.news-filter__more { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* ======================================================================
   15 · STRATEGY & TOOL CARDS
   ====================================================================== */
.scard { display: flex; flex-direction: column; padding: 12px 12px 18px; }
.sthumb { position: relative; height: 128px; flex: none; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; direction: ltr; }
.scard > .sthumb { flex: 1 1 auto; height: auto; min-height: 128px; max-height: 300px; }
.sthumb > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sthumb text { font-family: var(--font-num); font-size: 12px; font-weight: 600; fill: var(--text-2); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; }
.sthumb .t-pos { fill: var(--pos); }
.sthumb .t-neg { fill: var(--neg); }
.sthumb .t-k { fill: var(--text-3); font-weight: 500; }
.sthumb .zero { stroke: var(--border-strong); stroke-width: 1; }
.sthumb .kline { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.sthumb .a-pos { fill: var(--pos-soft); }
.sthumb .a-neg { fill: var(--neg-soft); }
.sthumb .l-pos { fill: none; stroke: var(--pos); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.sthumb .l-neg { fill: none; stroke: var(--neg); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.scard__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 6px 0; flex: none; }
.scard__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.45; }
.scard__title a { color: inherit; text-decoration: none; }
.scard__en { margin-top: -8px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.scard__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.scard__desc { font-size: 14px; line-height: 1.75; color: var(--text-2); }
.scard__go { margin-top: auto; padding-top: 4px; }
.scard--more { justify-content: space-between; gap: 18px; padding: 24px; }
.scard--more .scard__count { font-family: var(--font-head); font-weight: 800; font-size: 52px; line-height: 1; color: var(--academy-ink); }
.scard--more ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.scard--more li { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }

/* wheel cycle diagram (HTML, labels stay ≥ 12px at any width) */
.wheel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 18px; direction: rtl; }
.wheel__node { justify-self: center; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--text-2); font-weight: 700; font-size: 14px; color: var(--text); box-shadow: var(--shadow-sm); }
.wheel__mid { display: grid; gap: 12px; justify-items: center; min-width: 0; padding-inline: 6px; }
.wheel__arrow { display: grid; justify-items: center; gap: 3px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.wheel__arrow svg { width: 64px; height: 12px; color: var(--academy); }
.wheel__arrow--back svg { transform: scaleX(-1); }

/* tool tiles */
.ttile { display: flex; flex-direction: column; gap: 10px; padding: 20px; color: inherit; text-decoration: none; overflow: hidden; }
.ttile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ttile__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text)); flex: none; }
.ttile__icon .icon { width: 22px; height: 22px; }
.ttile__tag { font-size: 12px; font-weight: 600; color: var(--text-3); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.ttile__title { font-family: var(--font-head); font-size: 17.5px; font-weight: 700; line-height: 1.45; }
.ttile__desc { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.ttile__example { font-size: 12.5px; line-height: 1.65; color: var(--text-3); padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.ttile__art { position: relative; height: 64px; margin-top: auto; color: var(--accent, var(--text-3)); direction: ltr; }
.ttile__art svg { width: 100%; height: 100%; }
.ttile__art-label { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--accent-ink, var(--text)); direction: ltr; }
.ttile__go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-ink, var(--text)); }
.ttile__go .icon { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); }
.ttile:hover .ttile__go .icon { transform: translateX(-4px); }
.ttile--wide { gap: 16px; }
.ttile--wide .ttile__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ttile--wide .ttile__desc { max-width: 52ch; }
.ttile--wide .ttile__art { flex: 1 1 auto; height: auto; min-height: 190px; max-height: 360px; margin-top: 0; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }

/* academy rail: grid children on desktop, swipe rail on phones */
.scard-rail { display: contents; }
.sthumb--fill { position: absolute; inset: 0; height: auto; border: 0; border-radius: inherit; background: transparent; }
.ttile--wide .ttile__art { position: relative; overflow: hidden; }
.ttile--summary { justify-content: space-between; }
.ttile--summary .ttile__go { margin-top: auto; }
.ttile--guide .ttile__go { margin-top: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.legend b { color: var(--text-2); font-weight: 600; }
.section--academy { position: relative; isolation: isolate; }
.section--academy::before {
  content: ""; position: absolute; z-index: -1; inset: 8% 0 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 82% 30%, color-mix(in srgb, var(--academy) 11%, transparent), transparent 70%),
    radial-gradient(36% 40% at 10% 80%, color-mix(in srgb, var(--us) 7%, transparent), transparent 70%);
}

/* ======================================================================
   16 · PAGE HEROES (softly tinted accent band per section)
   ====================================================================== */
.page-hero {
  --accent: var(--text-3); position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(24px, 3vw, 40px) 0 clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--border);
  background:
    radial-gradient(60% 120% at 92% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
    radial-gradient(50% 90% at 6% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 5%, var(--bg)), var(--bg));
}
.page-hero::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(to left, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 70%, transparent); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 100% at 85% 0%, #000, transparent 70%); mask-image: radial-gradient(70% 100% at 85% 0%, #000, transparent 70%);
}
.page-hero--home { --accent: var(--brand-2); }
.page-hero--saudi { --accent: var(--saudi); }
.page-hero--us { --accent: var(--us); }
.page-hero--crypto { --accent: var(--crypto); }
.page-hero--academy { --accent: var(--academy); }
.page-hero--tools { --accent: var(--economy); }
.page-hero--news { --accent: var(--economy); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8) var(--sp-12); align-items: end; margin-top: var(--sp-5); }
.page-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
.page-hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink, var(--text-2)); }
.page-hero__kicker .dot { --accent: inherit; }
.page-hero__title { margin-top: var(--sp-3); font-family: var(--font-head); font-size: var(--fs-4xl); font-weight: 800; line-height: 1.45; }
.page-hero__title--serif { font-family: var(--font-serif); font-weight: 700; line-height: 1.35; font-size: clamp(34px, 2vw + 22px, 60px); }
.page-hero__lead { margin-top: var(--sp-3); font-size: var(--fs-md); line-height: 1.85; color: var(--text-2); max-width: 62ch; }
.page-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: var(--sp-5); }
.page-hero__aside { min-width: 0; }
.page-hero--saudi .page-hero__kicker, .page-hero--saudi { --accent-ink: var(--saudi-ink); --accent-soft: var(--saudi-soft); }
.page-hero--us { --accent-ink: var(--us-ink); --accent-soft: var(--us-soft); }
.page-hero--crypto { --accent-ink: var(--crypto-ink); --accent-soft: var(--crypto-soft); }
.page-hero--academy { --accent-ink: var(--academy-ink); --accent-soft: var(--academy-soft); }
.page-hero--tools { --accent-ink: var(--economy-ink); --accent-soft: var(--economy-soft); }
.page-hero--news { --accent-ink: var(--economy-ink); --accent-soft: var(--economy-soft); }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-5); }

/* breadcrumbs */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: "›"; color: var(--text-3); opacity: .7; font-size: 15px; }
.breadcrumbs a { color: var(--text-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ======================================================================
   17 · HOME HERO, PULSE PANEL, SIGNATURE EDGE LIGHT
   ====================================================================== */
.hero { padding-top: 20px; }
.hero__panel {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 36px 44px; padding: 40px 40px 56px 32px; border-radius: var(--radius-xl); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    radial-gradient(52% 64% at 20% 6%, color-mix(in srgb, var(--saudi) 30%, transparent), transparent 70%),
    radial-gradient(50% 62% at 2% 98%, color-mix(in srgb, var(--us) 34%, transparent), transparent 70%),
    radial-gradient(42% 52% at 46% 108%, color-mix(in srgb, var(--crypto) 22%, transparent), transparent 70%),
    radial-gradient(38% 46% at 100% -6%, color-mix(in srgb, var(--academy) 13%, transparent), transparent 70%),
    var(--surface-hero);
}
html[data-theme="light"] .hero__panel {
  background:
    radial-gradient(52% 64% at 20% 6%, color-mix(in srgb, var(--saudi) 20%, transparent), transparent 70%),
    radial-gradient(50% 62% at 2% 98%, color-mix(in srgb, var(--us) 20%, transparent), transparent 70%),
    radial-gradient(42% 52% at 46% 108%, color-mix(in srgb, var(--crypto) 18%, transparent), transparent 70%),
    radial-gradient(38% 46% at 100% -6%, color-mix(in srgb, var(--academy) 9%, transparent), transparent 70%),
    var(--surface-hero);
}
.hero__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(72% 92% at 22% 46%, #000 0%, transparent 76%); mask-image: radial-gradient(72% 92% at 22% 46%, #000 0%, transparent 76%);
}
.hero__copy { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.hero__edition {
  align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 34px; padding: 4px 14px 4px 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-size: 13px; font-weight: 500; color: var(--text-2); line-height: 1.4;
}
.hero__edition b { color: var(--text); font-weight: 600; }
.hero__edition .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.hero__title { margin: 20px 0 14px; font-family: var(--font-head); font-size: var(--fs-hero); font-weight: 800; line-height: 1.45; color: var(--text); text-wrap: balance; }
.hero__lead { font-size: 18px; line-height: 1.85; color: var(--text-2); max-width: 36em; }
.hero__lead b { color: var(--text); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__risk { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-3); max-width: 40em; }
.hero__risk .icon { flex: none; margin-top: 4px; }
.hero__risk a { color: var(--text-2); text-decoration: underline; text-underline-offset: .25em; }
.hero__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.hero__foot-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.hero__foot-label .text-3 { font-weight: 500; }
.hero__edition .status__dot { --sc: var(--pos); }
.hero__lead-more { display: inline; }
.hero__stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--text-3); }
.hero__stamp .stamp b { color: var(--text-2); }
.status-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.status-card {
  display: grid; gap: 1px; min-width: 0; padding: 9px 12px 10px; border-radius: 14px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 76%, transparent); line-height: 1.45;
}
.status-card .status { display: contents; }
.status-card__name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-card__state { font-size: 12.5px; font-weight: 700; color: var(--sc-text, var(--text-2)); }
.status-card__next { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-card__short { display: none; }
.status-card:empty { min-height: 78px; }

/* pulse panel */
.pulse { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 18px; border-radius: 24px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 42%, transparent); }
html[data-theme="light"] .pulse { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pulse__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pulse__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.3; }
.pulse__title .icon { width: 22px; height: 22px; color: var(--pos); }
.pulse__sub { margin-top: 2px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.pulse__sub .icon { width: 13px; height: 13px; }
.pulse__legend { color: var(--text-3); }
.pulse .pulse-grid { flex: 1; }
.mini-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 11px; flex: none;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 75%, transparent);
  font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap;
}
.mini-link:hover { color: var(--text); background: var(--surface); }
.mini-link .icon { width: 16px; height: 16px; }

/* signature: one light travelling around the pulse panel edge (desktop, motion-OK only; transform-only animation) */
.edge-light { position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .8s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.edge-light::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; margin-left: -85%; margin-top: -85%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, color-mix(in srgb, var(--saudi) 85%, transparent) 250deg, #fff 268deg, color-mix(in srgb, var(--us) 85%, transparent) 290deg, transparent 330deg, transparent 360deg);
}
html[data-theme="light"] .edge-light::before {
  background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, var(--saudi) 250deg, #2f7cf6 270deg, var(--us) 290deg, transparent 330deg, transparent 360deg);
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .is-live .edge-light { opacity: 1; }
  .is-live .edge-light::before { animation: tn-spin 9s linear infinite; }
}
@keyframes tn-spin { to { transform: rotate(360deg); } }

/* faint glowing TASI line along the hero bottom (real 1-year data) */
.hero__line { position: absolute; inset-inline: 0; bottom: 0; z-index: -1; height: 120px; pointer-events: none; color: var(--text-2); opacity: .9; }
.hero__line svg { width: 100%; height: 100%; }
.hero__line .glow { fill: none; stroke: currentColor; stroke-width: 7; opacity: .07; stroke-linejoin: round; }
.hero__line .core { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .38; stroke-linejoin: round; }
.hero__line .fill { opacity: .07; }
.hero__line-label { position: absolute; bottom: 10px; inset-inline-end: 18px; font-size: 12px; color: var(--text-2); }

/* "متى تناسبك؟" checklist. Items are plain blocks, so inline children (<b>, <a>, <span lang="en">, .num) stay inline.
   ::before = the tinted disc, ::after = the mark, drawn with a mask and coloured from tokens in both themes:
   ✓ in the nearest accent (violet inside data-accent="academy"), --pos elsewhere; .checklist--no = red ✗. */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-inline-start: 34px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.checklist li::before, .checklist li::after { content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; }
.checklist li::before { background: var(--accent-soft, var(--pos-soft)); }
.checklist li::after {
  background: var(--accent-ink, var(--pos));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* "avoid" list: red ✗ in both themes */
.checklist--no li::before { background: var(--neg-soft); }
.checklist--no li::after {
  background: var(--neg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
  -webkit-mask-size: 12px; mask-size: 12px;
}

/* featured academy tile (home) */
.feature-strategy { display: flex; flex-direction: column; gap: 16px; padding: 26px; overflow: hidden; }
.feature-strategy::after { content: ""; position: absolute; z-index: -1; width: 70%; height: 60%; inset-inline-end: -20%; top: -30%; background: radial-gradient(closest-side, var(--academy-soft), transparent); pointer-events: none; }
.feature-strategy { isolation: isolate; }
.feature-strategy__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.start-here { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; color: var(--academy-ink); background: var(--academy-soft); border: 1px solid color-mix(in srgb, var(--academy) 30%, transparent); }
.start-here .icon { width: 15px; height: 15px; }
.feature-strategy__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-head); font-size: clamp(26px, 1vw + 18px, 34px); font-weight: 800; line-height: 1.45; }
.feature-strategy__title small { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-3); }
.feature-strategy__desc { color: var(--text-2); font-size: 15.5px; line-height: 1.85; max-width: 62ch; }
.feature-strategy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.feature-strategy__fit { padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.feature-strategy__fit h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.feature-strategy__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.feature-strategy__foot p { font-size: 13px; color: var(--text-3); line-height: 1.6; max-width: 46ch; }

/* ======================================================================
   18 · EDITORIAL PROSE (.prose)
   ====================================================================== */
/* paragraphs inherit --text from .prose (no `.prose p` colour rule: it would override component colours such as
   .steps__body, .scenario__text, .formula__example, .callout__body and .neg/.pos on a <p>) */
.prose { max-width: var(--measure); font-size: var(--fs-md); line-height: 1.95; color: var(--text); }
.prose > * + * { margin-top: 1.1em; }
/* anchor offset comes from html { scroll-padding-top } only — no scroll-margin-top here (the two would add up) */
.prose h2 {
  margin-top: 2.2em; padding-top: .6em; font-family: var(--font-serif); font-size: clamp(30px, .6vw + 26px, 34px); font-weight: 700; line-height: 1.4;
  position: relative;
}
.prose h2::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--accent, var(--text)); }
.prose h3 { margin-top: 1.8em; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.5; }
.prose h4 { margin-top: 1.5em; font-size: 17px; font-weight: 700; line-height: 1.55; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.prose a:not([class]):hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: .45em; }
/* list components keep their own geometry inside prose */
.prose .steps, .prose .checklist { padding-inline-start: 0; }
.prose .steps > li + li, .prose .checklist > li + li, .prose .proscons li + li { margin-top: 0; }
.prose ul > li::marker { color: var(--accent, var(--text-3)); }
.prose ol > li::marker { color: var(--text-3); font-weight: 700; font-family: var(--font-head); }
.prose blockquote {
  margin-inline: 0; padding: 4px 22px 4px 0; padding-inline: 22px 0; border-inline-start: 3px solid var(--accent, var(--text));
  font-family: var(--font-serif); font-size: 1.22em; line-height: 1.7; color: var(--text);
}
.prose blockquote cite { display: block; margin-top: 6px; font-family: var(--font-body); font-size: var(--fs-sm); font-style: normal; color: var(--text-3); }
.prose hr { margin: 2.4em 0; }
.prose .lead { font-size: 1.12em; color: var(--text-2); }
.prose > :first-child { margin-top: 0; }
.prose dl { display: grid; gap: 10px; }
.prose dt { font-weight: 700; }
.prose dd { color: var(--text-2); margin-inline-start: 0; }
.heading-anchor { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; margin-inline-start: 6px; border-radius: 6px; color: var(--text-3); text-decoration: none; opacity: 0; font-size: .7em; line-height: 1; vertical-align: middle; transition: opacity var(--t-fast); }
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
/* the «#» anchor is a mouse affordance: on touch screens it would be an invisible 24px target */
@media (hover: none) { .heading-anchor { display: none; } }

/* figures for inline SVG illustrations.
   The cap targets the illustration itself (a direct-child <svg viewBox="0 0 360 …">) at zero class weight, so a page caps its own
   figure with one plain class; JS charts drawn at pixel size sit inside a wrapper and are never scaled. */
.figure { margin: 1.8em 0; }
.figure__frame { position: relative; padding: clamp(14px, 2vw, 24px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text-2); }
:where(.figure__frame) > svg { width: 100%; height: auto; max-width: 640px; margin-inline: auto; }
/* narrow: a 360-unit illustration renders 14-unit labels at ~18px on desktop instead of ~25px */
.figure--narrow .figure__frame > svg { max-width: 460px; }
.figure__frame--wide > svg { max-width: none; }
/* phones: 4px side padding keeps 14-unit labels ≥ 12px down to a 360px screen in a full-width column */
@media (max-width: 420px) {
  .figure__frame { padding: 10px 4px; }
  /* .figure--bleed: inside a padded tile/demo the frame spends the container's side padding (--bleed, default --pad) */
  .figure--bleed .figure__frame { margin-inline: calc(var(--bleed, var(--pad)) * -1); padding-inline: 0; border-inline-width: 0; border-radius: 0; box-shadow: none; }
}
.figure__caption { display: flex; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-3); }
.figure__caption b { color: var(--text-2); font-weight: 700; white-space: nowrap; }
/* illustration helpers (inside inline SVG) */
.ill-text { font-family: var(--font-body); font-size: 14px; fill: var(--text-2); }
.ill-text--strong { fill: var(--text); font-weight: 700; }
.ill-text--muted { fill: var(--text-3); }
.ill-text--pos { fill: var(--pos); font-weight: 700; }
.ill-text--neg { fill: var(--neg); font-weight: 700; }
.ill-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.ill-grid { stroke: var(--border); stroke-width: 1; }
.ill-pos { stroke: var(--pos); fill: none; stroke-width: 2.5; }
.ill-neg { stroke: var(--neg); fill: none; stroke-width: 2.5; }
.ill-fill-pos { fill: var(--pos-soft); }
.ill-fill-neg { fill: var(--neg-soft); }
.ill-accent { stroke: var(--academy); fill: none; stroke-width: 2; }
.ill-node { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.5; }
.ill-dash { stroke-dasharray: 4 4; }

/* ======================================================================
   19 · CALLOUTS & EDITORIAL BLOCKS
   ====================================================================== */
.callout {
  --c: var(--info); --c-soft: var(--info-soft);
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; align-items: start;
  margin: 1.6em 0; padding: 16px 18px; border-radius: var(--radius); background: var(--c-soft);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-inline-start-width: 4px; font-size: 15.5px; line-height: 1.85;
}
.callout__icon { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.callout__icon .icon { width: 19px; height: 19px; }
.callout__title { font-weight: 700; color: var(--text); line-height: 1.6; padding-top: 5px; }
.callout__body { color: var(--text-2); }
.callout__body > * + * { margin-top: .6em; }
.callout--info { --c: var(--info); --c-soft: var(--info-soft); } /* = the plain .callout */
.callout--tip { --c: var(--saudi); --c-soft: var(--saudi-soft); }
.callout--warning { --c: var(--warn); --c-soft: var(--warn-soft); }
.callout--danger { --c: var(--danger); --c-soft: var(--danger-soft); }
.callout--note { --c: var(--economy); --c-soft: var(--economy-soft); }
.callout--sharia { --c: var(--academy); --c-soft: var(--academy-soft); }

/* steps / timeline */
.steps { list-style: none; margin: 1.6em 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps__item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding-bottom: 22px; }
.steps__item::before {
  counter-increment: step; content: counter(step); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--accent-ink, var(--text)); background: var(--accent-soft, var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--accent, var(--text-3)) 35%, transparent); position: relative; z-index: 1;
}
.steps__item::after { content: ""; position: absolute; inset-inline-start: 19.5px; top: 42px; bottom: 2px; width: 1.5px; background: var(--border-strong); }
.steps__item:last-child::after { display: none; }
.steps__title { font-weight: 700; font-size: 16.5px; line-height: 1.55; padding-top: 7px; }
.steps__body { color: var(--text-2); font-size: 15.5px; line-height: 1.85; }

/* formula card */
.formula { margin: 1.6em 0; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
/* a block (not flex), so «العائد الثابت (<span lang="en">Static Return</span>)» stays one line of text; the leading icon is inline */
.formula__label { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; color: var(--accent-ink, var(--text-2)); }
.formula__label > .icon { display: inline-block; vertical-align: -3px; margin-inline-end: 8px; }
.formula__expr { margin-top: 8px; font-family: var(--font-head); font-size: clamp(18px, .6vw + 15px, 22px); font-weight: 700; line-height: 1.7; color: var(--text); }
.formula__expr .op { color: var(--text-3); margin-inline: .25em; font-weight: 500; }
.formula__example { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: 15px; color: var(--text-2); line-height: 1.8; }
.formula__example b { color: var(--text); }
.formulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 1.6em 0; }
.formulas .formula { margin: 0; }

/* scenario cards (up / flat / down) */
.scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 1.6em 0; }
.scenario { --c: var(--text-3); --c-soft: var(--flat-soft); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.scenario::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--c); }
.scenario--up { --c: var(--pos); --c-soft: var(--pos-soft); }
.scenario--down { --c: var(--neg); --c-soft: var(--neg-soft); }
.scenario__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: var(--c-soft); }
.scenario__title { font-weight: 700; font-size: 16px; line-height: 1.5; }
.scenario__text { font-size: 14.5px; color: var(--text-2); line-height: 1.8; }
.scenario__result { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.scenario__result b { font-family: var(--font-head); font-size: 17px; color: var(--c); }
.scenario--flat .scenario__result b { color: var(--text); }

/* pros / cons */
.proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.6em 0; }
.proscons__col { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.proscons__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.proscons__col--pros .proscons__title .icon { color: var(--pos); }
.proscons__col--cons .proscons__title .icon { color: var(--neg); }
.proscons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.proscons li { position: relative; padding-inline-start: 18px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.proscons li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
.proscons__col--cons li::before { background: var(--neg); }

/* glossary / key terms */
.glossary { display: grid; gap: 0; margin: 1.6em 0; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.glossary > div { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 12px 20px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.glossary > div:last-child { border-bottom: 0; }
.glossary dt { font-weight: 700; line-height: 1.6; }
.glossary dt small { display: block; font-weight: 500; color: var(--text-3); font-size: 12.5px; }
.glossary dd { margin: 0; color: var(--text-2); line-height: 1.8; font-size: 15px; }

/* related cards */
.related { margin-top: var(--sp-16); }
.related__title { font-size: 22px; margin-bottom: var(--sp-5); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--gap); }

/* ======================================================================
   20 · TABLES  (.table-wrap > table.table)
   ====================================================================== */
.table-wrap { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-wrap--scroll { max-height: min(72vh, 680px); overflow: auto; }
.table { width: 100%; font-size: 14.5px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.table caption { padding: 14px 18px 0; text-align: start; font-weight: 700; caption-side: top; }
.table th, .table td { padding: 12px 16px; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table thead th {
  position: sticky; top: calc(var(--header-h) - 1px); z-index: 2; background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; box-shadow: inset 0 -1px 0 var(--border);
}
.table-wrap--scroll .table thead th { top: 0; }
.table thead th:first-child { border-start-start-radius: var(--radius-lg); }
.table thead th:last-child { border-start-end-radius: var(--radius-lg); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr { transition: background-color var(--t-fast); }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.table .is-num, .table td.num, .table th.num { text-align: end; white-space: nowrap; }
/* numeric columns align to the RTL end (left), header and cells alike; .num on the cell itself makes it LTR, where "end" would be the right */
:where([dir="rtl"] .table) :is(td, th).is-num.num { text-align: left; }
.table .col-spark { width: 120px; }
.table .spark-cell { height: 34px; width: 112px; }
.table--compact th, .table--compact td { padding: 9px 12px; }
.table--compare thead th { font-size: 13.5px; color: var(--text); }
.table--compare tbody th { font-weight: 700; white-space: nowrap; }
.table--compare td { color: var(--text-2); }
.table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.sort-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 700; white-space: nowrap; }
.sort-btn:hover { background: var(--surface-3); color: var(--text); }
.sort-btn .icon { width: 12px; height: 12px; opacity: .45; }
[aria-sort="ascending"] .sort-btn .icon, [aria-sort="descending"] .sort-btn .icon { opacity: 1; color: var(--text); }
[aria-sort="ascending"] .sort-btn .icon { transform: rotate(180deg); }
.quote-name { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.quote-name__badge { flex: none; display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text-2)); font-family: var(--font-mono); font-size: 12px; font-weight: 600; direction: ltr; }
.quote-name b { display: block; font-weight: 600; color: var(--text); line-height: 1.4; }
.quote-name small { display: block; font-size: 12px; color: var(--text-3); line-height: 1.4; }
.quote-link { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text-3); }
.quote-link:hover { background: var(--surface-3); color: var(--text); }

/* ======================================================================
   21 · ACCORDION, TABS, TOC
   ====================================================================== */
.accordion { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.accordion + .accordion { margin-top: 10px; }
/* the summary is a block (not a flex row), so a question with inline children («ما الفرق بين <span lang="en">LEAPS</span> …»,
   <span class="num">$350</span>) reads as one line of text; the chevron is absolutely placed at the inline end */
.accordion__summary, .accordion > summary {
  position: relative; display: block; align-content: center; min-height: 56px; padding: 12px 18px; padding-inline-end: 48px;
  font-weight: 700; font-size: 16px; line-height: 1.55; cursor: pointer; list-style: none; border-radius: var(--radius);
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after {
  content: ""; position: absolute; inset-inline-end: 22px; top: calc(50% - 5px); width: 10px; height: 10px; border-inline-end: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--t-med) var(--ease);
}
.accordion[open] > summary::after { transform: rotate(-45deg) translateY(-3px); }
.accordion > summary:hover { background: var(--surface-2); }
.accordion__body { padding: 0 18px 16px; color: var(--text-2); line-height: 1.85; font-size: 15.5px; }
.accordion__body > * + * { margin-top: .7em; }
@supports (interpolate-size: allow-keywords) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion::details-content { height: 0; overflow: clip; transition: height var(--t-med) var(--ease), content-visibility var(--t-med) allow-discrete; }
  .accordion[open]::details-content { height: auto; }
  /* the mobile TOC closes as its link is followed: an animated close would make the jump land ~480px past the heading */
  details.toc-mobile::details-content { transition: none; }
}
.faq { display: grid; gap: 10px; margin: 1.6em 0; }
.faq .accordion + .accordion { margin-top: 0; }

.tabs__list { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2);
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.tabs__panel { margin-top: var(--sp-5); }
.tabs__panel:focus-visible { outline-offset: 6px; }

.toc { padding: 18px 18px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.toc__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 8px; }
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc__link {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: baseline; min-height: 40px; padding: 8px 10px; border-radius: 10px;
  font-size: 14px; line-height: 1.55; color: var(--text-2); text-decoration: none;
}
.toc__link::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--text-3); direction: ltr; }
.toc__link:hover { background: var(--surface-2); color: var(--text); }
.toc__link.is-active { background: var(--accent-soft, var(--surface-2)); color: var(--accent-ink, var(--text)); font-weight: 600; }
.toc__link.is-active::before { color: currentColor; }
.toc__progress { height: 3px; margin-top: 10px; border-radius: 3px; background: var(--surface-3); overflow: hidden; direction: ltr; }
.toc__progress i { display: block; height: 100%; width: 100%; background: var(--accent, var(--text-2)); transform-origin: right; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
details.toc-mobile { display: none; }

/* ======================================================================
   22 · FORMS & CALCULATORS
   ====================================================================== */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding: clamp(18px, 2.4vw, 28px); }
.calc__head { grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start; }
.calc__title { font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.45; }
.calc__desc { font-size: 14.5px; color: var(--text-2); line-height: 1.7; margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field__label { font-size: 13.5px; font-weight: 600; color: var(--text-2); line-height: 1.45; }
.field__hint { font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.field__error { font-size: 12.5px; color: var(--neg); line-height: 1.5; }
.input, .select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font-size: 16px; font-weight: 500; line-height: 1.4; transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.input:hover, .select:hover { border-color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.input:focus, .select:focus, .input-group:focus-within { outline: none; border-color: var(--accent, var(--focus)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--focus)) 22%, transparent); }
.input[type="number"], .input--num { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.input::placeholder { color: var(--text-3); }
.input[aria-invalid="true"] { border-color: var(--neg); }
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f98aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: left 14px center; }
.input-group { display: flex; align-items: center; min-height: 48px; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--surface-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input-group .input { border: 0; background: transparent; box-shadow: none !important; min-height: 46px; }
.input-group__affix { flex: none; padding-inline: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.input-group__affix:first-child { padding-inline-end: 0; }
.input-group__affix:last-child { padding-inline-start: 0; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.segmented__option { position: relative; display: inline-flex; }
.segmented__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* the option's face is its direct <span>; spans nested inside a label («كول <span lang="en">(Call)</span>», .num) stay inline */
.segmented__option > span, .segmented > button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast);
}
.segmented__option input:checked + span, .segmented > button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.segmented__option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.segmented--block { display: flex; }
.segmented--block .segmented__option, .segmented--block > button { flex: 1; }
.segmented--block .segmented__option > span { width: 100%; }
.range-field { display: grid; gap: 6px; }
.range-field__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.range-field__value { min-width: 64px; padding: 2px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: 14px; text-align: center; }
.range-input { --fill: 50%; width: 100%; height: 44px; margin: 0; background: transparent; direction: ltr; cursor: pointer; -webkit-appearance: none; appearance: none; }
.range-input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent, var(--text)) 0 var(--fill), var(--border-strong) var(--fill) 100%); }
.range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 3px solid var(--accent, var(--text)); background: var(--surface); box-shadow: var(--shadow-sm); }
.range-input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-strong); }
.range-input::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent, var(--text)); }
.range-input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--accent, var(--text)); background: var(--surface); }
.range-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent, var(--focus)) 30%, transparent); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent, var(--brand-2)); }

/* result panel */
.result { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.result__label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.result__value { font-family: var(--font-head); font-size: clamp(34px, 1.6vw + 22px, 52px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.result__value.pos { color: var(--pos); } .result__value.neg { color: var(--neg); }
.result__sub { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.result__list { display: grid; gap: 8px; margin: 0; }
.result__list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.result__list dt { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.result__list dd { margin: 0; font-size: 16px; font-weight: 700; }
.result--hero { color: #fff; background: var(--accent-grad, var(--grad-us)); border: 0; }
.result--hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 0% 100%, rgba(255, 255, 255, .14), transparent 65%); }
.result--hero .result__label, .result--hero .result__sub { color: rgba(255, 255, 255, .88); }
.result--hero .result__value { color: #fff; }
.meter { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; direction: ltr; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent, var(--text)); width: 0; transition: width .5s var(--ease); }
.result--hero .meter { background: rgba(255, 255, 255, .2); }
.result--hero .meter i { background: #fff; }
.formula-note { display: flex; gap: 10px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 13px; color: var(--text-3); line-height: 1.75; }
.formula-note .icon { width: 16px; height: 16px; margin-top: 4px; flex: none; }

/* ======================================================================
   23 · DATA VIZ  (area chart, heat grid, movers, gauge)
   ====================================================================== */
.achart { position: relative; }
.achart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.achart__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.achart__px { font-family: var(--font-head); font-size: clamp(28px, 1vw + 20px, 36px); font-weight: 700; line-height: 1.15; }
.achart__range-chg { font-size: 13px; color: var(--text-3); }
.achart__plot { position: relative; height: var(--chart-h, 320px); direction: ltr; touch-action: pan-y; outline: none; border-radius: 12px; }
.achart__plot:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.achart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.achart__plot .grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.achart__plot .ytick, .achart__plot .xtick { font-family: var(--font-num); font-size: 12px; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.achart__plot .xtick { font-family: var(--font-body); }
.achart__plot .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.achart__plot .cross { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.achart__plot .dot { fill: var(--surface); stroke: currentColor; stroke-width: 2.5; }
.achart__plot .base { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.achart--up .achart__plot { color: var(--pos); } .achart--down .achart__plot { color: var(--neg); } .achart--flat .achart__plot { color: var(--flat); }
.achart__px { color: var(--text); }
.achart__tip {
  position: absolute; top: 8px; left: 0; z-index: 3; min-width: 150px; padding: 8px 12px; border-radius: 12px; pointer-events: none; direction: rtl;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--text); font-size: 13px; line-height: 1.55;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.achart__tip.is-on { opacity: 1; transform: none; }
.achart__tip b { display: block; font-size: 16px; font-weight: 700; }
.achart__tip small { color: var(--text-3); font-size: 12px; }
.achart__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }

.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(124px, 100%), 1fr)); gap: 8px; }
.heat__tile {
  --h: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 92px; padding: 12px; border-radius: 14px;
  color: var(--text); text-decoration: none; border: 1px solid var(--border); overflow: hidden;
  background: color-mix(in srgb, var(--heat-c, var(--flat)) calc(var(--h) * 30%), var(--surface));
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
}
.heat__tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.heat__tile--up { --heat-c: var(--pos); }
.heat__tile--down { --heat-c: var(--neg); }
.heat__tile > * { min-width: 0; }
/* name and sector are spans: block lines, so they never run together («أرامكوالطاقة») and the ellipsis works */
.heat__name { display: block; font-weight: 700; font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat__sector { display: block; font-size: 12px; color: var(--text-2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat__pct { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.2; }
.heat__tile--up .heat__pct { color: var(--heat-pos-ink); }
.heat__tile--down .heat__pct { color: var(--heat-neg-ink); }
.heat__px { font-size: 12px; color: var(--text-2); }
.heat-legend { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
/* RTL legend in reading order: «ارتفاع» (right) next to the green end, «انخفاض» (left) next to the red end — the same
   gradient market.js sets inline on the bar */
.heat-legend__bar { width: 160px; height: 8px; border-radius: 8px; background: linear-gradient(to left, color-mix(in srgb, var(--pos) 50%, var(--surface)), var(--surface-2), color-mix(in srgb, var(--neg) 50%, var(--surface))); direction: ltr; }

.movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap); }
.movers__col { padding: 18px 18px 8px; }
.movers__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.movers__title .icon { width: 20px; height: 20px; }
.movers__col--up .movers__title .icon { color: var(--pos); }
.movers__col--down .movers__title .icon { color: var(--neg); }
.movers__list { list-style: none; margin: 0; padding: 0; }
.movers__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--border); }
.movers__row:last-child { border-bottom: 0; }
.movers__name { min-width: 0; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movers__px { font-size: 14px; color: var(--text-2); white-space: nowrap; }

.gauge { position: relative; display: grid; justify-items: center; gap: 4px; max-width: 260px; margin-inline: auto; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge .arc-bg { fill: none; stroke: var(--surface-3); stroke-width: 14; stroke-linecap: round; }
.gauge .arc { fill: none; stroke-width: 14; stroke-linecap: butt; }
.gauge .needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.gauge .hub { fill: var(--text); }
/* the value sits just under the needle hub (never on top of it) */
.gauge__value { margin-top: -6px; font-family: var(--font-head); font-size: 34px; font-weight: 800; line-height: 1; }
.gauge__label { font-size: 14px; font-weight: 700; color: var(--text-2); }
/* the arc runs 0 → 100 left → right (like a price axis): the first label («خوف شديد», value 0) belongs on the left */
.gauge__ends { display: flex; flex-direction: row-reverse; justify-content: space-between; width: 100%; font-size: 12px; color: var(--text-3); }

/* ======================================================================
   24 · TRADINGVIEW EMBED FRAME  [data-tv]
   ====================================================================== */
.tv-frame { position: relative; isolation: isolate; overflow: hidden; height: var(--tv-h, 420px); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.tv-frame--auto { height: auto; min-height: var(--tv-h, 90px); }
.tv-frame__label { position: absolute; top: 10px; inset-inline-start: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-3); pointer-events: none; transition: opacity var(--t-med); }
.tv-frame.is-loaded .tv-frame__label { opacity: 0; }
.tv-frame__skeleton { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-rows: 44px 1fr 32px; gap: 14px; padding: 48px 18px 16px; transition: opacity .4s var(--ease); }
.tv-frame.is-loaded .tv-frame__skeleton { display: none; }
.tv-frame__error { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 16px; background: var(--surface); }
.tv-frame__error .state { width: 100%; height: 100%; border: 0; }
.tv-frame__skeleton i { border-radius: 10px; background: var(--skeleton); }
.tv-frame__skeleton i:nth-child(1) { width: 46%; }
.tv-frame__skeleton i:nth-child(3) { width: 30%; }
.tv-frame .tradingview-widget-container { position: relative; z-index: 1; width: 100%; height: 100%; color-scheme: normal; }
.tv-frame--auto .tradingview-widget-container { height: auto; }
.tradingview-widget-container { color-scheme: normal; }
/* TradingView's attribution stays exactly as TradingView designed it (its terms: «as originally designed», ≥ 13px,
   visible at all times): its own embed script styles the line (grey text, blue link, its font); we only keep the 13px
   size and line height, centre it under the widget, and never lay anything of ours over it. Restyling it (colour,
   font) needs TradingView's approval through its widget contact form. */
.tradingview-widget-copyright { position: relative; z-index: 1; font-size: 13px !important; line-height: 32px !important; text-align: center; }
.tv-frame .tradingview-widget-copyright, .tv-frame .tradingview-widget-copyright a { font-size: 13px !important; line-height: 32px !important; text-align: center; }
/* until the widget has loaded its box is empty (no height), so the attribution line would sit on the label at the top:
   it appears with the widget (.is-loaded), when the label fades out; a failed frame removes it */
.tv-frame:not(.is-loaded) .tradingview-widget-copyright { visibility: hidden; }
.tv-frame__fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 16px 18px; background: var(--surface); }
.tv-frame--auto .tv-frame__fallback { position: relative; inset: auto; min-height: var(--tv-h, 360px); }
/* a failure message is centred in the frame (a 560px frame, or one a grid row stretches past its reserved height);
   our own fallback chart stays top-aligned */
.tv-frame:has(> .tv-frame__fallback) { display: flex; flex-direction: column; }
.tv-frame > .tv-frame__fallback { flex: 1 0 auto; }
.tv-frame__fallback > .state { margin-block: auto; }
.tv-frame__error .state { align-content: center; }
.tv-note { margin-top: 8px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* ======================================================================
   25 · STATES & SKELETONS
   ====================================================================== */
.state { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-2); }
.state__icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); }
.state__icon .icon { width: 24px; height: 24px; }
.state__title { font-weight: 700; font-size: 16.5px; color: var(--text); line-height: 1.5; }
.state__text { font-size: 14.5px; color: var(--text-3); max-width: 46ch; line-height: 1.75; }
.state--error .state__icon { background: var(--danger-soft); color: var(--danger); }
.state--loading .state__icon { background: transparent; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: tn-spin .9s linear infinite; } }
.skel { position: relative; overflow: hidden; border-radius: 10px; background: var(--skeleton); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .skel::after, .tv-frame__skeleton i::after { animation: tn-shimmer 1.6s ease-in-out infinite; }
}
.tv-frame__skeleton i { position: relative; overflow: hidden; }
.tv-frame__skeleton i::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); }
@keyframes tn-shimmer { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.skel-line { height: 12px; margin-block: 8px; }
.skel-block { height: 120px; }
.na { color: var(--text-3); font-weight: 500; font-size: .92em; }

/* ======================================================================
   26 · FOOTER
   ====================================================================== */
.site-footer { margin-top: var(--section-y); padding-bottom: 28px; }
.footer__card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(26px, 3.4vw, 48px) clamp(20px, 3.4vw, 48px) 24px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
/* the brand's two hues, faint, behind the top of the card (the wordmark's alef runs Saudi teal → US azure) */
.footer__card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 320px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 100% at 100% 0%, color-mix(in srgb, var(--saudi) 9%, transparent), transparent 72%),
    radial-gradient(45% 90% at 0% 0%, color-mix(in srgb, var(--us) 8%, transparent), transparent 72%);
}
.footer__top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px 56px; align-items: start; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.footer__brand .brand__name { font-size: 32px; }
.footer__brand .brand__tag { font-size: 13.5px; margin-top: 4px; }
.footer__about { margin-top: 16px; font-size: 14.5px; line-height: 1.9; color: var(--text-2); max-width: 56ch; }
.footer__contact {
  justify-self: end; width: 100%; max-width: 440px; padding: 18px 20px 14px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent); border: 1px solid var(--border);
}
.footer__contact-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--text); }
.footer__contact-title .icon { width: 19px; height: 19px; color: var(--brand-2); }
.footer__contact-text { margin-top: 6px; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.footer__mail {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; margin: 12px 0 2px; padding: 0 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none;
  overflow-wrap: anywhere; transition: border-color var(--t-fast), background-color var(--t-fast);
}
.footer__mail:hover { border-color: var(--text-3); background: var(--surface-3); }
.footer__contact-link { display: flex; width: max-content; min-height: 40px; margin-top: 4px; }
.footer__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 28px; padding-top: 30px; }
.footer__col h2, .footer__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; color: var(--text); }
.footer__title .icon { width: 16px; height: 16px; color: var(--text-3); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-decoration: none; }
.footer__col a:hover { color: var(--text); text-decoration: underline; }
.footer__col a[aria-current="page"] { color: var(--text); font-weight: 600; }
.footer__sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 30px; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.75; color: var(--text-2); }
.footer__sources p { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.footer__sources p > .icon { width: 16px; height: 16px; margin-top: 4px; color: var(--text-3); }
.footer__sources b { color: var(--text); font-weight: 700; }
.footer__disclaimer { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.footer__disclaimer .icon { color: var(--warn); margin-top: 3px; }
.footer__disclaimer p { font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.footer__disclaimer strong { color: var(--text); }
.footer__disclaimer a { color: var(--link); font-weight: 600; white-space: nowrap; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }

/* back to top */
.back-to-top {
  position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 40; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.back-to-top.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.back-to-top .icon { transform: rotate(90deg); }
.copy-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; }
.copy-link:hover { color: var(--text); background: var(--surface-2); }
.copy-link.is-done { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); }

/* ======================================================================
   27 · MOTION & REVEAL
   ====================================================================== */
.reveal--pending { opacity: 0; transform: translateY(16px); }
/* the scroll target is never offset: an anchor target (:target, or .is-target set by script for in-page jumps) and the
   reveal block holding it keep their real place, so the jump lands right; they still fade in */
.reveal--pending:target, .reveal--pending.is-target { transform: none; }
.reveal--pending:has(:target), .reveal--pending:has(.is-target) { transform: none; }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal--pending { opacity: 1; transform: none; }
}

/* reserve space for data-driven blocks until their renderer runs (keeps layout shift minimal) */
[data-news]:empty, [data-news-filter]:empty, [data-quotes]:empty { min-height: 420px; }
[data-news][data-layout="bento"]:empty { min-height: 1000px; }
[data-news][data-layout="featured"]:empty { min-height: 560px; }
[data-pulse]:empty { min-height: 470px; }
[data-pulse][data-pulse-lead="none"]:empty { min-height: 130px; }
[data-market-card]:empty { min-height: 600px; }
[data-history]:empty { min-height: 420px; }
[data-heat]:empty { min-height: 220px; }
[data-movers]:empty { min-height: 300px; }
/* full payoff tools only: glyph hosts (data-mode="glyph") and thumbnails stay their own small size */
[data-payoff]:not([data-mode="glyph"]):not(.sthumb):empty { min-height: 560px; }
.pf-compact[data-payoff]:not([data-mode="glyph"]):empty { min-height: 470px; }

/* ======================================================================
   27b · STYLEGUIDE HELPERS (styleguide.html only)
   ====================================================================== */
.sg-section { padding-top: var(--sp-12); }
.sg-section > h2 { font-size: var(--fs-2xl); }
.sg-section > p.sg-desc { margin-top: 6px; color: var(--text-2); max-width: 70ch; }
.sg-sub { margin: var(--sp-8) 0 var(--sp-3); font-size: 15px; font-weight: 700; color: var(--text-2); }
.demo { position: relative; margin-top: var(--sp-4); padding: clamp(14px, 2vw, 24px); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg); background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px); background-size: 18px 18px; }
.demo--flush { padding: 0; overflow: hidden; }
.demo__code { margin-top: 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.demo__code > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; list-style: none; }
.demo__code > summary::-webkit-details-marker { display: none; }
.demo__code > summary:hover { color: var(--text); }
.demo__pre { position: relative; border-top: 1px solid var(--border); }
.demo__pre pre code { font-size: inherit; }
.demo__pre pre { margin: 0; max-height: 380px; overflow: auto; padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--text-2); text-align: left; white-space: pre; tab-size: 2; }
.demo__copy { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 220px), 100%), 1fr)); gap: 12px; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.swatch { display: grid; grid-template-rows: 64px auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.swatch__chip { background: var(--c); }
.swatch__meta { padding: 8px 10px; font-size: 12.5px; line-height: 1.5; }
.swatch__meta b { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; direction: ltr; text-align: start; }
.swatch__meta span { color: var(--text-3); }
.sg-type > * + * { margin-top: 12px; }
.sg-frame { border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; background: var(--bg); }
.sg-frame + .sg-frame { margin-top: 14px; }

/* ======================================================================
   28 · RESPONSIVE · A11Y · PRINT
   ====================================================================== */
/* the labelled search pill (with its ⌘K hint) where the eight-item nav leaves room for it */
@media (min-width: 1440px) {
  .search-trigger { min-width: 156px; justify-content: flex-start; }
  .search-trigger__label { display: inline; }
  .search-trigger .kbd { display: inline-flex; margin-inline-start: auto; }
}
@media (max-width: 1439px) {
  .nav-link { padding: 0 10px; font-size: 14px; }
}
/* compact desktop nav 1024–1279: every link visible; below 1200 the short labels (the full one stays the link's name) */
@media (max-width: 1279px) {
  .header-bar { gap: 12px; }
  .header-bar .brand__tag { display: none; }
  .header-bar .brand__name { font-size: 25px; }
  .nav-link { padding: 0 9px; font-size: 14px; gap: 6px; }
  .nav-item.has-menu .nav-link { padding-inline-end: 4px; }
  .nav-caret { width: 24px; }
  .icon-btn { width: 40px; height: 40px; }
}
@media (max-width: 1199px) {
  .nav-link__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nav-link__short { display: inline; }
}
@media (max-width: 1099px) {
  :root { --gutter: 24px; }
  .nav-link { padding: 0 8px; font-size: 13.5px; }
  .nav-list { gap: 0; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento .s-2, .bento .s-3 { grid-column: span 3; }
  .bento .s-4, .bento .s-5, .bento .s-6, .bento .s-7, .bento .s-8, .bento .s-9, .bento .s-12 { grid-column: span 6; }
  .bento .t-2 { grid-column: span 2; } .bento .t-3 { grid-column: span 3; } .bento .t-6 { grid-column: span 6; }
  .bento .r-2, .bento .r-3 { grid-row: auto; }
  .hero__panel { grid-template-columns: minmax(0, 1fr); padding: 32px 28px 64px; }
  .news-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .news-bento__feature { grid-column: span 6; grid-row: auto; }
  .news-bento__latest, .news-bento__popular { grid-column: span 3; grid-row: auto; }
  .news-bento__card { grid-column: span 3; }
  .ncard--feature { min-height: 460px; }
  .article-layout, .article-layout--wide-aside { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .article-layout__aside { position: static; max-height: none; order: -1; }
  .article-layout__aside .toc { display: none; }
  details.toc-mobile { display: block; }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .footer__contact { justify-self: start; max-width: 560px; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* «عن الموقع» (eight links) takes the two free columns of the second row, its list in two columns */
  .footer__col:last-child { grid-column: span 2; }
  .footer__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .mcard--row { flex-direction: row; }
}
/* tablet market cards: head and body side by side */
@media (min-width: 700px) and (max-width: 1099px) {
  .mcard { flex-direction: row; }
  .mcard__head { flex: 1.1 1 0; display: flex; flex-direction: column; min-width: 0; }
  .mcard__chart { margin-top: auto; }
  .mcard__body { flex: 1 1 0; padding-top: 14px; min-width: 0; }
  .ttile--wide { grid-template-columns: minmax(0, 1fr); }
}
/* below 1024: hamburger + search + theme in the header */
@media (max-width: 1023px) {
  :root { --header-h: 62px; --ticker-h: 40px; }
  .main-nav { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-bar { gap: 8px; }
  .search-trigger { width: 40px; padding: 0; justify-content: center; }
  .tk a, .tk > span { padding-inline: 14px; font-size: 13px; }
}
@media (max-width: 699px) {
  :root { --gutter: 16px; --gap: 12px; --pad: 18px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* only the bento size classes (a substring match would also hit us-*, news-*, sort-btn … and collapse nested grids) */
  .bento > *, .bento > :is(.s-2, .s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-12, .t-2, .t-3, .t-6) { grid-column: span 2; }
  .bento .m-1 { grid-column: span 1; }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
  .section-head__action { justify-self: start; }
  .split, .proscons, .scenarios, .movers { grid-template-columns: minmax(0, 1fr); }
  .header-bar .brand__name { font-size: 24px; }
  .icon-btn { border-radius: 12px; }

  .hero { padding-top: 12px; }
  .hero__panel { padding: 22px 16px 52px; gap: 22px; border-radius: 24px; }
  .hero__edition { font-size: 12.5px; padding-inline: 12px 10px; }
  .hero__title { margin: 14px 0 8px; font-size: clamp(28px, 7.6vw, 34px); line-height: 1.45; }
  .hero__lead { font-size: 15.5px; line-height: 1.8; }
  .hero__lead-more { display: none; }
  .hero__ctas { margin-top: 18px; }
  .hero__ctas .btn { flex: 1 1 0; padding-inline: 12px; }
  .hero__foot { padding-top: 18px; }
  .status-card { padding: 8px 10px; border-radius: 12px; }
  .status-card:empty { min-height: 73px; }
  .status-card__full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .status-card__short { display: inline; }
  .status-card__name { font-size: 12.5px; gap: 6px; }
  .status-card__state { font-size: 12px; }
  .status-card__next { font-size: 12px; white-space: normal; }
  .pulse { padding: 12px; border-radius: 20px; }
  .pulse__title { font-size: 19px; }
  .pulse__legend { display: none; }
  .pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qt { padding: 10px 11px 8px; border-radius: 15px; }
  .qt__badge { min-width: 32px; height: 30px; border-radius: 10px; font-size: 12px; }
  .qt__sub { display: none; }
  .qt--lead .qt__sub { display: block; }
  .qt:not(.qt--lead) .qt__badge { display: none; }
  .qt__name { font-size: 13.5px; }
  .qt--lead ~ .qt:last-child:nth-child(even) { grid-column: span 2; }
  .qt__px { font-size: 16px; }
  .qt--lead .qt__px { font-size: 26px; }
  .qt__spark { min-height: 30px; }
  .qt--lead .qt__spark { min-height: 48px; }
  .qt .chg { height: 22px; padding: 0 6px; }
  .qt:not(.qt--lead) .qt__mid { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
  .qt:not(.qt--lead) .qt__px { font-size: 16px; }

  .news-bento { grid-template-columns: minmax(0, 1fr); }
  .news-bento > * { grid-column: auto !important; }
  .ncard--feature { min-height: 420px; }
  .ncard--feature .ncard__body { padding: 20px 18px 18px; }
  .ncard--feature .ncard__title { font-size: 24px; }
  .news-bento__card .ncard, .ncard--row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; align-items: start; }
  .news-bento__card .ncard__media, .ncard--row .ncard__media { border-radius: 11px; aspect-ratio: 1 / 1; }
  .news-bento__card .ncard__body, .ncard--row .ncard__body { padding: 0; gap: 6px; }
  .news-bento__card .ncard__title, .ncard--row .ncard__title { font-size: 17px; -webkit-line-clamp: 3; }
  .news-bento__card .ncard__summary, .ncard--row .ncard__summary { display: none; }
  .news-bento__card .nfb__glyph, .ncard--row .nfb__glyph { width: 30px; height: 30px; top: 6px; inset-inline-start: 6px; border-radius: 9px; }
  .news-bento__card .nfb__glyph .icon, .ncard--row .nfb__glyph .icon { width: 16px; height: 16px; }
  .latest, .popular { padding: 18px 16px 8px; }

  .scard-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .scard-rail::-webkit-scrollbar { display: none; }
  .scard-rail > * { flex: 0 0 82%; scroll-snap-align: start; }
  .feature-strategy { padding: 20px 16px; }
  .ttile { padding: 16px; }
  .ttile.m-1 { padding: 14px 12px; gap: 8px; }
  .ttile.m-1 .ttile__tag { display: none; }
  .ttile.m-1 .ttile__icon { width: 40px; height: 40px; border-radius: 12px; }
  .ttile.m-1 .ttile__title { font-size: 15px; line-height: 1.5; }
  .ttile.m-1 .ttile__art-label { font-size: 18px; }
  .ttile__desc { display: none; }
  .ttile__title { font-size: 16px; }
  .ttile__example { display: none; }
  .ttile__art { height: 46px; }
  .ttile--wide .ttile__art { min-height: 120px; }

  .mcard__head { padding: 18px 18px 0; }
  .mcard__chart { margin-inline: -18px; height: 104px; }
  .mcard__body { padding: 4px 18px 18px; }
  .page-hero__title { font-size: clamp(28px, 7vw, 36px); }
  .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .glossary > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-top: 24px; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__col:last-child ul { column-gap: 16px; }
  .footer__top { padding-bottom: 24px; }
  .footer__contact { padding: 16px; }
  .footer__brand .brand__name { font-size: 28px; }
  .footer__sources { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .footer__disclaimer { padding: 14px 16px; }
  .cta-band { padding: 26px 18px; border-radius: 24px; }
  .back-to-top { bottom: 16px; inset-inline-end: 16px; }
  .table th, .table td { padding: 10px 12px; }
  .table--compare tbody th { white-space: normal; min-width: 84px; }
  .prose { font-size: 17px; line-height: 1.9; }
  .prose h3 { font-size: 18.5px; }
  .callout { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .callout__icon { grid-row: auto; width: 32px; height: 32px; }
}
/* tables: page-level sticky header on desktop, horizontal scroll inside the wrapper on small screens */
@media (max-width: 899px) {
  .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat local,
      linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .3), transparent) right center / 18px 100% no-repeat scroll,
      radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .3), transparent) left center / 18px 100% no-repeat scroll,
      var(--surface);
  }
  html[data-theme="dark"] .table-wrap {
    background:
      linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat local,
      linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .8), transparent) right center / 20px 100% no-repeat scroll,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .8), transparent) left center / 20px 100% no-repeat scroll,
      var(--surface);
  }
  .table-wrap > .table { min-width: 640px; }
  .table-wrap > .table--fit { min-width: 0; }
  /* top: auto too, so a header cell a page makes sticky again inside its scroll box is not pushed down by the site-header offset */
  .table thead th { position: static; top: auto; }
  .table-wrap--scroll .table thead th { position: sticky; top: 0; }
}
/* phones / touch: every tap target ≥ 44px */
@media (max-width: 699px), (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .lchip, .mini-link, .copy-link, .breadcrumbs a, .footer__col a, .link-arrow, .brand, .fchip, .drawer__info a { min-height: 44px; }
  /* an inline link inside a sentence keeps its line height and gets a 44px-tall hit area */
  .footer__disclaimer a { padding-block: 12px; }
  /* desktop nav on a touch screen (a tablet in landscape): the menu carets grow too (the nav keeps ≥ 40px spare at 1024) */
  .nav-caret, .nav-item.has-menu .nav-caret { width: 36px; }
  .btn--sm { --btn-h: 44px; }
  .toc__link { min-height: 44px; }
  /* in-table controls: a 44px hit area without changing the row height */
  .sort-btn::after { content: ""; position: absolute; inset: -6px -2px; }
  .quote-link::after { content: ""; position: absolute; inset: -4px; }
  .mcard__name a { position: relative; }
  .mcard__name a::before { content: ""; position: absolute; inset: -10px -6px; }
  .breadcrumbs ol { row-gap: 0; }
  .footer__col ul { gap: 0; }
}
/* phones / touch: no continuous decorative animation (the ticker marquee is a single compositor transform) */
@media (max-width: 699px), (hover: none) {
  [data-state="open"] .status__dot::after, .live-dot::after { animation: none; display: none; }
}
/* small phones (< 380px): the theme switch moves to the drawer's «المظهر» row; search and the menu stay in the header,
   every button 44px, and the wordmark keeps a size that still reads as a masthead */
@media (max-width: 379px) {
  .site-header .theme-toggle { display: none; }
  .header-bar .brand__name { font-size: 22px; }
}
@media (max-width: 380px) {
  .status-cards { gap: 6px; }
  .status-card { padding: 7px 8px; }
  .status-card__name .status__dot { display: none; }
  /* news rows: a smaller thumbnail leaves room for the publisher name (the new-tab hint stays in the link's SR text) */
  .news-bento__card .ncard, .ncard--row { grid-template-columns: 96px minmax(0, 1fr); }
  .news-bento__card .ncard__ext, .ncard--row .ncard__ext { display: none; }
}
@media (forced-colors: active) {
  .chg, .badge, .cat, .status-pill { border: 1px solid CanvasText; }
  .edge-light, .hero__line { display: none; }
  .checklist li::after { forced-color-adjust: none; background: CanvasText; }
  .tn-wm .brand__alef { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  #tn-header, .site-header, .breaking-bar, .ticker, .back-to-top, .drawer, .palette, .tv-frame, .edge-light, .hero__line, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .brand__name { color: #0b1020; }
  .tn-wm .brand__alef { background: linear-gradient(0deg, #0a7a74 0%, #1f5ed6 100%); }
  .tile, .card, .ncard, .figure__frame, .callout, .formula, .scenario, .table-wrap { box-shadow: none !important; break-inside: avoid; }
  .prose { max-width: none; font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
  .reveal--pending { opacity: 1; transform: none; }
}