/* ============================================================================
   SKYTRADE v2 — core design system ("the desk")
   Load order: fonts/plex.css → family/family-tokens.css → ui/core.css → family/family.css → page css

   Dark is the default ground; [data-theme="light"] is a full light theme, not an inversion.
   Rules that are product decisions, not taste:
   1. DIRECTION IS NEVER COLOUR ALONE. Every up/down carries a caret and a word; colour only
      reinforces it. The data pair is cyan (up) / orange (down): the colour-blind-safe pair,
      and deliberately not the green/red "money" grammar this product refuses to speak.
   2. BRASS MEANS VERIFIED ON CHAIN, and nothing else. While no day is anchored, brass
      appears only as the empty outline of the seal.
   3. Every figure is IBM Plex Mono with tabular numerals, so columns align and can be
      checked by eye. Persian prose never sits in a mono run (Plex Mono has no Arabic).
   4. Motion only explains a state change, and prefers-reduced-motion switches it off.
   Contrast figures are MEASURED (WCAG 2.x), on --bg / --panel / --panel-2.
   ============================================================================ */
:root {
  color-scheme: dark;
  --bg: #0A0D12;
  --bg-inset: #07090C;
  --panel: #0F1319;
  --panel-2: #151A22;
  --panel-3: #1B212B;
  --line: #1D232D;          /* hairline, decorative */
  --line-2: #2A323E;        /* grouping rule */
  --line-strong: #5E6A82;   /* control borders — 3.58 / 3.42 / 3.21 (non-text ≥3) */

  --ink: #E9EEF5;           /* 16.69 / 15.98 / 14.98 */
  --ink-2: #AEB8C6;         /*  9.70 /  9.29 /  8.71 */
  --ink-3: #8491A3;         /*  6.08 /  5.82 /  5.45 */

  --bull: #2BC4E0;          /*  9.34 /  8.94 /  8.38 */
  --bear: #FF8F4D;          /*  8.61 /  8.24 /  7.72 */
  --bull-soft: rgba(43, 196, 224, 0.12);
  --bear-soft: rgba(255, 143, 77, 0.12);
  --bull-line: rgba(43, 196, 224, 0.55);
  --bear-line: rgba(255, 143, 77, 0.55);
  --flat: #8491A3;

  --accent: #7AA7FF;        /*  8.15 /  7.80 /  7.32 — interaction only: focus, active, selection */
  --accent-soft: rgba(122, 167, 255, 0.14);
  --brass: #D7A93A;         /*  8.92 — verification only */

  --cta-bg: #E9EEF5;
  --cta-ink: #0A0D12;       /* 16.69 */
  --cta-hover: #FFFFFF;

  --focus: #7AA7FF;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-pop: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  --glass: rgba(10, 13, 18, 0.78);
  --lock-a: #1B212B;
  --lock-b: #252C38;

  /* ---------- type ---------- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-fa: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, system-ui, sans-serif;

  --fs-display: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
  --fs-h3: 1.125rem;
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78125rem;
  --fs-label: 0.71875rem;
  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.6;
  --lh-fa-head: 1.5;
  --lh-fa-body: 1.95;

  /* ---------- geometry ---------- */
  --page-max: 1240px;
  --gutter: clamp(16px, 3.6vw, 40px);
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;
  --hit: 44px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;

  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --sky-mono: var(--font-mono);
  --sky-max: var(--page-max);
  --sky-pad: var(--gutter);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6F9;
  --bg-inset: #EAEEF3;
  --panel: #FFFFFF;
  --panel-2: #F6F8FB;
  --panel-3: #EEF1F5;
  --line: #E4E9EF;
  --line-2: #D3DAE3;
  --line-strong: #737F92;   /* 3.74 / 4.05 / 3.58 */
  --ink: #0D1319;           /* 17.25 / 18.68 */
  --ink-2: #3D4856;         /*  8.58 /  9.29 */
  --ink-3: #5A6676;         /*  5.39 /  5.84 / 5.15 */
  --bull: #086B89;          /*  5.58 /  6.04 / 5.33 */
  --bear: #A04606;          /*  5.75 /  6.23 / 5.49 */
  --bull-soft: rgba(8, 107, 137, 0.09);
  --bear-soft: rgba(160, 70, 6, 0.09);
  --bull-line: rgba(8, 107, 137, 0.5);
  --bear-line: rgba(160, 70, 6, 0.5);
  --flat: #5A6676;
  --accent: #2B5BCC;        /*  5.59 / 6.05 */
  --accent-soft: rgba(43, 91, 204, 0.1);
  --brass: #7A5D10;
  --cta-bg: #0D1319;
  --cta-ink: #FFFFFF;
  --cta-hover: #1E2733;
  --focus: #2B5BCC;
  --shadow-1: 0 1px 2px rgba(13, 19, 25, 0.05);
  --shadow-pop: 0 18px 50px -20px rgba(13, 19, 25, 0.28);
  --glass: rgba(244, 246, 249, 0.82);
  --lock-a: #E6EBF1;
  --lock-b: #D8DFE8;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[dir="rtl"] body, :lang(fa) body { font-family: var(--font-fa); line-height: var(--lh-fa-body); }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-head); letter-spacing: -0.015em; text-wrap: balance; }
[dir="rtl"] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: var(--lh-fa-head); }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
[hidden] { display: none !important; }

