/* =====================================================================
   Stock pages V3 — US, Arab-market and screener (plan 2026-10-21)
   Built from the redesign's stylesheet («صفحة السهم — إعادة تصميم البيت العربي»), scoped under .sv3 so
   it ships beside stock-v2.css / gulf-stock-detail.css behind the STOCK_V3* flags, and mapped onto the
   site tokens (navy · teal · gold · surfaces) instead of the design's own hex values, so the dark-mode
   scaffolding in tokens.css carries over.
   Mobile-first; breakpoints 720px and 1100px. The only inline style a V3 template writes is a custom
   property that carries data (style="--v:42%").
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
/* .sv3-rows: the shared result rows also stand alone on the V2 list pages (P7), outside any .sv3 page. */
.sv3, .sv3-rows {
  --sv3-ink: var(--navy-deep, #071428);
  --sv3-ink-2: var(--text-mid, #34445C);
  --sv3-muted: var(--text-muted, #475A72);
  --sv3-line: var(--border, #DDE5EF);
  --sv3-line-2: var(--border-light, #EBF0F6);
  --sv3-bg: var(--bg, #F5F8FC);
  --sv3-surface: var(--bg-card, #FFFFFF);
  --sv3-tile: var(--bg-subtle, #F8FAFC);
  --sv3-brand: var(--teal, #0E7C7B);
  --sv3-navy: var(--navy, #152D50);
  --sv3-gold: var(--gold, #C08A2E);
  --sv3-gold-light: var(--gold-light, #E5A83A);
  --sv3-gold-ink: #1A1205;
  --sv3-up: #0B7A4B;
  --sv3-up-bg: #E5F4EC;
  --sv3-up-ink: #0B6B42;
  --sv3-dn: #C0303A;
  --sv3-dn-bg: #FCE9EA;
  --sv3-dn-ink: #AE2832;
  --sv3-warn-bg: #FDF1D8;
  --sv3-warn-ink: #8A4B06;
  --sv3-neutral-bg: var(--bg-muted, #EEF1F5);
  --sv3-halal-bg: #F2FAF6;
  --sv3-halal-line: #BFE3CF;
  --sv3-mix-bg: #FFF8EA;
  --sv3-mix-line: #F1D9A6;
  --sv3-haram-bg: #FDF2F3;
  --sv3-haram-line: #F2C7CA;
  --sv3-radius: 14px;
  --sv3-radius-sm: 10px;
  --sv3-gap: 16px;
  --sv3-sticky-top: 52px;   /* fixed site header on mobile (measured 2026-10-21) */
  color: var(--sv3-ink);
  font-family: var(--font-primary, 'Almarai', system-ui, sans-serif);
}
@media (min-width: 1100px) { .sv3 { --sv3-sticky-top: 90px; --sv3-gap: 20px; } }   /* desktop header */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) :is(.sv3, .sv3-rows) {
    --sv3-ink: var(--text, #E6EDF6);
    --sv3-up-bg: rgba(11, 122, 75, .22); --sv3-up-ink: #7FD8AD;
    --sv3-dn-bg: rgba(192, 48, 58, .22); --sv3-dn-ink: #F3A2A8;
    --sv3-warn-bg: rgba(229, 168, 58, .18); --sv3-warn-ink: #F1C97A;
    --sv3-halal-bg: rgba(11, 122, 75, .14); --sv3-halal-line: rgba(127, 216, 173, .35);
    --sv3-mix-bg: rgba(229, 168, 58, .12); --sv3-mix-line: rgba(241, 201, 122, .35);
    --sv3-haram-bg: rgba(192, 48, 58, .14); --sv3-haram-line: rgba(243, 162, 168, .35);
  }
}

/* ---------- 2. Base ---------- */
.sv3 *, .sv3 *::before, .sv3 *::after { box-sizing: border-box; }
.sv3 :focus-visible { outline: 2px solid var(--sv3-brand); outline-offset: 2px; border-radius: 6px; }
.sv3-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.sv3-up { color: var(--sv3-up); }
.sv3-dn { color: var(--sv3-dn); }
.sv3-label { font-size: 12px; color: var(--sv3-muted); }
.sv3-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: var(--sv3-muted); }
.sv3-disclaimer { margin: 10px 0 0; font-size: 12px; line-height: 1.8; color: var(--sv3-muted); }

/* ---------- 3. Layout ---------- */
.sv3-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 12px; }
@media (min-width: 720px) { .sv3-wrap { padding-inline: 24px; } }
.sv3-top { display: flex; flex-direction: column; gap: 12px; padding-block: 4px 12px; }
.sv3-grid { display: flex; flex-direction: column; gap: 12px; padding-block-end: 24px; }
/* Mobile: main and aside dissolve so every card is one column, ordered as the design's mobile board. */
@media (max-width: 1099.98px) {
  .sv3-main, .sv3-aside { display: contents; }
  .sv3-o-10 { order: 10; } .sv3-o-20 { order: 20; } .sv3-o-25 { order: 25; } .sv3-o-30 { order: 30; } .sv3-o-40 { order: 40; }
  .sv3-o-50 { order: 50; } .sv3-o-60 { order: 60; } .sv3-o-70 { order: 70; } .sv3-o-75 { order: 75; }
  .sv3-o-80 { order: 80; } .sv3-o-85 { order: 85; } .sv3-o-90 { order: 90; } .sv3-o-92 { order: 92; } .sv3-o-95 { order: 95; } .sv3-o-100 { order: 100; }
  .sv3-o-110 { order: 110; } .sv3-o-120 { order: 120; } .sv3-o-130 { order: 130; } .sv3-o-135 { order: 135; } .sv3-o-140 { order: 140; }
}
@media (min-width: 1100px) {
  .sv3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sv3-gap); align-items: start; }
  .sv3-main, .sv3-aside { display: flex; flex-direction: column; gap: var(--sv3-gap); min-width: 0; }
  /* The design pins the whole side column, but with real content it is ~1,700px tall: pinned, everything
     below the first screen of it stays out of reach until the page ends. The column scrolls with the page
     and only its last card (price · verdict · CTA) stays in view. */
  .sv3-aside { align-self: stretch; }
  .sv3-mini { position: sticky; top: calc(var(--sv3-sticky-top) + 62px); }
}
/* The breadcrumb sits outside .sv3: it takes the content's width so both share one right edge. */
.breadcrumbs-block.sv3-crumbs > .container-xl { max-width: 1280px; padding-inline: 12px; }
@media (min-width: 720px) { .breadcrumbs-block.sv3-crumbs > .container-xl { padding-inline: 24px; } }

/* ---------- 4. Primitives ---------- */
.sv3-card { background: var(--sv3-surface); border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); padding: 16px; min-width: 0; container: sv3-card / inline-size; }
@media (min-width: 720px) { .sv3-card { padding: 20px; } }
.sv3-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); }
.sv3-chip--halal, .sv3-chip--up { background: var(--sv3-up-bg); color: var(--sv3-up-ink); }
.sv3-chip--haram, .sv3-chip--dn { background: var(--sv3-dn-bg); color: var(--sv3-dn-ink); }
.sv3-chip--mix, .sv3-chip--warn { background: var(--sv3-warn-bg); color: var(--sv3-warn-ink); }
.sv3-chip--review { background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); }
.sv3-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.sv3-chip--link { min-height: 36px; padding-inline: 12px; color: var(--sv3-ink); text-decoration: none; border: 1px solid var(--sv3-line); background: var(--sv3-surface); white-space: normal; }
a.sv3-chip--link:hover { border-color: var(--sv3-brand); color: var(--sv3-brand); }
.sv3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; font: 700 14px var(--font-primary, 'Almarai', sans-serif); cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
.sv3-btn--gold { background: linear-gradient(135deg, var(--sv3-gold-light), var(--sv3-gold)); color: var(--sv3-gold-ink); }
.sv3-btn--gold:hover { color: var(--sv3-gold-ink); filter: brightness(.96); }
.sv3-btn--line { background: var(--sv3-surface); border-color: var(--sv3-line); color: var(--sv3-ink); font-weight: 600; }
.sv3-btn--line:hover { border-color: var(--sv3-brand); color: var(--sv3-brand); }
.sv3-pill { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--sv3-line); background: var(--sv3-surface); font: 700 13px var(--font-primary, 'Almarai', sans-serif); color: var(--sv3-ink-2); cursor: pointer; white-space: nowrap; }
.sv3-pill[aria-selected="true"] { background: var(--sv3-navy); border-color: var(--sv3-navy); color: #fff; }
.sv3-bar { position: relative; height: 6px; border-radius: 99px; background: var(--sv3-line); margin-top: 6px; }
.sv3-bar__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--v, 0%); min-width: 2px; border-radius: 99px; background: var(--sv3-up); }
.sv3-bar__fill--bad { background: var(--sv3-dn); }
.sv3-bar__mark { position: absolute; top: -4px; inset-inline-start: var(--v, 0%); width: 4px; height: 14px; margin-inline-start: -2px; border-radius: 2px; background: var(--sv3-ink); }
.sv3-range { background: linear-gradient(to left, #F2C7CA, var(--sv3-line) 50%, #BFE3CF); }
.sv3-ratio + .sv3-ratio { margin-top: 10px; }
.sv3-ratio__top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sv3-ink-2); }
.sv3-table-wrap { border: 1px solid var(--sv3-line); border-radius: 12px; overflow-x: auto; }
.sv3-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sv3-table th { padding: 9px 10px; background: var(--sv3-tile); font-size: 12px; font-weight: 700; color: var(--sv3-muted); text-align: start; white-space: nowrap; }
.sv3-table td { padding: 11px 10px; border-top: 1px solid var(--sv3-line-2); vertical-align: middle; }
@container sv3-card (max-width: 600px) {
  /* In a narrow card (a phone, or the 340px side column on desktop) a stacking table becomes one block
     per row; each cell names itself from data-label. The card's width decides, not the screen's. */
  /* .sv3-stackable: a shared partial's table that TableLabels gave data-label cells (the Arab investor tables). */
  :is(.sv3-table--stack, .sv3-stackable) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :is(.sv3-table--stack, .sv3-stackable), :is(.sv3-table--stack, .sv3-stackable) tbody { display: block; }
  :is(.sv3-table--stack, .sv3-stackable) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; border-top: 1px solid var(--sv3-line-2); }
  :is(.sv3-table--stack, .sv3-stackable) tr:first-child { border-top: 0; }
  :is(.sv3-table--stack, .sv3-stackable) td { display: block; border: 0; padding: 0; font-size: 14px; font-weight: 700; text-align: start; }
  :is(.sv3-table--stack, .sv3-stackable) td:first-child { grid-column: 1 / -1; }
  :is(.sv3-table--stack, .sv3-stackable) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 400; color: var(--sv3-muted); }
}

/* ---------- 5. Hero ---------- */
.sv3-hero { background: var(--sv3-surface); border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); padding: 16px; }
@media (min-width: 720px) { .sv3-hero { padding: 22px 24px; } }
.sv3-hero__row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1100px) { .sv3-hero__row { flex-direction: row; align-items: stretch; gap: 28px; } }
.sv3-hero__main { flex: 1; min-width: 0; }
.sv3-hero__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1100px) { .sv3-hero__side { flex: 0 0 380px; } }
.sv3-hero__id { display: flex; align-items: center; gap: 12px; }
.sv3-hero__logo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--sv3-line); background: #fff; object-fit: contain; }
@media (min-width: 720px) { .sv3-hero__logo { width: 56px; height: 56px; border-radius: 14px; } }
.sv3-hero__logo--text { display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--sv3-navy); }
.sv3-hero__titles { min-width: 0; }
.sv3-hero__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.45; color: var(--sv3-ink); text-wrap: balance; }
@media (min-width: 720px) { .sv3-hero__title { font-size: 26px; } }
.sv3-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: 12px; color: var(--sv3-muted); }
.sv3-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 14px; }
.sv3-price__v { font-size: 34px; font-weight: 800; line-height: 1; color: var(--sv3-ink); }
@media (min-width: 720px) { .sv3-price__v { font-size: 42px; } }
.sv3-price__chg { font-size: 15px; font-weight: 800; }
.sv3-hero .stock-price-asof, .sv3-hero [class*="price-asof"] { margin-top: 6px; }
.sv3-answer { margin: 12px 0 0; max-width: 760px; font-size: 14px; line-height: 1.9; color: var(--sv3-ink-2); }
.sv3-answer b { color: var(--sv3-ink); }
.sv3--us .sv3-answer { background: #FFF4B3; color: #1B2433; padding: 10px 14px; border-radius: 10px; border-inline-start: 4px solid #F5C518; }
.sv3--us .sv3-answer b { color: #0B1B33; }
@media (max-width: 720px) { .sv3--us .sv3-answer { padding: 8px 10px; font-size: 13px; line-height: 1.8; } }
.sv3-hero__range { max-width: 520px; margin-top: 14px; }
.sv3-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sv3-keystrip { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.sv3-keystrip::-webkit-scrollbar { display: none; }
.sv3-keystrip__item { flex: 0 0 auto; min-width: 104px; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--sv3-tile); }
.sv3-tile__k { margin: 0; font-size: 12px; font-weight: 400; color: var(--sv3-muted); }
.sv3-tile__v { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: var(--sv3-ink); }
@media (min-width: 1100px) {
  .sv3-keystrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--sv3-line-2); overflow: visible; }
  .sv3-keystrip__item { min-width: 0; padding: 4px 14px; border-radius: 0; background: none; border-inline-start: 1px solid var(--sv3-line-2); }
  .sv3-keystrip__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------- 6. Verdict card (four public statuses) ---------- */
.sv3-verdict { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--sv3-radius); border: 1px solid var(--sv3-halal-line); background: var(--sv3-halal-bg); }
.sv3-verdict--mix { border-color: var(--sv3-mix-line); background: var(--sv3-mix-bg); }
.sv3-verdict--haram { border-color: var(--sv3-haram-line); background: var(--sv3-haram-bg); }
.sv3-verdict--review { border-color: var(--sv3-line); background: var(--sv3-tile); }
.sv3-verdict__head { display: flex; align-items: center; gap: 12px; }
.sv3-verdict__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; font-size: 20px; font-weight: 800; color: #fff; background: var(--sv3-up); }
.sv3-verdict--mix .sv3-verdict__icon { background: #B5821F; }
.sv3-verdict--haram .sv3-verdict__icon { background: var(--sv3-dn); }
.sv3-verdict--review .sv3-verdict__icon { background: var(--sv3-muted); }
.sv3-verdict__titles { flex: 1; min-width: 0; }
.sv3-verdict__caption { font-size: 12px; color: var(--sv3-muted); }
.sv3-verdict__title { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--sv3-up-ink); }
.sv3-verdict--mix .sv3-verdict__title { color: var(--sv3-warn-ink); }
.sv3-verdict--haram .sv3-verdict__title { color: var(--sv3-dn-ink); }
.sv3-verdict--review .sv3-verdict__title { color: var(--sv3-ink-2); }
@media (min-width: 720px) { .sv3-verdict__title { font-size: 23px; } }
.sv3-verdict__more, .sv3-verdict__alt, .sv3-verdict__method { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--sv3-brand); text-decoration: none; }
.sv3-verdict__note { font-size: 12px; color: var(--sv3-ink-2); }
.sv3-verdict__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--sv3-muted); border-top: 1px solid var(--sv3-line); padding-top: 6px; }
/* Mobile: the card is a compact verdict banner; the ratios live in the Sharia section below. */
@media (max-width: 1099.98px) { .sv3-verdict__ratios { display: none; } }

/* ---------- 7. Broker slots ---------- */
/* Slot A keeps stock-v2's CTA markup and behaviour; only its look changes. */
.sv3 .sv3-slot--A.sv2-cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: var(--sv3-radius); border: 0; background: var(--sv3-navy); text-align: start; }
.sv3 .sv3-slot--A .sv2-cta-card-title { grid-column: 1; font-size: 15px; font-weight: 800; color: #fff; }
.sv3 .sv3-slot--A .sv2-cta-btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0 18px; }
.sv3 .sv3-slot--A .sv2-cta-card-note { grid-column: 1; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .72); }
/* Anything else in the slot (the broker-unavailable notice) takes the full width; the Arab card's three parts are placed in §14. */
.sv3 .sv3-slot--A > :not(.sv2-cta-card-title, .sv2-cta-btn, .sv2-cta-card-note, .gsd-cta-title, .gsd-cta-btn, .gsd-cta-risk) { grid-column: 1 / -1; }
/* The broker-unavailable notice (a Rule 106 component) is drawn for light surfaces: on the navy card it
   gets one, so its navy reason and teal link stay readable. */
.sv3 .sv3-slot--A .bct-unavail { margin: 6px 0 0; background: var(--sv3-surface); }
/* On phones topic-inline.css makes every banner slot full-bleed (100vw, centred on the viewport); in V3 the
   slot is a card in the column, so it takes the column's width like its siblings. */
.sv3 .v2-banner-slot.sv3-module { width: auto; margin: 0; max-width: none; padding: 0; }
.sv3 .v2-banner-slot.sv3-module:empty, .sv3 .sv3-slot-c:empty { display: none; }

/* ---------- 8. Byline ---------- */
.sv3 .sv3-byline { margin: 0; }

/* ---------- 9. Navigator ---------- */
.sv3-nav { position: relative; z-index: 20; display: flex; align-items: stretch; margin-block-end: 12px; background: var(--sv3-surface); border-block: 1px solid var(--sv3-line); }
.sv3-tabs { display: flex; flex: 1; gap: 18px; min-width: 0; padding-inline: 12px; overflow-x: auto; scrollbar-width: none; }
.sv3-tabs::-webkit-scrollbar { display: none; }
.sv3-tabs a { display: inline-flex; align-items: center; min-height: 46px; padding-inline: 2px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700; color: var(--sv3-muted); text-decoration: none; white-space: nowrap; }
.sv3-tabs a[aria-current="true"] { color: var(--sv3-ink); border-bottom-color: var(--sv3-brand); }
.sv3-nav__all { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 46px; padding: 0 14px; border: 0; border-inline-start: 1px solid var(--sv3-line); background: var(--sv3-tile); font: 800 13px var(--font-primary, 'Almarai', sans-serif); color: var(--sv3-ink); cursor: pointer; }
.sv3-nav__panel { position: absolute; inset-inline: 0; top: 100%; max-height: 70vh; overflow: auto; padding: 8px 16px 14px; background: var(--sv3-surface); border-bottom: 1px solid var(--sv3-line); box-shadow: 0 14px 28px rgba(11, 27, 51, .14); }
.sv3-nav__group { padding: 8px 0; border-top: 1px solid var(--sv3-line-2); }
.sv3-nav__group:first-child { border-top: 0; }
.sv3-nav__gtitle { font-size: 12px; font-weight: 800; color: var(--sv3-muted); }
.sv3-nav__group ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.sv3-nav__group li a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 13px; color: var(--sv3-ink-2); text-decoration: none; }
.sv3-nav__group li a[aria-current="true"] { background: var(--sv3-up-bg); color: var(--sv3-ink); font-weight: 800; }
@media (min-width: 1100px) {
  /* Desktop: the navigator sticks under the fixed header. */
  /* Same edges as the cards: .sv3-wrap is 1280px with 24px padding, and the bar sits outside it so it can
     stick for the whole page. */
  .sv3-nav { position: sticky; top: var(--sv3-sticky-top); margin-inline: max(24px, calc((100% - 1232px) / 2)); border: 1px solid var(--sv3-line); border-radius: 12px; }
  .sv3-nav__panel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 18px; border-radius: 0 0 14px 14px; }
  .sv3-nav__panel[hidden] { display: none; }
  .sv3-nav__group { padding: 0; border: 0; }
  .sv3-nav__group ul { display: block; }
  .sv3-nav__group li a { min-height: 32px; padding: 2px 0; border-radius: 0; background: none; }
}
/* Reading mode (decision D5, off unless STOCK_V3_READING_MODE): on phones the site header hides on
   scroll-down, so the navigator can stick at the top without stacking two fixed bars. */
@media (max-width: 1099.98px) {
  .sv3[data-reading="1"] .sv3-nav { position: sticky; top: var(--sv3-sticky-top); transition: top .2s ease; }
  body.sv3-reading .sv3[data-reading="1"] { --sv3-sticky-top: 0px; }
  body.sv3-reading .site-header { transform: translateY(-100%); transition: transform .2s ease; }
}

/* ---------- 10. Modules ---------- */
.sv3-module { scroll-margin-top: calc(var(--sv3-sticky-top) + 56px); }
.sv3 [id] { scroll-margin-top: calc(var(--sv3-sticky-top) + 56px); }
/* stock-v2's sections become plain blocks inside a V3 card: no card-in-card, no 400px placeholder. */
.sv3 .sv3-card .sv2-section { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; content-visibility: visible; contain-intrinsic-size: none; }
/* Full-width page sections (.content-section) bring 80px of vertical padding; inside a card the gap below
   spaces them like every other section. */
.sv3 .sv3-card .content-section { margin: 0; padding: 0; }
/* The second selector outranks the neutralisers above, so sections sharing a card never run together. */
.sv3 .sv3-card > * + *, .sv3 .sv3-card > * + :is(.sv2-section, .content-section) { margin-top: 28px; }
/* Shared partials bring their own heading looks (centred with a rule, a gold side bar, 32px). Inside a V3
   card they all take the V3 section title — same element, level, id and text. */
.sv3 .sv3-card :is(.content-section-heading, .qa__title, .related-section__title, .etf-panel__title, .cta-rail__title) {
  margin: 0 0 12px; padding: 0; border: 0; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--sv3-ink); text-align: start;
}
.sv3 .sv3-card .content-section-heading::after { content: none; }
@media (min-width: 720px) {
  .sv3 .sv3-card :is(.content-section-heading, .qa__title, .related-section__title, .etf-panel__title, .cta-rail__title) { font-size: 19px; }
}
.sv3 .sv3-card > [id$="-content"]:empty, .sv3 .sv3-card > div:empty { margin: 0; }
.sv3 .sv3-card .sv2-section-title { margin-bottom: 12px; font-size: 17px; }
@media (min-width: 720px) { .sv3 .sv3-card .sv2-section-title { font-size: 19px; } }
.sv3 .sv2-halal-section { margin: 0; padding: 16px; }
@media (min-width: 720px) { .sv3 .sv2-halal-section { padding: 20px; } }
.sv3 .sv2-halal-section .container, .sv3 .sv3-card .container, .sv3 .sv3-card .container-xl { max-width: none; padding: 0; }
.sv3 .sv3-app-slot .container, .sv3 .sv3-app-slot .container-xl { max-width: none; padding-inline: 0; }
.sv3-mini .sv2-mini-card { margin: 0; }
/* A value like «$5.01 T» takes its direction from its own first letter, so RTL no longer prints «T $5.01»;
   Arabic values («ناسداك», «لا توزّع أرباحًا») stay RTL. */
.sv3 :is(.sv2-stat-val, .es-value) { unicode-bidi: plaintext; }

/* ---------- 11. Financial tabs ---------- */
.sv3-tablist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sv3-tablist::-webkit-scrollbar { display: none; }
.sv3-tabpanel { margin-top: 14px; }
.sv3-tabpanel[hidden] { display: none; }   /* the text stays in the HTML for search engines */
.sv3-tabpanel > * + * { margin-top: 22px; }

/* ---------- 12. Peers and forecasts ---------- */
.sv3-peers__co { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--sv3-ink); text-decoration: none; font-weight: 800; }
.sv3-peers__name { font-weight: 400; font-size: 12px; color: var(--sv3-muted); }
.sv3-forecasts .sv3-table-wrap { margin-top: 10px; }

/* ---------- 13. Bottom bar ---------- */
.sv3-stickybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--sv3-surface); border-top: 1px solid var(--sv3-line); box-shadow: 0 -6px 16px rgba(11, 27, 51, .06); transform: translateY(110%); transition: transform .2s ease; }
.sv3-stickybar[data-visible="true"] { transform: none; }
.sv3-stickybar__in { display: flex; align-items: center; gap: 10px; max-width: 1280px; min-height: 40px; margin-inline: auto; }
.sv3-stickybar__id { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 13px; }
.sv3-stickybar__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.sv3-stickybar__verdict { font-size: 12px; font-weight: 800; color: var(--sv3-up-ink); }
.sv3-stickybar__verdict--mix { color: var(--sv3-warn-ink); }
.sv3-stickybar__verdict--haram { color: var(--sv3-dn-ink); }
.sv3-stickybar__verdict--review { color: var(--sv3-muted); }
.sv3-stickybar .sv3-btn { min-height: 40px; }
.sv3 { padding-bottom: 64px; }   /* the bar never covers the last block */

/* ---------- 14. Arab markets (gulf-stock-v3) ----------
   gulf-stock-detail's partials keep their own markup; here they lose the full-page look (dark hero text, section
   rules, outer margins) and take the V3 one, as the US sections do. */
