/* ==========================================================================
   Maydan — Market Watch (free-trial teaser surface)
   Layers on top of landing.css (design tokens, .container, .btn, header,
   .badge, .disclaimer, .footer-legal, geo-bg, .eyebrow, .section, etc.).
   Reuses brand maroon, Inter + IBM Plex Sans Arabic, radii + shadows.
   ========================================================================== */

/* ---- Language visibility (mirrors landing.css so this page is standalone) - */
html[lang="en"] .lang-ar { display: none !important; }
html[lang="ar"] .lang-en { display: none !important; }

/* Market up / down colours reuse the safety-state palette from landing.css */
:root {
  --mw-up:   var(--state-normal);   /* green  */
  --mw-up-bg:   var(--state-normal-bg);
  --mw-down: var(--state-severe);   /* red    */
  --mw-down-bg: var(--state-severe-bg);
  --mw-flat: var(--ink-500);
  --mw-flat-bg: var(--surface-subtle);
}

.mw-h2 { font-size: 30px; margin-top: 10px; }
@media (max-width: 640px) { .mw-h2 { font-size: 24px; } }
.mw-sub { font-size: 16px; color: var(--ink-600); margin-top: 10px; max-width: 62ch; }

/* ---- FREE TRIAL badge (prominent, in header) --------------------------- */
.free-trial-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--brand-700); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); flex: none; white-space: nowrap;
  margin-inline-start: 4px;
}
html[dir="rtl"] .free-trial-badge { letter-spacing: 0; }
.free-trial-badge svg { width: 15px; height: 15px; }

.header-right { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.header-nav-link { font-size: 14px; font-weight: 500; color: var(--ink-600); padding: 8px 10px; border-radius: 8px; }
.header-nav-link:hover { background: var(--surface-subtle); color: var(--ink-950); }
@media (max-width: 560px) { .header-nav-link { display: none; } }

/* ---- Hero / honest headline ------------------------------------------- */
.mw-hero { max-width: 780px; }
.mw-hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.02em; margin-top: 16px; }
html[dir="rtl"] .mw-hero h1 { line-height: 1.3; letter-spacing: 0; }
@media (max-width: 640px) { .mw-hero h1 { font-size: 32px; } }
.mw-hero-sub { font-size: 18px; color: var(--ink-600); margin: 18px 0 0; max-width: 60ch; }

.honest-note {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 26px;
  padding: 20px 22px; border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--state-normal-bg), var(--surface) 75%);
  border: 1px solid #bfe0cd; box-shadow: var(--shadow-sm);
}
.honest-note .hn-ic { width: 26px; height: 26px; flex: none; color: var(--state-normal); margin-top: 2px; }
.honest-note .hn-body { min-width: 0; }
.honest-note .hn-label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700);
  margin-bottom: 8px;
}
html[dir="rtl"] .honest-note .hn-label { letter-spacing: 0; }
.honest-note .hn-asof { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-500); font-size: 12px; }
.honest-note .hn-text { font-size: 17px; line-height: 1.55; color: var(--ink-800); }
html[dir="rtl"] .honest-note .hn-text { line-height: 1.85; }

/* Missing-data banner */
.mw-unavailable {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 22px;
  padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
  background: var(--state-advisory-bg); border: 1px solid #cdddf0; color: #234;
}
.mw-unavailable svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--state-advisory); }

/* ---- Change badge (shared: index strip, sectors, shares) --------------- */
.chg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap;
}
.chg svg { width: 13px; height: 13px; flex: none; }
.chg-up   { color: var(--mw-up);   background: var(--mw-up-bg);   }
.chg-down { color: var(--mw-down); background: var(--mw-down-bg); }
.chg-flat { color: var(--mw-flat); background: var(--mw-flat-bg); }

/* ---- Index strip ------------------------------------------------------- */
.index-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px;
}
.index-cell {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  padding: 15px 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.index-cell .ix-country { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
html[dir="rtl"] .index-cell .ix-country { letter-spacing: 0; }
.index-cell .ix-value { font-size: 17px; font-weight: 700; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.index-cell .ix-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.index-cell .ix-label { font-size: 12px; color: var(--ink-500); }

/* ---- Per-country cards ------------------------------------------------- */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; }
.country-card {
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface);
  box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column;
}
.country-card.most-affected { border-color: var(--brand-600); box-shadow: var(--shadow-lg); }
.cc-head {
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--surface-subtle);
}
.cc-head .cc-name { font-size: 18px; font-weight: 700; color: var(--ink-950); }
.cc-head .cc-index { font-size: 13.5px; color: var(--ink-600); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cc-rank-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-700); background: var(--brand-100); border-radius: 6px; padding: 3px 8px; margin-top: 8px; display: inline-block;
}
html[dir="rtl"] .cc-rank-tag { letter-spacing: 0; }