/* ---------- utilities ---------- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vh:focus { position: fixed !important; inset-block-start: 8px; inset-inline-start: 8px; width: auto; height: auto; clip: auto; z-index: 100;
  background: var(--panel); color: var(--ink); padding: 10px 14px; border-radius: var(--r-1); border: 1px solid var(--line-strong); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; letter-spacing: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--ink-3); }
.soft { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.up { color: var(--bull); }
.down { color: var(--bear); }
.flat { color: var(--flat); }
.label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}
[dir="rtl"] .label { letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-block-start: var(--s-3); }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: var(--hit); color: var(--ink); flex: none; }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__word { font-family: var(--font-sans); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em; direction: ltr; unicode-bidi: isolate; }
.brand__word b { font-weight: 600; color: var(--ink-3); }

/* ---------- header ---------- */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; }
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--s-3); }
.hdr__nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: 12px; border-radius: var(--r-1);
  color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hdr__nav a:hover { color: var(--ink); background: var(--panel-2); }
.hdr__nav a[aria-current="page"] { color: var(--ink); }
.hdr__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
.hdr .sky-price { font-size: 13px; }
@media (max-width: 1080px) { .hdr .sky-price { display: none; } }
@media (max-width: 920px) { .hdr__nav { display: none; } }

.iconbtn {
  -webkit-appearance: none; appearance: none;
  display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); flex: none;
  border-radius: var(--r-1); border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer;
  text-decoration: none; font-weight: 600; font-size: 0.875rem;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.iconbtn:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line-2); }
.iconbtn svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
.langbtn { width: auto; padding-inline: 10px; font-family: var(--font-fa); }
.langbtn[lang="en"] { font-family: var(--font-sans); }

/* mobile menu */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-width: 240px; z-index: 50;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--shadow-pop);
  padding: 6px; display: grid;
}
.menu__panel a { display: flex; align-items: center; min-height: var(--hit); padding-inline: 12px; border-radius: var(--r-1); text-decoration: none; color: var(--ink-2); }
.menu__panel a:hover { background: var(--panel-2); color: var(--ink); }
@media (min-width: 921px) { .menu { display: none; } }

/* ---------- buttons ---------- */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--hit); padding: 0 18px; border-radius: var(--r-1);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--cta-bg); color: var(--cta-ink); border: 1px solid var(--cta-bg);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--panel-2); border-color: var(--ink-3); }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: 0.875rem; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 1rem; border-radius: var(--r-2); }
.btn--block { width: 100%; }
.btn__sub { font-weight: 500; opacity: 0.72; }
[dir="rtl"] .btn .i-arrow { transform: scaleX(-1); }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } .hdr .btn { white-space: nowrap; } }
@media (max-width: 520px) { .hdr__cta { display: none; } .hdr__in { gap: var(--s-3); } }

