/* ═══════════════════════════════════════════════════════════════════════
   KAI — "MIHRAB" THEME  ·  one file, whole-site visual identity.
   Add to any page with ONE line, placed just before </head> so it wins:
        <link rel="stylesheet" href="/kai-theme.css">

   It works by REDEFINING the design tokens every KAI page already uses
   (--canvas, --surface, --ink, --accent, --ff-display, --nm-raised …),
   so a single file restyles the entire site without touching page markup.

   The look: warm paper, ink, emerald and gold leaf. Apple-weight headlines
   (real SF Pro on Apple devices). Hairline borders and soft single shadows
   instead of heavy neumorphism. Every button a long circle.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground: warm paper, not grey ── */
  --canvas:#f3f1e9;
  --surface:#faf8f2;
  --surface-2:#fdfcf8;
  --canvas-dark:#14201b;          /* tooltips, popups, dark cards */

  /* ── ink: green-biased neutrals, chosen not inherited ── */
  --ink:#141d19;
  --ink-2:#4f5c55;
  --ink-3:#8a938c;
  --line:#e4dfd1;

  /* ── accents ── */
  --accent:#12726a;
  --accent-2:#1a8d7f;
  --gold:#a8863d;
  --gold-2:#c9a45c;
  --gold-soft:rgba(168,134,61,.13);
  --slate:#4a6076;

  /* ── market semantics (readable on paper) ── */
  --buy:#2f8f66;
  --sell:#b8695c;

  /* ── neumorphic tokens → retuned to hairline + soft lift ── */
  --nm-d:#e4dfd1;
  --nm-l:#fffdf8;
  --nm-raised:0 10px 30px rgba(20,29,25,.07), 0 0 0 1px #e8e3d5;
  --nm-raised-sm:0 4px 14px rgba(20,29,25,.05), 0 0 0 1px #e8e3d5;
  --nm-inset:inset 0 0 0 1px #e4dfd1;

  /* ── shape: rounder, calmer ── */
  --r:24px;
  --r-sm:16px;
  --r-pill:999px;

  /* ── type: SF Pro on Apple devices (real Apple typeface), graceful elsewhere ── */
  --ff-display:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Segoe UI Variable Display",
               "Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --ff-body:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --ff-mono:ui-monospace,"SF Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --ff-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

/* Arabic keeps Cairo, which carries the weight well */
[dir="rtl"] body, [lang="ar"] body{ font-family:'Cairo',var(--ff-body); }

/* ═══ APPLE-WEIGHT HEADLINES ═══
   Pages set weights inline, so these need !important to land.
   Heavy weight + tight tracking is the whole Apple recipe. */
h1,h2,h3,h4,
[style*="ff-display"]{
  font-family:var(--ff-display) !important;
  font-weight:780 !important;
  letter-spacing:-.028em !important;
}
h1,[style*="font-size:62px"],[style*="font-size:58px"],
[style*="font-size:44px"],[style*="font-size:38px"]{
  font-weight:800 !important;
  letter-spacing:-.04em !important;
  line-height:1.03 !important;
}
h2,[style*="font-size:34px"],[style*="font-size:32px"],
[style*="font-size:30px"],[style*="font-size:29px"]{
  font-weight:800 !important;
  letter-spacing:-.032em !important;
}
h1,h2,h3{ text-wrap:balance; }

/* body copy: a little more air */
body{ background:var(--canvas); color:var(--ink); }
p{ line-height:1.62; }

/* numbers always line up */
[style*="ff-mono"],[class*="mono"],.mono{ font-variant-numeric:tabular-nums; }

/* ═══ SMALL TEXT USES THE HEADLINE TYPEFACE ═══
   Captions, labels and eyebrows were small grey monospace, which read as
   unfinished next to the display type. They now use the SAME face as the
   headlines — just small, a touch heavier, and darker than the old grey.
   Numbers keep their monospace so columns still line up. */
[style*="color:var(--ink-3)"],
[style*="color: var(--ink-3)"],
.ldesc,.ldur,.modcap,.mtick,.m-stat-l,.m-hi,
.well .k,.kpi .l,.kpi .s,.ptitle,.brief .num,
.lstate,.sortp,.dirb,.ocbtn,.act,.qa-chip,.tf-tab,.m-tf,.navcap{
  font-family:var(--ff-display) !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
  text-transform:none !important;
}
/* darker than the old grey, so small text is legible rather than faint */
[style*="color:var(--ink-3)"],
[style*="color: var(--ink-3)"],
.ldesc,.ldur,.modcap,.mtick,.m-stat-l,.well .k,.kpi .l,.kpi .s{
  color:var(--ink-2) !important;
}
/* uppercase eyebrows keep their spacing, just in the display face */
.modcap,.navcap,.m-stat-l,.well .k,.kpi .l{
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  font-weight:640 !important;
}
/* but never restyle actual figures */
[style*="ff-mono"][style*="font-weight:600"],
[style*="ff-mono"][style*="font-weight:700"],
.mpx .p,.kpi .v,.m-stat-v{
  font-family:var(--ff-mono) !important;
}

