/* Launchpad design tokens: colour, type, geometry and glass materials, light and dark.
   Shared by the terminal (index.html, with glass.css) and the stand-alone pages (pages.css).
   Change a colour here and it changes everywhere. */
:root {
  /* type */
  --f-display: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif; /* numbers: Geist with tabular figures */
  --f-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-logo: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-title: "Bricolage Grotesque", "Geist", system-ui, sans-serif; /* card and page titles */

  /* geometry */
  --r-xl: 26px; --r-lg: 22px; --r: 18px; --r-md: 14px; --r-sm: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* glass strength (reduced on phones, see the end of this file) */
  --blur-1: 22px; --blur-2: 16px; --blur-3: 28px; --blur-bar: 24px; --sat: 190%;

  /* brand: the orange lives in the logo only */
  --brand: #FF7A1A;
  --brand-btn: linear-gradient(180deg, #FF9A52 0%, #FF7A1A 55%, #F26A0F 100%);
  --brand-ink: #1F0E02;
  --brand-glow: 0 10px 26px -10px rgba(255, 122, 26, .65);

  /* light theme */
  --bg: #E2E7EF;
  --atmo:
    radial-gradient(62vmax 46vmax at 4% -12%, rgba(64, 118, 240, .34) 0%, transparent 70%),
    radial-gradient(48vmax 36vmax at 104% 4%, rgba(25, 182, 217, .26) 0%, transparent 70%),
    radial-gradient(70vmax 48vmax at 62% 120%, rgba(140, 150, 225, .34) 0%, transparent 70%),
    linear-gradient(180deg, #E7EBF2 0%, #D7DEE9 100%);
  --glass-1: rgba(255, 255, 255, .36);
  --glass-2: rgba(255, 255, 255, .24);
  --glass-3: rgba(255, 255, 255, .58);
  --glass-bar: rgba(246, 248, 252, .5);
  --edge: rgba(255, 255, 255, .88);
  --edge-out: rgba(15, 23, 42, .06);
  --hi: rgba(255, 255, 255, .95);
  --shadow-glass: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -20px rgba(30, 52, 100, .22);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, .05), 0 26px 50px -22px rgba(30, 52, 100, .30);
  --shadow-pop: 0 24px 60px -18px rgba(20, 34, 70, .32), 0 2px 6px rgba(16, 24, 40, .06);
  --panel: #FFFFFF;
  --panel-2: rgba(15, 23, 42, .035);
  --line: rgba(15, 23, 42, .085);
  --line-strong: rgba(15, 23, 42, .15);
  --ink: #0E1726;
  --ink-2: #2B3647;
  --muted: #5B6678;
  --navy: #1C2536;
  --blue: #2F6BEA;
  --blue-ink: #1F55C9;
  --cyan: #0E9DC0;
  --blue-soft: rgba(47, 107, 234, .10);
  --violet: #6D4FE0;
  --bk-bm: #A3293C; --bk-nbe: #1E6B47; --bk-cib: #2D5BD7; /* bank marks */
  --orange: #B8700D;           /* "watch" signals and the SMA 50 line: amber, never a UI accent */
  --orange-soft: rgba(217, 138, 28, .13);
  --up: #0E9F6E;
  --down: #E0424A;
  --flat: #8792A5;
  --track: rgba(15, 23, 42, .055);
  --seg-on: #FFFFFF;
  --seg-on-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 3px 10px -3px rgba(16, 24, 40, .12);
  --input: rgba(255, 255, 255, .72);
  --hover: rgba(47, 107, 234, .055);
  --accent: linear-gradient(150deg, #5A8DF5 0%, #3369E8 42%, #2452C9 100%);
  --accent-edge: rgba(255, 255, 255, .45);
  --accent-ink: #FFFFFF;
  --accent-muted: rgba(255, 255, 255, .74);
  --shadow: var(--shadow-glass);
  --bar-ink: var(--ink);
  color-scheme: light;
}

/* dark theme tokens (system dark unless the person picked light, or an explicit dark choice) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C111C;
    --atmo:
      radial-gradient(64vmax 48vmax at 4% -12%, rgba(64, 118, 240, .58) 0%, transparent 70%),
      radial-gradient(50vmax 38vmax at 104% 4%, rgba(25, 182, 217, .40) 0%, transparent 70%),
      radial-gradient(44vmax 36vmax at -4% 60%, rgba(70, 90, 230, .30) 0%, transparent 70%),
      radial-gradient(40vmax 32vmax at 102% 64%, rgba(196, 90, 220, .22) 0%, transparent 70%),
      radial-gradient(72vmax 48vmax at 58% 122%, rgba(120, 112, 235, .46) 0%, transparent 70%),
      linear-gradient(180deg, #121A2A 0%, #0B101B 100%);
    --glass-1: rgba(24, 29, 40, .34);
    --glass-2: rgba(32, 38, 51, .22);
    --glass-3: rgba(16, 20, 28, .52);
    --glass-bar: rgba(12, 15, 22, .48);
    --edge: rgba(255, 255, 255, .085);
    --edge-out: rgba(0, 0, 0, .35);
    --hi: rgba(255, 255, 255, .075);
    --shadow-glass: 0 1px 0 rgba(0, 0, 0, .35), 0 24px 48px -22px rgba(0, 0, 0, .75);
    --shadow-lift: 0 1px 0 rgba(0, 0, 0, .35), 0 30px 60px -22px rgba(0, 0, 0, .85);
    --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    --panel: #151A24;
    --panel-2: rgba(255, 255, 255, .045);
    --line: rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .14);
    --ink: #E9EDF4;
    --ink-2: #C7CFDC;
    --muted: #8F9AAD;
    --navy: #2A3343;
    --blue: #6C9BFF;
    --blue-ink: #8DB2FF;
    --cyan: #4FD3F2;
    --blue-soft: rgba(108, 155, 255, .15);
    --violet: #A48CFF;
    --bk-bm: #E0566B; --bk-nbe: #3FAE7C; --bk-cib: #6C9BFF;
    --orange: #F2A93B;
    --orange-soft: rgba(242, 169, 59, .14);
    --up: #2FD39A;
    --down: #FF6B6F;
    --flat: #7D889B;
    --track: rgba(255, 255, 255, .06);
    --seg-on: rgba(255, 255, 255, .13);
    --seg-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 1px 3px rgba(0, 0, 0, .45);
    --input: rgba(255, 255, 255, .05);
    --hover: rgba(108, 155, 255, .07);
    --accent: linear-gradient(150deg, #3D6FE6 0%, #2650C2 45%, #16337F 100%);
    --accent-edge: rgba(255, 255, 255, .22);
    --accent-muted: rgba(255, 255, 255, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C111C;
  --atmo:
    radial-gradient(64vmax 48vmax at 4% -12%, rgba(64, 118, 240, .58) 0%, transparent 70%),
    radial-gradient(50vmax 38vmax at 104% 4%, rgba(25, 182, 217, .40) 0%, transparent 70%),
    radial-gradient(44vmax 36vmax at -4% 60%, rgba(70, 90, 230, .30) 0%, transparent 70%),
    radial-gradient(40vmax 32vmax at 102% 64%, rgba(196, 90, 220, .22) 0%, transparent 70%),
    radial-gradient(72vmax 48vmax at 58% 122%, rgba(120, 112, 235, .46) 0%, transparent 70%),
    linear-gradient(180deg, #121A2A 0%, #0B101B 100%);
  --glass-1: rgba(24, 29, 40, .34);
  --glass-2: rgba(32, 38, 51, .22);
  --glass-3: rgba(16, 20, 28, .52);
  --glass-bar: rgba(12, 15, 22, .48);
  --edge: rgba(255, 255, 255, .085);
  --edge-out: rgba(0, 0, 0, .35);
  --hi: rgba(255, 255, 255, .075);
  --shadow-glass: 0 1px 0 rgba(0, 0, 0, .35), 0 24px 48px -22px rgba(0, 0, 0, .75);
  --shadow-lift: 0 1px 0 rgba(0, 0, 0, .35), 0 30px 60px -22px rgba(0, 0, 0, .85);
  --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  --panel: #151A24;
  --panel-2: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .14);
  --ink: #E9EDF4;
  --ink-2: #C7CFDC;
  --muted: #8F9AAD;
  --navy: #2A3343;
  --blue: #6C9BFF;
  --blue-ink: #8DB2FF;
  --cyan: #4FD3F2;
  --blue-soft: rgba(108, 155, 255, .15);
  --violet: #A48CFF;
  --bk-bm: #E0566B; --bk-nbe: #3FAE7C; --bk-cib: #6C9BFF;
  --orange: #F2A93B;
  --orange-soft: rgba(242, 169, 59, .14);
  --up: #2FD39A;
  --down: #FF6B6F;
  --flat: #7D889B;
  --track: rgba(255, 255, 255, .06);
  --seg-on: rgba(255, 255, 255, .13);
  --seg-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 1px 3px rgba(0, 0, 0, .45);
  --input: rgba(255, 255, 255, .05);
  --hover: rgba(108, 155, 255, .07);
  --accent: linear-gradient(150deg, #3D6FE6 0%, #2650C2 45%, #16337F 100%);
  --accent-edge: rgba(255, 255, 255, .22);
  --accent-muted: rgba(255, 255, 255, .7);
  color-scheme: dark;
}
/* Arabic: Geist still sets Latin letters and figures, Plex Arabic the Arabic script */
:root[lang="ar"] { --f-title: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif; --f-display: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif; --f-body: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif; --f-mono: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif; }

/* Browsers without backdrop blur get denser surfaces so text keeps its contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-1: rgba(255, 255, 255, .92); --glass-2: rgba(255, 255, 255, .86); --glass-3: rgba(255, 255, 255, .97); --glass-bar: rgba(246, 248, 252, .97); }
  :root[data-theme="dark"] { --glass-1: rgba(22, 27, 37, .94); --glass-2: rgba(28, 34, 46, .9); --glass-3: rgba(16, 20, 28, .97); --glass-bar: rgba(12, 15, 22, .97); }
}

:root { --pop: rgba(255, 255, 255, .97); }
:root[data-theme="dark"] { --pop: rgba(21, 25, 34, .98); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pop: rgba(21, 25, 34, .98); } }

/* Inset tiles and round icon buttons: clear glass with a bright top edge, instead of a flat panel colour */
:root {
  --tile-bg: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .1) 100%);
  --icon-bg: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 100%);
  --icon-hi: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .25);
}
:root[data-theme="dark"] {
  --tile-bg: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .012) 100%);
  --icon-bg: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 100%);
  --icon-hi: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tile-bg: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .012) 100%);
  --icon-bg: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 100%);
  --icon-hi: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04);
} }