/* ---------- tags, badges, direction ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; line-height: 1;
}
.tag svg { width: 12px; height: 12px; flex: none; }
.tag--up { color: var(--bull); background: var(--bull-soft); border-color: transparent; }
.tag--down { color: var(--bear); background: var(--bear-soft); border-color: transparent; }
.tag--flat { color: var(--ink-2); }
.tag--accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.tag--lock { color: var(--ink-3); background: transparent; border-style: dashed; }
.tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bull); flex: none; }
.dir { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.dir svg { width: 10px; height: 10px; flex: none; }
.dir--up { color: var(--bull); }
.dir--down { color: var(--bear); }
.caret { display: inline-block; width: 0; height: 0; border-inline: 4.5px solid transparent; flex: none; }
.caret--up { border-block-end: 7px solid currentColor; }
.caret--down { border-block-start: 7px solid currentColor; }
.caret--flat { width: 8px; height: 2px; background: currentColor; border: 0; }

/* ---------- panels & sections ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1);
}
.card--pad { padding: var(--s-5); }
.sec { padding-block: clamp(56px, 7vw, 104px); border-block-start: 1px solid var(--line); }
.sec__head { display: grid; gap: var(--s-3); max-width: 760px; margin-block-end: clamp(28px, 4vw, 48px); }
.sec__head h2 { font-size: var(--fs-h2); }
.sec__head p { color: var(--ink-2); font-size: var(--fs-lede); max-width: 64ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }

/* ---------- tables ---------- */
.tbl-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); }
.tbl { width: 100%; font-size: var(--fs-sm); }
.tbl caption { caption-side: top; text-align: start; padding: 12px 16px; color: var(--ink-3); font-size: var(--fs-xs); border-block-end: 1px solid var(--line); }
.tbl th, .tbl td { padding: 11px 16px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl thead th { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--panel-2); position: sticky; inset-block-start: 0; }
[dir="rtl"] .tbl thead th { letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }
.tbl tbody tr:last-child > * { border-block-end: 0; }
.tbl .n { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl tbody tr.is-link { cursor: pointer; }
.tbl tbody tr.is-link:hover, .tbl tbody tr.is-link:focus-visible { background: var(--panel-2); }
.tbl tbody tr:focus-visible { outline-offset: -2px; }
.sym { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; direction: ltr; unicode-bidi: isolate; }
.sym small { color: var(--ink-3); font-weight: 400; }

/* ---------- the lock: a placeholder that carries NO value ----------
   Locked levels are never real numbers blurred in the DOM (that would publish them to anyone who
   opens devtools). They are empty shapes. */
.locked {
  display: inline-block; width: 7.5ch; height: 0.95em; vertical-align: -0.1em; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--lock-a) 0 7px, var(--lock-b) 7px 9px);
  filter: blur(0.6px);
}
.locked--w { width: 10ch; }
.lockline { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.lockline svg { width: 14px; height: 14px; flex: none; }

/* ---------- notes ---------- */
.note {
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--panel-2); padding: 14px 16px; color: var(--ink-2);
  font-size: var(--fs-sm);
}
.note b, .note strong { color: var(--ink); }
.note--warn { border-color: var(--bear-line); background: var(--bear-soft); color: var(--ink); }
.note--brass { border-color: color-mix(in srgb, var(--brass) 55%, transparent); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.input, .select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: var(--hit); padding: 0 12px; border-radius: var(--r-1);
  background: var(--bg-inset); color: var(--ink); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.select { font-family: inherit; padding-inline-end: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .select { background-position: 13px 52%, 18px 52%; }
.input:focus-visible, .select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* segmented control (symbol / timeframe pickers) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-1); background: var(--bg-inset); border: 1px solid var(--line); }
.seg button {
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--ink-3);
  min-height: 34px; min-width: 44px; padding: 0 12px; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 0.8125rem;
  font-family: var(--font-mono);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-block-start: 1px solid var(--line-2); }
.faq details { border-block-end: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding-block: 14px; font-weight: 600; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 10px; height: 10px; flex: none; border-inline-end: 2px solid var(--ink-3); border-block-end: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq .faq__a { padding-block-end: var(--s-5); color: var(--ink-2); max-width: 72ch; display: grid; gap: var(--s-3); }

/* ---------- footer ---------- */
.foot { border-block-start: 1px solid var(--line); padding-block: var(--s-7) var(--s-6); background: var(--bg-inset); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
.foot__grid h3 { font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-block-end: var(--s-3); }
[dir="rtl"] .foot__grid h3 { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.foot__grid nav { display: grid; }
.foot__grid nav a { color: var(--ink-2); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; width: fit-content; }
.foot__grid nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__legal { margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-xs); display: grid; gap: var(--s-2); }
.foot__legal p { max-width: 120ch; }
.foot__legal a { color: var(--ink-2); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: var(--s-5); } }

/* family layer on the dark ground: keep its navy, tighten the seam */
.sky-rail { position: relative; z-index: 41; }
.sky-endorse { border-block-start: 1px solid var(--line); }

/* ---------- status line (loading / error / empty) ---------- */
.status { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--fs-sm); }
.status--err { color: var(--ink); }
.status button { margin-inline-start: auto; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-block-start-color: var(--ink-2); animation: st-spin 800ms linear infinite; flex: none; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.skel { background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; border-radius: 4px; animation: st-skel 1.4s ease-in-out infinite; }
@keyframes st-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- the seal (verification) ---------- */
.seal { width: 18px; height: 18px; flex: none; color: var(--brass); }
.seal--off { color: var(--ink-3); --seal-fill: none; }
.seal:not(.seal--off) { --seal-fill: var(--brass); }