/* Drill-down: sector rows + nested shares */
.cc-body { padding: 8px 20px 6px; }
.sector { border-bottom: 1px dashed var(--line); padding: 12px 0; }
.sector:last-child { border-bottom: none; }
.sector-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sector-name { font-size: 14.5px; font-weight: 700; color: var(--ink-950); display: flex; align-items: center; gap: 8px; }
.sector-name .sec-caret { width: 14px; height: 14px; color: var(--ink-500); flex: none; }
.shares { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.shares li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 9px; background: var(--surface-subtle);
  border-inline-start: 2px solid var(--line);
}
.shares .sh-name { font-size: 13px; color: var(--ink-700); }
.shares.up li { border-inline-start-color: #bfe0cd; }
.shares.down li { border-inline-start-color: #f0bcc1; }
.sec-empty { font-size: 13px; color: var(--ink-500); padding: 4px 0; }

/* Legacy fallback (flat movers) */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 0 8px; }
@media (max-width: 480px) { .movers { grid-template-columns: 1fr; } }
.movers h5 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); margin: 0 0 8px; }
html[dir="rtl"] .movers h5 { letter-spacing: 0; }
.movers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.movers li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-700); }

/* Probable effect footer */
.cc-effect {
  display: flex; gap: 10px; align-items: flex-start; margin-top: auto;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--brand-50);
}
.cc-effect svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brand-700); }
.cc-effect .ce-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-700); display: block; margin-bottom: 2px; }
html[dir="rtl"] .cc-effect .ce-label { letter-spacing: 0; }
.cc-effect .ce-text { font-size: 13.5px; color: var(--brand-900); line-height: 1.5; }
html[dir="rtl"] .cc-effect .ce-text { line-height: 1.8; }

/* Country-level "sector detail unavailable" note */
.cc-nodetail { font-size: 13px; color: var(--ink-500); padding: 14px 0; display: flex; gap: 8px; align-items: flex-start; }
.cc-nodetail svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-500); }

/* ---- FedWatch ---------------------------------------------------------- */
.fw-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-bottom: 26px; }
.fw-stat { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.fw-stat .fs-label { font-size: 12px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
html[dir="rtl"] .fw-stat .fs-label { letter-spacing: 0; }
.fw-stat .fs-value { font-size: 22px; font-weight: 800; color: var(--brand-700); margin-top: 6px; font-variant-numeric: tabular-nums; }
.fw-stat .fs-sub { font-size: 12.5px; color: var(--ink-600); margin-top: 4px; }

.peg-explainer {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-subtle);
  padding: 20px 22px; margin-bottom: 24px;
}
.peg-explainer .peg-title { font-size: 15px; margin-bottom: 10px; color: var(--ink-950); }
.peg-explainer p { font-size: 14.5px; color: var(--ink-700); line-height: 1.65; }
html[dir="rtl"] .peg-explainer p { line-height: 1.9; }
.peg-explainer b { color: var(--ink-950); }

/* ---- Shared tables (FedWatch + CDS) ------------------------------------ */
.fw-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }
.mw-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.mw-table thead th {
  text-align: start; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-500); padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-subtle);
  white-space: nowrap;
}
html[dir="rtl"] .mw-table thead th { letter-spacing: 0; }
.mw-table th.num, .mw-table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.mw-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-800); vertical-align: top; }
.mw-table tbody tr:last-child td { border-bottom: none; }
.mw-table tbody tr:hover { background: var(--surface-subtle); }
.mw-table .cell-country { font-weight: 700; color: var(--ink-950); }
.mw-table .cell-peg { font-variant-numeric: tabular-nums; color: var(--ink-700); }
.mw-table .cell-expect { color: var(--ink-700); }
.mw-table .cds-big { font-size: 15px; font-weight: 700; color: var(--ink-950); }
.mw-table .cds-null { color: var(--ink-500); }
.mw-table .cds-ctx { font-size: 12.5px; color: var(--ink-600); }

.fw-note, .cds-note { font-size: 13.5px; color: var(--ink-600); margin-top: 14px; line-height: 1.6; }
html[dir="rtl"] .fw-note, html[dir="rtl"] .cds-note { line-height: 1.85; }