/* ---------- moving background ----------
   Five soft pools of the site's colours (cobalt, cyan, violet, indigo and a touch of the logo's orange) drift slowly
   behind the glass. Switched on and off from the account menu (theme.js adds html.bg-flow); off, the page keeps
   its still background. Only transforms move, so the browser can animate it without repainting the page. */
:root {
  --flow-1: rgba(64, 118, 240, .42); --flow-2: rgba(25, 182, 217, .36); --flow-3: rgba(140, 130, 235, .42);
  --flow-4: rgba(255, 138, 51, .26); --flow-5: rgba(70, 100, 235, .30);
}
:root[data-theme="dark"] {
  --flow-1: rgba(64, 118, 240, .55); --flow-2: rgba(25, 182, 217, .38); --flow-3: rgba(150, 110, 255, .48);
  --flow-4: rgba(255, 138, 51, .20); --flow-5: rgba(196, 90, 220, .30);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --flow-1: rgba(64, 118, 240, .55); --flow-2: rgba(25, 182, 217, .38); --flow-3: rgba(150, 110, 255, .48);
  --flow-4: rgba(255, 138, 51, .20); --flow-5: rgba(196, 90, 220, .30);
} }
.lp-flow { display: none; }
html.bg-flow body::after { z-index: -2; }
html.bg-flow .lp-flow { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.lp-flow i { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; will-change: transform;
  animation: lp-flow-a 9s ease-in-out infinite alternate; }
.lp-flow i:nth-child(1) { left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, var(--flow-1), transparent); }
.lp-flow i:nth-child(2) { right: -26vmax; top: -18vmax; width: 62vmax; height: 62vmax; background: radial-gradient(closest-side, var(--flow-2), transparent); animation-name: lp-flow-b; animation-duration: 11s; }
.lp-flow i:nth-child(3) { left: 18vw; bottom: -40vmax; width: 80vmax; height: 80vmax; background: radial-gradient(closest-side, var(--flow-3), transparent); animation-name: lp-flow-c; animation-duration: 13s; }
.lp-flow i:nth-child(4) { right: -18vmax; bottom: -22vmax; width: 50vmax; height: 50vmax; background: radial-gradient(closest-side, var(--flow-4), transparent); animation-name: lp-flow-d; animation-duration: 10s; }
.lp-flow i:nth-child(5) { left: -24vmax; top: 34vh; width: 56vmax; height: 56vmax; background: radial-gradient(closest-side, var(--flow-5), transparent); animation-name: lp-flow-e; animation-duration: 12s; }
@keyframes lp-flow-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(34vw, 18vh, 0) scale(1.15); } 100% { transform: translate3d(12vw, 46vh, 0) scale(.92); } }
@keyframes lp-flow-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-30vw, 30vh, 0) scale(.9); } 100% { transform: translate3d(-48vw, 6vh, 0) scale(1.12); } }
@keyframes lp-flow-c { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-26vw, -24vh, 0) scale(1.1); } 100% { transform: translate3d(22vw, -10vh, 0) scale(.95); } }
@keyframes lp-flow-d { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-40vw, -30vh, 0) scale(1.2); } 100% { transform: translate3d(-14vw, -58vh, 0) scale(.9); } }
@keyframes lp-flow-e { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(40vw, -20vh, 0) scale(.92); } 100% { transform: translate3d(62vw, 14vh, 0) scale(1.08); } }
/* for people who ask their device for less motion, the colours stay but hold still */
@media (prefers-reduced-motion: reduce) { .lp-flow i { animation: none; } }

/* the switch that turns it on and off */
.flow-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.flow-sw .fs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow-sw .fs-txt b { font-size: 13px; font-weight: 600; color: var(--ink); }
.flow-sw .fs-txt small { font-size: 11.5px; color: var(--muted); }
.flow-sw .fs-knob { flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--track, rgba(120, 130, 150, .25)); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s; }
.flow-sw .fs-knob::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.flow-sw[aria-checked="true"] .fs-knob { background: linear-gradient(135deg, #4076F0, #8C82EB 60%, #FF8A33); box-shadow: none; }
.flow-sw[aria-checked="true"] .fs-knob::after { transform: translateX(16px); }
[dir="rtl"] .flow-sw[aria-checked="true"] .fs-knob::after { transform: translateX(-16px); }
.flow-sw:focus-visible { outline: 2px solid var(--blue, #2452C9); outline-offset: 4px; border-radius: 8px; }
.flow-row { max-width: 380px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }