/* ═══════════════════════════════════════════════════════════════════════
   zarnoush.css — the Gold Desk Ledger
   Shared design system for every Zarnoush internal page. The identity is
   the incumbent one: institutional navy, matte gold as a scarce signal,
   warm paper, Vazirmatn only, hairlines as structure. What changed is
   conviction — full editorial scale, ruled composition, a struck-seal
   mark, one authored settle, and browser chrome themed to the palette.
   The homepage, demo terminal and analyses feed do not load this file.
   ═══════════════════════════════════════════════════════════════════════ */
/* impeccable-disable repeating-stripes-gradient -- "The Gold Desk Ledger": .ruled and the .ink emboss are hairline ledger grounds — the core structural motif, documented in DESIGN.md, not decoration. */

:root {
  --tab: 62px;
  --shell: 1240px;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);

  --ink-900: #0F1824;  --ink-950: #080D15;  --ink-800: #1A2534;
  --ink-700: #2A374A;  --ink-600: #3F4E64;  --ink-500: #5A6980;
  --ink-400: #7E8CA3;  --ink-300: #AEB9CA;  --ink-100: #E9EDF3;
  --gold: #C9973F;     --gold-hi: #DBB871;  --gold-soft: #E9D3A5;
  --gold-deep: #8E6725; --gold-ink: #6C4E1E;
  --paper: #FBFAF7;    --paper-deep: #F3F0E9;  --surface: #FFFFFF;
  --line: #E8E4DC;     --line-strong: #DAD3C4;
  --up: #0E8A5F;       --down: #C33B45;

  --r-control: 12px;            /* buttons, inputs, small interactive squares */
  --r-card: 18px;               /* content surfaces, panels, dropdowns */
  --r-media: 20px;              /* the one dominant image / player per page */

  --lift-chrome: 0 1px 0 rgba(15,24,36,.04), 0 14px 34px -26px rgba(15,24,36,.5);
  --lift-media: 0 2px 6px rgba(8,13,21,.06), 0 30px 58px -42px rgba(8,13,21,.5);
  --lift-play: 0 10px 30px -10px rgba(8,13,21,.55);
  --lift-card: 0 1px 2px rgba(8,13,21,.04), 0 22px 42px -30px rgba(8,13,21,.4);

  --step: 44px;                 /* the ledger's baseline rhythm */
  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: light;
}
:root.dark {
  --ink-100: rgba(255,255,255,.9);
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --surface: #141E2C;
  --paper: #0B1220;
  --paper-deep: rgba(255,255,255,.02);
  color-scheme: dark;
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overscroll-behavior-y: none; text-rendering: optimizeLegibility; background: var(--paper); color: var(--ink-900); }
:root.dark body { color: #FFFFFF; }
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }

/* Dark-mode legibility floor for the ink-tone text utilities. The vendored
   Tailwind build does not emit every `dark:text-white/NN` step, so guarantee
   a light muted value here; a generated `dark:` utility (same specificity,
   later in the cascade) still wins where it exists. */
.dark .text-ink-400 { color: rgba(255,255,255,.56); }
.dark .text-ink-500 { color: rgba(255,255,255,.60); }
.dark .text-ink-600 { color: rgba(255,255,255,.68); }
.dark .text-ink-700 { color: rgba(255,255,255,.78); }
.dark .text-ink-800 { color: rgba(255,255,255,.88); }

/* ── browser surfaces themed to the palette ─────────────────────────── */
::selection { background: rgba(201,151,63,.26); color: var(--ink-900); }
.dark ::selection { color: #fff; }
:where(input, textarea) { caret-color: var(--gold); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--paper); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
.dark ::-webkit-scrollbar-thumb { border-color: var(--ink-950); }

/* ── type: one family, hierarchy from weight, size and leading ──────── */
.display {
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance;
  font-size: 2.35rem;
}
.display-2 { font-weight: 800; letter-spacing: -.032em; line-height: 1.12; text-wrap: balance; font-size: 1.75rem; }
.headline { font-weight: 800; letter-spacing: -.03em; line-height: 1.18; text-wrap: balance; font-size: 1.42rem; }
.title { font-weight: 700; letter-spacing: -.02em; line-height: 1.4; text-wrap: balance; }
.ui { font-weight: 600; letter-spacing: -.01em; }
.prose-fa { font-weight: 400; line-height: 2.0; max-width: 30rem; }
.lede { font-weight: 400; line-height: 1.85; font-size: 1rem; color: var(--ink-600); max-width: 34rem; }
@media (min-width: 640px) {
  .display { font-size: 3.1rem; }
  .display-2 { font-size: 2.05rem; }
  .headline { font-size: 1.6rem; }
  .lede { font-size: 1.06rem; }
}
@media (min-width: 1024px) {
  .display { font-size: 4.15rem; letter-spacing: -.04em; }
  .display-2 { font-size: 2.45rem; }
  .headline { font-size: 1.85rem; }
}
.dark .lede { color: rgba(255,255,255,.72); }
.nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }
.overline { font-size: 12px; font-weight: 700; letter-spacing: .16em; }