/* CDS meta + footnotes */
.cds-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.stale-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; background: var(--state-elevated-bg); color: var(--state-elevated); border: 1px solid #ecd9a8;
  white-space: nowrap;
}
.stale-tag svg { width: 12px; height: 12px; }
.cds-footnotes { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cds-sources { font-size: 12.5px; color: var(--ink-500); }
.cds-sources .cs-label { font-weight: 700; color: var(--ink-600); }

/* ---- Market news ------------------------------------------------------- */
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-item {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.news-item .ni-title { font-size: 17px; font-weight: 700; color: var(--ink-950); line-height: 1.35; }
.news-item .ni-detail { font-size: 14.5px; color: var(--ink-700); margin-top: 8px; line-height: 1.6; }
html[dir="rtl"] .news-item .ni-detail { line-height: 1.85; }
.news-item .ni-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.news-item .ni-source { color: var(--ink-500); }
.news-item .ni-link { color: var(--brand-700); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.news-item .ni-link:hover { border-bottom: 1px solid var(--brand-600); }
.news-item .ni-link svg { width: 14px; height: 14px; }

/* ---- Per-section empty state ------------------------------------------- */
.mw-empty {
  border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--surface-subtle);
  padding: 28px 24px; text-align: center; color: var(--ink-600);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mw-empty svg { width: 28px; height: 28px; color: var(--ink-500); }
.mw-empty p { font-size: 14px; max-width: 46ch; }

/* ---- Footer tweaks ----------------------------------------------------- */
.mw-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }

/* ==========================================================================
   Manasah v2 — additive modules (energy, breadth, L2/L3, peg gauge, islamic,
   calendar, digest form, sparklines + chart modal, sortable tables).
   ========================================================================== */

/* ---- shared strip head (energy + peg) --------------------------------- */
.strip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.strip-asof { font-size: 11px; color: var(--ink-500); font-weight: 600; }

/* ---- 0 · Energy & gold strip ------------------------------------------ */
.energy-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.ecell {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  padding: 13px 15px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px;
}
.ecell-gold { border-color: #e7cf9c; background: linear-gradient(180deg, #FaF4E5, var(--surface) 70%); }
.ecell-name { font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: .03em; text-transform: uppercase; }
html[dir="rtl"] .ecell-name { letter-spacing: 0; }
.ecell-price { font-size: 18px; font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.ecell-unit { font-size: 11px; font-weight: 600; color: var(--ink-500); }
.ecell-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Shipping & war-risk line (inside energy context) */
.shipping-line {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
  padding: 14px 16px; border-radius: var(--r-card); background: var(--brand-50);
  border: 1px solid var(--brand-100);
}
.shipping-line .ship-ic { width: 20px; height: 20px; flex: none; color: var(--brand-700); margin-top: 2px; }
.shipping-line .ship-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.shipping-line .ship-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
html[dir="rtl"] .shipping-line .ship-label { letter-spacing: 0; }
.shipping-line .ship-text { font-size: 14px; color: var(--brand-900); line-height: 1.55; }
html[dir="rtl"] .shipping-line .ship-text { line-height: 1.85; }
.shipping-line .ship-src { font-size: 12px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 4px; }
.shipping-line .ship-src svg { width: 12px; height: 12px; }

/* ---- 2 · Index strip sparkline + tap ---------------------------------- */
.index-cell--tap { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.index-cell--tap:hover { border-color: var(--brand-600); box-shadow: var(--shadow-md); }
.ix-spark { height: 34px; margin: 2px 0; position: relative; }
.ix-spark canvas { width: 100% !important; height: 100% !important; }

/* ---- 3 · Country cards: header button + L1/L2/L3 ---------------------- */
.cc-head {
  width: 100%; text-align: start; font-family: inherit; cursor: pointer;
  border: none; border-bottom: 1px solid var(--line); background: var(--surface-subtle);
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  padding: 18px 20px;
}
.cc-head:hover { background: var(--brand-50); }
.cc-head-r { display: flex; align-items: center; gap: 10px; flex: none; }
.cc-expand-hint .cc-caret { width: 18px; height: 18px; color: var(--ink-500); transition: transform .2s ease; }
.cc-head[aria-expanded="true"] .cc-caret { transform: rotate(180deg); }

.cc-l1 { padding: 14px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.cc-value { font-size: 13px; color: var(--ink-600); }
.cc-value b { color: var(--ink-950); font-variant-numeric: tabular-nums; }
.cc-takeaway { font-size: 13.5px; color: var(--ink-700); line-height: 1.5; }
html[dir="rtl"] .cc-takeaway { line-height: 1.8; }

/* breadth bar */
.breadth { display: flex; flex-direction: column; gap: 7px; }
.breadth-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--surface-subtle); border: 1px solid var(--line); }
.breadth-bar .bb-adv { background: var(--mw-up); }
.breadth-bar .bb-unch { background: var(--ink-500); opacity: .35; }
.breadth-bar .bb-dec { background: var(--mw-down); }
.breadth-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--ink-600); }
.breadth-legend .bl { display: inline-flex; align-items: center; gap: 5px; }
.breadth-legend .bl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.breadth-legend .bl-adv::before { background: var(--mw-up); }
.breadth-legend .bl-unch::before { background: var(--ink-500); opacity: .4; }
.breadth-legend .bl-dec::before { background: var(--mw-down); }

.cc-l2 { padding: 4px 0 10px; border-top: 1px dashed var(--line); margin-top: 4px; display: flex; flex-direction: column; gap: 16px; }
.cc-tablewrap { box-shadow: none; }
.cc-sectors { min-width: 0; }
.sec-name-cell { font-weight: 700; color: var(--ink-950); }
.sec-name-cell .sec-caret { width: 14px; height: 14px; color: var(--ink-500); margin-inline-end: 6px; vertical-align: middle; transition: transform .2s ease; }
.sector-row { cursor: pointer; }
.sector-row.open .sec-caret { transform: rotate(180deg); }
.sector-detail > td { background: var(--surface-subtle); padding: 8px 16px 12px !important; }

.share-row { cursor: pointer; flex-direction: column; align-items: stretch !important; gap: 6px; }
.share-row .sh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.sh-detail { border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 3px; }
.sh-detail-line { font-size: 12px; color: var(--ink-600); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-detail-line b { color: var(--ink-900); }
.sh-sep { color: var(--line); }
.sh-corp { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: var(--brand-900); }
.sh-corp svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--brand-700); }

/* rankings + flows + corporate actions */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.rank-title { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 6px; }
html[dir="rtl"] .rank-title { letter-spacing: 0; }
.rank-table, .cc-sectors { font-size: 13px; }
.rank-table thead th, .cc-sectors thead th { padding: 8px 10px; font-size: 10.5px; }
.rank-table tbody td, .cc-sectors tbody td { padding: 8px 10px; }
.flows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.flows li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-700); }
.flows .flow-v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-950); }
.corp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.corp-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 12.5px; color: var(--ink-700); padding: 8px 10px; border-radius: 9px; background: var(--surface-subtle); }
.corp-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-700); background: var(--brand-100); border-radius: 5px; padding: 2px 7px; }
.corp-name { font-weight: 700; color: var(--ink-950); }