.sv3-price__cur { font-size: 16px; font-weight: 700; color: var(--sv3-muted); }
.sv3-hero__en { margin: 2px 0 0; font-size: 13px; color: var(--sv3-muted); direction: ltr; unicode-bidi: plaintext; text-align: start; }
.sv3-hero__asof { margin-top: 6px; }
/* Written for the navy hero of gulf-stock-detail; on the light V3 hero they take the V3 ink. */
.sv3 .gsd-freshness { display: inline-flex; font-size: 12px; color: var(--sv3-muted); }
.sv3 .gsd-price-unavailable { margin: 14px 0 0; }
.sv3 .gsd-price-unavailable__label { color: var(--sv3-ink); }
.sv3 .gsd-price-unavailable__note { color: var(--sv3-muted); }
/* Slot A keeps gulf-stock-detail's CTA markup and behaviour; only its look changes (same look as the US slot). */
.sv3 .sv3-slot--A.gsd-cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: var(--sv3-radius); background: var(--sv3-navy); text-align: start; }
.sv3 .sv3-slot--A .gsd-cta-title { grid-column: 1; margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
.sv3 .sv3-slot--A .gsd-cta-btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0 18px; }
.sv3 .sv3-slot--A .gsd-cta-risk { grid-column: 1; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .72); }
.sv3 .sv3-byline .gsd-authorship { margin: 0; padding: 0; border: 0; }
/* Sections inside a V3 card: no outer margin and the V3 title. */
.sv3 .sv3-card .gsd-section { margin: 0; }
.sv3 .sv3-card .gsd-section-title { margin: 0 0 12px; padding: 0; border: 0; font-size: 17px; }
.sv3 .sv3-card .gsd-section-title::after { content: none; }
@media (min-width: 720px) { .sv3 .sv3-card .gsd-section-title { font-size: 19px; } }
.sv3 .sv3-card .gsd-summary-box, .sv3 .sv3-card .gsd-article { margin-block: 0; }
/* The investor tabs: each card is a panel of the module, so it drops its own border. */
.sv3 .sv3-tabpanel .gsd-investor-card { margin: 0; padding: 0; border: 0; background: none; }
.sv3 .sv3-tabpanel .gsd-investor-card__title { font-size: 15px; }
.sv3 .gsd-investor-disclaimer { margin: 14px 0 0; font-size: 12px; line-height: 1.8; color: var(--sv3-muted); }
/* Broker slot B: the «جاهز للاستثمار» block keeps its navy card. */
.sv3 .sv3-slot-b .gsd-section--brokers { margin: 0; }
/* The analysts rail (community-top-analysts) is a card of its own elsewhere; inside a V3 card it is a list,
   and an analyst's pill may wrap instead of overflowing a narrow card (measured −52px at 320px). */
.sv3 .sv3-card .cta-rail { margin: 0; padding: 0; border: 0; background: none; }
.sv3 .cta-rail__item { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.sv3 .cta-rail__link { flex-wrap: wrap; max-width: 100%; }
/* The side column is 340px: its rails go to one column. */
@media (min-width: 1100px) {
  .sv3 .sv3-aside .gsd-related-grid { grid-template-columns: 1fr; }
}

/* ---------- 15. Screener (index-v3) — design «تصميم الفلتر ديسكتوب» (1440) and «تصميم الفلتر موبايل» (390) ----------
   Below the hero every section is a partial stocks/index renders (includes/screener) with its markup unchanged; this
   restyles it. A navy hero (v3/screener-hero); the filters beside a table of results on desktop; the results as rows on
   phones and tablets, where the filters open as a bottom sheet and a bar at the bottom holds them and the sort; then each
   section as a card, two a row on desktop and one column in the mobile board's order below 900px. */
.sv3--screener {
  --sv3-night: #0B1B33;
  --sv3-night-2: #16294A;
  --sv3-night-line: #2A4066;
  --sv3-night-ink: #C9D4E3;
  --sv3-night-muted: #9FB0C8;
  --sv3-sc-gap: 12px;
  padding-bottom: 0;
  background: var(--sv3-bg);
}
@media (min-width: 720px) { .sv3--screener { --sv3-sc-gap: 18px; } }
@media (max-width: 719.98px) { .sv3 .sv3-long { display: none; } }
/* Visually hidden, still read and still in the page (a stat card's line, a filter option's description). */
/* Each chip that holds such text is its positioning box, so a swipeable row clips the text with the chip. */
.sv3--screener :is(.sv3-sh__pill, .sector-hub-card, .authority-card, .tool-card, .ipo-promo__card, .halal-option) { position: relative; }
.sv3--screener :is(.sv3-sh .qsr-label, .sv3-sh .qsr-hint, .shc-mcap, .authority-card .role, .authority-card p, .tool-card p, .ipo-promo__cta) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 1025px) { .sv3.sv3--screener .halal-option .label-desc { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
@media (max-width: 1024.98px) { .sv3.sv3--screener .stock-card .sc-metric .k { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }

/* 15.1 The breadcrumb opens the navy hero, on the hero's column. */
.breadcrumbs-block.sv3-crumbs.sv3-crumbs--screener { border-bottom: 0; background: #0B1B33; --bs-breadcrumb-divider-color: #9FB0C8; --bs-breadcrumb-item-active-color: #9FB0C8; }
.breadcrumbs-block.sv3-crumbs.sv3-crumbs--screener > .container-xl { max-width: 1320px; padding-inline: 12px; }
@media (min-width: 720px) { .breadcrumbs-block.sv3-crumbs.sv3-crumbs--screener > .container-xl { padding-inline: 24px; } }
.breadcrumbs-block.sv3-crumbs--screener :is(.breadcrumb, .breadcrumb-item, .breadcrumb-item a) { font-size: 12px; color: #9FB0C8; }
.breadcrumbs-block.sv3-crumbs--screener .breadcrumb-item a:hover { color: #fff; }

/* 15.2 Hero «split»: on desktop the title, its badges, the search and the market switch beside the «Sharia snapshot»
   card (a ring of the four buckets whose legend rows are the five filter buttons); below 1025px the market switch
   follows the search and the card follows it as a bar and five cells, in the DOM order (reading order = drawn order). The ready lists close the hero: a white strip on phones,
   outlined chips inside the navy from 720px. Ring/dot colours are non-text marks on the white card (>= 3:1); every
   text pair is >= 4.5:1 (the night pairs: #C9D4E3 11.5:1 · #9FB0C8 7.8:1 · teal #5FCFC7 9.2:1 · gold #F0BC55 9.9:1). */
.sv3--screener {
  --sv3-sh-teal: #5FCFC7;
  --sv3-sh-gold: #F0BC55;
  --sv3-sh-glass: rgba(255, 255, 255, .06);
  --sv3-sh-glass-2: rgba(255, 255, 255, .11);
  --sv3-sh-glass-line: rgba(255, 255, 255, .13);
  --sv3-sh-halal: #0E8A55;
  --sv3-sh-mix: #B8801A;
  --sv3-sh-haram: #C8323D;
  --sv3-sh-review: #7A889C;
  --sv3-sh-q-h: 48px;
}
@media (min-width: 720px) { .sv3--screener { --sv3-sh-q-h: 52px; } }

.sv3-sh { color: #fff; }
.sv3-sh .sv3-sh__navy { position: relative; background: var(--sv3-night); }
/* The content paints over the backdrop by order alone (both positioned, no z-index), so no stacking context traps the
   search results (z-index 30): they still cover the page below the hero, as they did. */
.sv3-sh :is(.sv3-sh__in, .sv3-sh__presets) { position: relative; }
.sv3-sh__in, .sv3-sh__presets-in, .sv3-sc { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 12px; }
@media (min-width: 720px) { .sv3-sh__in, .sv3-sh__presets-in, .sv3-sc { padding-inline: 24px; } }

/* The backdrop: two soft lights and a faint grid, faded in under the breadcrumb; a third light follows the pointer
   (stock-v3.js §17, fine pointers only). Clipped here so nothing it draws can widen the page; it comes first in the
   section, so the positioned content after it paints over it. */
.sv3-sh .sv3-sh__deco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(440px 300px at 10% 32%, rgba(18, 160, 158, .24), transparent 70%),
    radial-gradient(560px 280px at 96% 104%, rgba(229, 168, 58, .11), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px);
  mask-image: linear-gradient(to bottom, transparent, #000 56px);
}
.sv3-sh .sv3-sh__deco::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 18% 45%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 75% at 18% 45%, #000, transparent 72%);
}
.sv3-sh .sv3-sh__glow {
  position: absolute; top: -260px; left: -260px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(95, 207, 199, .14), transparent);
  opacity: 0; transition: opacity .4s ease;
}
.sv3-sh .sv3-sh__navy.is-lit .sv3-sh__glow { opacity: 1; will-change: transform; }

/* Phones and tablets: one column in the DOM order — title, search, the market switch, the card. */
.sv3-sh .sv3-sh__in { display: flex; flex-direction: column; gap: 12px; padding-block: 6px 16px; }
.sv3-sh .sv3-sh__main { display: contents; }
.sv3-sh .sv3-sh__title { flex: none; min-width: 0; }

/* Shared hiding: still read, still in the page. */
.sv3-sh :is(.sv3-sh__sep, .sv3-sh__presets-label, .sv3-sh__pct) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sv3-sh .sv3-sh__ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Title, badges, sub. */
.sv3-sh .sv3-sh__title h1 { max-width: 15.2em; margin: 0; font-size: clamp(19px, 5.4vw, 21px); font-weight: 800; line-height: 1.45; letter-spacing: 0; color: #fff; text-wrap: wrap; }
.sv3-sh .sv3-sh__title h1 .accent-gold { background: none; color: var(--sv3-sh-gold); -webkit-text-fill-color: currentColor; }
.sv3-sh .sv3-sh__title h1 .accent-teal { background: none; color: var(--sv3-sh-teal); -webkit-text-fill-color: currentColor; }
.sv3-sh .sv3-sh__meta { margin: 8px 0 0; font-size: 12px; line-height: 1.75; color: var(--sv3-night-ink); }
.sv3-sh .sv3-sh__badge { display: inline; margin-inline-end: 10px; white-space: normal; }
.sv3-sh .sv3-sh__badge .sv3-sh__ico { display: inline-block; margin-inline-end: 4px; vertical-align: -2px; color: var(--sv3-sh-teal); }
.sv3-sh .sv3-sh__badge .sv3-num { font-weight: 800; color: #fff; }
.sv3-sh .sv3-sh__sub {
  display: -webkit-box; max-width: 68ch; margin: 6px 0 0; overflow: hidden; font-size: 12.5px; line-height: 1.8; color: var(--sv3-night-muted);
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

/* The search: the shared input, white on navy; its label and hint stay for screen readers. «/» focuses it. */
.sv3-sh .sv3-sh__search { position: relative; }
.sv3--screener .sv3-sh .qsr { position: relative; max-width: none; margin: 0; }
.sv3--screener .sv3-sh .qsr-box input {
  height: var(--sv3-sh-q-h); min-height: var(--sv3-sh-q-h); padding-block: 0; padding-inline: 46px 16px;
  border: 1px solid transparent; border-radius: 14px; outline: none; background: var(--sv3-surface); color: var(--sv3-ink); font-size: 16px;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .75); transition: border-color .2s ease, box-shadow .2s ease;
}
.sv3--screener .sv3-sh .qsr-box input { text-overflow: ellipsis; }
.sv3--screener .sv3-sh .qsr-box input::placeholder { color: var(--sv3-muted); opacity: 1; }
@media (max-width: 379.98px) { .sv3--screener .sv3-sh .qsr-box input::placeholder { font-size: 14px; } }
.sv3--screener .sv3-sh .qsr-box input:focus { border-color: var(--sv3-brand); box-shadow: 0 0 0 2px var(--sv3-sh-teal), 0 0 0 7px rgba(95, 207, 199, .2), 0 14px 34px -16px rgba(0, 0, 0, .75); }
.sv3--screener .sv3-sh .qsr-icon { inset-inline-start: 16px; width: 20px; height: 20px; stroke: var(--sv3-brand); stroke-width: 2.2; }
.sv3--screener .sv3-sh .qsr-list { position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 30; margin: 0; background: var(--sv3-surface); box-shadow: 0 18px 40px rgba(7, 20, 40, .28); }
.sv3-sh .sv3-sh__kbd { display: none; }

/* The market switch: one segmented control at every width (the five markets fit at 390); a row that still scrolls
   (320) fades at its end, and so does the ready-lists strip (data-sv3-more, stock-v3.js §17). */
.sv3-sh .sv3-sh__markets {
  display: flex; flex: none; gap: 0; max-width: 100%; margin: 0; padding: 3px; border: 1px solid var(--sv3-sh-glass-line); border-radius: 12px;
  background: rgba(255, 255, 255, .04); overflow-x: auto; scrollbar-width: none;
}
.sv3-sh [data-sv3-more="1"] { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.sv3-sh .sv3-sh__markets::-webkit-scrollbar { display: none; }
.sv3-sh .sv3-sh__mk {
  display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--sv3-night-ink);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sv3-sh .sv3-sh__mk:hover { background: var(--sv3-sh-glass-2); color: #fff; }
.sv3-sh .sv3-sh__mk[aria-current="page"], .sv3-sh .sv3-sh__mk[aria-current="page"]:hover { background: #fff; color: var(--sv3-night); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
.sv3-sh .sv3-sh__mk:focus-visible { outline: 2px solid var(--sv3-sh-gold); outline-offset: 2px; }
.sv3-sh .sv3-sh__n { display: none; font-size: 11px; font-weight: 600; opacity: .72; }

/* The Sharia snapshot. Below 1025px: the title and the readout of the chosen bucket, a bar of the four buckets, then
   the five buttons as cells (a colour tab on top of each). */
.sv3-sh .sv3-sh__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head ro" "bar bar" "pills pills" "foot foot";
  align-items: center; gap: 10px 12px; padding: 12px; border-radius: 16px; background: var(--sv3-surface); color: var(--sv3-ink);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85);
}
.sv3-sh .sv3-sh__card::before {
  content: ''; position: absolute; top: 0; inset-inline: 18px; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--sv3-sh-gold), var(--sv3-sh-teal));
}
.sv3-sh .sv3-sh__card-head { grid-area: head; min-width: 0; }
.sv3-sh .sv3-sh__card-title { margin: 0; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.4; color: var(--sv3-ink); white-space: nowrap; text-overflow: ellipsis; }
.sv3-sh .sv3-sh__card-note { display: none; margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-sh .sv3-sh__viz { display: contents; }
.sv3-sh .sv3-sh__card-foot { display: none; grid-area: foot; margin: 0; font-size: 12px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-sh .sv3-sh__card-foot .sv3-num { font-weight: 700; color: var(--sv3-ink-2); }
.sv3-sh .sv3-sh__key { display: inline-block; width: 8px; height: 8px; margin-inline: 4px 3px; border-radius: 2px; vertical-align: 0; }
.sv3-sh .sv3-sh__ring { display: none; }
.sv3-sh .sv3-sh__bar { grid-area: bar; display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--sv3-line-2); }
.sv3-sh .sv3-sh__bar .sv3-sh__seg { flex: var(--v) 1 0; min-width: 3px; cursor: pointer; transition: opacity .25s ease; }
.sv3-sh .sv3-sh__readout { grid-area: ro; display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 12px; line-height: 1.3; color: var(--sv3-muted); white-space: nowrap; }
.sv3-sh .sv3-sh__readout [data-sv3-ro-l] { order: 1; font-weight: 700; color: var(--sv3-ink-2); }
.sv3-sh .sv3-sh__readout b { order: 2; min-width: 4.6ch; font-size: 15px; font-weight: 800; color: var(--sv3-ink); text-align: center; }
.sv3-sh .sv3-sh__readout [data-sv3-ro-p] { order: 3; font-weight: 700; }
@media (max-width: 1024.98px) {
  .sv3-sh .sv3-sh__card[data-sv3-focus="all"] .sv3-sh__readout { display: none; }
  .sv3-sh .sv3-sh__card[data-sv3-focus="all"] .sv3-sh__card-note { display: block; }
}

/* The bucket colours: [dot/strip, tint, line] per button, and the arcs and bar segments. */
.sv3-sh .sv3-sh__pill--all { --sv3-sh-c: var(--sv3-brand); --sv3-sh-bg: var(--sv3-neutral-bg); --sv3-sh-ln: var(--sv3-brand); }
.sv3-sh .sv3-sh__pill--halal { --sv3-sh-c: var(--sv3-sh-halal); --sv3-sh-bg: var(--sv3-halal-bg); --sv3-sh-ln: var(--sv3-sh-halal); }
.sv3-sh .sv3-sh__pill--mix { --sv3-sh-c: var(--sv3-sh-mix); --sv3-sh-bg: var(--sv3-mix-bg); --sv3-sh-ln: var(--sv3-sh-mix); }
.sv3-sh .sv3-sh__pill--haram { --sv3-sh-c: var(--sv3-sh-haram); --sv3-sh-bg: var(--sv3-haram-bg); --sv3-sh-ln: var(--sv3-sh-haram); }
.sv3-sh .sv3-sh__pill--nc { --sv3-sh-c: var(--sv3-sh-review); --sv3-sh-bg: var(--sv3-neutral-bg); --sv3-sh-ln: var(--sv3-sh-review); }
.sv3-sh .sv3-sh__seg--halal { stroke: var(--sv3-sh-halal); background: var(--sv3-sh-halal); }
.sv3-sh .sv3-sh__seg--mix { stroke: var(--sv3-sh-mix); background: var(--sv3-sh-mix); }
.sv3-sh .sv3-sh__seg--haram { stroke: var(--sv3-sh-haram); background: var(--sv3-sh-haram); }
.sv3-sh .sv3-sh__seg--review { stroke: var(--sv3-sh-review); background: var(--sv3-sh-review); }

.sv3-sh .sv3-sh__status {
  grid-area: pills; display: grid; grid-template-columns: repeat(5, auto); gap: 4px; margin: 0; padding: 0; overflow: visible;
}
.sv3-sh .sv3-sh__pill {
  position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; gap: 2px 5px;
  min-width: 0; min-height: 52px; padding: 9px 4px 6px; border: 1px solid var(--sv3-line); border-radius: 10px;
  background: var(--sv3-surface); color: var(--sv3-ink); font: 600 11.5px/1.3 var(--font-primary, 'Almarai', sans-serif);
  text-align: center; white-space: normal; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sv3-sh .sv3-sh__lbl { flex: 0 0 100%; color: var(--sv3-ink-2); }
.sv3-sh .sv3-sh__pill b { font-size: 13.5px; font-weight: 800; color: var(--sv3-ink); }
.sv3-sh .sv3-sh__dot { position: absolute; top: -1px; inset-inline: 12px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sv3-sh-c); }
.sv3-sh .sv3-sh__pill--all .sv3-sh__dot { background: linear-gradient(90deg, var(--sv3-sh-halal) 0 25%, var(--sv3-sh-mix) 0 50%, var(--sv3-sh-haram) 0 75%, var(--sv3-sh-review) 0); }
.sv3-sh .sv3-sh__pill--nc .sv3-sh__dot { background: linear-gradient(90deg, var(--sv3-sh-haram) 0 50%, var(--sv3-sh-review) 0); }
.sv3-sh .sv3-sh__pill[aria-pressed="true"] { border-color: var(--sv3-sh-ln); background: var(--sv3-sh-bg); box-shadow: inset 0 0 0 1px var(--sv3-sh-ln); }
.sv3-sh .sv3-sh__pill[aria-pressed="true"] .sv3-sh__lbl { color: var(--sv3-ink); font-weight: 800; }
.sv3-sh .sv3-sh__pill:focus-visible { outline: 2px solid var(--sv3-brand); outline-offset: 2px; }
@media (hover: hover) {
  .sv3-sh .sv3-sh__pill:hover, .sv3-sh .sv3-sh__pill.is-preview { background: var(--sv3-tile); border-color: var(--sv3-sh-ln); }
  .sv3-sh .sv3-sh__pill[aria-pressed="true"]:hover { background: var(--sv3-sh-bg); }
}

/* The ring and the bar follow the bucket chosen or hovered (data-sv3-focus on the card): the others fade. */
.sv3-sh .sv3-sh__card[data-sv3-focus="halal"] .sv3-sh__seg:not(.sv3-sh__seg--halal),
.sv3-sh .sv3-sh__card[data-sv3-focus="mixed"] .sv3-sh__seg:not(.sv3-sh__seg--mix),
.sv3-sh .sv3-sh__card[data-sv3-focus="haram"] .sv3-sh__seg:not(.sv3-sh__seg--haram),
.sv3-sh .sv3-sh__card[data-sv3-focus="non_compliant"] .sv3-sh__seg:not(.sv3-sh__seg--haram):not(.sv3-sh__seg--review),
.sv3-sh .sv3-sh__card[data-sv3-focus="compatible"] .sv3-sh__seg:not(.sv3-sh__seg--halal):not(.sv3-sh__seg--mix),
.sv3-sh .sv3-sh__card[data-sv3-focus="unknown"] .sv3-sh__seg:not(.sv3-sh__seg--review) { opacity: .2; stroke-width: 12; }

/* The ready lists: a white strip of chips on phones. */
.sv3-sh .sv3-sh__presets { position: relative; background: var(--sv3-surface); border-bottom: 1px solid var(--sv3-line); }
.sv3-sh .sv3-sh__presets-in {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding-block: 8px; overflow-x: auto; scrollbar-width: none;
}
.sv3-sh .sv3-sh__presets-in::-webkit-scrollbar { display: none; }
.sv3-sh .sv3-sh__presets a {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--sv3-line); border-radius: 999px; background: var(--sv3-surface); color: var(--sv3-ink-2);
  font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sv3-sh .sv3-sh__presets .sv3-sh__ico { width: 16px; height: 16px; color: var(--sv3-brand); transition: color .2s ease; }

/* Tablets and up: badges, the full sub, the segmented switch, the card's note and shares, the chips inside the navy. */
@media (min-width: 720px) {
  .sv3-sh .sv3-sh__in { gap: 16px; padding-block: 12px 22px; }
  .sv3-sh .sv3-sh__title h1 { font-size: 26px; line-height: 1.4; }
  .sv3-sh .sv3-sh__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; line-height: 1.4; }
  .sv3-sh .sv3-sh__badge {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 3px 11px;
    border: 1px solid var(--sv3-sh-glass-line); border-radius: 999px; background: var(--sv3-sh-glass); font-size: 12.5px; white-space: nowrap;
  }
  .sv3-sh .sv3-sh__badge .sv3-sh__ico { margin: 0; }
  .sv3-sh .sv3-sh__sub { display: block; max-width: none; margin-top: 12px; font-size: 13.5px; -webkit-line-clamp: unset; }
  .sv3-sh .sv3-sh__markets { align-self: flex-start; gap: 2px; padding: 4px; }
  .sv3-sh .sv3-sh__mk { flex: 0 0 auto; min-height: 40px; padding: 0 14px; }
  .sv3-sh .sv3-sh__n { display: inline-block; }
  .sv3-sh .sv3-sh__card { gap: 12px 16px; padding: 16px; border-radius: 18px; }
  .sv3-sh .sv3-sh__card-title { font-size: 14.5px; }
  .sv3-sh .sv3-sh__card-note { display: block; }
  .sv3-sh .sv3-sh__card-foot { display: block; }
  .sv3-sh .sv3-sh__readout { font-size: 13px; }
  .sv3-sh .sv3-sh__readout b { font-size: 17px; }
  .sv3-sh .sv3-sh__bar { height: 10px; }
  .sv3-sh .sv3-sh__status { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .sv3-sh .sv3-sh__pill { min-height: 58px; padding: 10px 8px 8px; font-size: 12.5px; }
  .sv3-sh .sv3-sh__pill b { font-size: 15px; }
  .sv3-sh .sv3-sh__pct { position: static; display: inline-block; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 11.5px; font-weight: 700; color: var(--sv3-muted); }
  .sv3-sh .sv3-sh__presets { background: transparent; border-bottom: 0; }
  .sv3-sh .sv3-sh__presets-in {
    gap: 6px; padding-block: 12px 18px;
    background: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .09)) center top / calc(100% - 48px) 1px no-repeat;
  }
  .sv3-sh .sv3-sh__presets-label { position: static; width: auto; height: auto; margin: 0; margin-inline-end: 4px; overflow: visible; clip: auto; font-size: 12px; font-weight: 700; color: var(--sv3-night-muted); }
  .sv3-sh .sv3-sh__presets a {
    gap: 5px; min-height: 36px; padding: 0 11px; border-color: var(--sv3-sh-glass-line); background: rgba(255, 255, 255, .03); color: var(--sv3-night-ink); font-size: 12px; font-weight: 600;
  }
  .sv3-sh .sv3-sh__presets .sv3-sh__ico { width: 14px; height: 14px; color: var(--sv3-sh-gold); }
  .sv3-sh .sv3-sh__presets a:hover { border-color: var(--sv3-sh-gold); background: rgba(240, 188, 85, .1); color: #fff; }
  .sv3-sh .sv3-sh__presets a:hover .sv3-sh__ico { color: #fff; }
  .sv3-sh .sv3-sh__presets a:focus-visible { outline: 2px solid var(--sv3-sh-gold); outline-offset: 2px; }
}

/* Desktop: the split. The card's ring sits beside its legend rows; the readout is the ring's centre. */
@media (min-width: 1025px) {
  .sv3-sh .sv3-sh__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 468px); align-items: center; gap: 24px 56px; padding-block: 12px 24px; }
  .sv3-sh .sv3-sh__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .sv3-sh .sv3-sh__title h1 { font-size: 30px; line-height: 1.38; }
  .sv3-sh .sv3-sh__sub { font-size: 14px; }
  .sv3-sh .sv3-sh__card {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "viz pills" "foot foot"; gap: 14px 22px; padding: 18px 20px 14px;
    border-radius: 20px; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
  }
  .sv3-sh .sv3-sh__card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--sv3-line-2); }
  .sv3-sh .sv3-sh__card-note { margin: 0; }
  .sv3-sh .sv3-sh__card-foot { padding-top: 10px; border-top: 1px solid var(--sv3-line-2); }
  .sv3-sh .sv3-sh__card-title { font-size: 15.5px; }
  .sv3-sh .sv3-sh__viz { grid-area: viz; position: relative; display: block; width: 168px; aspect-ratio: 1; }
  .sv3-sh .sv3-sh__ring { display: block; width: 100%; height: 100%; overflow: visible; }
  .sv3-sh .sv3-sh__bar { display: none; }
  .sv3-sh .sv3-sh__readout {
    position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-align: center; white-space: normal; pointer-events: none;
  }
  .sv3-sh .sv3-sh__readout b { order: 1; font-size: 26px; line-height: 1.1; }
  .sv3-sh .sv3-sh__readout [data-sv3-ro-l] { order: 2; max-width: 100px; font-size: 12px; line-height: 1.35; }
  .sv3-sh .sv3-sh__readout [data-sv3-ro-p] { order: 3; padding: 1px 8px; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 11.5px; color: var(--sv3-ink-2); }
  .sv3-sh .sv3-sh__status { display: flex; flex-direction: column; gap: 3px; }
  .sv3-sh .sv3-sh__pill {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px;
    min-height: 37px; padding: 0 12px; border-color: transparent; background: transparent; font-size: 13.5px; text-align: start;
  }
  .sv3-sh .sv3-sh__lbl { white-space: nowrap; }
  .sv3-sh .sv3-sh__pill b { font-size: 14px; text-align: end; }
  .sv3-sh .sv3-sh__pct { text-align: end; font-size: 12px; }
  .sv3-sh .sv3-sh__dot { position: static; width: 10px; height: 10px; border-radius: 50%; transition: box-shadow .2s ease; }
  .sv3-sh .sv3-sh__pill--all .sv3-sh__dot { background: conic-gradient(var(--sv3-sh-halal) 0 25%, var(--sv3-sh-mix) 0 50%, var(--sv3-sh-haram) 0 75%, var(--sv3-sh-review) 0); }
  .sv3-sh .sv3-sh__pill--nc .sv3-sh__dot { background: conic-gradient(var(--sv3-sh-haram) 0 50%, var(--sv3-sh-review) 0); }
  .sv3-sh .sv3-sh__pill[aria-pressed="true"] { border-color: var(--sv3-sh-ln); box-shadow: none; }
  .sv3-sh .sv3-sh__pill[aria-pressed="true"] .sv3-sh__dot { box-shadow: 0 0 0 3px var(--sv3-surface), 0 0 0 5px var(--sv3-sh-c); }
  .sv3-sh .sv3-sh__track { fill: none; stroke: var(--sv3-line-2); stroke-width: 12; }
  .sv3-sh circle.sv3-sh__seg { fill: none; stroke-width: 12; cursor: pointer; transition: opacity .25s ease, stroke-width .25s ease; }
  .sv3-sh .sv3-sh__card:not([data-sv3-focus="all"]) circle.sv3-sh__seg { stroke-width: 15; }
  .sv3-sh .sv3-sh__markets { padding: 4px; }
  .sv3-sh .sv3-sh__mk { min-height: 38px; }
  @media (hover: hover) and (pointer: fine) {
    .sv3-sh .sv3-sh__kbd {
      position: absolute; top: calc(var(--sv3-sh-q-h) / 2); inset-inline-end: 12px; display: inline-grid; place-items: center;
      min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--sv3-line); border-bottom-width: 2px; border-radius: 7px;
      background: var(--sv3-tile); color: var(--sv3-muted); font: 700 13px/1 var(--font-primary, 'Almarai', sans-serif);
      transform: translateY(-50%); pointer-events: none; transition: opacity .15s ease;
    }
    .sv3--screener .sv3-sh .qsr-box input { padding-inline-end: 52px; }
    .sv3-sh .sv3-sh__search:has(input:focus) .sv3-sh__kbd, .sv3-sh .sv3-sh__search:has(input:not(:placeholder-shown)) .sv3-sh__kbd { opacity: 0; }
  }
}
@media (min-width: 1025px) { .sv3-sh .sv3-sh__presets-in { flex-wrap: wrap; overflow: visible; } }
/* Any touch screen (tablets too): 44px targets for the switch and the ready lists. */
@media (pointer: coarse) { .sv3-sh :is(.sv3-sh__mk, .sv3-sh__presets a, .sv3-sh__pill) { min-height: 44px; } }
@media (min-width: 1200px) { .sv3-sh .sv3-sh__title h1 { font-size: 34px; } }

/* Motion: the ring fades in once; the light and the counts move only for visitors who allow motion (§17). */
/* On the <svg> box, never on the arcs' <g>: its rotate(-90 60 60) attribute IS its CSS transform, so a CSS animation or
   transform-origin there moves the arcs off the track. */
@keyframes sv3-sh-ring { from { opacity: 0; transform: rotate(-24deg) scale(.94); } }
@media (prefers-reduced-motion: no-preference) {
  .sv3-sh .sv3-sh__ring { animation: sv3-sh-ring .7s cubic-bezier(.22, .7, .2, 1) .1s backwards; }
  .sv3-sh .sv3-sh__presets a:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .sv3-sh .sv3-sh__glow { display: none; }
}

/* 15.3 The page column: one column of cards in the mobile board's order; the desktop grids from 900 / 1025px. */
.sv3-sc { display: flex; flex-direction: column; gap: var(--sv3-sc-gap); padding-block: 12px 96px; }
@media (min-width: 1025px) { .sv3-sc { padding-block: 18px 60px; } }
.sv3-sc :is(.container, .container-xl) { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
.sv3--screener :is(.sector-hub-section, .sv3-sc-standard, .trust-section, .sv3-sc-guide, .home-stock-news, .sv3-sc-faq, .sv3-sc-ipos) {
  margin: 0; padding: 14px; background: var(--sv3-surface); border: 1px solid var(--sv3-line); border-radius: 16px;
}
@media (min-width: 720px) {
  .sv3--screener :is(.sector-hub-section, .sv3-sc-standard, .trust-section, .sv3-sc-guide, .home-stock-news, .sv3-sc-faq, .sv3-sc-ipos) { padding: 18px; border-radius: var(--sv3-radius); }
}
.sv3.sv3--screener .home-stock-news { padding-block: 14px; }
@media (min-width: 720px) { .sv3.sv3--screener .home-stock-news { padding-block: 18px; } }
/* Headings and their lines, the same in every card. */
.sv3--screener :is(.section-head h2, .sector-hub-header h2, .editorial h2, .home-stock-news .hsn-h2, .ipo-promo__title) { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--sv3-ink); }
@media (min-width: 720px) { .sv3--screener :is(.section-head h2, .sector-hub-header h2, .editorial h2, .home-stock-news .hsn-h2) { font-size: 19px; } }
.sv3--screener :is(.section-head, .sector-hub-header) { max-width: none; margin: 0 0 10px; text-align: start; }
.sv3--screener :is(.section-head p, .sector-hub-header p, .home-stock-news .hsn-intro) { max-width: none; margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--sv3-muted); }
.sv3--screener :is(.section-head .eyebrow, .editorial-label) { display: block; width: fit-content; margin: 0 0 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--sv3-up-ink); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Chips: the sectors, the references, the tools, the ready lists inside cards. */
.sv3--screener :is(.sector-hub-card, .authority-card, .tool-card) {
  display: inline-flex; flex-direction: row; align-items: center; gap: 4px; min-height: 36px; margin: 0; padding: 6px 12px;
  border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); box-shadow: none; color: var(--sv3-ink-2); text-align: start; text-decoration: none; transform: none;
}
.sv3--screener :is(.sector-hub-card, .authority-card, .tool-card):hover { background: var(--sv3-line); box-shadow: none; transform: none; color: var(--sv3-ink); }
.sv3--screener :is(.sector-hub-card, .authority-card, .tool-card)::before, .sv3--screener :is(.sector-hub-card, .authority-card, .tool-card)::after { content: none; }
.sv3--screener :is(.shc-icon, .authority-icon, .tool-card .icon) { display: none; }
.sv3--screener :is(.shc-name, .authority-card h3, .tool-card h3) { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: inherit; }
.sv3--screener .shc-count { font-size: 12px; font-weight: 400; color: var(--sv3-muted); white-space: nowrap; flex-shrink: 0; }
.sv3--screener :is(.sector-hub-card) .shc-name { min-width: 0; flex: 1 1 auto; }

