/*!
 * BullBridge News · جسرك إلى الأسواق — 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 (logo + wordmark): Saudi teal → US azure */
  --grad-brand: linear-gradient(135deg, #12b5a8 0%, #2f7cf6 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;
  --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; gap: 11px; flex: none; color: var(--text); text-decoration: none; border-radius: 14px; }
.brand__mark { width: 40px; height: 40px; flex: none; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(47, 124, 246, .7); transition: transform var(--t-med) var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 19px; direction: ltr; unicode-bidi: isolate; text-align: start; letter-spacing: -.01em; white-space: nowrap; }
/* the wordmark «BullBridge News» (always Latin): Bull · Bridge in the brand gradient · News in a quieter ink */
.brand__accent { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .brand__accent { background: linear-gradient(135deg, #0a7a74 0%, #1f5ed6 100%); -webkit-background-clip: text; background-clip: text; }
.brand__news { font-weight: 700; color: var(--text-2); }
.brand__tag { font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-top: 3px; white-space: nowrap; }

.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; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.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 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__mark { width: 44px; height: 44px; border-radius: 13px; }
.footer__brand .brand__name { font-size: 21px; }
.footer__brand .brand__tag { font-size: 13px; }
.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; }
  .brand__tag { display: none; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 17.5px; }
  .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); }
  .brand__mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand__name { font-size: 17px; }
  .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: 19px; }
  .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 wordmark keeps its whole name («BullBridge News»), so the theme switch moves to the
   drawer's «المظهر» row; search and the menu stay in the header, every button 44px */
@media (max-width: 379px) {
  .site-header .theme-toggle { display: none; }
  .header-bar .brand { gap: 9px; }
  .header-bar .brand__name { font-size: 16px; }
}
@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; }
}
@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; }
  .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; }
}