/* Cortex Connect UX layer: Day theme, Arabic (RTL), accessibility panel, universe links.
   Everything self hosted. No change to the Content Security Policy. */

/* ---------- Arabic font (IBM Plex Sans Arabic, self hosted) ---------- */
@font-face{font-family:"PlexArabic";src:url(fonts/plex-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0020-00FF}
@font-face{font-family:"PlexArabic";src:url(fonts/plex-arabic-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0020-00FF}
@font-face{font-family:"PlexArabic";src:url(fonts/plex-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0020-00FF}

/* ---------- Day theme: ivory, linen, brass, claret. Drawn from the palettes of The Arts Club, Soho House and Aman ---------- */
html[data-theme=light]{
  --canvas:#F7F2E9; --canvas-2:#F1EADD; --panel:#FFFDF8; --panel-2:#F3EDE2;
  --line:rgba(138,106,20,.18); --line-2:rgba(138,106,20,.42);
  --gold:#B8902E; --gold-hi:#8A6A14; --gold-mute:rgba(184,144,46,.16);
  --ruby:#C8384F; --ruby-ink:#B02E46;
  --ink:#1C1A16; --ink-2:#4F4A40; --ink-3:#7A7366;
  --tshadow:none;
  color-scheme:light;
}
html[data-theme=light] body{background:var(--canvas);color:var(--ink)}
html[data-theme=light] .env-glow{opacity:.55;background:radial-gradient(40% 35% at 20% 30%,rgba(184,144,46,.14),transparent 70%),radial-gradient(35% 30% at 80% 70%,rgba(200,56,79,.08),transparent 70%)}
html[data-theme=light] .env-grain{opacity:.035}
html[data-theme=light] .nav{background:linear-gradient(rgba(247,242,233,.92),rgba(247,242,233,0));}
html[data-theme=light] .nav.solid{background:rgba(247,242,233,.92);border-bottom:1px solid var(--line)}
html[data-theme=light] .btn{background:rgba(255,253,248,.7);color:var(--ink)}
html[data-theme=light] .btn.gold{background:linear-gradient(135deg,#D4AF37,#B8902E);color:#1C1A16;box-shadow:0 10px 34px -12px rgba(184,144,46,.55)}
html[data-theme=light] .card,html[data-theme=light] .plan,html[data-theme=light] .mcard,html[data-theme=light] .wing-chat,html[data-theme=light] .tz-out,html[data-theme=light] .rep,html[data-theme=light] .report{background:var(--panel);border-color:var(--line);box-shadow:0 18px 50px -30px rgba(28,26,22,.25)}
html[data-theme=light] .card{background:linear-gradient(180deg,#FFFDF8,#F7F2E9)}
html[data-theme=light] .chip{background:rgba(255,253,248,.6)}
html[data-theme=light] .chip[aria-pressed=true],html[data-theme=light] .chip.on{background:var(--gold);color:#1C1A16;border-color:var(--gold)}
html[data-theme=light] .sample{background:rgba(247,242,233,.7);color:rgba(28,26,22,.55)}
html[data-theme=light] .ai-mark{background:rgba(247,242,233,.55);color:rgba(28,26,22,.6)}
html[data-theme=light] .ai-fine{color:var(--ink-3)}
/* Films stay films. Copy over footage keeps light ink and its shadow, and the hero scrim gets a warm, lighter wash so the film opens up. */
html[data-theme=light] .hero .band,html[data-theme=light] .film-copy,html[data-theme=light] .static-copy,html[data-theme=light] .grow-film .copy{color:#F5EFE0;--ink:#F5EFE0;--ink-2:#E6DEC9;--gold-hi:#F2C94C;text-shadow:0 1px 2px rgba(5,6,10,.7),0 3px 12px rgba(5,6,10,.5)}
html[data-theme=light] .hero .scrim{background:linear-gradient(180deg,rgba(247,242,233,.18),rgba(60,48,30,.25) 45%,rgba(247,242,233,.9) 96%)}
html[data-theme=light] .hero .band .btn:not(.gold){background:rgba(247,242,233,.85);color:#1C1A16;border-color:transparent}
html[data-theme=light] .film::after,html[data-theme=light] .static-img::after{filter:saturate(1.05)}
html[data-theme=light] .love-layer{opacity:.6}
html[data-theme=light] .foot{border-top:1px solid var(--line);background:var(--canvas-2)}

/* ---------- Toggles in the nav ---------- */
.ux-toggles{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.nav nav + .ux-toggles,.nav nav ~ .ux-toggles{margin-inline-start:0}
.ux-t{min-width:42px;height:38px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:600 13px/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .25s,background .25s,border-color .25s}
.ux-t:hover{color:var(--ink);background:var(--gold-mute)}
.ux-t svg{width:16px;height:16px}
.ux-t[data-ux=lang]{font-family:"PlexArabic",var(--body);letter-spacing:0}
@media (max-width:860px){.ux-toggles{margin-inline-start:auto;margin-inline-end:8px}.nav .btn{margin-inline-start:0}.ux-t{min-width:38px;height:36px;padding:0 10px}}
@media (max-width:420px){.ux-t span.lbl{display:none}}

/* ---------- Arabic, right to left ---------- */
html[dir=rtl]{--body:"PlexArabic","Instrument",ui-sans-serif,system-ui,sans-serif;--display:"PlexArabic","Bricolage",ui-sans-serif,system-ui,sans-serif;--mono:"PlexArabic",ui-monospace,monospace}
html[dir=rtl] body{font-size:17.5px;line-height:1.75}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .kicker,html[dir=rtl] .sample,html[dir=rtl] .ai-mark{letter-spacing:0;font-variation-settings:normal}
html[dir=rtl] h1{font-size:clamp(38px,6.2vw,88px);line-height:1.12}
html[dir=rtl] h2{font-size:clamp(30px,4.4vw,58px);line-height:1.3}
html[dir=rtl] .kicker{margin-bottom:12px}
html[dir=rtl] h3{line-height:1.3}
html[dir=rtl] .kicker{text-transform:none;font-size:13px;letter-spacing:0}
html[dir=rtl] .nav nav{margin-left:0;margin-right:auto}
html[dir=rtl] .nav .btn{margin-left:0}
html[dir=rtl] .brand em,html[dir=rtl] .brand span,html[dir=rtl] .mark{direction:ltr}
html[dir=rtl] .band.left{left:auto;right:var(--gut)}
html[dir=rtl] .band.right{right:auto;left:var(--gut)}
html[dir=rtl] .band{text-align:start}
html[dir=rtl] .foot-links,html[dir=rtl] .row,html[dir=rtl] .chips{direction:rtl}
html[dir=rtl] .ico-arrow,html[dir=rtl] .arrow,html[dir=rtl] .play-ico svg{transform:scaleX(-1)}
html[dir=rtl] input,html[dir=rtl] textarea{text-align:start}
html[dir=rtl] .price{text-align:start}
html[dir=rtl] .notranslate,html[dir=rtl] [translate=no]{direction:ltr;display:inline-block}
html[dir=rtl] .ux-t[data-ux=lang]{font-family:var(--body)}

/* ---------- Accessibility panel (same spec as the Al Thiqah build: text size x2, contrast, spacing, underline links, reduce motion) ---------- */
.a11y-fab{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:calc(18px + env(safe-area-inset-left,0px));z-index:70;width:50px;height:50px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);color:var(--gold-hi);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);transition:transform .25s}
.a11y-fab:hover{transform:translateY(-2px)}
.a11y-fab svg{width:26px;height:26px}
.a11y{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom,0px));left:calc(18px + env(safe-area-inset-left,0px));z-index:71;width:min(320px,calc(100% - 36px));background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);display:grid;gap:10px}
.a11y[hidden]{display:none}
.a11y b{font:700 15px var(--body);color:var(--ink)}
.a11y .g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y button{min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--ink-2);font:500 14px var(--body);cursor:pointer;padding:0 10px}
.a11y button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1C1A16}
.a11y .reset{grid-column:1/-1;border-style:dashed}
.a11y .note{margin:0;font-size:12px}
@media (max-width:640px){.a11y-fab{width:46px;height:46px}}

/* text size */
html.fs-1{font-size:112.5%}
html.fs-2{font-size:125%}
html.fs-1 body,html.fs-2 body{font-size:1em}
html.fs-1 h1,html.fs-2 h1{font-size:clamp(40px,6.5vw,92px)}
/* high contrast */
html.hc{--canvas:#000;--canvas-2:#000;--panel:#0A0A0A;--panel-2:#111;--ink:#fff;--ink-2:#fff;--ink-3:#E6E6E6;--line:rgba(255,255,255,.5);--line-2:rgba(255,255,255,.8);--gold-hi:#FFD84D;--gold:#FFD84D;--ruby-ink:#FF8FA0}
html.hc[data-theme=light]{--canvas:#fff;--canvas-2:#fff;--panel:#fff;--panel-2:#F2F2F2;--ink:#000;--ink-2:#000;--ink-3:#222;--line:rgba(0,0,0,.6);--line-2:rgba(0,0,0,.9);--gold-hi:#5A4300;--gold:#5A4300;--ruby:#8A0020;--ruby-ink:#8A0020}
html.hc .env,html.hc .love-layer,html.hc .env-grain{display:none}
html.hc .btn,html.hc .chip,html.hc .plan,html.hc .card{border-width:2px}
html.hc a{text-decoration:underline}
/* spacing */
html.sp body{letter-spacing:.04em;word-spacing:.12em;line-height:1.9}
html.sp p,html.sp li{margin-block:.6em}
/* underline links */
html.ul a{text-decoration:underline;text-underline-offset:3px}
/* reduce motion */
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
html.rm .love-layer,html.rm .env-glow{display:none}
html.rm video{display:none}
html.rm .hero{height:auto;min-height:100svh}
html.rm .band{position:relative;opacity:1;top:auto;translate:none;pointer-events:auto;padding:24px var(--gut)}
html.rm .stage{position:relative}
html.rm .poster{opacity:1}
/* keyboard focus, every theme */
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:6px}
.skip:focus{left:12px}

/* ---------- Cortex universe strip in the footer ---------- */
.foot-universe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.foot-universe .k{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:6px}
html[dir=rtl] .foot-universe .k{letter-spacing:0;text-transform:none;font-size:13px}
.foot-universe a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:13px;transition:border-color .25s,color .25s}
.foot-universe a:hover{border-color:var(--line-2);color:var(--ink)}
.foot-universe a b{color:var(--gold-hi);font-weight:700}

/* ---------- offscreen helpers that don't widen the canvas in RTL ---------- */
.skip{left:12px!important;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}
.hp{left:auto!important;inset-inline-start:0;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* while the privacy banner is open, the accessibility button moves under the nav so the banner never covers it */
body:has(#cortex-privacy-choice) .a11y-fab{bottom:auto;top:calc(72px + env(safe-area-inset-top,0px))}
body:has(#cortex-privacy-choice) .a11y{bottom:auto;top:calc(130px + env(safe-area-inset-top,0px))}

/* ---------- RTL fixes from the Arabic QA pass ---------- */
html[dir=rtl] .rail{right:auto;left:18px}
html[dir=rtl] .rail-lbl,html[dir=rtl] .intents-l,html[dir=rtl] .swipe-copy .label,html[dir=rtl] .intent-b,html[dir=rtl] .msg.game span,html[dir=rtl] .fc-t,html[dir=rtl] .label{letter-spacing:0;text-transform:none;font-size:13px}
html[dir=rtl] .fine,html[dir=rtl] .note,html[dir=rtl] .ai-fine{font-size:13.5px}
html[dir=rtl] .foot .fine{font-size:14px}
html[dir=rtl] .swipe-ctrl{direction:ltr}
html[dir=rtl] #swCount,html[dir=rtl] .count,html[dir=rtl] bdi,html[dir=rtl] .num{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .per{margin-inline-start:4px}
@media (max-width:900px){html[dir=rtl] .phone{width:100%;max-width:100%}html[dir=rtl] .split-2{grid-template-columns:minmax(0,1fr)}html[dir=rtl] .wing-in input{width:0;flex:1 1 0}}
html[dir=rtl] .sample{text-transform:none;letter-spacing:0;font-size:10px}

/* no mirrored-English flash: hold paint until the Arabic dictionary is applied (2.5 s safety cap) */
html.cc-pending body{visibility:hidden}
/* the Founding 100 card sits on a film still; in Day it becomes an ivory glass card */
html[data-theme=light] .join{background:rgba(255,253,248,.86);border-color:var(--line-2)}
html[data-theme=light] .join-bg{opacity:.22}