/* ═══ EVERY BUTTON A LONG CIRCLE ═══
   Catches the site's button patterns without touching page markup. */
button,
[onclick][style*="border-radius:var(--r-pill)"],
[style*="padding:11px 22px"],[style*="padding:12px 22px"],
[style*="padding:14px 26px"],[style*="padding:13px 24px"],
[style*="padding:11px 24px"],[style*="padding:12px 24px"],
.btn,.cta,.pill,.sortp,.dirb,.ocbtn,.act,.gbtn,.lstate,.qa-chip,.tf-tab,.m-tf{
  border-radius:var(--r-pill) !important;
}
button,.btn,.cta{
  font-family:var(--ff-body);
  font-weight:640;
  letter-spacing:-.005em;
  transition:transform .16s cubic-bezier(.3,1.25,.5,1), box-shadow .16s ease, background .16s ease;
}
button:hover,.btn:hover,.cta:hover,.gbtn:hover{ transform:translateY(-1.5px); }
button:focus-visible,a:focus-visible,[onclick]:focus-visible{
  outline:2.5px solid var(--accent-2);
  outline-offset:3px;
  border-radius:var(--r-pill);
}

/* primary green buttons get a warmer, softer lift */
[style*="background:var(--accent)"]{ box-shadow:0 8px 22px rgba(18,114,106,.26); }

/* ═══ CARDS: hairline + soft lift, no more heavy double shadow ═══ */
[style*="box-shadow:var(--nm-raised)"],
[style*="box-shadow:var(--nm-raised-sm)"]{
  border:1px solid #e8e3d5;
}

/* ═══ SURFACES THAT WERE COOL GREY ═══ */
[style*="background:#eef2f6"],[style*="background:#e8ecf1"]{ background:var(--surface) !important; }
[style*="background:#0c1622"]{ background:var(--canvas-dark) !important; }

/* sticky bars / nav: warm frosted paper */
#kai-nav,
[style*="rgba(232,236,241,.85)"],[style*="rgba(232,236,241,.86)"],
[style*="rgba(232,236,241,.82)"],[style*="rgba(238,242,246,.94)"]{
  background:rgba(243,241,233,.86) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--line) !important;
}

/* ═══ GOLD HAIRLINE — the Mihrab signature, under page heroes ═══ */
.kai-hairline{
  height:1px;
  background:linear-gradient(90deg,var(--gold-2),transparent 62%);
  border:0;
}

/* ═══ SHARED NAV polish ═══ */
#kai-nav .topnav{ font-weight:600; letter-spacing:-.01em; }
#kai-nav .topnav.on{ color:var(--accent); }
#kai-nav .navcard{ border:1px solid var(--line); border-radius:20px; }
#kai-nav .clockpill,#kai-nav .langbox{ box-shadow:inset 0 0 0 1px var(--line); }

/* ═══ NAV CROWDING ═══
   The centred nav is absolutely positioned, so it reserves no space and the
   right-hand controls can slide underneath it. Drop the optional pills first. */
@media(max-width:1180px){ #prayer-pill{ display:none !important; } }
@media(max-width:1040px){ #kai-nav .clockpill{ display:none !important; } }

/* ═══ FLOATING LANGUAGE SWITCHER ═══
   i18n.js injects a fixed switcher for narrow screens. Bottom-left collided with
   page buttons and the Help pill, so dock it top-right, clear of both thumb zones. */
@media(max-width:820px){
  #kai-lang-switch{
    position:fixed !important;
    /* Fixed, so it floats over whatever is scrolled behind it — the thing that
       matters is that it never collides with the Help pill, the chat button or
       the tab bar. Sits just above the Help pill, bottom-left. */
    top:auto !important; bottom:calc(146px + env(safe-area-inset-bottom,0px)) !important;
    left:14px !important; right:auto !important;
    z-index:45 !important;
    transform:scale(.86); transform-origin:bottom left;
    opacity:.92;
  }
}

/* ═══ MOBILE ═══ */
@media(max-width:680px){
  h1,[style*="font-size:62px"],[style*="font-size:58px"]{ letter-spacing:-.035em !important; }
  .m-tabs{ background:rgba(243,241,233,.95) !important; }
  .m-feat-tile{ border:1px solid #e8e3d5; }
}

@media (prefers-reduced-motion:reduce){
  button,.btn,.cta,.gbtn{ transition:none !important; }
  button:hover,.btn:hover,.cta:hover,.gbtn:hover{ transform:none !important; }
}