a { color: inherit; }
.link {
  color: var(--gold-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(201,151,63,.4);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .18s;
}
.link:hover { text-decoration-color: var(--gold); }
.dark .link { color: var(--gold-hi); }

/* ── layout scaffold ───────────────────────────────────────────────── */
.shell { max-width: var(--shell); margin-inline: auto; padding-left: 1.25rem; padding-right: 1.25rem; padding-inline: var(--gutter); }
.shell-tight { max-width: 940px; margin-inline: auto; padding-left: 1.25rem; padding-right: 1.25rem; padding-inline: var(--gutter); }
.shell-read { max-width: 720px; margin-inline: auto; padding-left: 1.25rem; padding-right: 1.25rem; padding-inline: var(--gutter); }
.band { padding-top: 4rem; padding-bottom: 4rem; padding-block: clamp(2.75rem, 1.8rem + 4vw, 5.5rem); }
.band-sm { padding-top: 2.75rem; padding-bottom: 2.75rem; padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
h2 + *, h3 + * { margin-top: .5rem; }   /* more space above a heading than below */

/* ── the ruled ledger: hairlines as structure, not decoration ──────── */
.ruled {
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--step) - 1px),
    var(--line) calc(var(--step) - 1px), var(--line) var(--step));
  background-position: 0 var(--rule-offset, 0);
}
.rule { border: 0; height: 1px; background: var(--line); margin: 0; }
.rule-strong { border: 0; height: 1px; background: var(--line-strong); margin: 0; }
.rule-gold {
  border: 0; height: 2px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
}
.col-rule { border-inline-start: 1px solid var(--line); }
.dark .col-rule { border-color: rgba(255,255,255,.08); }

/* ── the hallmark: a struck matte-gold seal, the scarce identity mark ── */
.hallmark {
  --d: 46px;
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--d); height: var(--d); border-radius: 999px;
  color: var(--ink-950); font-weight: 800; font-size: calc(var(--d) * .34); letter-spacing: -.02em;
  background-color: #C9973F;
  background-image:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.5), transparent 46%),
    linear-gradient(133deg, #8A6524 0%, #C1913C 22%, #F3DEAE 44%, #C9973F 62%, #A67B2C 82%, #E8CF97 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(74,50,12,.45),
    0 1px 0 rgba(255,255,255,.6),
    0 12px 24px -14px rgba(8,13,21,.5);
}
.hallmark svg { width: calc(var(--d) * .42); height: calc(var(--d) * .42); stroke-width: 2; }
.hallmark-lg { --d: 62px; }

/* ── ink field: the dark ledger cover, gold-radial as embossing light ── */
.ink-field, .ink {
  position: relative; color: #fff; isolation: isolate;
  background-color: #0F1824;
  background-image: linear-gradient(178deg, #182534 0%, #101A28 55%, #0B1220 100%);
}
.ink-field::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--step) - 1px),
    rgba(255,255,255,.05) calc(var(--step) - 1px), rgba(255,255,255,.05) var(--step));
}
.ink-deep { background-color: #080D15; background-image: linear-gradient(180deg, #101A28 0%, #0A111C 100%); color: #fff; }
.ink-field .lede, .ink .lede { color: rgba(255,255,255,.74); }
/* ink panel used as a self-contained card (not a full-bleed section) */
.ink-card { border-radius: var(--r-media); padding: 1.75rem; }
@media (min-width: 640px) { .ink-card { padding: 2.5rem; } }

/* ── surfaces: flat at rest, real lift on interaction ──────────────── */
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.surface-flat { background: var(--paper-deep); border-radius: var(--r-card); }
.dark .surface-flat { background: rgba(255,255,255,.03); }
.hair { border-color: var(--line); }
.card-link {
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform .28s var(--ease), border-color .22s, box-shadow .28s var(--ease);
}
.card-link:hover { transform: translateY(-3px); border-color: rgba(201,151,63,.5); box-shadow: var(--lift-card); }
.card-link:active { transform: translateY(-1px); }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .85rem 1.4rem; border-radius: var(--r-control);
  font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .14s var(--ease), background-color .18s, border-color .18s, color .18s, box-shadow .2s;
}
.btn:active { transform: scale(.975); }
.btn-gold { background: var(--gold); color: var(--ink-900); box-shadow: 0 10px 24px -16px rgba(8,13,21,.5); }
.btn-gold:hover { background: var(--gold-hi); box-shadow: 0 14px 28px -16px rgba(8,13,21,.55); }
.btn-ink { background: var(--ink-900); color: var(--gold-hi); }
.dark .btn-ink { background: var(--gold); color: var(--ink-900); }
.btn-ink:hover { background: var(--ink-800); }
.dark .btn-ink:hover { background: var(--gold-hi); }
.btn-quiet { min-height: 44px; padding-block: .6rem; border: 1px solid var(--line-strong); color: inherit; font-weight: 600; font-size: 12.5px; }
.btn-quiet:hover { border-color: var(--gold); color: var(--gold-ink); }
.dark .btn-quiet:hover { color: var(--gold-hi); }
.btn-ghost { min-height: 48px; padding-block: .7rem; border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 600; font-size: 12.5px; }
.btn-ghost:hover { border-color: var(--gold-hi); background: rgba(255,255,255,.05); }
/* header login pill — real color so it never inherits a UA default */
.b-cta { background: var(--gold); color: var(--ink-900); border-radius: var(--r-control); padding-block: .45rem; }
.b-cta:hover { background: var(--gold-hi); }