/* 15.4 Filters and results. Desktop (≥ 1025px): the filters in a 290px card beside the results, the upcoming IPOs
   closing that card; the toolbar, the table and «عرض المزيد» in the results column. */
.sv3.sv3--screener .screener-section { padding: 0; background: none; }
.sv3.sv3--screener .filter-mobile-toggle { display: none; }
.sv3--screener .results-area { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sv3.sv3--screener .results-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); background: var(--sv3-surface); }
.sv3-sc-views { display: flex; order: 1; gap: 6px; }
.sv3--screener .results-count { display: flex; flex: 1 1 auto; order: 2; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; }
.sv3--screener .results-count > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.sv3--screener .results-count .num-result { font: 700 13px var(--font-primary, 'Almarai', sans-serif); color: var(--sv3-ink); }
.sv3--screener .results-count .label { font-size: 12px; font-weight: 600; color: var(--sv3-ink-2); }
.sv3--screener .results-count .sub { font-size: 12px; font-weight: 400; color: var(--sv3-muted); }
.sv3--screener .results-count .sub::before { content: '· '; }
.sv3.sv3--screener .view-toggle { display: flex; order: 3; gap: 6px; padding: 0; border: 0; background: none; }
.sv3.sv3--screener .view-btn[data-view="table"] { order: -1; }
.sv3--screener .sort-dropdown { order: 4; }
.sv3.sv3--screener :is(.sv3-sc-view, .view-btn, .sort-btn) { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px solid var(--sv3-line); border-radius: 8px; background: var(--sv3-surface); color: var(--sv3-ink-2); font: 600 13px var(--font-primary, 'Almarai', sans-serif); white-space: nowrap; cursor: pointer; box-shadow: none; }
.sv3.sv3--screener :is(.sv3-sc-view[aria-pressed="true"], .view-btn.active) { border-color: var(--sv3-night); background: var(--sv3-night); color: #fff; }
/* The map view, first and marked until it has been opened once (owner, 2026-10-26): a teal-to-gold ring, its icon, a gold
   dot, and — once the button is on screen (.is-live, stock-v3.js §19) — a pulse rippling out of it, the dot pulsing with
   it and a light sweep every few seconds, for about twenty seconds. Opening the map (.is-seen) ends it for good; reduced
   motion keeps the ring, the icon and the dot only. */
.sv3.sv3--screener .sv3-sc-view--map { position: relative; overflow: hidden; isolation: isolate; gap: 6px; }
.sv3.sv3--screener .sv3-sc-view--map:not([aria-pressed="true"]) {
  border: 1.5px solid transparent; color: var(--sv3-brand); font-weight: 700;
  background: linear-gradient(var(--sv3-surface), var(--sv3-surface)) padding-box, linear-gradient(120deg, var(--sv3-brand), var(--sv3-gold-light)) border-box;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sv3.sv3--screener .sv3-sc-view--map:not([aria-pressed="true"]):hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(14, 124, 123, .55); }
.sv3-sc-view__ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sv3-sc-view__dot { position: absolute; top: 4px; inset-inline-end: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sv3-gold-light); }
.sv3.sv3--screener .sv3-sc-view--map:not([aria-pressed="true"])::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(14, 124, 123, .16) 50%, transparent 70%); transform: translateX(-110%);
}
.sv3.sv3--screener .sv3-sc-view--map:is([aria-pressed="true"], .is-seen) .sv3-sc-view__dot { display: none; }
/* The ripple is the button's own box-shadow, which its overflow: hidden (kept for the sweep) does not clip. */
@keyframes sv3-map-pulse { 0% { box-shadow: 0 0 0 0 rgba(14, 124, 123, .5); } 70%, 100% { box-shadow: 0 0 0 11px rgba(14, 124, 123, 0); } }
@keyframes sv3-map-sweep { 0% { transform: translateX(-110%); } 40%, 100% { transform: translateX(110%); } }
@keyframes sv3-map-dot { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 168, 58, .6); } 40% { transform: scale(1.25); } 70%, 100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(229, 168, 58, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .sv3.sv3--screener .sv3-sc-view--map.is-live:not([aria-pressed="true"]):not(.is-seen) { animation: sv3-map-pulse 2.2s ease-out .3s 9; }
  .sv3.sv3--screener .sv3-sc-view--map.is-live:not([aria-pressed="true"]):not(.is-seen)::after { animation: sv3-map-sweep 4.4s ease-in-out .6s 4; }
  .sv3.sv3--screener .sv3-sc-view--map.is-live:not(.is-seen) .sv3-sc-view__dot { animation: sv3-map-dot 2.2s ease-out .3s 9; }
  .sv3.sv3--screener .sv3-sc-view--map:not([aria-pressed="true"]):hover { animation: none; }
}
.sv3.sv3--screener .view-btn > span:first-child, .sv3.sv3--screener .sort-btn .icon { display: none; }
.sv3.sv3--screener .view-btn > span:last-child { display: inline; }
.sv3.sv3--screener .sort-btn .arrow { font-size: 9px; color: var(--sv3-muted); }
.sv3.sv3--screener .sort-menu { border-color: var(--sv3-line); background: var(--sv3-surface); }
.sv3--screener .active-filters { margin: 0; }
.sv3--screener .active-filter-chip { border-width: 1px; font-weight: 600; }
.sv3.sv3--screener .stk-empty-state { padding: 32px 16px; border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); background: var(--sv3-surface); }
/* The table: the board's columns, the verdict as a word. */
.sv3.sv3--screener .stocks-table-wrap { border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); background: var(--sv3-surface); }
.sv3.sv3--screener .stocks-table { font-size: 14px; }
.sv3.sv3--screener .stocks-table :is(th, td) { padding: 10px 12px; text-align: start; }
.sv3.sv3--screener .stocks-table th { background: var(--sv3-tile); color: var(--sv3-muted); font-size: 12px; font-weight: 600; }
.sv3.sv3--screener .stocks-table td { height: 52px; border-bottom: 1px solid var(--sv3-line-2); font-size: 14px; }
.sv3.sv3--screener .stocks-table tbody tr:hover td { background: var(--sv3-tile); }
.sv3.sv3--screener .stocks-table th:nth-child(1) { width: 31%; }
.sv3.sv3--screener .stocks-table th:nth-child(2) { width: 12%; }
.sv3.sv3--screener .stocks-table th:nth-child(3) { width: 11%; }
.sv3.sv3--screener .stocks-table th:nth-child(4) { width: 14%; }
.sv3.sv3--screener .stocks-table th:nth-child(5) { width: 9%; }
.sv3.sv3--screener .stocks-table th:nth-child(6) { width: 10%; }
.sv3.sv3--screener .stocks-table th:nth-child(7) { width: 13%; }
.sv3.sv3--screener .stocks-table td.stock-cell .stock-cell-link { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "logo ticker" "logo name"; align-content: center; column-gap: 10px; }
.sv3.sv3--screener .stocks-table .stock-cell-logo { grid-area: logo; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 8px; background: var(--sv3-neutral-bg); color: var(--sv3-navy); font-size: 9px; font-weight: 800; }
.sv3.sv3--screener .stocks-table .stock-cell-logo img { width: 100%; height: 100%; object-fit: contain; }
.sv3.sv3--screener .stocks-table td.stock-cell .stock-cell-link { min-height: 40px; }
.sv3.sv3--screener .stocks-table td.stock-cell .ticker { grid-area: ticker; justify-self: start; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--sv3-ink); }
.sv3.sv3--screener .stocks-table td.stock-cell .name { grid-area: name; justify-self: stretch; margin: 0; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--sv3-muted); text-align: start; text-overflow: ellipsis; white-space: nowrap; }
.sv3.sv3--screener .stocks-table :is(td.num-cell, td.change-cell) { font-family: inherit; font-weight: 400; color: var(--sv3-ink); text-align: start; }
.sv3.sv3--screener .stocks-table td.num-cell:nth-child(2) { font-weight: 600; }
.sv3.sv3--screener .stocks-table td.change-cell { font-weight: 600; }
.sv3.sv3--screener .stocks-table td.change-cell.up { color: var(--sv3-up); }
.sv3.sv3--screener .stocks-table td.change-cell.down { color: var(--sv3-dn); }
.sv3.sv3--screener .stocks-table td.halal-cell { text-align: start; }
.sv3.sv3--screener .stocks-table .halal-mini-badge { width: auto; min-width: 58px; height: auto; padding: 3px 10px; border-radius: 999px; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); font-size: 12px; font-weight: 600; line-height: 1.5; }
.sv3.sv3--screener .stocks-table .halal-mini-badge::before { content: none; }
.sv3.sv3--screener .stocks-table .halal-mini-badge::after { content: attr(title); }
.sv3.sv3--screener .stocks-table .halal-mini-badge.halal { background: var(--sv3-up-bg); color: var(--sv3-up-ink); }
.sv3.sv3--screener .stocks-table .halal-mini-badge:is(.mix, .mixed) { background: var(--sv3-warn-bg); color: var(--sv3-warn-ink); }
.sv3.sv3--screener .stocks-table .halal-mini-badge.haram { background: var(--sv3-dn-bg); color: var(--sv3-dn-ink); }
/* «عرض المزيد», then the links to every list. */
.sv3-sc-more { display: flex; justify-content: center; }
.sv3-sc-more[hidden] { display: none; }
.sv3-sc-more__btn { min-height: 44px; padding: 0 24px; border: 1px solid var(--sv3-night); border-radius: 8px; background: var(--sv3-night); color: #fff; font: 700 14px var(--font-primary, 'Almarai', sans-serif); cursor: pointer; }
.sv3-sc-more__btn:disabled { opacity: .6; cursor: progress; }
.sv3.sv3--screener .stocks-view-all-wrap { gap: 8px; padding: 4px 0 0; }
.sv3.sv3--screener .stocks-view-all-btn { padding: 0; background: none; color: var(--sv3-brand); font-size: 14px; font-weight: 700; }
.sv3.sv3--screener .stocks-view-all-btn:hover { background: none; text-decoration: underline; transform: none; }
.sv3.sv3--screener .stocks-sub-links { gap: 6px 10px; font-size: 13px; }
.sv3--screener .sv3-off { display: none !important; }
/* The heatmap view. */
.sv3-map-panel[hidden] { display: none; }
.sv3-map-panel .heatmap-section { padding: 0 !important; background: none; }
.sv3-map-panel .heatmap-grid[data-heatmap-loaded="true"] { min-height: 0; }
.sv3-map-panel .heatmap-wrap { border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); box-shadow: none; }
/* 15.4.1 The heatmap «terminal» (stock-v3.js §18): one squarified treemap on a night canvas, sectors and tiles sized by
   market cap. The day reads on a 7-step diverging scale, flat only under 0.1% and stepping at 1% and 3%, so nearly every
   tile shows its direction at a glance; the year reads on a one-sided scale of the rise from the year's low (0 · 5% ·
   15% · 30%), with a grey step for a figure below the stored low. The Sharia row hatches the other verdicts and rings the
   matching ones; a sector's strip zooms into it. The canvas keeps a fixed ratio before the tiles arrive, and the crumb
   bar and the legend's ticks are reserved before the script adds them, so nothing below moves.
   Tile text (bg / text, WCAG contrast): −3 #F26A72/#1B0609 6.6:1 · −2 #C8323E/#fff 5.3:1 · −1 #8C2A39/#fff 8.4:1 ·
   0 #2E3D55/#fff 11.0:1 · +1 #0B6234/#fff 7.5:1 · +2 #118649/#fff 4.6:1 · +3 #34C27A/#04170D 8.1:1; the year: below
   the low #4E5562/#fff 7.5:1 · under 5% #1F4D47/#fff 9.5:1, then the +1, +2 and +3 pairs; dimmed #0D1A2E/#93A1B6 6.7:1
   (5.0:1 on its hatch) · strip #DCE4EF on #13264A 11.7:1. The ±1 steps sit 15-18 apart from the slate 0 step in OKLab
   (×100), against 12 before. The Sharia marks are shapes on a white disc (✓ ◐ ✕ ؟), so the verdict never rests on colour
   alone. Every rule here sits under .sv3--screener: stocks/index (V2) is untouched. */
.sv3--screener {
  --hm3-night: #0B1B33;
  --hm3-frame: #13264A;
  --hm3-c-n3: #F26A72; --hm3-t-n3: #1B0609;
  --hm3-c-n2: #C8323E;
  --hm3-c-n1: #8C2A39;
  --hm3-c-0: #2E3D55;
  --hm3-c-p1: #0B6234;
  --hm3-c-p2: #118649;
  --hm3-c-p3: #34C27A; --hm3-t-p3: #04170D;
  --hm3-c-y0: #4E5562;
  --hm3-c-y1: #1F4D47;
  --hm3-dim: #0D1A2E; --hm3-t-dim: #93A1B6;
  --hm3-halal: #0E8A55;
  --hm3-mix: #B8801A;
  --hm3-haram: #C8323D;
  --hm3-review: #4A5A72;
  --hm3-crumb-h: 36px;
  --hm3-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 719.98px) { .sv3--screener { --hm3-crumb-h: 50px; } }

/* The card. Its own padding on desktop; inside the results card on phones and tablets it drops the second frame. */
.sv3--screener .sv3-map-panel .heatmap-wrap { position: relative; padding: 20px 22px 16px; }
@media (max-width: 1099.98px) {
  .sv3--screener .sv3-map-panel .heatmap-wrap { padding: 6px 0 2px; border: 0; border-radius: 0; background: none; }
}
.sv3--screener .sv3-map-panel .heatmap-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; container-type: inline-size; }
.sv3--screener .sv3-map-panel .heatmap-title-block h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.5; color: var(--sv3-ink); }
.sv3--screener .sv3-map-panel .heatmap-title-block h2::before { content: none; }
.sv3--screener .sv3-map-panel .heatmap-title-block p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--sv3-muted); }
.sv3--screener .sv3-map-panel .heatmap-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
@media (min-width: 1100px) { .sv3--screener .sv3-map-panel .heatmap-controls { flex-wrap: nowrap; } }

