/* ============================================================
   Arabic / RTL override layer for Outside-In briefs.
   APPEND this verbatim to the END of a brief's existing <style>
   block in its ar.html (later rules win, so this flips the EN base).
   Pair with the Arabic font <link> and <html lang="ar" dir="rtl">.
   Data-viz (Chart.js canvases, .pos-outer map) is forced LTR.
   ============================================================ */

:root{
  --f-serif-ar:'Amiri','Noto Naskh Arabic',Georgia,serif;
  --f-sans-ar:'Readex Pro',system-ui,sans-serif;
  --f-label-ar:'Readex Pro','IBM Plex Mono',monospace; /* no good Arabic mono; Readex for labels, Plex digits fall back */
}

/* --- base direction + Arabic typography --- */
html{direction:rtl}
body{font-family:var(--f-sans-ar);letter-spacing:0;line-height:1.95}

/* headings & serif display → Amiri/Naskh (NOT .hero-title — that's the Latin brand wordmark, keep Playfair) */
h2,h3,.col-panel h3,.risk-t,.verdict-q,.hero-quote p,.threat-n,.intro{font-family:var(--f-serif-ar);letter-spacing:0;line-height:1.5}

/* mono/label runs → Readex (Arabic has no letter-spacing; zero it out) */
.eyebrow,.section-label,.nav-links a,.obar-tag,.col-label,.stat-l,.quote-type,.star-lbl,
.jtab,.jpersona,.thesis-num,.funnel-stage-lbl,.funnel-inner-lbl,.sc-label,.sc-head,.lens-q,
.foot-brand,.info-label,.risk-n,.badge,.threat-tag,.tstat-l,.verdict-eye,.pill,.nav-home,
.nav-back,.love-n,.love-label,.upvote-btn,.col-label,.pos-axis-x,.pos-axis-y,.pos-lbl,
.funnel-anno,.scorecard-note{font-family:var(--f-label-ar);letter-spacing:0}

/* numbers / Latin stat values stay LTR and tabular */
.stat-n,.score-v,.tstat-n,.threat-n{font-family:'IBM Plex Mono',var(--f-label-ar);unicode-bidi:plaintext}

/* generic: any inline Latin/number span the translator wraps */
[dir="ltr"]{unicode-bidi:isolate}

/* --- logical-property flips (border/padding/margin/text-align) --- */
.nav-home{margin-right:0;margin-inline-end:auto}
.nav-links a{letter-spacing:0}
.hero-quote{border-left:none;border-inline-start:2px solid var(--gold);padding-left:0;padding-inline-start:1.5rem}
.obar-tag{border-right:none;border-inline-end:1px solid var(--border2);padding-right:0;padding-inline-end:1.5rem}
.evidence li{padding-left:0;padding-inline-start:1.25rem}
.evidence li::before{content:'←';left:auto;right:auto;inset-inline-start:0}
.score-v{text-align:end}
.callout.amber{border-left:none;border-inline-start:2px solid var(--amber)}
.callout.red{border-left:none;border-inline-start:2px solid var(--red)}
.callout.green{border-left:none;border-inline-start:2px solid var(--green)}
.star-row.current-state{border-left:none;border-inline-start:3px solid var(--amber)}
.threat-verdict{border-left:none;border-inline-start:2px solid var(--red)}
.editorial-note{border-left:none;border-inline-start:2px solid var(--gold);padding-left:0;padding-inline-start:1rem}
/* accent bars (brand vertical line) → move to the start (right) in RTL */
.narrative-lead{border-left:none;border-inline-start:3px solid var(--brand);padding-left:0;padding-inline-start:1.6rem}
.watch-box,.qb-launch{border-left:1px solid var(--border2);border-inline-start:3px solid var(--brand)}
/* journey flow arrows point with the RTL reading direction (→ becomes ←) */
.jarrow{display:inline-block;transform:scaleX(-1)}
.nav-back{padding-right:0;padding-inline-end:1.25rem;border-right:none;border-inline-end:1px solid var(--border2);margin-right:0;margin-inline-end:0.5rem}

/* --- "Ask about X" chat still answers in English → keep the panel content LTR
   (the launcher .oi-ask is left as-is). Revisit when the chat answers in Arabic. --- */
[dir=rtl] .oi-panel{direction:ltr;text-align:left}

/* --- data-viz stays LTR (translate labels, don't mirror geometry) --- */
.pos-outer,.pos-outer *,canvas,[data-ltr]{direction:ltr}
.pos-outer .pos-lbl,.pos-outer .pos-axis-x,.pos-outer .pos-axis-y{text-align:center}