/* ── measure notation: weight + unit, aligned like a scale readout ──── */
.measure { display: inline-flex; align-items: baseline; gap: .28em; font-variant-numeric: tabular-nums; }
.measure b { font-weight: 800; letter-spacing: -.02em; }
.measure span { font-size: max(11px, .72em); font-weight: 600; color: var(--ink-500); }
.dark .measure span { color: rgba(255,255,255,.55); }

/* ── chip: hairline pill, gold reserved for identity ──────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-500); font-size: 12px; font-weight: 600;
}
.dark .chip { color: rgba(255,255,255,.6); }
.chip svg { width: 13px; height: 13px; }
.chip-gold { border-color: rgba(201,151,63,.4); color: var(--gold-ink); }
.dark .chip-gold { color: var(--gold-hi); }

/* ── chrome: fixed header ──────────────────────────────────────────── */
.glass, .chrome-blur { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
#bar {
  background: rgba(15,24,36,.97); box-shadow: var(--lift-chrome);
  transition: transform .34s var(--ease);
}
.dark #bar { background: rgba(8,13,21,.96); }
#bar.tuck { transform: translateY(-100%); }
.safe-t { padding-top: max(env(safe-area-inset-top), 0px); }
.safe-b { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.live-dot { position: relative; }
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid rgba(14,138,95,.4); animation: pulse-ring 2.4s var(--ease) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* live ticker strip beneath the bar */
.ticker { height: 28px; padding-top: 4px; padding-bottom: 4px; background: var(--ink-950); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.ticker__row { display: flex; align-items: center; gap: .55rem; height: 100%; font-size: 12px; color: rgba(255,255,255,.74); }
.ticker__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--up); flex: none; }
.ticker__tag { flex: none; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.ticker__sep { flex: none; width: 1px; height: 12px; background: rgba(255,255,255,.16); }
.ticker__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nvd {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.62);
  padding: .42rem .6rem; border-radius: var(--r-control); transition: color .18s, background-color .18s; white-space: nowrap;
}
.nvd:hover { color: var(--gold-soft); background: rgba(255,255,255,.06); }
.nvd.on { color: var(--ink-900); background: var(--gold-hi); font-weight: 700; }

.nvgroup { position: relative; }
.nvmenu {
  position: absolute; top: calc(100% + .5rem); inset-inline-start: 0; min-width: 16.5rem; z-index: 60;
  background: var(--ink-950); border: 1px solid rgba(219,184,113,.2);
  border-radius: var(--r-card); padding: .4rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 30px 56px -20px rgba(0,0,0,.8);
  display: none;
}
.nvgroup:focus-within > .nvmenu, .nvgroup.open > .nvmenu { display: block; }
.nvgroup.open > .nvd svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nvgroup:hover > .nvmenu { display: block; }
  .nvgroup:hover > .nvd svg { transform: rotate(180deg); }
}
.nvmenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .58rem .72rem; border-radius: var(--r-control); font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,.74); transition: background-color .16s, color .16s;
}
.nvmenu a:hover { background: rgba(219,184,113,.13); color: var(--gold-soft); }
.nvmenu a b { font-size: 12px; font-weight: 600; color: rgba(233,211,165,.62); }
.nvmenu hr { border: 0; border-top: 1px solid rgba(255,255,255,.09); margin: .35rem .4rem; }
.nvmenu .all { color: var(--gold-hi); font-weight: 600; }