/* The period and the Sharia row: two segmented controls of one height (36px; 44px for a finger). */
.sv3--screener .sv3-map-panel :is(.heatmap-mode, .hm3-filter) { display: flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-tile); }
.sv3--screener .sv3-map-panel :is(.heatmap-mode-btn, .hm3-filter__btn) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; margin: 0; padding: 0 12px; border: 0; border-radius: 7px; background: none; box-shadow: none; color: var(--sv3-ink-2); font: 700 13px/1 var(--font-primary, 'Almarai', sans-serif); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.sv3--screener .sv3-map-panel .heatmap-mode-btn.active { background: var(--hm3-night); color: #fff; box-shadow: none; }
.sv3--screener .sv3-map-panel .hm3-filter__btn[aria-pressed="true"] { background: #fff; color: var(--hm3-night); box-shadow: 0 1px 2px rgba(11, 27, 51, .14), inset 0 0 0 1px var(--sv3-line); }
.sv3--screener .sv3-map-panel .hm3-filter__btn:hover { color: var(--hm3-night); }
.sv3--screener .sv3-map-panel .hm3-filter__n { display: inline-block; min-width: 2ch; font-weight: 400; font-size: 12px; color: var(--sv3-muted); font-variant-numeric: tabular-nums; }
.sv3--screener .sv3-map-panel .hm3-filter__marks { display: inline-flex; gap: 2px; }
@media (pointer: coarse), (max-width: 719.98px) {
  .sv3--screener .sv3-map-panel :is(.heatmap-mode-btn, .hm3-filter__btn) { min-height: 44px; }
}

/* The legend: the scale's swatches (stock-v3.js §18 builds them, the day's seven or the year's grey step and four), red
   at the start beside «هبوط» and green at the end beside «صعود» — «قرب القاع» and «بعيد عنه» for the year, whose grey
   «دون القاع» step stands apart at the near end. Each swatch carries its own ticks, so a figure sits on the boundary it
   names and a step's name under its middle. The end words keep room for the year's longer pair, and the ticks' row is
   held open, before the script fills them. */
.sv3--screener .sv3-map-panel .heatmap-legend { position: relative; gap: 8px; min-width: 0; margin-inline-start: auto; padding-bottom: 15px; font-size: 12px; font-weight: 700; color: var(--sv3-muted); }
.sv3--screener .sv3-map-panel .heatmap-legend > span { flex: none; white-space: nowrap; }
@media (min-width: 720px) {
  .sv3--screener .sv3-map-panel .heatmap-legend > span { min-width: 4.7em; }
  .sv3--screener .sv3-map-panel .heatmap-legend > span:first-child { text-align: end; }
  .sv3--screener .sv3-map-panel .heatmap-legend > span:last-child { text-align: start; }
}
.sv3--screener .sv3-map-panel .legend-gradient { position: relative; display: flex; flex: 0 1 auto; align-items: stretch; gap: 0; width: 205px; width: clamp(120px, 100cqi - 680px, 238px); min-width: 120px; height: 12px; padding: 0; border: 0; border-radius: 3px; background: var(--sv3-line); }
.sv3--screener .sv3-map-panel .legend-gradient[data-hm3-scale] { background: none; }
.sv3--screener .hm3-sw { position: relative; flex: 1 1 0; min-width: 0; }
.sv3--screener .hm3-sw:first-child { border-start-start-radius: 3px; border-end-start-radius: 3px; }
.sv3--screener .hm3-sw:last-child { border-start-end-radius: 3px; border-end-end-radius: 3px; }
.sv3--screener .hm3-sw[data-hm3-c="y0"] { flex-grow: 1.4; margin-inline-end: 4px; border-radius: 3px; }
/* A tick is a zero-width box on its edge (or its swatch's middle) whose words overflow both ways, so it is centred on
   that point in either direction; a figure runs left to right («−3%»), a step's name in the page's direction. */
.sv3--screener .hm3-tk { position: absolute; top: calc(100% + 3px); display: flex; justify-content: center; width: 0; font-size: 10px; font-weight: 700; line-height: 12px; color: var(--sv3-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv3--screener .hm3-tk--start { inset-inline-start: 0; }
.sv3--screener .hm3-tk--end { inset-inline-end: 0; }
.sv3--screener .hm3-tk--mid { inset-inline-start: 50%; }
@media (max-width: 1099.98px) {
  .sv3--screener .sv3-map-panel .heatmap-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .sv3--screener .sv3-map-panel .hm3-filter { grid-column: 1 / -1; grid-row: 1; }
  .sv3--screener .sv3-map-panel .hm3-filter__btn { flex: 1 1 auto; padding: 0 8px; }
  .sv3--screener .sv3-map-panel .heatmap-legend { margin: 0; min-width: 0; }
  .sv3--screener .sv3-map-panel .legend-gradient { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (max-width: 419.98px) {
  .sv3--screener .sv3-map-panel .hm3-filter__btn { gap: 4px; padding: 0 5px; font-size: 12px; }
  .sv3--screener .sv3-map-panel .hm3-filter__n { font-size: 11px; }
  .sv3--screener .sv3-map-panel .heatmap-mode-btn { padding: 0 10px; }
  .sv3--screener .sv3-map-panel .heatmap-legend { gap: 5px; font-size: 11px; }
  .sv3--screener .hm3-tk { font-size: 9px; letter-spacing: -.2px; }
  .sv3--screener .hm3-sw[data-hm3-c="y0"] { flex-grow: 2.2; }   /* room under the grey step for its name */
}
/* Narrow phones (up to 389px): the Sharia row as two by two, then the period, then the legend on a row of its own. */
@media (max-width: 389.98px) {
  .sv3--screener .sv3-map-panel .heatmap-controls { grid-template-columns: minmax(0, 1fr); }
  .sv3--screener .sv3-map-panel .hm3-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .sv3--screener .sv3-map-panel .heatmap-mode-btn { flex: 1 1 0; }
}
/* From 1100px the controls are one row, and the bar is the part that gives: its width is worked out from the header's
   (the period, the Sharia row with its counts, the end words and the gaps take 680px), so it is right before the
   script adds the Sharia row and nothing moves when it does; 238px at most, 120px at least. 1100-1279: the Sharia counts step aside (the buttons keep their words, the crumb bar keeps the totals), the
   buttons and gaps tighten, and the bar starts from 164px; the scale's end words stay, and the grey step widens so
   its name clears the «0» beside it. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .sv3--screener .sv3-map-panel .heatmap-controls { gap: 8px; }
  .sv3--screener .sv3-map-panel .heatmap-controls .hm3-filter__n { display: none; }
  .sv3--screener .sv3-map-panel .heatmap-controls :is(.hm3-filter__btn, .heatmap-mode-btn) { gap: 4px; padding: 0 7px; }
  .sv3--screener .sv3-map-panel .heatmap-controls .legend-gradient { width: 164px; }
  .sv3--screener .sv3-map-panel .heatmap-legend { gap: 6px; }
  .sv3--screener .hm3-sw[data-hm3-c="y0"] { flex-grow: 2.2; }
}

/* The crumb bar heads the canvas: «كل القطاعات» (a way back once a sector is zoomed), the sector, then the totals, how
   many rose and fell (the year: how many sit 15% and more above their low, and under 5%) and the move weighted by
   market cap, all for the zoom and the Sharia row in force. Its height (and its 12px gap: the header keeps no margin,
   so no margin can collapse into the reserve) is held open before the script adds it. */
.sv3--screener .sv3-map-panel .heatmap-wrap:not(.hm3-on) .heatmap-grid { margin-top: calc(var(--hm3-crumb-h) + 12px); }
.sv3--screener .hm3-crumb { display: flex; margin-top: 12px; align-items: center; gap: 6px; height: var(--hm3-crumb-h); padding-block: 0; padding-inline: 6px 10px; border-radius: 10px 10px 0 0; background: var(--hm3-night); color: #C9D4E3; font-size: 12px; white-space: nowrap; overflow: hidden; }
.sv3--screener .hm3-crumb__root { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: #fff; font: 700 12px/1 var(--font-primary, 'Almarai', sans-serif); cursor: pointer; }
.sv3--screener .hm3-crumb__root:disabled { padding-inline: 2px; cursor: default; opacity: 1; }
.sv3--screener .hm3-crumb__root:not(:disabled) { background: rgba(255, 255, 255, .1); }
.sv3--screener .hm3-crumb__root:not(:disabled):hover { background: rgba(255, 255, 255, .18); }
.sv3--screener .hm3-crumb__back { display: none; font-size: 14px; line-height: 1; }
.sv3--screener .hm3-crumb.is-zoomed .hm3-crumb__back { display: inline; }
.sv3--screener .hm3-crumb__sep { color: #6F84A3; }
.sv3--screener .hm3-crumb:not(.is-zoomed) .hm3-crumb__sep { display: none; }
.sv3--screener .hm3-crumb__cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #9FB0C8; }
.sv3--screener .hm3-crumb.is-zoomed .hm3-crumb__cur { color: #fff; font-weight: 700; }
.sv3--screener .hm3-crumb__sum { flex: none; margin-inline-start: auto; color: #9FB0C8; font-variant-numeric: tabular-nums; }
.sv3--screener .hm3-crumb__vis { display: flex; align-items: center; gap: 8px; }
.sv3--screener .hm3-crumb__vis > * + *::before { content: '·'; margin-inline-end: 8px; color: #6F84A3; }
.sv3--screener .hm3-crumb__vis b { font-weight: 700; color: #DCE4EF; }
.sv3--screener .hm3-crumb :is(.is-up, .hm3-crumb__vis b.is-up) { color: #6FE0A6; }
.sv3--screener .hm3-crumb :is(.is-dn, .hm3-crumb__vis b.is-dn) { color: #FF9AA1; }
@media (max-width: 1279.98px) { .sv3--screener .hm3-crumb:not(.is-zoomed) .hm3-crumb__cur { display: none; } }
/* A phone keeps the way back and the readout: the breadth over the weighted move, two short lines in the bar's height. */
@media (max-width: 719.98px) {
  .sv3--screener .hm3-crumb { padding-inline: 4px 8px; }
  .sv3--screener .hm3-crumb__root { height: 36px; }
  .sv3--screener .hm3-crumb.is-zoomed .hm3-crumb__root { min-width: 44px; height: 44px; }
  .sv3--screener :is(.hm3-crumb__cur, .hm3-crumb__sep, .hm3-crumb__n) { display: none; }
  .sv3--screener .hm3-crumb__vis { flex-direction: column; align-items: end; gap: 2px; line-height: 1.3; }
  .sv3--screener .hm3-crumb__vis > * + *::before { content: none; }
}
@media (max-width: 389.98px) { .sv3--screener .hm3-crumb__wl { display: none; } }

/* The canvas: a fixed ratio from the first paint (2:1 desktop, 16:10 tablet, 2:3 phone), so the lazy tiles shift nothing. */
.sv3--screener .sv3-map-panel .heatmap-grid { position: relative; display: block; aspect-ratio: 2 / 1; min-height: 0; max-height: none; padding: 0; gap: 0; overflow: hidden; border-radius: 0 0 10px 10px; background: var(--hm3-night); transition: opacity .2s; }
@media (max-width: 1099.98px) { .sv3--screener .sv3-map-panel .heatmap-grid { aspect-ratio: 16 / 10; } }
@media (max-width: 719.98px) { .sv3--screener .sv3-map-panel .heatmap-grid { aspect-ratio: 2 / 3; } }
.sv3--screener .sv3-map-panel .heatmap-grid::after { content: none; }
.sv3--screener .sv3-map-panel .heatmap-grid > .stk-empty-state { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 16px; border: 0; background: none; color: #9FB0C8; font-size: 13px; }
.sv3--screener .sv3-map-panel .heatmap-more { display: none; }

/* Sectors and tiles are placed by the script (inset-inline-start/top/width/height in px). */
.sv3--screener .hm3-on .sector-group { position: absolute; display: block; margin: 0; padding: 0; overflow: hidden; border-radius: 3px; background: var(--hm3-frame); }
.sv3--screener .hm3-on .sector-group.hm3-zoomed { z-index: 2; }
.sv3--screener .hm3-on .sector-group.hm3-out { visibility: hidden; opacity: 0; }
.sv3--screener .hm3-on .sector-group-header { position: absolute; top: 0; inset-inline: 0; height: var(--hm3-strip, 24px); margin: 0; padding: 0; overflow: hidden; letter-spacing: 0; text-transform: none; }
.sv3--screener .hm3-on .sector-group.hm3-nostrip .sector-group-header { display: none; }
.sv3--screener .hm3-sec { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; margin: 0; padding: 0 6px; border: 0; border-radius: 0; background: none; color: #DCE4EF; font: 700 11px/1 var(--font-primary, 'Almarai', sans-serif); text-align: start; white-space: nowrap; cursor: zoom-in; }
.sv3--screener .hm3-zoomed .hm3-sec { cursor: zoom-out; }
.sv3--screener .hm3-sec > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sv3--screener .hm3-sec__en { flex: 0 1 auto; color: #9FB0C8; font-weight: 400; direction: ltr; unicode-bidi: isolate; }
.sv3--screener .hm3-sec__chg { flex: none; margin-inline-start: auto; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; color: #C9D4E3; }
.sv3--screener .hm3-sec__chg.is-up { color: #6FE0A6; }
.sv3--screener .hm3-sec__chg.is-dn { color: #FF9AA1; }
.sv3--screener .hm3-sec:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .08); }
.sv3--screener .hm3-sec:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 3px; }
.sv3--screener .sector-group[data-hm3-strip="mid"] .hm3-sec__en,
.sv3--screener .sector-group[data-hm3-strip="min"] :is(.hm3-sec__en, .hm3-sec__chg) { display: none; }
.sv3--screener .hm3-on .sector-group-tiles { position: absolute; display: block; margin: 0; }

.sv3--screener .hm3-on .hm-tile {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  min-height: 0; margin: 0; padding: 0 3px; overflow: hidden; border-radius: 2px; background: var(--hm3-c-0); color: #fff;
  box-shadow: none; outline: 0; transform: none; transition: none; text-align: center; line-height: 1;
}
/* The steps, on the tiles and on the legend's swatches. The year's 5-15%, 15-30% and 30%+ share the day's +1, +2, +3. */
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw)[data-hm3-c="-3"] { background: var(--hm3-c-n3); color: var(--hm3-t-n3); }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw)[data-hm3-c="-2"] { background: var(--hm3-c-n2); color: #fff; }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw)[data-hm3-c="-1"] { background: var(--hm3-c-n1); color: #fff; }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw)[data-hm3-c="0"] { background: var(--hm3-c-0); color: #fff; }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw):is([data-hm3-c="1"], [data-hm3-c="y2"]) { background: var(--hm3-c-p1); color: #fff; }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw):is([data-hm3-c="2"], [data-hm3-c="y3"]) { background: var(--hm3-c-p2); color: #fff; }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw):is([data-hm3-c="3"], [data-hm3-c="y4"]) { background: var(--hm3-c-p3); color: var(--hm3-t-p3); }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw)[data-hm3-c="y0"] { background: var(--hm3-c-y0); color: #fff; }
.sv3--screener :is(.hm3-on .hm-tile, .hm3-sw)[data-hm3-c="y1"] { background: var(--hm3-c-y1); color: #fff; }
/* The Sharia row: the other verdicts lose their colour for a dark hatch and muted words (still 5:1), their mark fades,
   and the matching tiles take a light ring, so a match never reads like a flat slate tile. */
.sv3--screener .hm3-on .hm-tile.hm3-dim[data-hm3-c] { background: var(--hm3-dim) repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 7px); color: var(--hm3-t-dim); }
.sv3--screener .hm3-on .hm-tile.hm3-dim .halal-dot { opacity: .4; }
.sv3--screener .hm3-on .hm3-filtering .hm-tile:not(.hm3-dim)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); pointer-events: none; }
.sv3--screener .hm3-on .hm-tile .tile-ticker { margin: 0; font: 800 var(--hm3-fs, 12px)/1 var(--font-primary, 'Almarai', sans-serif); letter-spacing: .01em; direction: ltr; white-space: nowrap; }
.sv3--screener .hm3-on .hm-tile .tile-change { margin: 0; font: 700 max(10px, calc(var(--hm3-fs, 12px) * .56))/1 var(--font-primary, 'Almarai', sans-serif); opacity: 1; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv3--screener .hm3-on .hm-tile .hm3-name { display: none; max-width: 100%; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.sv3--screener .hm3-on .hm-tile.hm3-named .hm3-name { display: block; }
.sv3--screener .hm3-on .hm-tile:is([data-hm3-t="s"], [data-hm3-t="xs"]) .tile-change,
.sv3--screener .hm3-on .hm-tile[data-hm3-t="xs"] .tile-ticker { display: none; }
@media (hover: hover) { .sv3--screener .hm3-on .hm-tile:hover { z-index: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92); transform: none; outline: 0; } }
.sv3--screener .hm3-on .hm-tile.hm3-sel { z-index: 1; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--hm3-night); }
.sv3.sv3--screener .hm3-on .hm-tile:focus-visible { z-index: 2; outline: 2px solid #fff; outline-offset: -2px; border-radius: 2px; box-shadow: inset 0 0 0 4px var(--hm3-night); }
/* A small tile tapped from the whole map: its sector zooms, and the tile is ringed while the eye finds it. */
.sv3--screener .hm3-on .hm-tile.hm3-flash { z-index: 1; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--hm3-night); animation: hm3-flash .6s ease-in-out .42s 3 alternate both; }
@keyframes hm3-flash { from { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--hm3-night); } to { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px var(--hm3-night); } }

/* The Sharia marks: a white disc and a shape — ✓ حلال · ◐ مختلط · ✕ حرام · ؟ قيد المراجعة. On a tile they sit in the top
   start corner, where the ticker and its change leave room; the Sharia row and the card use the same marks. A shape is
   centred in its disc by left/top 50% and a translate back, which lands the same in either direction. */
.sv3--screener :is(.hm3-mk, .hm3-on .hm-tile .halal-dot) { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 51, .5); vertical-align: middle; }
.sv3--screener .hm3-on .hm-tile .halal-dot { position: absolute; top: 4px; inset-inline-start: 4px; inset-inline-end: auto; display: none; }
.sv3--screener .hm3-on .hm-tile.hm3-mark .halal-dot { display: block; }
.sv3--screener .hm3-on .hm-tile[data-hm3-t="xl"] .halal-dot { top: 6px; inset-inline-start: 6px; width: 16px; height: 16px; }
/* A tighter tile: the same disc at 72%, scaled about its centre, so it lands 3px from both edges in either direction. */
.sv3--screener .hm3-on .hm-tile.hm3-mark--sm .halal-dot { top: 1px; inset-inline-start: 1px; transform: scale(.72); }
.sv3--screener :is(.hm3-mk--halal, .hm3-on .hm-tile .halal-dot.halal)::after { content: ''; position: absolute; top: 45%; left: 50%; width: 3.5px; height: 7px; border: solid var(--hm3-halal); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.sv3--screener :is(.hm3-mk--mixed, .hm3-on .hm-tile .halal-dot.mixed) { background: linear-gradient(to left, var(--hm3-mix) 50%, #fff 50%); box-shadow: inset 0 0 0 1.5px var(--hm3-mix), 0 0 0 1px rgba(11, 27, 51, .5); }
.sv3--screener :is(.hm3-mk--haram, .hm3-on .hm-tile .halal-dot.haram)::before,
.sv3--screener :is(.hm3-mk--haram, .hm3-on .hm-tile .halal-dot.haram)::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 2px; border-radius: 1px; background: var(--hm3-haram); transform: translate(-50%, -50%) rotate(45deg); }
.sv3--screener :is(.hm3-mk--haram, .hm3-on .hm-tile .halal-dot.haram)::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sv3--screener :is(.hm3-mk--unknown, .hm3-on .hm-tile .halal-dot.unknown)::after { content: '؟'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--hm3-review); font: 700 10px/1 var(--font-primary, 'Almarai', sans-serif); }

/* The card: on hover and keyboard focus it floats by the tile; after a first tap it docks over the canvas (its width
   on a phone, 480px on a tablet) with «صفحة السهم» (a button that follows the chosen tile's own link), the sector
   zoom and a close, each 44px. It is anchored at the wrap's inline start and moved by a transform, which shifts no
   layout. */
.sv3--screener .hm3-card { position: absolute; top: 0; inset-inline-start: 0; z-index: 20; width: 264px; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--hm3-night); box-shadow: 0 14px 34px rgba(7, 20, 40, .3), 0 0 0 1px rgba(11, 27, 51, .08); opacity: 0; pointer-events: none; transition: opacity .12s; }
.sv3--screener .hm3-card[hidden] { display: none; }
/* Where a docked card may sit: clear of the fixed site header, and of the phone's results bar at the foot. */
.sv3--screener .hm3-card { scroll-margin-block: calc(var(--sv3-sticky-top, 52px) + 8px) 16px; }
@media (max-width: 1024.98px) { .sv3--screener .hm3-card { scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom)); } }
.sv3--screener .hm3-card.is-on { opacity: 1; }
.sv3--screener .hm3-card--dock { pointer-events: auto; }
.sv3--screener .hm3-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv3--screener .hm3-card__sym { font-size: 20px; font-weight: 800; line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
.sv3--screener .hm3-card__v { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.sv3--screener .hm3-card__v.hm3-v--halal { background: #E5F4EC; color: #0B6B42; }
.sv3--screener .hm3-card__v.hm3-v--mixed { background: #FDF1D8; color: #8A4B06; }
.sv3--screener .hm3-card__v.hm3-v--haram { background: #FCE9EA; color: #AE2832; }
.sv3--screener .hm3-card__v.hm3-v--unknown { background: #EEF1F5; color: #34445C; }
.sv3--screener .hm3-card__name { display: flex; gap: 6px; margin: 4px 0 10px; overflow: hidden; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.sv3--screener .hm3-card__ar { flex: none; font-weight: 700; }
.sv3--screener .hm3-card__en { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #4A5A72; direction: ltr; unicode-bidi: isolate; }
/* The move first, on a line of its own under the server's own name for it; then the price and the market cap. */
.sv3--screener .hm3-card__kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; padding-top: 10px; border-top: 1px solid #E3E8EF; }
.sv3--screener .hm3-card__kv > div { min-width: 0; }
.sv3--screener .hm3-card__kv > .hm3-card__rr { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sv3--screener .hm3-card__kv dt { margin: 0 0 3px; font-size: 11px; font-weight: 400; color: #4A5A72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv3--screener .hm3-card__rr dt { min-width: 0; margin: 0; font-size: 12px; }
.sv3--screener .hm3-card__kv dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv3--screener .hm3-card__rr dd { flex: none; font-size: 16px; }
.sv3--screener .hm3-card .is-up { color: #0B7A4B; }
.sv3--screener .hm3-card .is-dn { color: #C0303A; }
.sv3--screener .hm3-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.sv3--screener .hm3-card__share { margin: 8px 0 0; font-size: 11px; color: #4A5A72; }
.sv3--screener .hm3-card__share b { font-weight: 700; color: var(--hm3-night); font-variant-numeric: tabular-nums; }
.sv3--screener .hm3-card__note { margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; background: #EEF1F5; font-size: 11px; line-height: 1.6; color: #34445C; }
.sv3--screener .hm3-card__tip { margin: 6px 0 0; font-size: 11px; color: #4A5A72; }
.sv3--screener .hm3-card__acts { display: none; gap: 8px; margin-top: 10px; }
.sv3--screener .hm3-card--dock .hm3-card__acts { display: flex; }
.sv3--screener .hm3-card__acts > * { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--hm3-night); border-radius: 10px; font: 700 14px/1 var(--font-primary, 'Almarai', sans-serif); text-decoration: none; cursor: pointer; }
.sv3--screener .hm3-card__go { flex: 1 0 auto; background: var(--hm3-night); color: #fff; white-space: nowrap; }
/* The zoom button is a block (an ellipsis needs a block box) whose one line is centred by its line height. */
.sv3--screener .hm3-card__acts > .hm3-card__zoom { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; background: #fff; color: var(--hm3-night); line-height: 42px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sv3--screener .hm3-card__x { flex: none; width: 44px; padding: 0; border-color: #DDE5EF; background: #fff; color: #34445C; font-size: 16px; }
.sv3--screener .hm3-card--dock .hm3-card__name { margin-bottom: 8px; }
/* A phone's canvas is short: the docked card drops the weight line and the tip (the key under the canvas says how a
   tap works), so it hides as little of the map as it can. */
@media (max-width: 719.98px) {
  .sv3--screener .hm3-card--dock { padding: 10px 12px; }
  .sv3--screener .hm3-card--dock :is(.hm3-card__share, .hm3-card__tip) { display: none; }
}
@media (max-width: 389.98px) { .sv3--screener .hm3-card__acts > * { padding: 0 10px; } }

/* The key under the canvas: the marks live in the Sharia row now, so its three dots step aside. */
.sv3--screener .sv3-map-panel .heatmap-info { gap: 6px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sv3-line); font-size: 12px; color: var(--sv3-muted); }
.sv3--screener .sv3-map-panel .heatmap-info-item:has(> .heatmap-info-dot) { display: none; }
.sv3--screener .sv3-map-panel .hm3-hint { flex: 1 1 100%; color: var(--sv3-muted); }
@media (min-width: 1100px) { .sv3--screener .sv3-map-panel .hm3-hint { flex: 0 1 auto; } }
@media (max-width: 1099.98px) { .sv3--screener .sv3-map-panel .heatmap-info { padding-inline: 2px; } }
.sv3--screener .hm3-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Motion: the zoom moves the boxes (and the tile text with them); a period switch fades each tile to its new colour. */
.sv3--screener .hm3-on .heatmap-grid.hm3-anim :is(.sector-group, .sector-group-tiles, .hm-tile) { transition: inset-inline-start .42s var(--hm3-ease), left .42s var(--hm3-ease), right .42s var(--hm3-ease), top .42s var(--hm3-ease), width .42s var(--hm3-ease), height .42s var(--hm3-ease), opacity .3s ease, visibility 0s linear .3s; }
.sv3--screener .hm3-on .heatmap-grid.hm3-anim .hm-tile :is(.tile-ticker, .tile-change) { transition: font-size .42s var(--hm3-ease); }
.sv3--screener .hm3-on .heatmap-grid.hm3-anim .sector-group:not(.hm3-out) { transition-delay: 0s; }
.sv3--screener .hm3-on .heatmap-grid.hm3-tint .hm-tile { transition: background-color .5s ease, color .5s ease; }
.sv3--screener .hm3-on .heatmap-grid.hm3-enter { animation: hm3-in .32s ease-out both; }
@keyframes hm3-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sv3--screener .hm3-on .heatmap-grid :is(.sector-group, .sector-group-tiles, .hm-tile, .tile-ticker, .tile-change),
  .sv3--screener :is(.hm3-card, .heatmap-mode-btn, .hm3-filter__btn) { transition: none !important; }
  .sv3--screener .hm3-on .heatmap-grid, .sv3--screener .hm3-on .hm-tile.hm3-flash { animation: none !important; }
}
@media (min-width: 1025px) {
  .sv3.sv3--screener .screener-layout { grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 18px; }
  .sv3.sv3--screener .filters-panel { grid-column: 1; grid-row: 1; position: static; max-height: none; padding: 16px; overflow: visible; border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); box-shadow: none; }
  .sv3.sv3--screener .screener-layout:has(.sv3-sc-ipos) .filters-panel { border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
  .sv3.sv3--screener .results-area { grid-column: 2; grid-row: 1 / span 2; }
  .sv3-sc-ipos { grid-column: 1; grid-row: 2; align-self: start; }
  .sv3.sv3--screener .sv3-sc-ipos { padding: 12px 16px 16px; border-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; }
  .sv3-sc-ipos .ipo-promo { border-top: 1px solid var(--sv3-line-2); padding-top: 12px; }
  /* The filter groups as the board's compact lists: a label, then rows or chips. */
  .sv3.sv3--screener #screener-form { display: flex; flex-direction: column; }
  .sv3.sv3--screener .filter-group:has(.stk-search-input) { order: 1; }
  .sv3.sv3--screener .filters-header { padding: 0 0 10px; border-bottom: 1px solid var(--sv3-line-2); border-radius: 0; background: none; color: var(--sv3-ink); }
  .sv3.sv3--screener .filters-header-top { margin-bottom: 4px; }
  .sv3.sv3--screener .filters-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--sv3-ink); }
  .sv3.sv3--screener .filters-header h3::before { content: none; }
  .sv3.sv3--screener .filters-reset { padding: 4px 10px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); font-size: 12px; font-weight: 600; text-decoration: none; }
  .sv3.sv3--screener .active-count { font-size: 12px; font-weight: 400; opacity: 1; color: var(--sv3-muted); }
  .sv3.sv3--screener .active-count strong { margin: 0 2px; font-family: inherit; color: var(--sv3-ink); }
  .sv3.sv3--screener .filter-group { border-bottom: 1px solid var(--sv3-line-2); }
  .sv3.sv3--screener .filter-group:last-child { border-bottom: 0; }
  .sv3.sv3--screener .filter-head { min-height: 40px; padding: 10px 0; background: none; }
  .sv3.sv3--screener .filter-head .fg-label { font-size: 13px; font-weight: 700; color: var(--sv3-ink); }
  .sv3.sv3--screener .filter-head .fg-icon { display: none; }
  .sv3.sv3--screener .filter-head .toggle-arrow { width: 18px; height: 18px; font-size: 9px; }
  .sv3.sv3--screener :is(.filter-inner, .halal-filter-body .filter-inner) { padding: 0 0 12px; }
  .sv3.sv3--screener :is(.halal-options, .sector-list, .mcap-categories, .performance-options, .rating-options) { gap: 0; margin: 0; max-height: none; padding: 0; overflow: visible; }
  .sv3.sv3--screener :is(.halal-option, .sector-item, .mcap-cat, .perf-option, .rating-option) { min-height: 32px; gap: 8px; padding: 5px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sv3.sv3--screener .halal-option.is-sub { min-height: 30px; margin-inline-start: 22px; }
  .sv3.sv3--screener :is(.halal-option .indicator, .sector-item .check) { width: 16px; height: 16px; border: 1.5px solid #9AA6B6; border-radius: 4px; background: var(--sv3-surface); box-shadow: none; color: #fff; font-size: 11px; display: grid; place-items: center; }
  .sv3.sv3--screener :is(.halal-option.active .indicator, .sector-item.active .check) { border-color: var(--sv3-night); background: var(--sv3-night); }
  .sv3.sv3--screener .halal-option.active .indicator::before { content: '\2713'; line-height: 1; }
  .sv3.sv3--screener :is(.halal-option .label-name, .sector-item .name, .mcap-cat .cat-name, .perf-option .perf-name, .rating-option .rating-label) { font-size: 13px; font-weight: 400; color: var(--sv3-ink); }
  .sv3.sv3--screener :is(.halal-option.active .label-name, .sector-item.active .name, .mcap-cat.active .cat-name, .perf-option.active .perf-name, .rating-option.active .rating-label) { font-weight: 700; }
  .sv3.sv3--screener :is(.halal-option .count, .sector-item .count, .mcap-cat .cat-size) { min-width: 0; padding: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 400; color: var(--sv3-muted); }
  .sv3.sv3--screener .aaoifi-note { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 11px; font-weight: 400; color: var(--sv3-muted); }
  .sv3.sv3--screener .aaoifi-note::before { content: none; }
  .sv3.sv3--screener .perf-option .perf-icon { width: 20px; height: 20px; font-size: 11px; }
  .sv3.sv3--screener .filter-hint { margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 11px; color: var(--sv3-muted); }
  .sv3.sv3--screener .range-row { margin-bottom: 0; }
  .sv3.sv3--screener .range-input-wrap label { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  .sv3.sv3--screener .range-input-wrap input { padding: 7px 8px; border: 1px solid var(--sv3-line); font-family: inherit; }
  .sv3.sv3--screener :is(.exchange-chip, .filter-group--tiers .tier-tab) { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); font-size: 12px; font-weight: 600; }
  .sv3.sv3--screener :is(.exchange-chip.active, .filter-group--tiers .tier-tab.active) { background: var(--sv3-night); color: #fff; }
  .sv3.sv3--screener .stk-search-input { min-height: 38px; font-size: 13px; }
  .sv3.sv3--screener .stk-search-submit { min-height: 38px; margin-top: 6px; font-size: 13px; }
  .sv3.sv3--screener .sector-list.is-collapsed .sector-item:nth-child(n+7) { display: none; }
  /* The cards view: as many 260px cards as the column holds (narrower, a card clips its own verdict badge). */
  .sv3.sv3--screener .stocks-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .sv3.sv3--screener .stock-card { padding: 16px; border-width: 1px; border-radius: var(--sv3-radius); box-shadow: none; }
  .sv3.sv3--screener .stock-card:hover { transform: none; box-shadow: none; border-color: var(--sv3-brand); }
}
.sv3--screener .filter-group--tiers .tier-tabs { flex-wrap: wrap; gap: 6px; margin: 0; overflow: visible; border: 0; }
.sv3--screener .filter-group--tiers .tier-tab { border-bottom: 0; }
.sv3-sector-more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); font: 600 12px var(--font-primary, 'Almarai', sans-serif); cursor: pointer; }
/* The upcoming IPOs: a short list under the filters on desktop, a row of chips in their own card on phones. */
.sv3-sc-ipos .ipo-page { padding: 0; background: none; }
.sv3-sc-ipos .ipo-promo { padding-block: 0; }
.sv3-sc-ipos .ipo-promo__head { align-items: center; margin: 0 0 6px; gap: 6px; }
.sv3--screener .sv3-sc-ipos .ipo-promo__title { font-size: 15px; }
.sv3-sc-ipos .ipo-promo__all { font-size: 12.5px; }
.sv3-sc-ipos .ipo-promo__grid { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sv3-sc-ipos .ipo-promo__card { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); box-shadow: none; transform: none; }
.sv3-sc-ipos .ipo-promo__card:hover { transform: none; box-shadow: none; background: var(--sv3-line); }
.sv3-sc-ipos :is(.ipo-promo__top, .ipo-promo__meta) { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sv3-sc-ipos .ipo-promo__name { font-size: 12.5px; font-weight: 600; }
.sv3-sc-ipos :is(.ipo-promo__meta, .ipo-promo__date) { font-size: 12px; font-weight: 400; }
@media (min-width: 1025px) {
  .sv3--screener .sv3-sc-ipos .ipo-promo__title { font-size: 13px; }
  .sv3-sc-ipos .ipo-promo__grid { flex-direction: column; gap: 0; overflow: visible; }
  .sv3-sc-ipos .ipo-promo__card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 32px; padding: 6px 0; border-radius: 0; background: none; }
  .sv3-sc-ipos .ipo-promo__card + .ipo-promo__card { border-top: 1px solid var(--sv3-line-2); }
  .sv3-sc-ipos .ipo-promo__meta { color: var(--sv3-muted); }
  .sv3-sc-ipos .ipo-promo__card:hover { background: none; }
  .sv3-sc-ipos .ipo-promo__card:hover .ipo-promo__name { color: var(--sv3-brand); }
}

/* 15.5 Phones and tablets (< 1025px): one results card of rows, the filters as a bottom sheet, the bar at the bottom.
   The screener's wrappers dissolve, so the results, the IPOs and every card after them share one column and the
   mobile board's order. */
@media (max-width: 1024.98px) {
  .sv3.sv3--screener :is(.screener-section, .screener-section > .container, .screener-layout) { display: contents; }
  .sv3--screener .results-area { order: 10; }
  .sv3-sc-promo, .sv3-sc-g2--promo { order: 20; }
  .sv3-sc-banner { order: 22; }
  .sv3-sc-ipos { order: 30; }
  .sv3--screener .sector-hub-section, .sv3-sc-g2--hub { order: 40; }
  .sv3-sc-g2--method { order: 50; }
  .sv3-sc-guide { order: 70; }
  .sv3-sc-g2--more { order: 80; }
  .sv3-sc-faq { order: 110; }
  .sv3--screener .stk-disclaimer-wrap { order: 120; }
  .sv3.sv3--screener .results-area { gap: 0; padding: 4px 0; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 16px; background: var(--sv3-surface); }
  .sv3.sv3--screener .results-toolbar { padding: 8px 14px; border: 0; border-radius: 0; background: none; }
  .sv3--screener .results-count { order: 1; justify-content: flex-start; }
  .sv3-sc-views { order: 2; }
  .sv3.sv3--screener .sv3-sc-view { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 12px; }
  .sv3.sv3--screener :is(.view-toggle, .sort-btn) { display: none; }
  .sv3--screener .results-count .sub { display: none; }
  .sv3--screener .active-filters { padding: 0 14px 8px; }
  .sv3.sv3--screener .stk-empty-state { margin: 0 14px 12px; }
  /* The rows of the mobile board come from the cards: the table stays for the desktop. */
  .sv3.sv3--screener .stocks-table-wrap { display: none !important; }
  .sv3.sv3--screener .stocks-grid { display: flex !important; flex-direction: column; gap: 0; }
  .sv3.sv3--screener .stocks-grid.sv3-off { display: none !important; }
  .sv3.sv3--screener .stock-card { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto auto; grid-template-areas: "logo name name price badge" "logo tick mcap chg badge"; align-items: center; gap: 0 10px; min-height: 64px; padding: 8px 14px; border: 0; border-top: 1px solid var(--sv3-line-2); border-radius: 0; background: none; box-shadow: none; }
  .sv3.sv3--screener .stock-card:hover { transform: none; box-shadow: none; background: var(--sv3-tile); }
  .sv3.sv3--screener .stock-card::before { content: none; }
  .sv3.sv3--screener .stock-card :is(.sc-header, .sc-logo-wrap, .sc-name-block, .sc-price-block, .sc-metrics) { display: contents; }
  .sv3.sv3--screener .stock-card .sc-logo { grid-area: logo; width: 34px; height: 34px; overflow: hidden; border-radius: 9px; background: var(--sv3-neutral-bg); box-shadow: none; color: var(--sv3-navy); font-size: 10px; }
  .sv3.sv3--screener .stock-card .sc-logo img { width: 100%; height: 100%; object-fit: contain; }
  /* An English name keeps its own paragraph direction (unicode-bidi: plaintext, so it truncates at its own end) but sits
     on the logo's side like an Arabic one. Under plaintext, start/end follow each name's direction (and Chrome resolves
     match-parent the same way), so the side is physical: the page is right-to-left only. */
  .sv3.sv3--screener .stock-card .sc-company { grid-area: name; max-width: none; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--sv3-ink); direction: ltr; unicode-bidi: plaintext; text-align: right; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .sv3.sv3--screener .stock-card .sc-ticker { grid-area: tick; margin: 0; font-family: inherit; font-size: 11px; font-weight: 400; line-height: 1.6; color: var(--sv3-muted); }
  .sv3.sv3--screener .stock-card .sc-exchange { display: none; }
  .sv3.sv3--screener .stock-card .sc-metric { display: none; }
  .sv3.sv3--screener .stock-card .sc-metric:nth-child(2) { grid-area: mcap; justify-self: start; display: block; min-width: 0; padding: 0; background: none; }
  /* «159.38 B» stays one left-to-right figure; the dot sits between it and the ticker. */
  .sv3.sv3--screener .stock-card .sc-metric:nth-child(2) .v { direction: ltr; unicode-bidi: isolate; font-family: inherit; font-size: 11px; font-weight: 400; color: var(--sv3-muted); }
  .sv3.sv3--screener .stock-card .sc-metric:nth-child(2) .v::after { content: ' ·'; }
  .sv3.sv3--screener .stock-card .sc-price { grid-area: price; justify-self: end; font-family: inherit; font-size: 14px; font-weight: 700; }
  .sv3.sv3--screener .stock-card .sc-price .currency { margin: 0; font-size: 14px; color: inherit; font-weight: 700; }
  .sv3.sv3--screener .stock-card .sc-change { grid-area: chg; justify-self: end; }
  .sv3.sv3--screener .stock-card .sc-change .amount { display: none; }
  .sv3.sv3--screener .stock-card .sc-change .percent { padding: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; }
  .sv3.sv3--screener .stock-card .sc-halal-badge { grid-area: badge; justify-content: center; min-width: 58px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; }
  .sv3.sv3--screener .stock-card .sc-halal-badge::before { content: none; }
  .sv3.sv3--screener .stock-card .sc-halal-badge.halal { background: var(--sv3-up-bg); color: var(--sv3-up-ink); }
  .sv3.sv3--screener .stock-card .sc-halal-badge:is(.mix, .mixed) { background: var(--sv3-warn-bg); color: var(--sv3-warn-ink); }
  .sv3.sv3--screener .stock-card .sc-halal-badge.haram { background: var(--sv3-dn-bg); color: var(--sv3-dn-ink); }
  .sv3.sv3--screener .stock-card .sc-halal-badge.unknown { background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); }
  .sv3-sc-more { padding: 10px 14px; }
  .sv3-sc-more__btn { width: 100%; border-color: var(--sv3-line); border-radius: 10px; background: var(--sv3-surface); color: var(--sv3-ink); font-weight: 600; }
  .sv3.sv3--screener .stocks-view-all-wrap { padding: 4px 14px 12px; }
  .sv3-map-panel { padding: 0 14px 12px; }
  /* The filters: a bottom sheet over the results instead of a panel that pushes them down. */
  .sv3.sv3--screener .filters-panel,
  .sv3.sv3--screener .filters-panel.mobile-open { display: block; position: fixed; inset-inline: 0; top: auto; bottom: 0; z-index: 1060; max-height: 85vh; margin: 0; overflow-y: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(7, 20, 40, .25); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .sv3.sv3--screener .filters-panel.mobile-open { transform: none; visibility: visible; }
  .sv3-sheet-backdrop { position: fixed; inset: 0; z-index: 1059; background: rgba(7, 20, 40, .45); }
  html.sv3-sheet-open { overflow: hidden; }
  .sv3.sv3--screener .sector-list.is-collapsed .sector-item:nth-child(n+7) { display: none; }
  /* The sort menu opens from the bottom bar, above it. */
  .sv3.sv3--screener .sort-menu { position: fixed; top: auto; bottom: calc(78px + env(safe-area-inset-bottom)); inset-inline: 12px; z-index: 1045; min-width: 0; box-shadow: 0 -8px 24px rgba(7, 20, 40, .18); }
  .sv3.sv3--screener .sort-option { min-height: 44px; }
  /* The reference, tools and Arab-market chips wrap onto as many lines as they need, so every one of them is on screen
     (owner, 2026-10-26: a swipe row hid all but the first two); a long name wraps inside its chip, 44px to tap (Rule 42). */
  .sv3.sv3--screener :is(.authority-card, .tool-card, .gcc-exchange-card) { max-width: 100%; min-height: 44px; }
  .sv3-scbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1040; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sv3-line); background: var(--sv3-surface); box-shadow: 0 -6px 16px rgba(11, 27, 51, .06); }
}
.sv3-sheet-backdrop[hidden] { display: none; }
.sv3-sheet-close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-start: 8px; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-surface); font-size: 16px; color: var(--sv3-ink); cursor: pointer; }
@media (min-width: 1025px) { .sv3-sheet-close { display: none; } .sv3-scbar { display: none; } }
.sv3-scbar__btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 10px; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-surface); color: var(--sv3-ink); font: 700 14px var(--font-primary, 'Almarai', sans-serif); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sv3-scbar__btn--filters { border-color: var(--sv3-night); background: var(--sv3-night); color: #fff; }

/* 15.6 The app card, the sectors, the standard beside the references, the guide, the news beside the tools */
.sv3-sc-promo .app-promo { margin: 0; padding: 0; }
/* The /stock banner beside the app card (v3/screener-banner), as the design draws it: the logo, then the badge, the line
   and its note, then the button at the far end, centred in the card. Phones: the button under them, full width. */
.sv3-sc-banner { display: flex; min-width: 0; }
.sv3-bnr { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); background: var(--sv3-surface); }
.sv3-bnr__logo { display: block; flex: 0 0 auto; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--sv3-neutral-bg); }
.sv3-bnr__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv3-bnr__body { flex: 1 1 200px; min-width: 0; }
.sv3-bnr__badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--sv3-night); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.6; }
.sv3-bnr__title { margin: 4px 0 0; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--sv3-ink); }
.sv3-bnr__note { margin: 0; font-size: 11px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-sc-banner .sv3-bnr__cta { display: inline-flex; flex: 1 1 100%; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--green-text, #15803D); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sv3-sc-banner .sv3-bnr__cta:hover { color: #fff; filter: brightness(.94); }
.sv3-sc-banner .sv3-bnr__cta:focus-visible { outline: 2px solid var(--sv3-night); outline-offset: 2px; }
/* The shared CTA's notice (a broker unavailable in the visitor's country) takes the card's full width. */
.sv3-bnr > :not(.sv3-bnr__logo, .sv3-bnr__body, .sv3-bnr__cta) { flex: 1 1 100%; margin: 0; }
@media (min-width: 720px) {
  .sv3-bnr { flex-wrap: nowrap; }
  .sv3-sc-banner .sv3-bnr__cta { flex: 0 0 auto; min-height: 40px; }
  .sv3-bnr:has(> :not(.sv3-bnr__logo, .sv3-bnr__body, .sv3-bnr__cta)) { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  /* Two equal halves of one height (the design). */
  .sv3-sc-g2.sv3-sc-g2--promo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .sv3-sc-g2--promo .sv3-sc-promo, .sv3-sc-g2--promo .sv3-sc-promo .app-promo { display: flex; }
  .sv3-sc-g2--promo .sv3-sc-promo .app-promo, .sv3-sc-g2--promo .app-promo__box { flex: 1 1 auto; }
}
.sv3--screener .sv3-app-slot .app-promo__cta { align-self: flex-start; }
@media (min-width: 900px) {
  .sv3-sc-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv3-sc-gap); align-items: start; }
  .sv3-sc-g2 > :only-child, .sv3-sc-g2--more:not(:has(.home-stock-news)) > .sv3-sc-explore { grid-column: 1 / -1; }
  /* Paired cards end on one line: the standard and trust cards differed by 31px, the news card by 56px. */
  .sv3-sc-g2--hub, .sv3-sc-g2--method, .sv3-sc-g2--more { align-items: stretch; }
  .sv3.sv3--screener .sv3-sc-explore { margin: 0; padding: 18px; background: var(--sv3-surface); border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); }
  .sv3-sc-explore .gcc-exchanges-section { margin-top: 18px; }
  .sv3-sc-explore .gcc-exchanges-section .section-head h2 { font-size: 16px; }
}
@media (max-width: 899.98px) {
  .sv3-sc-g2, .sv3-sc-explore { display: contents; }
  .sv3-sc-standard { order: 50; }
  .sv3--screener .trust-section { order: 60; }
  .sv3--screener .sv3-sc-explore .related { order: 80; }
  .sv3--screener .home-stock-news { order: 90; }
  .sv3--screener .sv3-sc-explore .gcc-exchanges-section { order: 100; }
  .sv3.sv3--screener .sv3-sc-explore > section { margin: 0; padding: 14px; background: var(--sv3-surface); border: 1px solid var(--sv3-line); border-radius: 16px; }
}
.sv3--screener :is(.aaoifi-section, .editorial, .related, .gcc-exchanges-section) { background: none; }
.sv3--screener :is(.aaoifi-section, .editorial, .related, .gcc-exchanges-section) { padding: 0; }
.sv3.sv3--screener .sector-hub-section { padding-block: 14px; background: var(--sv3-surface); }
@media (min-width: 720px) { .sv3.sv3--screener .sector-hub-section { padding-block: 18px; } }
.sv3--screener .sector-hub-grid { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 719.98px) { .sv3--screener .sector-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .sv3--screener .sector-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } }
/* The standard: its four checks as a numbered list; the introduction, each check's reason and the source fold. */
.sv3--screener .aaoifi-section > .container { display: flex; flex-direction: column; }
.sv3--screener .aaoifi-section .section-head { display: contents; }
.sv3--screener .aaoifi-section .section-head .eyebrow { order: 1; }
.sv3--screener .aaoifi-section .section-head h2 { order: 2; margin-bottom: 8px; }
.sv3--screener .aaoifi-grid { order: 3; display: block; max-width: none; margin: 0; }
.sv3--screener .aaoifi-section .section-head > p:not(.aaoifi-methodology-link-wrap) { order: 4; margin-top: 8px; }
.sv3--screener .aaoifi-section .aaoifi-methodology-link-wrap { order: 5; margin: 6px 0 0; }
.sv3--screener .aaoifi-source-note { order: 6; max-width: none; margin: 10px 0 0; padding: 10px 12px; border: 0; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); text-align: start; font-size: 12.5px; }
.sv3--screener .aaoifi-methodology-link { min-height: 36px; padding: 0; font-size: 13px; font-weight: 700; color: var(--sv3-brand); text-decoration: none; }
.sv3--screener .aaoifi-methodology-link:hover { text-decoration: underline; }
.sv3--screener .aaoifi-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: start; transform: none; }
.sv3--screener .aaoifi-card::after, .sv3--screener .aaoifi-icon { display: none; }
.sv3--screener .aaoifi-card:hover { transform: none; box-shadow: none; }
.sv3--screener .aaoifi-number { margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 2; color: var(--sv3-muted); }
.sv3--screener .aaoifi-card h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 2; color: var(--sv3-ink); }
.sv3--screener .aaoifi-card .threshold { margin: 0; padding: 0; background: none; direction: inherit; unicode-bidi: isolate; font-size: 13px; font-weight: 400; color: var(--sv3-brand); }
.sv3--screener .aaoifi-card .threshold::before { content: '— '; color: var(--sv3-muted); }
.sv3--screener .aaoifi-card p { flex-basis: 100%; margin: 0 0 6px; font-size: 12.5px; line-height: 1.8; color: var(--sv3-muted); }
/* The references: a chip per reference; its role and summary stay in the link for screen readers. */
.sv3--screener .authorities-grid { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: 0; }
/* The guide: the label, title, author and date stay; the text folds after its first paragraph (all of it on phones). */
.sv3--screener .editorial-wrap { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.sv3--screener .editorial-wrap::before { content: none; }
.sv3--screener .editorial h2 { margin-bottom: 6px; }
.sv3--screener .editorial-meta { flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--sv3-line-2); font-size: 12px; color: var(--sv3-muted); }
.sv3--screener .editorial-meta .avatar { width: 28px; height: 28px; font-size: 12px; }
.sv3--screener .editorial-content :is(p, li) { font-size: 14px; line-height: 2; color: var(--sv3-ink-2); }
.sv3--screener .editorial-content p { margin: 0 0 10px; }
/* A full 1,234px line runs ~180 characters; a measure near 75ch is what a reader can track. */
@media (min-width: 900px) { .sv3--screener .editorial-content, .sv3--screener .fq-item__content { max-width: 75ch; } }
.sv3--screener .editorial-content h3 { margin: 14px 0 6px; font-size: 16px; color: var(--sv3-ink); }
/* The folds (stock-v3.js §9): a toggle at the foot of the card. */
.sv3-fold__more { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--sv3-brand); font: 700 13px var(--font-primary, 'Almarai', sans-serif); cursor: pointer; }
.sv3-fold__more::after { content: '⌄'; font-size: 14px; line-height: 1; }
.sv3-fold__more[aria-expanded="true"]::after { content: '⌃'; }
.sv3-sc-standard.is-folded :is(.aaoifi-card p, .section-head > p:not(.aaoifi-methodology-link-wrap), .aaoifi-source-note) { display: none; }
.sv3-sc-guide.is-folded .editorial-content > :not(:first-child) { display: none; }
@media (max-width: 719.98px) {
  .sv3-sc-standard.is-folded :is(.aaoifi-grid, .aaoifi-methodology-link-wrap) { display: none; }
  .sv3-sc-guide.is-folded .editorial-content { display: none; }
}
/* The news: a row per story — the headline, then the stock, its tone and the time. */
.sv3--screener .home-stock-news .hsn-head { margin: 0; }
.sv3--screener .home-stock-news .hsn-h2 { padding: 0; border: 0; }
.sv3--screener .home-stock-news .hsn-h2::after { content: none; }
.sv3--screener .home-stock-news .hsn-live { padding: 2px 10px; font-size: 11px; }
.sv3--screener .home-stock-news .hsn-intro { margin-bottom: 4px; }
.sv3--screener .home-stock-news .hsn-grid { display: flex; flex-direction: column; gap: 0; }
.sv3--screener .home-stock-news .hsn-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "meta time"; gap: 2px 10px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--sv3-line-2); border-radius: 0; background: none; box-shadow: none; transform: none; }
.sv3--screener .home-stock-news .hsn-card:last-child { border-bottom: 0; }
.sv3--screener .home-stock-news .hsn-card:hover { transform: none; box-shadow: none; }
.sv3--screener .home-stock-news .hsn-title { grid-area: title; font-size: 13.5px; font-weight: 600; line-height: 1.7; color: var(--sv3-ink); -webkit-line-clamp: 2; }
.sv3--screener .home-stock-news .hsn-meta { grid-area: meta; justify-content: flex-start; gap: 6px; }
.sv3--screener .home-stock-news .hsn-ticker { font-size: 12px; font-weight: 700; }
.sv3--screener .home-stock-news .hsn-time { grid-area: time; align-self: center; margin: 0; font-size: 11px; }
/* The tools and the Arab markets: chips; each market keeps its exchange beside its name. */
/* The tools as cards with their icons (owner, 2026-10-26): two a row on phones, every tool on screen; each lifts, tints
   its icon and moves its arrow on hover or focus. The one-line summary stays in the link for screen readers. */
.sv3--screener .tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .sv3--screener .tools-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.sv3--screener .tools-grid .tool-card {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 8px 10px; border: 1px solid var(--sv3-line); border-radius: 12px;
  background: var(--sv3-surface); color: var(--sv3-ink); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sv3--screener .tools-grid .tool-card .icon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin: 0; border-radius: 10px; background: var(--sv3-neutral-bg);
  font-size: 18px; line-height: 1; transition: transform .2s ease, background-color .2s ease;
}
.sv3--screener .tools-grid .tool-card h3 { font-size: 13px; font-weight: 700; line-height: 1.45; }
.sv3--screener .tools-grid .tool-card > div:last-child { min-width: 0; }
.sv3--screener .tools-grid .tool-card::after { content: '←'; margin-inline-start: auto; color: var(--sv3-brand); font-weight: 700; opacity: .5; transition: transform .2s ease, opacity .2s ease; }
.sv3--screener .tools-grid .tool-card:is(:hover, :focus-visible) { border-color: var(--sv3-brand); background: var(--sv3-tile); box-shadow: 0 8px 18px -12px rgba(14, 124, 123, .6); color: var(--sv3-ink); }
.sv3--screener .tools-grid .tool-card:is(:hover, :focus-visible) .icon { background: rgba(14, 124, 123, .14); transform: scale(1.08); }
.sv3--screener .tools-grid .tool-card:is(:hover, :focus-visible)::after { opacity: 1; transform: translateX(-3px); }
.sv3--screener .tools-grid .tool-card:focus-visible { outline: 2px solid var(--sv3-brand); outline-offset: 2px; }
.sv3--screener .tools-grid .tool-card:active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) { .sv3--screener .tools-grid .tool-card:hover { transform: translateY(-2px); } }
/* The Arab markets as cards (owner, 2026-10-26): the flag and the market's name, every one on screen, two a row on phones;
   each lifts, grows its flag and moves its arrow on hover or focus. The exchange line («بورصة تداول — TASI») stays in the
   link for screen readers. */
.sv3--screener .gcc-exchanges-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
@media (min-width: 720px) { .sv3--screener .gcc-exchanges-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--sv3-line); border-radius: 12px; background: var(--sv3-surface); box-shadow: none; color: var(--sv3-ink); text-decoration: none;
  transform: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card::after { content: '←'; margin-inline-start: auto; color: var(--sv3-up-ink); font-weight: 700; opacity: .5; transition: transform .2s ease, opacity .2s ease; }
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card:is(:hover, :focus-visible) { border-color: var(--sv3-up-ink); background: var(--sv3-up-bg); box-shadow: 0 8px 18px -12px rgba(11, 122, 75, .55); color: var(--sv3-ink); }
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card:is(:hover, :focus-visible)::after { opacity: 1; transform: translateX(-3px); }
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card:is(:hover, :focus-visible) .gcc-flag { transform: scale(1.1); }
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card:focus-visible { outline: 2px solid var(--sv3-up-ink); outline-offset: 2px; }
.sv3--screener .gcc-exchanges-grid .gcc-exchange-card:active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) { .sv3--screener .gcc-exchanges-grid .gcc-exchange-card:hover { transform: translateY(-2px); } }
/* Each market's flag from assets/site-new/flags: the partial's emoji flags render as two letters on Windows. The emoji
   stays in the HTML (font-size 0) and the flag is drawn by the card's link target. */
.sv3--screener .gcc-flag { display: inline-block; flex: none; width: 28px; height: 20px; overflow: hidden; border-radius: 4px; background: var(--sv3-neutral-bg) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(11, 27, 51, .14); font-size: 0; color: transparent; transition: transform .2s ease; }
.sv3--screener .gcc-exchange-card[href$="/stock/saudi"] .gcc-flag { background-image: url('../../site-new/flags/sa.svg'); }
.sv3--screener .gcc-exchange-card[href$="/stock/uae"] .gcc-flag { background-image: url('../../site-new/flags/ae.svg'); }
.sv3--screener .gcc-exchange-card[href$="/stock/qatar"] .gcc-flag { background-image: url('../../site-new/flags/qa.svg'); }
.sv3--screener .gcc-exchange-card[href$="/stock/kuwait"] .gcc-flag { background-image: url('../../site-new/flags/kw.svg'); }
.sv3--screener .gcc-exchange-card[href$="/stock/bahrain"] .gcc-flag { background-image: url('../../site-new/flags/bh.svg'); }
.sv3--screener .gcc-exchange-card[href$="/stock/oman"] .gcc-flag { background-image: url('../../site-new/flags/om.svg'); }
.sv3--screener .gcc-exchange-info { min-width: 0; }
.sv3--screener .gcc-exchange-info h3 { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.45; color: inherit; }
.sv3--screener .gcc-exchange-info p { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sv3--screener .gcc-exchanges-section .text-center { margin-top: 8px !important; text-align: start !important; }
.sv3--screener .gcc-all-link { min-height: 36px; padding: 0; border: 0; background: none; color: var(--sv3-brand); font-size: 13px; font-weight: 600; }
.sv3--screener .gcc-all-link:hover { background: none; color: var(--sv3-brand); text-decoration: underline; }
.sv3--screener .gcc-all-link::after { content: ' ←'; }
/* A page without questions keeps no empty card. */
.sv3-sc-faq:not(:has(.fq-section)) { display: none; }
/* The disclaimer: the boards' amber note. */
.sv3--screener .stk-disclaimer-wrap { padding: 0; }
.sv3--screener .ymyl-disclaimer { margin: 0; padding: 14px 16px; border: 1px solid var(--sv3-mix-line); border-radius: 16px; background: var(--sv3-warn-bg); color: var(--sv3-warn-ink); font-size: 12.5px; line-height: 1.9; }
@media (min-width: 720px) { .sv3--screener .ymyl-disclaimer { border-radius: var(--sv3-radius); } }
.sv3--screener .ymyl-disclaimer strong { display: inline; margin: 0; color: inherit; font-size: inherit; }

/* ---------- 16. Shared result rows (every US stock list, P7) ----------
   One row per stock: logo, ticker and name, the list's two figures, price and change, the displayed Sharia status.
   #stock-cards outranks each list's own grid/list layout, and that grid/list toggle — which would no longer change
   anything — is hidden on a page that shows the rows. */
body:has(#stock-cards.sv3-rows) :is(.ph-filter__view, .sp-filter__view, .ss-filter__view) { display: none; }
#stock-cards.sv3-rows { display: flex; flex-direction: column; gap: 0; overflow: hidden; background: var(--sv3-surface); border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); }
.sv3-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "logo id px badge" "logo kvs kvs kvs"; align-items: center; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--sv3-line-2); color: var(--sv3-ink); text-decoration: none; }
.sv3-row:first-child { border-top: 0; }
.sv3-row:hover { background: var(--sv3-tile); color: var(--sv3-ink); }
.sv3-row:focus-visible { outline: 2px solid var(--sv3-brand); outline-offset: -2px; }
.sv3-row__logo { grid-area: logo; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 10px; background: var(--sv3-neutral-bg); font-size: 12px; font-weight: 800; color: var(--sv3-navy); }
.sv3-row__logo img { width: 100%; height: 100%; object-fit: contain; }
.sv3-row__id { grid-area: id; min-width: 0; }
/* isolate, not plaintext: a Latin ticker or name renders left-to-right inside the line while the line itself stays
   right-aligned beside the logo (plaintext made an English-only line LTR and pushed it to the far edge). */
.sv3-row__sym { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--sv3-ink); text-align: start; unicode-bidi: isolate; }
.sv3-row__name { display: block; overflow: hidden; font-size: 12px; color: var(--sv3-muted); text-overflow: ellipsis; white-space: nowrap; text-align: start; unicode-bidi: isolate; }
.sv3-row__kvs { grid-area: kvs; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--sv3-muted); }
.sv3-row__kv strong { color: var(--sv3-ink); font-weight: 700; unicode-bidi: plaintext; }
.sv3-row__px { grid-area: px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sv3-row__price { font-size: 15px; font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.sv3-row__chg { font-size: 12px; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.sv3-row__chg--up { color: var(--sv3-up); }
.sv3-row__chg--dn { color: var(--sv3-dn); }
.sv3-row__badge { grid-area: badge; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); }
.sv3-row__badge--halal { background: var(--sv3-up-bg); color: var(--sv3-up-ink); }
.sv3-row__badge--mix { background: var(--sv3-warn-bg); color: var(--sv3-warn-ink); }
.sv3-row__badge--haram { background: var(--sv3-dn-bg); color: var(--sv3-dn-ink); }
@media (max-width: 560px) {
  .sv3-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "logo id px" "logo kvs badge"; }
}
@media (min-width: 900px) {
  /* Wide screens: one line per stock, the figures in their own column. */
  .sv3-row { grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1fr) 110px 96px; grid-template-areas: "logo id kvs px badge"; }
  .sv3-row__badge { justify-self: end; }
}

/* ---------- 17. Rendering work (P5) ----------
   Modules below the first screen skip layout and paint until they near the viewport. Each reserves the height it was
   measured at on AAPL / Aramco (390 px and 1440 px tours, 2026-10-21) so the scrollbar and hash jumps stay stable, and
   `auto` keeps the size it last rendered at. The first modules (overview, verdict) are never skipped: they hold the LCP. */
/* The price charts hide their canvas whenever they show a status (loading, empty, error — us-stock-chart.js and
   gulf-stock-chart.js set display inline), which collapsed the box the canvas reserves: measured, a 330px jump of the
   returns table and the Sharia module on AAPL at 390px, the page's largest layout shift. The status now holds the same
   reservation (420px with the drawing tools, 320px without), so the swap moves nothing. */
.sv3 :is(.usc-chart-status, .gsd-chart-status) { display: grid; place-content: center; min-block-size: 320px; }
.sv3 [data-usc-tools="1"] .usc-chart-status { min-block-size: 420px; }

@supports (content-visibility: auto) {
  .sv3 :is(#sv3-technical, #sv3-performance) { content-visibility: auto; contain-intrinsic-size: auto 700px; }
  .sv3 :is(#sv3-financials, #sv3-investor, #sv3-dividends) { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
  .sv3 :is(#sv3-news, #sv3-faq, #sv3-analysis) { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
  .sv3 #sv3-company { content-visibility: auto; contain-intrinsic-size: auto 2470px; }
  .sv3 #sv3-discover { content-visibility: auto; contain-intrinsic-size: auto 2960px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv3-stickybar, .sv3-nav, body.sv3-reading .site-header, .sv3--screener .filters-panel { transition: none; }
}

/* ---------- 18. US stock page — design «تصميم سهم أمريكي ديسكتوب» (1440) and «… موبايل» (390) ----------
   Scoped to .sv3--us, so the Arab-market and screener templates keep their look. Every rule restyles markup the page
   already renders. Phones (< 720px) follow the mobile board: a navy hero that ends with slot A. Tablets keep the
   white hero on one column. Desktop (≥ 1100px) follows the desktop board: the hero's two columns, the 340px side
   column with the analysts, slot A, how-to-buy, the app card and the company card. */

/* 18.1 Board primitives */
:is(.sv3--us, .sv3--arab) .sv3-h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--sv3-ink); }
@media (min-width: 720px) { :is(.sv3--us, .sv3--arab) .sv3-h2 { font-size: 19px; } }
:is(.sv3--us, .sv3--arab) .sv3-mod-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 12px; }
:is(.sv3--us, .sv3--arab) .sv3-mod-head > div { flex: 1 1 320px; min-width: 0; }
:is(.sv3--us, .sv3--arab) .sv3-link { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 700; color: var(--sv3-brand); text-decoration: none; }
:is(.sv3--us, .sv3--arab) .sv3-link:hover { text-decoration: underline; }
.sv3--us .sv3-g2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .sv3--us .sv3-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.sv3--us .sv3-g2 > :only-child { grid-column: 1 / -1; }
:is(.sv3--us, .sv3--arab) .sv3-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); }
:is(.sv3--us, .sv3--arab) .sv3-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sv3-line-2); font-size: 14px; }
:is(.sv3--us, .sv3--arab) .sv3-kv__k { color: var(--sv3-ink-2); }
:is(.sv3--us, .sv3--arab) .sv3-kv__v { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.sv3:is(.sv3--us, .sv3--arab) .sv3-card > * + *, .sv3:is(.sv3--us, .sv3--arab) .sv3-card > * + :is(.sv2-section, .content-section) { margin-top: 18px; }
.sv3.sv3--us .sv3-card .sv2-section-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.sv3--us .sv3-btn svg { flex: 0 0 auto; }
.sv3--us .sv3-btn--icon { width: 40px; padding: 0; }
:is(.sv3--us, .sv3--arab) .sv3-watch { display: contents; }
.sv3--us .sv3-chip--action { min-height: 36px; padding: 0 12px; border: 0; cursor: pointer; font: 700 13px var(--font-primary, 'Almarai', sans-serif); }
@media (min-width: 720px) { :is(.sv3--us, .sv3--arab) .sv3-card { padding: 20px; } }

/* 18.2 Where each twin shows. Slot A: the hero on phones and tablets, the side column on desktop. The 52-week bar and
   the action row with the byline: the hero from 720px; below that the bar sits in the chart card and the byline under
   the hero. The company card closes the side column on desktop only. */
.sv3.sv3--us .sv3-slot--A.sv3-slot--aside, .sv3--us .sv3-w52--hero, .sv3--us .sv3-hero__actions { display: none; }
@media (min-width: 720px) {
  .sv3--us .sv3-w52--hero { display: block; }
  .sv3--us .sv3-hero__actions { display: flex; }
  .sv3--us .sv3-w52--chart, .sv3--us .sv3-byline--below { display: none; }
}
@media (max-width: 1099.98px) { .sv3--us .sv3-mini { display: none; } }
@media (min-width: 1100px) {
  .sv3.sv3--us .sv3-slot--A.sv3-slot--hero { display: none; }
  /* Block flow, not a flex column: the unavailable notice (a Rule 106 component) sizes itself with flex: 1 1 100%,
     which a column would read as a height and crush. */
  .sv3.sv3--us .sv3-slot--A.sv3-slot--aside { display: block; padding: 20px; border-radius: var(--sv3-radius); }
  .sv3.sv3--us .sv3-slot--aside > * + * { margin-top: 10px; }
  .sv3.sv3--us .sv3-slot--aside .sv2-cta-card-title { font-size: 17px; }
  .sv3.sv3--us .sv3-slot--aside .sv2-cta-btn { display: flex; width: 100%; }
  .sv3.sv3--us .sv3-slot--aside .sv2-cta-card-note { font-size: 11px; }
}

/* 18.3 Hero */
.sv3--us .sv3-hero__main { display: flex; flex-direction: column; gap: 14px; }
.sv3--us .sv3-hero__title { font-weight: 700; line-height: 1.35; }
.sv3--us .sv3-hero__meta { margin-top: 6px; font-size: 13px; }
.sv3--us .sv3-price { margin: 0; align-items: flex-end; gap: 4px 14px; }
.sv3--us .sv3-price__v { font-weight: 700; }
@media (min-width: 720px) { .sv3--us .sv3-price__v { font-size: 44px; } }
.sv3--us .sv3-price__chg { padding-bottom: 4px; font-size: 18px; font-weight: 700; }
.sv3--us .sv3-price__arrow { display: none; }
.sv3--us .sv3-price__asof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding-bottom: 6px; font-size: 12px; color: var(--sv3-muted); }
/* The shared «سعر إغلاق …» line carries inline sizes made for stock-v2's navy hero. */
.sv3--us .sv3-price__asof .sv2-price-asof { margin: 0 !important; font-size: 12px !important; color: inherit; }
.sv3--us .sv3-answer { margin: 0; }
.sv3--us .sv3-hero__range { margin: 0; }
.sv3--us .sv3-hero__range .sv3-ratio__top b { color: var(--sv3-ink); }
.sv3--us .sv3-range { height: 8px; margin-top: 6px; }
.sv3--us .sv3-hero__actions { flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.sv3--us .sv3-hero__actions .sv3-btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
.sv3--us .sv3-byline { margin: 0; font-size: 12px; line-height: 1.8; color: var(--sv3-muted); }
:is(.sv3--us, .sv3--arab) .sv3-byline a { color: var(--sv3-brand); text-decoration: none; }
:is(.sv3--us, .sv3--arab) .sv3-byline__part + .sv3-byline__part::before { content: '·'; margin-inline: 6px; }
.sv3--us .sv3-byline--hero { margin-inline-start: 6px; }
.sv3--us .sv3-byline--below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding-inline: 4px; }
.sv3--us .sv3-keystrip .sv3-tile__v { font-weight: 700; }
@media (max-width: 1099.98px) {
  .sv3--us .sv3-keystrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .sv3--us .sv3-keystrip__item, .sv3--us .sv3-hero .sv3-keystrip__item { min-width: 0; width: auto; flex: none; padding: 8px 6px; }
  .sv3--us .sv3-keystrip .sv3-tile__v { white-space: normal; overflow-wrap: anywhere; }
}