/* --- language toggle (modern, borderless — matches the mono nav; lang.js owns the live version) --- */
.lang-toggle{display:inline-flex;align-items:center;gap:.4rem;margin-inline-start:1.1rem;flex-shrink:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.95rem;letter-spacing:.02em}
.lang-toggle a{display:inline-flex;align-items:center;height:1.5rem;line-height:1;color:var(--text3);text-decoration:none;cursor:pointer;transition:color .15s;padding:0;border:none;background:none}
.lang-toggle a[data-lang="ar"]{font-size:1.2rem}
.lang-toggle a:hover{color:var(--text)}
.lang-toggle a.active{color:var(--brand)}
.lang-toggle .lt-sep{display:inline-flex;align-items:center;height:1.5rem;line-height:1;color:var(--text3);opacity:.55}

/* --- Arabic readability: small Latin labels are too small in Arabic; floor everything at ~0.85rem --- */
[dir=rtl] .eyebrow,[dir=rtl] .section-label,[dir=rtl] .nav-links a,[dir=rtl] .col-label,
[dir=rtl] .stat-l,[dir=rtl] .star-lbl,[dir=rtl] .jtab,[dir=rtl] .jpersona,[dir=rtl] .thesis-num,
[dir=rtl] .funnel-stage-lbl,[dir=rtl] .sc-label,[dir=rtl] .sc-head,[dir=rtl] .lens-q,
[dir=rtl] .foot-brand,[dir=rtl] .info-label,[dir=rtl] .risk-n,[dir=rtl] .badge,[dir=rtl] .threat-tag,
[dir=rtl] .tstat-l,[dir=rtl] .verdict-eye,[dir=rtl] .pill{font-size:0.9rem;line-height:1.7}
[dir=rtl] .quote-type,[dir=rtl] .pos-lbl,[dir=rtl] .pos-axis-x,[dir=rtl] .pos-axis-y,
[dir=rtl] .funnel-inner-lbl,[dir=rtl] .funnel-anno,[dir=rtl] .obar-tag,[dir=rtl] .nav-back,
[dir=rtl] .quote-card .quote-type,[dir=rtl] .threat-tag,[dir=rtl] .jstep,[dir=rtl] .tstat-n,[dir=rtl] .foot-note{font-size:0.85rem;line-height:1.65}
/* quick-browse launcher (its CSS is injected at runtime; higher specificity wins regardless of order) */
[dir=rtl] .qb-launch .lead .t{font-size:0.92rem;letter-spacing:0}
[dir=rtl] .qb-launch .lead .d{font-size:1.05rem}
[dir=rtl] .qb-cta,[dir=rtl] .qb-ovt,[dir=rtl] .qb-sticky .st,[dir=rtl] .qb-go{font-size:0.9rem;letter-spacing:0}
/* ensure labels/headings render RTL-aligned even with inline numbers/Latin */
[dir=rtl] .section-label,[dir=rtl] .eyebrow,[dir=rtl] h2,[dir=rtl] h3{text-align:right}
[dir=rtl] .verdict-wrap h2,[dir=rtl] .verdict-eye,[dir=rtl] .verdict-q,[dir=rtl] .verdict-meta{text-align:center}
/* eyebrow: more breathing room around the date · read-time */
[dir=rtl] .eyebrow{word-spacing:.16em;line-height:1.95}
[dir=rtl] .eyebrow bdi{padding:0 .12em}
/* body text: 0.8–0.86rem reads too small in Arabic — raise the floor to ~0.95rem */
[dir=rtl] .risk-card p,[dir=rtl] .sc-cell,[dir=rtl] .threat-body,[dir=rtl] .star-desc,[dir=rtl] .lens-a,
[dir=rtl] .lens-note,[dir=rtl] .callout,[dir=rtl] .info-cell p,[dir=rtl] .col-panel .evidence li,
[dir=rtl] .quote-card blockquote,[dir=rtl] .quote-ar,[dir=rtl] .scorecard-note,[dir=rtl] .threat-verdict,
[dir=rtl] .thesis-sub,[dir=rtl] .intro,[dir=rtl] .verdict-meta,[dir=rtl] .hero-sub{font-size:.98rem;line-height:1.85}
[dir=rtl] .stat-s{font-size:.88rem}

/* --- mobile --- */
@media(max-width:768px){
  .nav-home{margin-right:0;margin-inline-end:1rem}
  .obar-tag{border-inline-end:none;border-bottom:1px solid var(--border2);padding-inline-end:0;padding-bottom:0.65rem}
  .lang-toggle{margin-inline-start:0.5rem}
}
