/* theme.css — the light reading mode, shared by every page.
   Dark stays the default and is untouched: everything here is scoped to
   html[data-theme="light"], which out-specifies each page's own :root tokens,
   so load order doesn't matter. Pages, briefs (EN + AR) and the shared widgets
   (chat, share, gate, toc, mobilenav, lang) all read these tokens. */

html[data-theme="light"]{
  color-scheme:light;
  --bg:#f8f6f1;--bg2:#f0ece4;--bg3:#e7e2d8;
  --border:#e0dacf;--border2:#cfc8ba;
  --text:#1b1a17;--text2:#3a3732;--text3:#66625a;
  --gold:#8f6a2c;--red:#b4473a;--green:#2b7a52;--amber:#9a7414;--blue:#3566b4;
}
html:not([data-theme="light"]){color-scheme:dark}

/* Page chrome that hard-codes a dark surface */
html[data-theme="light"] nav{background:rgba(248,246,241,0.94)}
html[data-theme="light"] .disclaimer-strip{background:rgba(231,226,216,0.7)}
html[data-theme="light"] .navsheet{background:rgba(248,246,241,0.985)}
@media(max-width:980px){html[data-theme="light"] .oi-share{background:rgba(248,246,241,0.94)}}
html[data-theme="light"] .cov-head,
html[data-theme="light"] .cov-persona{background:var(--bg3)}
html[data-theme="light"] .cov-none{color:var(--text3)}
html[data-theme="light"] .jtab:hover:not(.active),
html[data-theme="light"] .pain-bar-w,
html[data-theme="light"] .lang-toggle a:focus,
html[data-theme="light"] .lang-toggle .lt-btn[aria-expanded="true"]{background:rgba(0,0,0,0.05)}

/* Headline numbers and titles that were set in pure white */
html[data-theme="light"] .card-name,
html[data-theme="light"] .col-panel h3,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .page-title,
html[data-theme="light"] .risk-t,
html[data-theme="light"] .scenario-card h3,
html[data-theme="light"] .stat-n,
html[data-theme="light"] .threat-n,
html[data-theme="light"] .tstat-n{color:var(--text)}
/* Inline white text (the stat strips) – !important is the only way past an inline style */
html[data-theme="light"] [style*="color:#fff"]:not(button):not(a):not(.qb-cta){color:var(--text) !important}

/* Images that are white-on-transparent wordmarks get a quiet chip so they stay legible */
html[data-theme="light"] img[data-on-dark]{background:#1b1a17;padding:6px 10px;border-radius:6px;box-sizing:content-box}

/* Softer shadows on paper */
html[data-theme="light"] .share-panel,
html[data-theme="light"] .sc-info::after{box-shadow:0 10px 30px rgba(40,32,20,0.14)}

/* A short, calm cross-fade when the reader flips the switch (never on load) */
html.oi-theming,
html.oi-theming *,
html.oi-theming *::before,
html.oi-theming *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease !important}

/* ── The switch ─────────────────────────────────────────── */
/* Long brief menus used to run past the right edge; let them scroll so the
   switch (last in the nav) is always reachable. */
nav .nav-links{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
/* The switch takes ~40px of the bar; a slightly tighter link gap on desktop keeps a 9-section menu on one screen. */
@media (min-width:769px){nav .nav-links{gap:1.5rem}}
nav .nav-links::-webkit-scrollbar{display:none}
.theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;margin-inline-start:.6rem;padding:0;border:1px solid var(--border2,#2a2a27);border-radius:999px;
  background:transparent;color:var(--text3,#aba7a3);cursor:pointer;overflow:hidden;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.theme-toggle:hover{color:var(--brand,var(--gold,#c8a060));border-color:var(--brand,var(--gold,#c8a060))}
.theme-toggle:focus-visible{outline:2px solid var(--brand,var(--gold,#c8a060));outline-offset:2px}
.theme-toggle svg{position:absolute;width:16px;height:16px;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.theme-toggle .tt-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle .tt-moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .theme-toggle .tt-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .theme-toggle .tt-moon{opacity:0;transform:rotate(90deg) scale(.5)}
@media (prefers-reduced-motion:reduce){
  .theme-toggle svg{transition:opacity .2s ease}
  html.oi-theming *{transition:none !important}
}
html[data-theme="light"] .qb-ov{background:rgba(248,246,241,0.98)}
/* The 3-minute version (mobile reel) paints its own dark stage */
html[data-theme="light"] body:has(.reel){background:#e9e5dd}
html[data-theme="light"] .reel{background:radial-gradient(120% 80% at 50% 0%,#ffffff,var(--bg))}
html[data-theme="light"] .bseg{background:rgba(0,0,0,0.12)}

/* Phones: card grids given fixed columns inline (repeat(3,1fr) etc.) must stack, or the
   cards spill off-screen – most visibly on Arabic pages, where the overflow runs left. */
@media (max-width:760px){
  .risks-grid[style*="grid-template-columns"],
  .info-grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* hidden tooltips positioned off-page add a few px of sideways scroll; clip (not hidden) keeps the sticky nav working */
  html,body{overflow-x:clip}
}