/* 18.4 Verdict card: the standard's ratios, a chip per standard, then the dates on one line */
:is(.sv3--us, .sv3--arab) .sv3-verdict { padding: 18px; gap: 12px; }
:is(.sv3--us, .sv3--arab) .sv3-verdict__title { font-size: 22px; font-weight: 700; }
@media (min-width: 720px) { :is(.sv3--us, .sv3--arab) .sv3-verdict__title { font-size: 24px; } }
:is(.sv3--us, .sv3--arab) .sv3-verdict__more { min-height: 32px; font-weight: 600; }
@media (min-width: 1100px) { .sv3-verdict__ratios { display: flex; flex-direction: column; gap: 9px; } }
.sv3-verdict .sv3-ratio + .sv3-ratio { margin-top: 0; }
/* The unavailable notice (Rule 106) has two forms of its own: the full card, and below 330px of its width one line of
   reason. The surface and the padding sit on its wrapper so both forms read on slot A's navy. */
.sv3.sv3--us .sv3-slot--A .bct-unavail-wrap { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sv3-surface); }
.sv3.sv3--us .sv3-slot--A .bct-unavail { margin: 0; padding: 0; border: 0; background: transparent; }
.sv3-verdict .sv3-bar { margin-top: 4px; background: rgba(11, 122, 75, .14); }
.sv3-verdict:is(.sv3-verdict--haram, .sv3-verdict--mix, .sv3-verdict--review) .sv3-bar { background: rgba(11, 27, 51, .1); }
.sv3-ratio__v { white-space: nowrap; }
.sv3-verdict__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(11, 27, 51, .1); }
.sv3-verdict__foot { display: block; padding-top: 0; border-top: 0; font-size: 11px; line-height: 1.8; }
.sv3-verdict__foot > * + *::before { content: ' · '; }
.sv3-verdict__foot .sv3-verdict__method { display: inline; min-height: 0; font-size: 11px; }