/* ── footer ───────────────────────────────────────────────────────── */
.ft-h { font-size: 12px; font-weight: 700; letter-spacing: .15em; color: var(--gold-hi); margin-bottom: 1rem; }
.ft-l { display: block; font-size: 12.5px; color: rgba(255,255,255,.66); padding: .3rem 0; transition: color .16s; width: max-content; }
.ft-l:hover { color: var(--gold-hi); }

/* ── mobile drawer + bottom tabs ──────────────────────────────────── */
#drawer { visibility: hidden; }
#drawer[data-open="true"] { visibility: visible; }
#drawer [data-scrim] { opacity: 0; transition: opacity .28s; }
#drawer [data-panel] { transform: translateX(100%); transition: transform .38s var(--ease); }
#drawer[data-open="true"] [data-scrim] { opacity: 1; }
#drawer[data-open="true"] [data-panel] { transform: none; }
.drawer-link {
  display: flex; align-items: center; gap: .8rem; padding: .78rem .9rem; border-radius: var(--r-control);
  color: var(--ink-600); font-size: 13.5px; font-weight: 500;
}
.dark .drawer-link { color: rgba(255,255,255,.7); }
.drawer-link svg { color: var(--gold-deep); }
.dark .drawer-link svg { color: var(--gold-hi); }
.drawer-link.on { background: rgba(201,151,63,.14); color: var(--gold-deep); font-weight: 700; }
.dark .drawer-link.on { color: var(--gold-soft); }
.tabitem {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 12px; font-weight: 500; color: var(--ink-600);
}
.dark .tabitem { color: rgba(255,255,255,.62); }
.tabitem.on { color: var(--gold-deep); font-weight: 700; }
.dark .tabitem.on { color: var(--gold-hi); }

/* ── form fields ──────────────────────────────────────────────────── */
.fld {
  width: 100%; min-height: 50px; border-radius: var(--r-control); border: 1px solid var(--line-strong);
  background: var(--surface); padding: 13px 15px; font: inherit; font-weight: 600; font-size: 15px;
  color: var(--ink-900); transition: border-color .18s, box-shadow .18s;
}
.fld::placeholder { font-weight: 400; color: var(--ink-500); }
.fld:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,151,63,.14); }
.dark .fld { background: rgba(255,255,255,.03); color: #fff; }
textarea.fld { min-height: 132px; line-height: 1.9; resize: vertical; }

/* ── one authored moment: content settles onto the page ─────────────
   Content is visible by default. zarnoush.js reveals everything already
   in the first viewport, then adds `.reveal-armed` so only below-fold
   items carry the hidden start state (no visible flash). The inline head
   script promotes to `.reveal-ready` after ~2.2s: a stalled tab, a
   failed script, or a hidden background tab can never strand content. */
.reveal-armed:not(.reveal-ready) [data-reveal]:not(.is-in) {
  opacity: .001;
  transform: translateY(16px);
  transition: opacity .68s var(--ease), transform .68s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-armed:not(.reveal-ready) [data-reveal="rule"]:not(.is-in) {
  transform: scaleX(.15); transform-origin: right center;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .live-dot::after { display: none; }
  .video-shell, .hub-cover img, .poster-link img { animation: none !important; }
}

/* ── header price marquee (shared with the home design) ──────────────── */
#bar.glass, #bar.chrome-blur { transition: transform .28s var(--ease, cubic-bezier(.2,0,.2,1)); }
#bar.tuck { transform: translateY(-100%); }
.mq-wrap { position: relative; }
.mq-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq { display: inline-flex; gap: 2rem; white-space: nowrap; animation: zrn-mq 34s linear infinite; }
.mq b { letter-spacing: -.01em; }
.mq-wrap:hover .mq { animation-play-state: paused; }
@keyframes zrn-mq { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq { animation: none !important; }
  .mq-view { overflow-x: auto; scrollbar-width: none; }
  .mq-view::-webkit-scrollbar { display: none; }
}

/* ── footer trust seals (shared with the home design) ────────────────── */
.ft-seal { height: 66px; width: 66px; border-radius: 12px; display: grid; place-items: center;
           overflow: hidden; position: relative; }
.ft-seal .ph { display: none; }
.ft-seal.is-ph .ph { display: block; }

/* A rate the panel did not refresh on the last pass: the last good number is
   still shown, dimmed, so it is never read as a live quote. */
.is-stale { opacity: .55; }
.is-stale::after { content: "\00a0· قدیمی"; opacity: .72; font-size: max(.7em, 11px); font-weight: 600; vertical-align: middle; white-space: nowrap; }