.cc-foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-500); }
.cc-src { font-weight: 600; }

/* ---- 4 · Peg-pressure gauge ------------------------------------------- */
.peg-gauge-wrap { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.peg-gauge-title { font-size: 15px; margin-bottom: 8px; color: var(--ink-950); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.peg-gauge-note { font-size: 13.5px; color: var(--ink-600); line-height: 1.6; margin-bottom: 16px; }
html[dir="rtl"] .peg-gauge-note { line-height: 1.85; }
.peg-gauge { display: flex; flex-direction: column; gap: 10px; }
.peg-row { display: grid; grid-template-columns: 130px 1fr 74px; align-items: center; gap: 12px; }
@media (max-width: 560px) { .peg-row { grid-template-columns: 96px 1fr 60px; gap: 8px; } }
.peg-country { font-size: 13.5px; font-weight: 600; color: var(--ink-800); }
.peg-track { height: 10px; border-radius: 999px; background: var(--surface-subtle); border: 1px solid var(--line); overflow: hidden; }
.peg-fill { display: block; height: 100%; background: var(--brand-600); border-radius: 999px; }
.peg-fill.peg-empty { background: transparent; }
.peg-val { font-size: 13px; font-weight: 700; color: var(--ink-950); font-variant-numeric: tabular-nums; text-align: end; }

/* ---- 5 · CDS sparkline cell ------------------------------------------- */
.cds-spark-cell { width: 130px; }
.cds-spark { width: 110px; height: 30px; cursor: pointer; }
.cds-spark canvas { width: 100% !important; height: 100% !important; }

/* ---- 6 · Islamic vs conventional -------------------------------------- */
.ivc-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ivc-card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.ivc-overall { border-color: var(--brand-600); background: linear-gradient(180deg, var(--brand-50), var(--surface) 70%); }
.ivc-card-head { font-size: 13px; font-weight: 700; color: var(--ink-950); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ivc-pair { display: flex; gap: 10px; }
.ivc-side { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-subtle); display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.ivc-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
html[dir="rtl"] .ivc-tag { letter-spacing: 0; }

/* ---- 7 · Calendar ----------------------------------------------------- */
.calendar-list { display: flex; flex-direction: column; gap: 10px; }
.cal-item { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 14px 18px; box-shadow: var(--shadow-sm); }
.cal-date { font-size: 13px; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; flex: none; min-width: 92px; }
.cal-main { min-width: 0; }
.cal-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cal-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-100); border-radius: 5px; padding: 2px 8px; }
html[dir="rtl"] .cal-kind { letter-spacing: 0; }
.cal-area { font-size: 12px; color: var(--ink-500); }
.cal-title { font-size: 14.5px; font-weight: 600; color: var(--ink-950); line-height: 1.4; }
.cal-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.cal-src { color: var(--ink-500); }
.cal-sep { color: var(--line); }
.cal-link { color: var(--brand-700); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.cal-link svg { width: 13px; height: 13px; }
@media (max-width: 480px) { .cal-item { flex-direction: column; gap: 6px; } }

/* ---- Email digest form ------------------------------------------------ */
.digest-card {
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface);
  box-shadow: var(--shadow-md); padding: 24px 26px;
}
.digest-card--footer { margin: 28px 0; background: var(--surface-subtle); box-shadow: none; }
.digest-form { display: flex; flex-direction: column; gap: 14px; }
.df-copy { display: flex; gap: 12px; align-items: flex-start; }
.df-copy .df-ic { width: 22px; height: 22px; flex: none; color: var(--brand-700); margin-top: 2px; }
.df-title { font-size: 16px; font-weight: 700; color: var(--ink-950); }
.df-fine { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.df-row { display: flex; gap: 10px; flex-wrap: wrap; }
.df-input {
  flex: 1 1 240px; min-width: 0; font-family: inherit; font-size: 15px; color: var(--ink-950);
  padding: 12px 15px; border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  transition: border-color .15s ease;
}
.df-input:focus { outline: none; border-color: var(--brand-600); }
.df-submit { flex: none; }
.df-msg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 0; padding: 10px 12px; border-radius: 10px; }
.df-msg svg { width: 16px; height: 16px; flex: none; }
.df-msg--ok { background: var(--state-normal-bg); color: var(--state-normal); border: 1px solid #bfe0cd; }
.df-msg--err { background: var(--state-severe-bg); color: var(--state-severe); border: 1px solid #f0bcc1; }
.df-msg[hidden] { display: none; }

/* ---- Sortable table headers ------------------------------------------- */
.th-sortable { cursor: pointer; user-select: none; position: relative; }
.th-sortable:hover { color: var(--brand-700); }
.th-sortable[data-sorted]::after { content: "▾"; margin-inline-start: 5px; font-size: 10px; opacity: .8; }
.th-sortable[data-asc="true"]::after { content: "▴"; }

/* ---- Expandable chart modal ------------------------------------------- */
.chart-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.chart-modal[hidden] { display: none; }
.cm-backdrop { position: absolute; inset: 0; background: rgba(23,21,26,.45); }
.cm-panel {
  position: relative; width: min(760px, 100%); max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow-lg); padding: 22px 24px;
}
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cm-title { font-size: 18px; color: var(--ink-950); }
.cm-close { width: 38px; height: 38px; flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; cursor: pointer; color: var(--ink-600); display: inline-flex; align-items: center; justify-content: center; }
.cm-close:hover { border-color: var(--brand-600); color: var(--brand-700); }
.cm-close svg { width: 18px; height: 18px; }
.cm-sub { font-size: 13px; color: var(--ink-500); margin-top: 4px; }
.cm-sub:empty { display: none; }
.cm-canvas-wrap { position: relative; height: 340px; margin: 16px 0 10px; }
@media (max-width: 560px) { .cm-canvas-wrap { height: 260px; } }
.cm-state { padding: 40px 10px; text-align: center; color: var(--ink-600); font-size: 14px; }
.cm-state[hidden] { display: none; }
.cm-foot { font-size: 12.5px; color: var(--ink-500); }