/* 18.5 Phones: the navy hero of the mobile board, slot A last inside it */
@media (max-width: 719.98px) {
  .sv3.sv3--us .sv3-hero { padding: 14px 16px 16px; border: 0; border-radius: 16px; background: #0B1B33; color: #fff; }
  .sv3--us .sv3-hero__main { gap: 10px; }
  .sv3--us .sv3-hero__logo { width: 48px; height: 48px; border-color: transparent; }
  .sv3--us .sv3-hero__logo--text { background: #fff; color: #0B1B33; font-size: 11px; }
  .sv3--us .sv3-hero__title { font-size: 19px; font-weight: 800; line-height: 1.4; color: #fff; }
  .sv3--us .sv3-hero__meta { color: #B9C6D8; font-size: 12px; }
  .sv3--us .sv3-hero__exchange { padding: 1px 9px; background: var(--sv3-gold); color: var(--sv3-gold-ink); font-size: 10.5px; }
  .sv3--us .sv3-price { align-items: baseline; gap: 4px 10px; }
  .sv3--us .sv3-price__v { font-size: 36px; color: #fff; }
  .sv3--us .sv3-price__chg { padding: 2px 8px; border-radius: 8px; font-size: 13px; }
  .sv3--us .sv3-price__chg.sv3-dn { background: #3A1C22; color: #FF8C95; }
  .sv3--us .sv3-price__chg.sv3-up { background: rgba(11, 122, 75, .3); color: #5FD39A; }
  .sv3--us .sv3-price__arrow { display: inline; }
  .sv3--us .sv3-price__asof { flex-basis: 100%; padding: 0; font-size: 11px; color: #B9C6D8; }
  .sv3--us .sv3-answer { font-size: 13px; line-height: 1.8; color: #D6DEEA; }
  .sv3--us .sv3-answer b { color: #fff; }
  .sv3--us .sv3-hero .sv3-verdict { padding: 12px; gap: 8px; background: #13294A; border-color: #1F6B4E; }
  .sv3--us .sv3-hero .sv3-verdict--haram { border-color: #7A2A33; }
  .sv3--us .sv3-hero :is(.sv3-verdict--mix, .sv3-verdict--review) { border-color: #2A3E60; }
  .sv3--us .sv3-hero .sv3-verdict__icon { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
  .sv3--us .sv3-hero .sv3-verdict__caption { color: #B9C6D8; }
  .sv3--us .sv3-hero .sv3-verdict__title { font-size: 16px; color: #5FD39A; }
  .sv3--us .sv3-hero .sv3-verdict--haram .sv3-verdict__title { color: #FF8C95; }
  .sv3--us .sv3-hero .sv3-verdict--mix .sv3-verdict__title { color: #F1C97A; }
  .sv3--us .sv3-hero .sv3-verdict--review .sv3-verdict__title { color: #D6DEEA; }
  .sv3--us .sv3-hero :is(.sv3-verdict__more, .sv3-verdict__alt) { color: #7FD8C7; }
  .sv3--us .sv3-hero .sv3-verdict__note { color: #D6DEEA; }
  .sv3--us .sv3-hero .sv3-verdict__chips { padding-top: 6px; border-top-color: rgba(255, 255, 255, .12); }
  .sv3--us .sv3-hero .sv3-verdict__chips .sv3-chip { padding: 2px 8px; background: rgba(255, 255, 255, .08); color: #D6DEEA; font-size: 11px; }
  /* The dates and the method link print again at the end of the Sharia module; the first screen stays short. */
  .sv3--us .sv3-hero .sv3-verdict__foot { display: none; }
  .sv3--us .sv3-hero .sv3-keystrip { margin-top: 10px; }
  .sv3--us .sv3-hero .sv3-keystrip__item { min-width: 92px; background: #13294A; }
  .sv3--us .sv3-hero .sv3-tile__k { color: #B9C6D8; font-size: 11px; }
  .sv3--us .sv3-hero .sv3-tile__v { color: #fff; font-size: 14px; }
  .sv3.sv3--us .sv3-hero .sv3-slot--A { margin-top: 12px; padding: 12px; background: #13294A; border: 1px solid #2A3E60; border-radius: 12px; }
}

/* 18.6 Navigator: the desktop board's tab bar on the page tone, its «كل الأقسام» button and five-column panel */
:is(.sv3--us, .sv3--arab) .sv3-nav__more { display: none; }
:is(.sv3--us, .sv3--arab) .sv3-nav__gtitle .sv3-num { font-weight: 400; }
.sv3--us .sv3-nav__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sv3-line-2); }
@media (min-width: 1100px) {
  .sv3:is(.sv3--us, .sv3--arab) .sv3-nav { align-items: center; background: var(--sv3-bg); border: 0; border-bottom: 1px solid var(--sv3-line); border-radius: 0; }
  :is(.sv3--us, .sv3--arab) .sv3-tabs { gap: 24px; padding-inline: 4px; }
  :is(.sv3--us, .sv3--arab) .sv3-tabs a { min-height: 50px; font-weight: 600; color: var(--sv3-ink-2); }
  :is(.sv3--us, .sv3--arab) .sv3-nav__more { display: inline; }
  :is(.sv3--us, .sv3--arab) .sv3-nav__all { min-height: 36px; padding: 0 14px; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-surface); font-weight: 600; }
  :is(.sv3--us, .sv3--arab) .sv3-nav__panel { top: calc(100% + 6px); padding: 20px; border: 1px solid var(--sv3-line); border-radius: var(--sv3-radius); }
  .sv3--us .sv3-nav__actions { grid-column: 1 / -1; }
}

/* 18.7 Overview: the returns as tiles. The partial prints only the periods it has data for (two today, up to five), so
   the row takes as many columns as there are tiles: three a row on a phone, all of them on one row when they fit. */
.sv3--us #sv3-overview .sv2-stats-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.sv3--us #sv3-overview .sv2-stat { flex-direction: column; align-items: center; gap: 4px; padding: 10px; text-align: center; background: var(--sv3-tile); }
.sv3--us #sv3-overview .sv2-stat-val { text-align: center; }
.sv3--us .sv3-w52--chart { margin-top: 14px; }

/* 18.8 Sharia module */
.sv3--us .sv3-sharia .sv3-sub { max-width: 640px; }
.sv3--us .sv3-boards .sv3-table { font-size: 14px; }
@container sv3-card (min-width: 601px) { .sv3--us .sv3-boards .sv3-table { min-width: 560px; } }
.sv3--us .sv3-boards__name { font-weight: 700; }
.sv3--us .sv3-boards__ratio { color: var(--sv3-ink-2); }

/* 18.8.1 The Sharia table, the forecasts and the peers, compact and interactive (owner, 2026-10-26). In a narrow card
   (a phone, or the side column) each row is two or three short lines instead of a label above every value: the standard
   and its result, the value against the limit on a bar, and the governing ratio behind «التفاصيل» (stock-v3.js §20);
   a forecast year with its EPS and growth, the analysts' range with the average as a dot; a peer as one link. The bars
   and dots move into place once the block is on screen (.is-wait → none; reduced motion: no movement). */
.sv3-boards__bar { position: relative; display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--sv3-line-2); }
.sv3-boards__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--u, 0) * 100%); border-radius: inherit; background: var(--sv3-brand); }
.sv3-boards__row--halal .sv3-boards__bar i { background: var(--sv3-up); }
.sv3-boards__row--mix .sv3-boards__bar i { background: var(--sv3-gold); }
.sv3-boards__row--haram .sv3-boards__bar i { background: var(--sv3-dn); }
.sv3-fc__range { position: relative; display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--sv3-line-2), rgba(14, 124, 123, .35)); direction: ltr; }
.sv3-fc__range i { position: absolute; top: 50%; left: calc(var(--p, .5) * 100%); width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--sv3-surface); border-radius: 50%; background: var(--sv3-brand); box-shadow: 0 0 0 1px var(--sv3-brand); transform: translateY(-50%); }
.sv3-fc__growth { font-size: 12px; font-weight: 700; }
/* «$9.12 – $10.47» reads low to high, left to right, the way its bar does, whatever the Arabic line around it. */
.sv3-fc__range-cell > .sv3-num { display: inline-block; direction: ltr; unicode-bidi: isolate; }
.sv3-boards-toggle { display: none; }
/* A peer's row opens it (stock-v3.js §20 forwards a click on the row to its link — a stretched ::after cannot be held
   by a table row, so on the desktop table every row's overlay covered the whole table and the last peer won). */
.sv3-peers tbody tr.is-link { cursor: pointer; }
.sv3-peers tbody tr:hover { background: var(--sv3-tile); }
/* The peer's logo (or its ticker on a tile), its name under the ticker, and the change as a ▲/▼ pill. */
.sv3-peers .sv3-peers__co { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; color: var(--sv3-ink); text-decoration: none; }
.sv3-peers .sv3-peers__logo { display: grid; flex: none; place-items: center; width: 28px; height: 28px; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 9px; background: var(--sv3-surface); color: var(--sv3-ink-2); font-size: 11px; font-weight: 800; }
.sv3-peers .sv3-peers__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sv3-peers .sv3-peers__id { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sv3-peers .sv3-peers__sym { font-weight: 800; }
.sv3-peers .sv3-peers__name { min-width: 0; overflow: hidden; direction: ltr; unicode-bidi: isolate; font-size: 12px; font-weight: 400; color: var(--sv3-muted); white-space: nowrap; text-overflow: ellipsis; }
.sv3-peers .sv3-peers__chg { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sv3-peers .sv3-peers__chg.sv3-up { background: var(--sv3-up-bg); color: var(--sv3-up-ink); }
.sv3-peers .sv3-peers__chg.sv3-dn { background: var(--sv3-dn-bg); color: var(--sv3-dn-ink); }
.sv3-peers .sv3-peers__chg.sv3-up::before { content: '▲'; font-size: 9px; }
.sv3-peers .sv3-peers__chg.sv3-dn::before { content: '▼'; font-size: 9px; }
/* Sort and filter the peers (stock-v3.js §21). */
.sv3-peers-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sv3-peers-tools[hidden] { display: none; }
.sv3-peers-tool { min-height: 36px; padding: 0 12px; border: 1px solid var(--sv3-line); border-radius: 999px; background: var(--sv3-surface); color: var(--sv3-ink-2); font: 600 12.5px var(--font-primary, 'Almarai', sans-serif); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.sv3-peers-tool:hover { border-color: var(--sv3-brand); color: var(--sv3-brand); }
.sv3-peers-tool[aria-pressed="true"] { border-color: var(--sv3-ink); background: var(--sv3-ink); color: #fff; }
.sv3-peers-tool:focus-visible { outline: 2px solid var(--sv3-brand); outline-offset: 2px; }
@media (pointer: coarse) { .sv3-peers-tool { min-height: 44px; } }
@keyframes sv3-peer-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .sv3-peers tbody tr.is-moved { animation: sv3-peer-in .35s ease-out backwards; }
  .sv3-peers tbody tr.is-link:hover { box-shadow: 0 8px 18px -14px rgba(11, 27, 51, .45); }
}
.sv3-peers .sv3-peers__co:focus-visible { outline: none; }
.sv3-peers tr:has(.sv3-peers__co:focus-visible) { outline: 2px solid var(--sv3-brand); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .sv3-boards__bar i { transition: width .8s cubic-bezier(.22, .7, .2, 1); }
  .sv3-fc__range i { transition: left .8s cubic-bezier(.22, .7, .2, 1); }
  .sv3-peers tbody tr { transition: background-color .15s ease; }
  .is-wait .sv3-boards__bar i { width: 0; }
  .is-wait .sv3-fc__range i { left: 0; }
}
@container sv3-card (max-width: 600px) {
  /* The Sharia table: «الراجحي ……… متوافق» / «القيمة 2.69% · 1.31%   الحد 30%» + bar / the ratio (behind التفاصيل). */
  .sv3--us .sv3-boards tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name res" "val lim" "ratio ratio"; align-items: center; gap: 4px 12px; padding: 10px 12px; }
  .sv3--us .sv3-boards td.sv3-boards__name { grid-area: name; display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
  .sv3--us .sv3-boards td:nth-child(5) { grid-area: res; }
  .sv3--us .sv3-boards td.sv3-boards__value { grid-area: val; align-self: start; }
  .sv3--us .sv3-boards td:nth-child(4) { grid-area: lim; align-self: start; text-align: end; }
  .sv3--us .sv3-boards td.sv3-boards__ratio { grid-area: ratio; font-size: 12.5px; font-weight: 400; line-height: 1.7; color: var(--sv3-ink-2); }
  .sv3--us .sv3-boards :is(td.sv3-boards__value, td:nth-child(4))::before { display: inline; margin: 0; margin-inline-end: 4px; }
  .sv3--us .sv3-boards td:nth-child(5)::before { content: none; }
  .sv3--us .sv3-boards td.sv3-boards__ratio::before { display: inline; margin: 0; margin-inline-end: 4px; }
  .sv3--us .sv3-boards.has-toggles .sv3-boards-toggle {
    display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 999px;
    background: var(--sv3-neutral-bg); color: var(--sv3-brand); font: 600 11.5px var(--font-primary, 'Almarai', sans-serif); cursor: pointer;
  }
  .sv3--us .sv3-boards-toggle::after { content: '⌄'; line-height: 1; transition: transform .2s ease; }
  .sv3--us .sv3-boards tr.is-open .sv3-boards-toggle::after { transform: rotate(180deg); }
  .sv3--us .sv3-boards.has-toggles tr:not(.is-open) td.sv3-boards__ratio { display: none; }
  .sv3--us .sv3-boards tr.is-open { background: var(--sv3-tile); }

  /* The forecasts: «2027 ……… $9.65 +10.9%» / the range with the average's dot / «الإيرادات … · عدد المحللين …». */
  .sv3-forecasts tr { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "yr eps" "rng rng" "rev an"; align-items: center; gap: 4px 12px; padding: 10px 12px; }
  .sv3-forecasts td:nth-child(1) { grid-area: yr; grid-column: auto; font-size: 15px; }
  .sv3-forecasts td.sv3-fc__eps { grid-area: eps; text-align: end; font-size: 16px; }
  .sv3-forecasts td.sv3-fc__eps::before { content: none; }
  .sv3-forecasts td.sv3-fc__range-cell { grid-area: rng; font-size: 12.5px; font-weight: 600; color: var(--sv3-ink-2); }
  .sv3-forecasts td:nth-child(4) { grid-area: rev; font-size: 13px; }
  .sv3-forecasts td:nth-child(5) { grid-area: an; text-align: end; font-size: 13px; }
  .sv3-forecasts :is(td.sv3-fc__range-cell, td:nth-child(4), td:nth-child(5))::before { display: inline; margin: 0; margin-inline-end: 4px; }

  /* The peers as cards: [logo] «NVDA / NVIDIA Corporation» beside «$216.22 / ▼ 0.47%», then the value, P/E and verdict
     as chips; the row is the link. */
  .sv3-peers tbody tr { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "co co co pr" "co co co ch" "mc pe hv hv"; align-items: center; gap: 4px 8px; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--sv3-line-2); border-radius: 14px; }
  .sv3-peers tbody tr:first-child { border-top: 1px solid var(--sv3-line-2); }
  .sv3-peers td:nth-child(1) { grid-area: co; grid-column: auto; min-width: 0; }
  .sv3-peers td:nth-child(2) { grid-area: pr; text-align: end; font-size: 15px; }
  .sv3-peers td:nth-child(3) { grid-area: ch; justify-self: end; }
  .sv3-peers td:nth-child(4) { grid-area: mc; }
  .sv3-peers td:nth-child(5) { grid-area: pe; }
  .sv3-peers td:nth-child(6) { grid-area: hv; justify-self: start; }
  .sv3-peers :is(td:nth-child(4), td:nth-child(5)) { margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 12px; font-weight: 700; white-space: nowrap; }
  .sv3-peers td:nth-child(6) { margin-top: 6px; }
  .sv3-peers :is(td:nth-child(2), td:nth-child(3), td:nth-child(6))::before { content: none; }
  .sv3-peers :is(td:nth-child(4), td:nth-child(5))::before { display: inline; margin: 0; margin-inline-end: 4px; font-weight: 400; }
  .sv3-peers td:nth-child(4)::before { content: 'القيمة'; }
  .sv3-peers .sv3-peers__co { gap: 10px; }
  .sv3-peers .sv3-peers__logo { width: 38px; height: 38px; border-radius: 12px; }
  .sv3-peers .sv3-peers__id { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 1px; }
  .sv3-peers .sv3-peers__sym { font-size: 15px; }
  .sv3-peers .sv3-peers__name { max-width: 100%; }
  .sv3-peers.sv3-table-wrap, .sv3-table-wrap:has(> .sv3-peers) { border: 0; overflow: visible; }
}
.sv3--us .sv3-purify .sv2-section { margin: 0; padding: 0; border: 0; background: none; }
.sv3--us .sv3-purify .sv2-section-title { font-size: 15px; margin-bottom: 6px; }
.sv3--us .sv3-purify :is(.sv2-purify__lead, .sv2-purify__note) { font-size: 13px; line-height: 1.8; }
/* The purification calculator lays its inputs beside a 280px result card and stacks them only under a 640px screen, so
   in a half-width tile the inputs got ~100px. When the tile holds the calculator the two tiles stack (the design drew
   only the «غير متاح حالياً» note there); a narrow tile stacks the calculator itself. */
.sv3--us .sv3-sharia__tiles:has(.sv2-purify__calc) { grid-template-columns: minmax(0, 1fr); }
.sv3--us .sv3-purify { container: sv3-purify / inline-size; }
@container sv3-purify (max-width: 560px) {
  .sv3-purify .sv2-purify__calc { grid-template-columns: minmax(0, 1fr); }
  .sv3-purify .sv2-purify__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv3-purify .sv2-purify__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sv3--us .sv3-why__title { font-size: 15px; }
.sv3--us .sv3-why__lead, .sv3--us .sv3-why__more { font-size: 13px; line-height: 1.9; color: var(--sv3-ink-2); }
.sv3--us .sv3-why__lead p { margin: 0; }
.sv3--us .sv3-why__more summary { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; color: var(--sv3-brand); cursor: pointer; }
.sv3--us .sv3-why__more summary::after { content: ' ⌄'; margin-inline-start: 4px; }
.sv3--us .sv3-why__more[open] summary::after { content: ' ⌃'; }
.sv3--us .sv3-why__more .halal-status-content > * + * { margin-top: 10px; }
.sv3--us .sv3-sharia__tiles { margin-top: 16px; }
.sv3--us .sv2-authority-listings { padding-top: 14px; border-top: 1px solid var(--sv3-line-2); }
.sv3--us .sv2-authority-listings .sv2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .sv3--us .sv2-authority-listings .sv2-stats-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.sv3--us .sv2-authority-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "role link"; align-items: center; gap: 6px 8px; padding: 10px 12px; color: var(--sv3-ink); text-decoration: none; }
.sv3--us .sv2-authority-card .sv2-stat-label { grid-area: name; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--sv3-ink); white-space: normal; }
.sv3--us .sv2-authority-card .sv2-stat-val { grid-area: link; font-size: 12px; font-weight: 600; color: var(--sv3-brand); }
.sv3--us .sv2-authority-card .sv2-stat-val .text-meta { color: inherit; }
.sv3--us .sv2-authority-card > .text-meta { grid-area: role; justify-self: start; margin: 0 !important; padding: 3px 9px; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 12px; font-weight: 600; color: var(--sv3-ink-2); }
/* Two cards a row on phones leave a card ~150px wide: the role pill and «منهجية الهيئة ←» no longer fit side by side
   (they overlapped at 320-360), so under 720px the card stacks name, role and link. */
@media (max-width: 719.98px) {
  .sv3--us .sv2-authority-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "role" "link"; align-content: start; justify-items: start; }
  .sv3--us .sv2-authority-card .sv2-stat-label { text-align: start; }
}
.sv3--us .sv2-authority-listings > p.text-meta { margin: 10px 0 0 !important; padding: 10px 12px; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); font-size: 12.5px !important; line-height: 1.9; color: var(--sv3-ink-2); }
.sv3--us .sv3-sharia__links { margin-top: 10px; }
.sv3--us .sv3-sharia__links .sv3-chip { min-height: 32px; border: 0; }
.sv3--us .sv3-sharia .sv2-stock-alternatives, .sv3--us .sv3-sharia .stock-alternatives { margin-top: 16px; }

/* 18.9 Technical analysis: the indicator rows beside the support/resistance tile and the moving averages */
.sv3--us .sv3-ta__sum { padding: 6px 12px; font-size: 13px; }
.sv3--us .sv3-ta__rows { margin-top: 12px; }
.sv3--us .sv3-ta__sr { margin-top: 14px; }
.sv3--us .sv3-ta__sr .sv3-ratio__top { font-size: 13px; color: var(--sv3-ink); }
.sv3--us .sv3-ta__sr .sv3-bar { height: 8px; }
.sv3--us .sv3-ta #moving-avg + .sv2-section, .sv3--us .sv3-ta > .sv2-section { margin-top: 16px; }
.sv3--us .sv3-ta .sv2-table { min-width: 0; font-size: 13px; }
@media (min-width: 720px) {
  .sv3.sv3--us .sv3-ta:has(.sv3-ta__rows) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .sv3.sv3--us .sv3-ta:has(.sv3-ta__rows) > * { grid-column: 1 / -1; margin-top: 0; }
  .sv3.sv3--us .sv3-ta:has(.sv3-ta__rows) > .sv3-ta__rows { grid-column: 1; grid-row: 2 / span 2; margin-top: 12px; }
  .sv3.sv3--us .sv3-ta:has(.sv3-ta__rows) > .sv3-ta__sr { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .sv3.sv3--us .sv3-ta:has(.sv3-ta__rows) > :is(#moving-avg, .sv2-section) { grid-column: 2; grid-row: 3; margin-top: 14px; }
  .sv3.sv3--us .sv3-ta:has(.sv3-ta__rows) > .sv3-ta__note { grid-row: 4; }
}

/* 18.10 Financial data: the title beside the pills, then the panels as tiles (four a row on desktop) */
.sv3--us .sv3-fin__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.sv3--us .sv3-fin__title { font-size: 13px; font-weight: 700; color: var(--sv3-ink); }
.sv3--us .sv3-fin__bar .sv3-tablist { flex: 0 1 auto; max-width: 100%; }
:is(.sv3--us, .sv3--arab) .sv3-pill { min-height: 34px; padding: 0 12px; border-radius: 8px; font-weight: 600; }
.sv3--us #sv3-financials .sv2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .sv3--us #sv3-financials .sv2-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv3--us #sv3-financials .sv2-stat { flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--sv3-tile); }
.sv3--us #sv3-financials .sv2-stat-label { font-size: 12px; }
.sv3--us #sv3-financials .sv2-stat-val { font-size: 16px; text-align: start; }
.sv3--us #sv3-financials #profit-revenue-depth { padding: 12px 14px; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); font-size: 13px; line-height: 1.9; }

/* 18.11 Dividends: four tiles a row, the yearly bars, the full record behind a full-width button */
.sv3--us #sv3-dividends .sv2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .sv3--us #sv3-dividends .sv2-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv3--us #sv3-dividends .sv2-stat { flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--sv3-tile); }
.sv3--us #sv3-dividends .sv2-stat-val { text-align: start; }
.sv3--us #sv3-dividends .sv2-dividend-narrative { font-size: 13px; line-height: 1.9; }
.sv3--us #sv3-dividends .sv2-dividend-table-toggle > summary { display: flex; justify-content: center; align-items: center; min-height: 40px; margin-top: 12px; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-surface); font-size: 14px; font-weight: 600; cursor: pointer; }

/* 18.12 News: one row per item — time, headline with the summary under it, the sentiment */
.sv3--us .sv3-news__list { margin: 6px 0 0; padding: 0; list-style: none; }
.sv3--us .sv3-news__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body body" "tag time"; justify-items: start; gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--sv3-line-2); }
.sv3--us .sv3-news__body { grid-area: body; min-width: 0; }
.sv3--us .sv3-news__time { grid-area: time; justify-self: end; font-size: 12px; color: var(--sv3-muted); }
.sv3--us .sv3-news__item > .sv3-chip { grid-area: tag; }
@media (min-width: 720px) {
  .sv3--us .sv3-news__item { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "time body tag"; align-items: start; gap: 14px; }
  .sv3--us .sv3-news__time { justify-self: start; padding-top: 2px; }
}
.sv3--us .sv3-news__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--sv3-ink); }
.sv3--us .sv3-news__sum { display: -webkit-box; margin: 2px 0 0; overflow: hidden; font-size: 12.5px; line-height: 1.7; color: var(--sv3-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sv3--us .sv3-news__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--sv3-muted); }

/* 18.13 Company: the description and the indexes beside the facts, then the data summary and the holders */
.sv3--us #sv3-company .sv2-description { margin: 0; font-size: 14px; line-height: 2; color: var(--sv3-ink-2); }
.sv3--us #company-profile + .sv2-section .sv2-stats-grid { display: flex; flex-direction: column; gap: 0; }
.sv3--us #company-profile + .sv2-section .sv2-stat { padding: 8px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--sv3-line-2); font-size: 13px; }
.sv3--us #company-profile + .sv2-section .sv2-stat-val { font-size: 13px; }
@media (min-width: 720px) {
  .sv3.sv3--us .sv3-company { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .sv3.sv3--us .sv3-company > * { grid-column: 1 / -1; }
  /* The empty jump anchors (#company-profile, #related-indexes …) stay targets but take no grid cell. */
  .sv3.sv3--us .sv3-company > div:empty { position: absolute; }
  .sv3.sv3--us .sv3-company > #related-indexes + .sv2-section { grid-column: 1; margin-top: 16px; }
  .sv3.sv3--us .sv3-company > #company-profile + .sv2-section { display: contents; }
  .sv3.sv3--us .sv3-company > #company-profile + .sv2-section > .sv2-section-title { grid-column: 1 / -1; font-size: 19px; }
  .sv3.sv3--us .sv3-company > #company-profile + .sv2-section > .sv2-description { grid-column: 1; }
  .sv3.sv3--us .sv3-company > #company-profile + .sv2-section > .sv2-stats-grid { grid-column: 2; grid-row: span 2; }
  .sv3.sv3--us .sv3-company > #company-profile + .sv2-section + .sv2-section { grid-column: 1; margin-top: 16px; }
}
.sv3--us #sv3-company .stock-data-fallback, .sv3--us #sv3-company .sv2-section:has(#stock-data-fallback-title) { padding: 12px 14px; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); }
/* «ملخص بيانات السهم»: the partial's own grid (auto-fit, 180px tracks) fits one track on a phone, so every fact took a
   full row. Two a row on phones, as the key stats do; the partial's grid from 720px. Values keep their own direction
   («5.01 T», not «T 5.01»). */
.sv3:is(.sv3--us, .sv3--arab) #sv3-company .stock-data-fallback__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .sv3:is(.sv3--us, .sv3--arab) #sv3-company .stock-data-fallback__facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } }
.sv3:is(.sv3--us, .sv3--arab) #sv3-company .stock-data-fallback__fact { min-width: 0; padding: 10px 12px; }
.sv3:is(.sv3--us, .sv3--arab) #sv3-company .stock-data-fallback__fact dd { width: fit-content; max-width: 100%; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sv3--us #sv3-company .ih-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .sv3--us #sv3-company .ih-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } }

/* 18.14 Discover: peers, the halal alternatives, the sector leaders and data links as chips, related articles */
.sv3--us .sv3-discover .stock-alternatives { margin-top: 18px; }
.sv3--us .sv3-discover__chips .content-section, .sv3--us .sv3-discover__chips .sv2-section { margin: 0; padding: 0; }
.sv3--us .sv3-discover__chips .sl-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sv3--us .sv3-discover__chips .sl-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); box-shadow: none; transform: none; font-size: 12px; }
.sv3--us .sv3-discover__chips .sl-sector { order: -1; padding: 0; background: none; font-size: 12px; font-weight: 400; color: var(--sv3-muted); }
.sv3--us .sv3-discover__chips .sl-sector::after { content: ' ·'; }
.sv3--us .sv3-discover__chips .sl-name { margin: 0; font-size: 12px; font-weight: 700; }
.sv3--us .sv3-discover__chips .sl-ticker { font-size: 12px; }
.sv3--us .sv3-discover__chips #stock-data-explorer .btn { min-height: 32px; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 12px; font-weight: 600; color: var(--sv3-ink-2); }
.sv3--us .sv3-discover__chips #stock-data-explorer .text-muted { font-size: 12px; }
.sv3--us .sv3-discover .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sv3--us .sv3-discover .related-card { overflow: hidden; border: 0; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); box-shadow: none; }
.sv3--us .sv3-discover .related-card__media { aspect-ratio: auto; height: 90px; }
.sv3--us .sv3-discover .related-card__body { padding: 10px 12px; }
.sv3--us .sv3-discover .related-card__title { font-size: 13px; line-height: 1.7; }
.sv3--us .sv3-discover .related-card__desc { display: -webkit-box; overflow: hidden; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* 18.15 Questions: an accordion of rows with a plus sign, the sources folded, the disclaimer under them */
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-section { padding: 0; background: none; content-visibility: visible; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-section::before { content: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-header { margin: 0 0 6px; text-align: start; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-header__icon { display: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-header__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--sv3-ink); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-header__desc { margin-top: 4px; font-size: 13px; color: var(--sv3-muted); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-list { max-width: none; gap: 0; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item { border: 0; border-bottom: 1px solid var(--sv3-line-2); border-radius: 0; background: none; box-shadow: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item__head { min-height: 48px; padding: 14px 0; background: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item__num { display: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item__q { font-size: 15px; font-weight: 600; color: var(--sv3-ink); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item__toggle { background: none; color: var(--sv3-muted); }
/* Open, the sign reads «−» (the boards), not the base component's «+» turned 45°. */
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item--open .fq-item__toggle { background: none; transform: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .fq-item--open .fq-item__content { padding: 0 0 14px; font-size: 14px; line-height: 1.9; color: var(--sv3-ink-2); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .citation-modern { margin: 14px 0 0 !important; border: 0; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); box-shadow: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .citation-modern .citation-header { padding: 12px 14px; background: var(--sv3-tile); color: var(--sv3-ink); font-size: 14px; letter-spacing: 0; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .citation-modern .citation-arrow { color: var(--sv3-muted); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-faq .ymyl-disclaimer { margin: 12px 0 0; font-size: 12px; line-height: 1.9; color: var(--sv3-muted); }

/* 18.16 Side column: analysts, how to buy, the app card, the company card */
.sv3--us .sv3-analysts__word { margin-top: 6px; font-size: 24px; font-weight: 700; color: var(--sv3-ink-2); }
.sv3--us .sv3-analysts__word--buy { color: var(--sv3-up-ink); }
.sv3--us .sv3-analysts__bar { display: flex; gap: 2px; height: 10px; margin-top: 10px; overflow: hidden; border-radius: 99px; }
.sv3--us .sv3-analysts__seg { flex: var(--v, 1) 1 0; min-width: 4px; }
.sv3--us .sv3-analysts__seg--sb { background: #0B6B42; }
.sv3--us .sv3-analysts__seg--bu { background: #4CB782; }
.sv3--us .sv3-analysts__seg--ho { background: #AEB8C6; }
.sv3--us .sv3-analysts__seg--se { background: #E08A3C; }
.sv3--us .sv3-analysts__seg--ss { background: var(--sv3-dn); }
.sv3--us .sv3-analysts__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: var(--sv3-muted); }
.sv3--us .sv3-analysts__legend > span { display: inline-flex; align-items: center; gap: 4px; }
.sv3--us .sv3-analysts__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.sv3--us .sv3-analysts__sum { margin: 8px 0 0; font-size: 12px; color: var(--sv3-ink-2); }
.sv3--us .sv3-analysts__target { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; }
.sv3--us .sv3-analysts__target > b { font-size: 16px; }
.sv3--us .sv3-news__new { margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sv3-brand); color: #fff; font-size: 10px; font-weight: 700; }
.sv3--us .sv3-analysts .sv2-analyst-note { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--sv3-muted); }
.sv3--us #sv3-howtobuy .sv2-section-title { font-size: 15px; }
.sv3--us #sv3-howtobuy .sv2-step-grid { display: block; margin: 10px 0 0; padding: 0; counter-reset: none; }
.sv3--us #sv3-howtobuy .tile-center { display: block; padding: 0; margin: 0 0 6px; background: none; text-align: start; font-size: 13px; line-height: 1.8; color: var(--sv3-ink-2); }
.sv3--us #sv3-howtobuy .sv2-step-num { display: inline-flex; width: 20px; height: 20px; margin: 0 0 0 6px; font-size: 11px; vertical-align: 1px; }
.sv3--us #sv3-howtobuy :is(.sv2-step-title, .text-meta-12) { display: inline; font-size: 13px; }
.sv3--us #sv3-howtobuy .sv2-step-title { font-weight: 700; color: var(--sv3-ink); }
.sv3--us #sv3-howtobuy .sv2-step-title::after { content: ' — '; font-weight: 400; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo { margin: 0; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__box { padding: 14px 16px; border-radius: var(--sv3-radius); background: var(--sv3-halal-bg); border-color: var(--sv3-halal-line); box-shadow: none; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__main { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon copy" ". actions"; align-items: start; gap: 8px 12px; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__icon { grid-area: icon; inline-size: 40px; block-size: 40px; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__copy { grid-area: copy; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__actions { grid-area: actions; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__eyebrow { font-size: 11px; color: var(--sv3-up-ink); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__title { margin-bottom: 2px; font-size: 14px; }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__text { font-size: 12px; line-height: 1.7; color: var(--sv3-muted); }
:is(.sv3--us, .sv3--screener, .sv3--arab) .sv3-app-slot .app-promo__cta { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; }
.sv3--us .sv3-mini .sv2-mini-card { padding: 14px 16px; border-radius: var(--sv3-radius); }

/* 18.17 Bottom bar: the verdict as a chip, the watch button beside the CTA */
.sv3--us .sv3-stickybar__verdict { padding: 3px 10px; border-radius: 999px; background: var(--sv3-up-bg); }
.sv3--us .sv3-stickybar__verdict--mix { background: var(--sv3-warn-bg); }
.sv3--us .sv3-stickybar__verdict--haram { background: var(--sv3-dn-bg); }
.sv3--us .sv3-stickybar__verdict--review { background: var(--sv3-neutral-bg); }

/* ---------- 19. Arab-market stock page — design file (3), boards eb3af537 (1440) and 3fd605ac (390) ----------
   Scoped to .sv3--arab, beside the primitives it shares with the US page in 18 (cards, tiles, rows, the verdict card, the
   navigator, the pills, the questions, the app card). The hero is white at every width, as both boards draw it. The side
   column (≥ 1100px) holds the analysts, slot A, the trading hours and the app card; below 1100px every card is one column
   in the mobile board's order (sv3-o-*). Every rule restyles markup the page renders. */
.sv3--arab { --sv3-night: #0B1B33; --sv3-night-2: #13294A; --sv3-night-line: #2A3E60; }

/* 19.1 Hero: identity, price and session, the 52-week bar, the byline line, then the financial figures */
.sv3--arab .sv3-hero__main { display: flex; flex-direction: column; gap: 14px; }
.sv3--arab .sv3-hero__h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.sv3--arab .sv3-hero__title { font-weight: 700; line-height: 1.35; }
.sv3--arab .sv3-hero__tick { font-size: 18px; font-weight: 600; color: var(--sv3-muted); }
@media (min-width: 720px) { .sv3--arab .sv3-hero__tick { font-size: 26px; } }
.sv3--arab .sv3-hero__meta { font-size: 13px; }
.sv3--arab .sv3-hero__meta .sv3-chip { font-weight: 600; }
.sv3--arab .sv3-hero__en { margin: 0; font-size: inherit; }
.sv3--arab .sv3-price { margin: 0; align-items: flex-end; gap: 4px 14px; }
.sv3--arab .sv3-price__v { font-weight: 700; }
@media (min-width: 720px) { .sv3--arab .sv3-price__v { font-size: 44px; } }
.sv3--arab .sv3-price__cur { padding-bottom: 4px; font-weight: 400; }
.sv3--arab .sv3-price__chg { padding-bottom: 4px; font-size: 18px; font-weight: 700; }
.sv3--arab .sv3-price__asof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-bottom: 6px; font-size: 12px; color: var(--sv3-muted); }
.sv3--arab .sv3-hero__mkt { display: inline-flex; align-items: center; gap: 6px; }
.sv3.sv3--arab [data-sv3-mkt-box][hidden] { display: none; }
.sv3--arab .sv3-hero__range { max-width: 520px; margin: 0; }
.sv3--arab .sv3-hero__range .sv3-ratio__top b { color: var(--sv3-ink); }
.sv3--arab .sv3-range { height: 8px; }
/* The byline line: the authors and the date, then «مشاركة» and «متابعة» as links of the same line. */
.sv3--arab .sv3-hero__actions { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 12px; line-height: 1.8; color: var(--sv3-muted); }
.sv3--arab .sv3-hero__actions > * + *::before { content: '·'; margin-inline: 8px; font-weight: 400; color: var(--sv3-muted); }
.sv3--arab .sv3-byline--hero { margin: 0; font-size: 12px; color: var(--sv3-muted); }
.sv3-textbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; font: 600 12px var(--font-primary, 'Almarai', sans-serif); color: var(--sv3-brand); cursor: pointer; }
.sv3-textbtn svg { width: 14px; height: 14px; }
.sv3-textbtn:hover { text-decoration: underline; }
/* The authors' cards under the hero on phones; from 720px the byline line names them. */
@media (max-width: 719.98px) {
  .sv3--arab .sv3-byline--hero { display: none; }
  .sv3--arab .sv3-byline--hero + *::before { content: none; }
}
@media (min-width: 720px) { .sv3--arab .sv3-byline--below { display: none; } }
.sv3--arab .sv3-byline--below .gsd-authorship { flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.sv3--arab .sv3-hero__fin { margin-top: 16px; }
.sv3--arab .sv3-hero__fin-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--sv3-ink); }
.sv3--arab .sv3-hero__fin .sv3-keystrip { margin-top: 8px; }
.sv3--arab .sv3-hero__fin .sv3-tile__v { font-size: 14px; font-weight: 600; }
@media (min-width: 720px) {
  .sv3--arab .sv3-hero__fin { margin-top: 18px; }
  .sv3--arab .sv3-hero__fin-title { font-size: 15px; }
}
@media (min-width: 1100px) {
  .sv3--arab .sv3-hero__side { flex: 0 0 360px; }
  .sv3--arab .sv3-hero__fin .sv3-keystrip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .sv3--arab .sv3-hero__fin .sv3-tile__v { font-size: 15px; }
}
/* Phones: the mobile board's order — identity, price, the verdict, the figures, the 52-week bar, the byline line. */
@media (max-width: 719.98px) {
  .sv3.sv3--arab .sv3-hero { display: flex; flex-direction: column; gap: 12px; }
  .sv3--arab .sv3-hero__row, .sv3--arab .sv3-hero__main { display: contents; }
  .sv3--arab .sv3-hero__id { order: 1; }
  .sv3--arab .sv3-price, .sv3--arab .gsd-price-unavailable { order: 2; }
  .sv3--arab .sv3-hero__side { order: 3; }
  .sv3--arab .sv3-hero__fin { order: 4; margin: 0; }
  .sv3--arab .sv3-hero__range { order: 5; }
  .sv3--arab .sv3-hero__actions { order: 6; }
  .sv3--arab .sv3-hero__title { font-size: 18px; }
  .sv3--arab .sv3-price__v { font-size: 36px; }
  .sv3--arab .sv3-price__chg { font-size: 15px; }
}

/* 19.2 Verdict card: the status, the classifier, the ratios still to come, the link to the Sharia section */
.sv3--arab .sv3-verdict { gap: 10px; }
.sv3--arab .sv3-verdict__note { font-size: 13px; line-height: 1.8; color: var(--sv3-ink-2); }
.sv3-verdict__pending { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--sv3-radius-sm); background: var(--sv3-surface); font-size: 12px; color: var(--sv3-muted); }
.sv3-verdict__more--foot { align-self: flex-start; }
@media (max-width: 719.98px) {
  .sv3--arab .sv3-verdict { padding: 12px; gap: 6px; }
  .sv3--arab .sv3-verdict__icon { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
  .sv3--arab .sv3-verdict__title { font-size: 16px; }
  .sv3--arab .sv3-verdict__note { font-size: 12px; line-height: 1.7; }
  .sv3--arab .sv3-verdict__pending { display: none; }
}

/* 19.3 The Sharia section: the verdict in a sentence, the ratios still to come, the links */
.sv3.sv3--arab .sv3-sharia > * + * { margin-top: 12px; }
.sv3--arab .sv3-sharia__lead { margin-bottom: 0; font-size: 14px; line-height: 1.9; color: var(--sv3-ink-2); }
.sv3--arab .sv3-sharia__verdict--halal { color: var(--sv3-up); }
.sv3--arab .sv3-sharia__verdict--mix { color: var(--sv3-warn-ink); }
.sv3--arab .sv3-sharia__verdict--haram { color: var(--sv3-dn); }
.sv3--arab .sv3-g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.sv3--arab .sv3-sharia__ratios .sv3-tile { gap: 4px; padding: 12px 14px; }
.sv3--arab .sv3-sharia__none { font-size: 14px; font-weight: 700; color: var(--sv3-muted); }
@media (max-width: 719.98px) {
  .sv3--arab .sv3-sharia__ratios { gap: 0; }
  .sv3--arab .sv3-sharia__ratios .sv3-tile { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--sv3-line-2); }
  .sv3--arab .sv3-sharia__ratios .sv3-tile:last-child { border-bottom: 0; }
  .sv3--arab .sv3-sharia__none { flex: 0 0 auto; font-size: 13px; }
}
/* The design's neutral chips for the section's and the peers' links. */
.sv3--arab :is(.sv3-sharia__links, .sv3-peers__links) a.sv3-chip--link { min-height: 32px; padding: 3px 10px; border: 0; background: var(--sv3-neutral-bg); color: var(--sv3-ink-2); font-weight: 600; }
.sv3--arab :is(.sv3-sharia__links, .sv3-peers__links) a.sv3-chip--link:hover { color: var(--sv3-brand); }

/* 19.4 Investor data: the title beside the tabs, the figures as tiles, the record as the design's table */
.sv3-tab__short { display: none; }
@media (max-width: 719.98px) { .sv3-tab__long { display: none; } .sv3-tab__short { display: inline; } }
.sv3.sv3--arab .sv3-investor .gsd-section-title { margin: 0; }
@media (min-width: 720px) {
  .sv3.sv3--arab .sv3-investor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; }
  .sv3--arab .sv3-investor > .sv3-fin { display: contents; }
  .sv3--arab .sv3-investor > .gsd-section-title { flex: 1 1 280px; }
  .sv3--arab .sv3-investor .sv3-fin__bar { flex: 0 1 auto; max-width: 100%; }
  .sv3--arab .sv3-investor :is(.sv3-tabpanel, .gsd-investor-disclaimer) { flex: 1 1 100%; }
}
@media (max-width: 719.98px) { .sv3--arab .sv3-investor .sv3-fin__bar { margin-top: 10px; } }
.sv3.sv3--arab .sv3-tabpanel .gsd-investor-card__title { margin: 0 0 10px; padding: 0; border: 0; font-size: 15px; font-weight: 700; color: var(--sv3-ink); }
.sv3--arab .sv3-investor .gsd-fin-grid--4 { gap: 10px; }
.sv3--arab .sv3-investor .gsd-fin-item { gap: 4px; padding: 12px 14px; border: 0; background: var(--sv3-tile); }
.sv3--arab .sv3-investor .gsd-fin-label { font-size: 12px; font-weight: 400; color: var(--sv3-muted); }
/* A date reads «20 أغسطس 2026», a sum «1.360 SAR»: each value takes its direction from its own first letter. */
.sv3--arab .sv3-investor .gsd-fin-val { font-size: 15px; font-weight: 700; color: var(--sv3-ink); direction: rtl; unicode-bidi: plaintext; text-align: right; }
.sv3--arab .gsd-investor-table-wrap { margin-top: 12px; border: 0; border-radius: 0; }
.sv3--arab .gsd-investor-table { font-size: 14px; }
.sv3--arab .gsd-investor-table thead { background: none; }
.sv3--arab .gsd-investor-table th { padding: 9px 10px; background: var(--sv3-tile); font-size: 12px; font-weight: 600; color: var(--sv3-muted); }
.sv3--arab .gsd-investor-table td { padding: 11px 10px; border-block-start: 1px solid var(--sv3-line-2); color: var(--sv3-ink); unicode-bidi: plaintext; text-align: right; }
.sv3--arab .gsd-investor-table tbody tr:hover { background: none; }
@container sv3-card (max-width: 600px) {
  .sv3--arab .gsd-investor-table.sv3-stackable tr:has(> td:nth-child(2):last-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; }
  .sv3--arab .gsd-investor-table.sv3-stackable tr:has(> td:nth-child(2):last-child) td::before { content: none; }
  .sv3--arab .gsd-investor-table.sv3-stackable td { padding: 0; border: 0; }
}

/* 19.5 Broker slot B: the design's banner — the question and the risk line beside the brokers. The cards and their
   buttons are the shared ones (Rule 106): an unavailable broker's button opens the pop-up with its alternatives instead
   of an inline notice (broker-cta, $ctaAlternatives). */
.sv3.sv3--arab .sv3-slot-b .gsd-section--brokers { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 10px 18px; margin: 0; padding: 16px; border-radius: var(--sv3-radius); background: var(--sv3-night); }
.sv3--arab .sv3-slot-b .gsd-cta-h2 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; text-align: center; color: #fff; }
.sv3--arab .sv3-slot-b .gsd-broker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sv3--arab .sv3-slot-b .gsd-broker-card { gap: 6px; padding: 10px; border-color: var(--sv3-night-line); border-radius: 12px; background: var(--sv3-night-2); }
.sv3--arab .sv3-slot-b .gsd-broker-logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; }
.sv3--arab .sv3-slot-b .gsd-broker-name { font-size: 12.5px; }
.sv3--arab .sv3-slot-b .gsd-broker-cta { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border-radius: 10px; background: #C8922A; color: #1A1205; font-size: 13px; font-weight: 700; }
.sv3--arab .sv3-slot-b .gsd-broker-disclaimer { font-size: 10.5px; color: #9FB0C8; text-align: center; }
@media (min-width: 720px) {
  .sv3.sv3--arab .sv3-slot-b .gsd-section--brokers { grid-template-columns: minmax(200px, 1fr) auto; grid-template-areas: "title brokers" "note brokers"; padding: 16px 18px; }
  .sv3--arab .sv3-slot-b .gsd-cta-h2 { grid-area: title; align-self: end; font-size: 18px; text-align: start; }
  .sv3--arab .sv3-slot-b .gsd-broker-disclaimer { grid-area: note; align-self: start; font-size: 11px; text-align: start; }
  .sv3--arab .sv3-slot-b .gsd-broker-grid { grid-area: brokers; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  .sv3--arab .sv3-slot-b .gsd-broker-card { display: grid; grid-template-columns: 44px minmax(0, auto); grid-template-areas: "logo name" "logo cta"; align-content: center; align-items: center; gap: 4px 10px; padding: 10px 12px; text-align: start; }
  .sv3--arab .sv3-slot-b .gsd-broker-logo { grid-area: logo; }
  .sv3--arab .sv3-slot-b .gsd-broker-name { grid-area: name; }
  .sv3--arab .sv3-slot-b .gsd-broker-cta { grid-area: cta; min-height: 36px; font-size: 12.5px; }
  .sv3--arab .sv3-slot-b .gsd-broker-card > :not(.gsd-broker-logo, .gsd-broker-name, .gsd-broker-cta) { grid-column: 1 / -1; }
}

/* 19.6 The company: its facts as the design's tiles */
.sv3--arab .gsd-info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .sv3--arab .gsd-info-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
.sv3--arab .gsd-info-card { gap: 4px; padding: 12px 14px; border: 0; border-radius: var(--sv3-radius-sm); background: var(--sv3-tile); box-shadow: none; transform: none; }
.sv3--arab .gsd-info-card__icon { display: none; }
.sv3--arab .gsd-info-card__label { font-size: 12px; color: var(--sv3-muted); }
.sv3--arab .gsd-info-card__val { font-size: 13.5px; font-weight: 700; color: var(--sv3-ink); }
.sv3--arab .gsd-info-card__val .gsd-exchange-badge { padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; color: inherit; }
/* The article's sections (Accordion::byHeading): each heading opens its section; the first is open. */
.sv3--arab .gsd-article .sv3-acc { border-top: 1px solid var(--sv3-line-2); }
.sv3--arab .sv3-acc__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; list-style: none; cursor: pointer; }
.sv3--arab .sv3-acc__head::-webkit-details-marker { display: none; }
.sv3--arab .sv3-acc__head::after { content: '⌄'; flex: 0 0 auto; font-size: 14px; line-height: 1; color: var(--sv3-muted); transition: transform .2s ease; }
.sv3--arab .sv3-acc[open] > .sv3-acc__head::after { transform: rotate(180deg); }
.sv3.sv3--arab .gsd-article .sv3-acc__head h2 { margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--sv3-ink); }
.sv3--arab .sv3-acc__body { padding-bottom: 12px; font-size: 14px; line-height: 2; color: var(--sv3-ink-2); }
.sv3--arab .sv3-acc__body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .sv3--arab .sv3-acc__head::after { transition: none; } }

/* 19.7 News: one row per item — the time beside the headline and its summary; more than four fold (data-sv3-fold) */
.sv3--arab #sv3-news .container-xl { display: flex; flex-direction: column; }
.sv3--arab #sv3-news .gsn-head { align-items: center; margin: 0; }
.sv3--arab #sv3-news .gsn-h2 { margin: 0; padding: 0; border: 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--sv3-ink); }
@media (min-width: 720px) { .sv3--arab #sv3-news .gsn-h2 { font-size: 19px; } }
.sv3--arab #sv3-news .gsn-live { padding: 3px 9px; font-size: 12px; font-weight: 600; background: var(--sv3-up-bg); color: var(--sv3-up-ink); }
.sv3--arab #sv3-news .gsn-dot { display: none; }
.sv3--arab #sv3-news .gsn-intro { margin: 4px 0 0; font-size: 12.5px; color: var(--sv3-muted); }
.sv3--arab #sv3-news .gsn-byline { order: 3; margin: 10px 0 0; font-size: 12px; }
.sv3--arab #sv3-news .gsn-grid { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.sv3--arab #sv3-news .gsn-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--sv3-line-2); border-radius: 0; background: none; box-shadow: none; transform: none; }
.sv3--arab #sv3-news .gsn-card:hover { box-shadow: none; transform: none; }
.sv3--arab #sv3-news .gsn-time { font-size: 12px; color: var(--sv3-muted); }
.sv3--arab #sv3-news .gsn-title { font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--sv3-ink); }
.sv3--arab #sv3-news .gsn-summary { display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.7; color: var(--sv3-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 720px) {
  .sv3--arab #sv3-news .gsn-card { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "meta title" "meta summary"; column-gap: 14px; }
  .sv3--arab #sv3-news .gsn-meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 3px; }
  .sv3--arab #sv3-news .gsn-title { grid-area: title; }
  .sv3--arab #sv3-news .gsn-summary { grid-area: summary; }
}
.sv3--arab #sv3-news.is-folded .gsn-card:nth-child(n+5) { display: none; }
.sv3--arab #sv3-news .sv3-fold__more { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 40px; margin-top: 12px; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-surface); font: 600 14px var(--font-primary, 'Almarai', sans-serif); color: var(--sv3-ink); cursor: pointer; }

/* 19.8 Similar stocks: the design's table, then its links */
.sv3--arab .sv3-peers .sv3-table-wrap { margin-top: 10px; border: 0; border-radius: 0; }
.sv3--arab .sv3-peers__links { margin-top: 12px; }

/* 19.9 Explore: its three links as the design's chips */
.sv3--arab .sv3-explore .gsd-related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sv3--arab .sv3-explore .gsd-related-card { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--sv3-up-bg); box-shadow: none; transform: none; }
.sv3--arab .sv3-explore .gsd-related-card:last-child { background: var(--sv3-neutral-bg); }
.sv3--arab .sv3-explore .gsd-related-name { margin: 0; font-size: 12px; font-weight: 600; color: var(--sv3-up-ink); direction: rtl; -webkit-line-clamp: unset; }
.sv3--arab .sv3-explore .gsd-related-card:last-child .gsd-related-name { color: var(--sv3-ink-2); }

/* 19.10 Side column: the analysts, slot A, the trading hours, the app card */
.sv3.sv3--arab #sv3-community .cta-rail__title { margin: 0 0 4px; font-size: 15px; }
.sv3--arab #sv3-community .cta-rail__list { display: block; margin: 0; padding: 0; list-style: none; }
.sv3--arab #sv3-community .cta-rail__item { max-width: none; border-bottom: 1px solid var(--sv3-line-2); }
.sv3--arab #sv3-community .cta-rail__item:last-child { border-bottom: 0; }
.sv3--arab #sv3-community .cta-rail__link { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 9px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; color: var(--sv3-ink); text-decoration: none; }
.sv3--arab #sv3-community .cta-rail__avatar { display: none; }
.sv3--arab #sv3-community .cta-rail__name { font-weight: 400; }
.sv3--arab #sv3-community .cta-rail__acc { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--sv3-neutral-bg); font-size: 12px; font-weight: 600; color: var(--sv3-ink-2); }
.sv3.sv3--arab .sv3-slot--A.gsd-cta-card { background: var(--sv3-night); }
/* Slot A's twins (v3/arab-slot-a): after the hero's verdict below 1100px, in the side column on desktop. */
.sv3.sv3--arab .sv3-slot--A.sv3-slot--aside { display: none; }
@media (min-width: 1100px) { .sv3.sv3--arab .sv3-slot--A.sv3-slot--hero { display: none; } }
@media (min-width: 1100px) {
  .sv3.sv3--arab .sv3-aside .sv3-slot--A.gsd-cta-card { display: block; padding: 20px; }
  .sv3.sv3--arab .sv3-aside .sv3-slot--A > * + * { margin-top: 10px; }
  .sv3.sv3--arab .sv3-aside .sv3-slot--A .gsd-cta-title { font-size: 17px; font-weight: 700; }
  .sv3.sv3--arab .sv3-aside .sv3-slot--A .gsd-cta-btn { display: flex; width: 100%; }
  .sv3.sv3--arab .sv3-aside .sv3-slot--A .gsd-cta-btn::after { content: ' ←'; white-space: pre; }
  .sv3.sv3--arab .sv3-aside .sv3-slot--A .gsd-cta-risk { font-size: 11px; color: #9FB0C8; }
}
.sv3--arab .sv3-hours__title { display: block; margin-bottom: 2px; font-size: 15px; color: var(--sv3-ink); }
.sv3--arab .sv3-hours .sv3-kv { padding: 9px 0; font-size: 13px; }
.sv3--arab .sv3-hours .sv3-kv:last-child { border-bottom: 0; }

@media (max-width: 480px) {
  .sv3--us #key-stats .sv2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sv3--us #key-stats .sv2-stat { flex-direction: column; gap: 4px; padding: 10px 12px; }
}

.sv3 .article-banner-aside .btrb-smart-banner { margin: 0; }

@media (min-width: 1100px) {
  .sv3 .sv3-map-panel[hidden] { display: block; }
  .sv3 .results-area:has(> .sv3-map-panel) { display: flex; flex-direction: column; }
  .sv3 .results-area > .results-toolbar { order: -2; }
  .sv3 .results-area > .sv3-map-panel { order: -1; }
  .sv3 .sv3-sc-view[data-sv3-view="map"] { display: none; }
}

.sv3--us .sv3-answer, .sv3--us .sv3-answer b { color: #1B2433; }
.sv3--us .sv3-answer b { color: #0B1B33; }

@media (max-width: 1099.98px) {
  .sv3--us .sv3-hero .sv3-keystrip__item { min-width: 0; width: auto; }
}

.sv3 .sv3-pbanner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0; padding: 22px 20px 18px; background: #fff; border: 1px solid #E3E8EF; border-bottom: 4px solid #0B1B33; border-radius: 14px; box-shadow: 0 6px 18px rgba(11,27,51,.08); }
.sv3 .sv3-pbanner__badge { position: absolute; top: -12px; inset-inline-start: 18px; padding: 5px 12px; border-radius: 999px; background: #0B1B33; color: #fff; font-size: 12px; font-weight: 700; }
.sv3 .sv3-pbanner__logo { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: #0B1B33; }
.sv3 .sv3-pbanner__logo img { width: 100%; height: 100%; object-fit: contain; }
.sv3 .sv3-pbanner__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #0B1B33; line-height: 1.5; }
.sv3 .sv3-pbanner__risk { margin: 0; font-size: 12.5px; color: #5B6678; line-height: 1.7; }
.sv3 .sv3-pbanner__cta { display: grid; justify-items: center; gap: 8px; min-width: 210px; }
.sv3 .sv3-pbanner__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; background: #16A34A; color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; width: 100%; }
.sv3 .sv3-pbanner__btn:hover { background: #138A3F; }
.sv3 .sv3-pbanner__review { font-size: 12.5px; color: #0B1B33; text-decoration: underline; }
@media (max-width: 720px) {
  .sv3 .sv3-pbanner { grid-template-columns: 1fr; text-align: center; padding: 24px 14px 16px; }
  .sv3 .sv3-pbanner__logo { margin-inline: auto; }
  .sv3 .sv3-pbanner__cta { min-width: 0; }
}

body:has(.sv3--us) .fab-trade { display: none !important; }
@media (max-width: 1099.98px) {
  body:has(.sv3--us) .fab-stack { bottom: 84px; }
}