/* ==========================================================================
   ایجنت‌اینا — «سینمای اسکن» · لایهٔ توکن
   منبع حقیقت رنگ/فاصله/تایپوگرافی. هیچ صفحه‌ای اجازه ندارد این مقادیر را
   کپی کند؛ همه از همین متغیرها می‌خورند. کامپوننت‌ها در components.css.
   ========================================================================== */

/* ── فونت‌ها (سلف‌هاست، بدون CDN) ───────────────────────────────────────── */
@font-face{
  font-family:'Estedad';
  src:url('/static/lab/fonts/Estedad-FD.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* مونوی لاتین — فقط توکن‌های فنی (دامنه، لیبل ACT/SCAN/FINDING، کد، URL).
   ساب‌ست latin؛ عمداً گلیف فارسی ندارد تا هرگز روی متن فارسی نیفتد. */
@font-face{
  font-family:'JetBrains Mono';
  src:url('/static/lab/fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── توکن‌ها ─────────────────────────────────────────────────────────────
   ⚠️ دو پوسته اینجا زندگی می‌کنند و قاعده‌شان ساده است:

     · ‎:root‎ = پوستهٔ تیره. مقدارِ هر توکن دقیقاً همان چیزی است که پیش از
       افزودنِ پوستهٔ روشن بود، پس تیره یک پیکسل هم تکان نخورده.
     · ‎html[data-theme="light"]‎ = فقط همان توکن‌هایی که باید عوض شوند.
       مقیاس‌ها (فاصله/شعاع/فونت/z) مشترک‌اند و هرگز تکرار نمی‌شوند.

   ⚠️ صفت ‎data-theme‎ را اسکریپتِ کوچکِ درونِ ‎_lab_head.html‎ پیش از اولین
   پِینت می‌گذارد. اگر JS اصلاً اجرا نشود، پوستهٔ تیره می‌ماند — یعنی نبودِ
   JS هیچ‌وقت به صفحهٔ بی‌رنگ ختم نمی‌شود.

   ⚠️ قاعدهٔ نگهداری: هیچ رنگی مستقیم در کامپوننت ننویس. اگر نقشی جدید لازم
   شد، اینجا یک توکن بساز و در هر دو بلوک مقدار بده — وگرنه آن رنگ در یکی
   از دو پوسته اشتباه می‌افتد و کسی تا مدت‌ها نمی‌فهمد.

   ⚠️ همهٔ جفت‌های زیر با اسکریپتِ سنجشِ کنتراست تأیید شده‌اند (WCAG AA):
   متن ≥۴٫۵:۱ و مرزِ کنترل/حلقهٔ فوکوس ≥۳:۱ — در هر دو پوسته. */
:root{
  color-scheme:dark;

  /* ══ رنگ — پالتِ «لاجورد و شنگرف» ═══════════════════════════════════════
     نقش‌ها، نه اسمِ رنگ‌ها. تفکیک معنایی هرگز جابه‌جا نمی‌شود:
       action  = کاری که از کاربر می‌خواهیم (CTA، لینک اصلی، پلن پیشنهادی)
       signal  = چیزی که سیستم می‌گوید (داده، وضعیت، موفقیت)
       danger  = یافتهٔ بد / خطا      warn = هشدار ملایم (فقط پنل)
     زمینه لاجوردِ عمیق است (نه سیاهِ خنثی) تا گرمای شنگرف رویش بنشیند؛
     همین تضادِ گرم/سرد کلِ هویت است. مقادیر از OKLCH گرفته شده‌اند تا
     روشنایی و کروما بینِ پله‌ها یکنواخت بماند. */
  --bg:#060B1B; --bg2:#0B1125; --surface:#121A32; --raised:#1D2641;
  /* سطحِ چیزهایی که «شناورند» (توست، دعوتِ نصب، نوارِ سیستم). در تیره با
     ‎--raised‎ یکی است؛ در روشن جدا می‌شود چون آنجا یک پنلِ شناور باید از
     صفحه روشن‌تر باشد، در حالی که هاورِ ردیفِ جدول باید تیره‌تر شود. */
  --float:#1D2641;
  --line:#27304B; --line-soft:#171F36; --line-bright:#3E4A6D;
  /* مرزِ کنترل‌های فرم (input/select/textarea/checkbox). جدا از ‎--line‎ است
     چون ۱٫۴٫۱۱ برای مرزی که «یک کنترل را می‌شناساند» ۳:۱ می‌خواهد و خطِ
     تزئینیِ کارت این حد را ندارد و لازم هم ندارد. */
  --line-field:#616E92;
  --action:#F26B1D; --action-hi:#FF863E; --action-rgb:242,107,29;
  --signal:#40DBDD; --signal-rgb:64,219,221; --signal-faint:rgba(64,219,221,.10);
  --text:#F0F3FA; --muted:#A3ABBE; --faint:#878FA2;
  --danger:#F35A88; --danger-rgb:243,90,136;
  --warn:#EAC33F; --warn-rgb:234,195,63;
  /* رنگِ متن روی سطحِ action — شنگرف روشن است، پس متنش تیره می‌شود
     (سفید روی آن ۳٫۱:۱ می‌دهد و برای لیبلِ دکمه رد می‌شود؛ این ۶٫۴:۱ است).
     در هر دو پوسته یکی است: CTA همه‌جا دقیقاً یک شکل دارد. */
  --on-action:#060B1B;
  --on-danger:#060B1B;
  /* ⚠️ شنگرف دو کار متفاوت می‌کند و در پوستهٔ روشن این دو از هم جدا می‌شوند:
       ‎--action‎/‎--action-hi‎ = پُرکنندهٔ دکمه (متنش ‎--on-action‎ است)
       ‎--action-text‎          = وقتی خودِ شنگرف «مرکب» است، روی زمینهٔ صفحه
     روی سفید، ‎#F26B1D‎ به‌عنوان متن ۲٫۹:۱ می‌دهد؛ پس متن رنگِ خودش را دارد. */
  --action-text:#FF863E;
  /* rgb ها برای جاهایی که آلفا لازم است (بک‌دراپ nav، مودال، هاور ردیف) */
  --bg-rgb:6,11,27; --surface-rgb:18,26,50; --raised-rgb:29,38,65; --text-rgb:240,243,250;
  /* «آرتیفکت کاغذی» (نمونهٔ گزارش/رسید) — در هر دو پوسته یکسان است، چون یک
     شیء است نه یک سطح: یک برگهٔ کاغذ روی میز. در پوستهٔ روشن لبه لازم دارد
     وگرنه کرمِ آن در سفیدِ صفحه گم می‌شود. */
  --paper:#FAF6EC; --paper-ink:#1A1710;
  --paper-accent:#1F2E73; --paper-dim:#6B6455; --paper-ink-2:#4A4335;
  --paper-rule:rgba(26,23,16,.14); --paper-edge:transparent;

  /* افکت‌های محیطی — شدتشان توکن است، نه عددِ کاشته‌شده در کامپوننت */
  --amb-warm:.10;      /* واشِ نارنجیِ .lighting */
  --amb-cool:.035;     /* واشِ فیروزه‌ایِ .lighting */
  --amb-spot:.05;      /* اسپات‌لایتِ موس */
  --grain-op:.028; --grain-blend:overlay;
  /* پردهٔ پشتِ مودال/کشو. ⚠️ در هر دو پوسته تیره است: کارِ پرده «عقب بردنِ
     صفحه» است، و پرده‌ای که هم‌رنگِ صفحه باشد این کار را نمی‌کند. */
  --scrim:rgba(3,6,15,.72);
  /* هاورِ خنثی که روی هر سطحی کار می‌کند (بستنِ دعوت، دکمهٔ ×) — چون از مرکبِ
     همان پوسته می‌آید، هیچ‌وقت با سطحِ زیرش یکی نمی‌شود */
  --tint-hover:rgba(var(--text-rgb),.08);
  --sheen:rgba(255,255,255,.18);      /* برقِ روی دکمهٔ پُر — همیشه روشن */
  --shimmer:rgba(var(--text-rgb),.05);/* موجِ اسکلتون — با پوسته می‌چرخد */
  --spinner-track:rgba(var(--text-rgb),.28);
  /* شبکهٔ procedural در hero (landing.js اینها را می‌خواند) */
  --net-link:62,123,255; --net-node:56,217,240; --net-link-a:.15; --net-node-a:1;
  /* جهتی که گرادیانِ تیترِ hero به آن روشن‌تر می‌شود — در نورِ روز برعکس */
  --g-mix:white;

  /* فاصله */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:96px;--s10:144px;

  /* شعاع */
  --r-s:8px;--r-m:12px;--r-l:18px;--r-xl:24px;

  /* ارتفاع — سایهٔ خنثی + هایلایت داخلی ۱px. هرگز گلوی رنگی به‌عنوان elevation. */
  --el-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);
  --el-2:0 2px 4px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.045);
  --el-3:0 4px 8px rgba(0,0,0,.5),0 32px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);

  /* حرکت و لایه */
  --ease:cubic-bezier(.22,.8,.28,1);
  --z-nav:80;--z-progress:90;--z-modal:100;--z-toast:110;

  /* تایپوگرافی */
  --font:'Estedad','Vazirmatn',system-ui,'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* عرض ستون */
  --wrap:1180px;      /* گرید لندینگ/فروش */
  --read:42rem;       /* ستون خواندن (بلاگ/حقوقی) — rem نه ch: گلیفِ «۰» در
                         Estedad-FD باریک است و 68ch فقط ~464px درمی‌آمد؛
                         مقاله روی دسکتاپ شبیه نمای موبایل می‌شد */
}

/* ══ پوستهٔ روشن ═══════════════════════════════════════════════════════════
   «روشن» یعنی همان صفحه در نورِ روز، نه یک محصولِ دیگر: سلسله‌مراتب، نقش‌ها
   و شنگرفِ CTA سرِ جایشان می‌مانند و فقط جهتِ نور برمی‌گردد.

   دو تصمیمی که چشم را نگه می‌دارند:
   ۱) زمینه سفیدِ خالص نیست. ‎#F1F4FA‎ یک لاجوردِ بسیار کم‌رمق است؛ سفیدِ
      ۱۰۰٪ زیر متنِ فارسیِ نازک برق می‌زند و در جلسهٔ طولانی چشم را می‌سوزاند.
      کارت سفید است تا روی همان زمینه واقعاً «بالا» بیاید.
   ۲) متن سیاهِ خالص نیست. ‎#10182A‎ همان لاجوردِ خانواده است — ۱۶:۱ می‌دهد
      (کافی و بیشتر از کافی) ولی لبه‌های حروف مثل ‎#000‎ روی سفید نمی‌لرزند.

   شنگرف و فیروزه در نقشِ «مرکب» تیره‌تر می‌شوند وگرنه روی سفید ناخواناست:
   فیروزهٔ ‎#40DBDD‎ روی سفید ۱٫۵:۱ است. پُرکنندهٔ CTA اما همان شنگرفِ برند
   می‌ماند، چون رنگِ برند نباید با پوسته عوض شود. */
html[data-theme="light"]{
  color-scheme:light;

  --bg:#F1F4FA; --bg2:#EDF1F8; --surface:#FFFFFF; --raised:#E5EAF5;
  --float:#FFFFFF;
  --line:#D5DCE9; --line-soft:#E4E9F2; --line-bright:#AEB9CE;
  --line-field:#7C85A1;
  --action:#F26B1D; --action-hi:#DE5C10;   /* هاور در نورِ روز تیره‌تر می‌شود، نه روشن‌تر */
  --action-text:#A8420A;
  --signal:#0A6E78; --signal-rgb:10,110,120; --signal-faint:rgba(10,110,120,.10);
  --text:#10182A; --muted:#4C5670; --faint:#5D6780;
  --danger:#C22A4C; --danger-rgb:194,42,76;
  --warn:#845400; --warn-rgb:132,84,0;
  --on-danger:#FFFFFF;
  --bg-rgb:241,244,250; --surface-rgb:255,255,255;
  --raised-rgb:229,234,245; --text-rgb:16,24,42;
  --paper-edge:rgba(26,23,16,.13);

  /* افکت‌ها: روی سفید همان شدت، دود می‌شود */
  --amb-warm:.055; --amb-cool:.05; --amb-spot:.035;
  --grain-op:.035; --grain-blend:multiply;
  --shimmer:rgba(var(--text-rgb),.055);
  --net-link:37,74,140; --net-link-a:.34; --net-node:8,96,110; --net-node-a:1.55;
  --g-mix:black;

  /* سایه در نورِ روز: نرم، سرد و بدونِ هایلایتِ سفیدِ داخلی (که اینجا فقط
     لبه را محو می‌کند). کارت‌ها با همین سایه و ‎--line‎ از زمینه جدا می‌شوند. */
  --el-1:0 1px 2px rgba(16,24,42,.05),0 2px 8px rgba(16,24,42,.05);
  --el-2:0 2px 4px rgba(16,24,42,.06),0 10px 26px rgba(16,24,42,.08);
  --el-3:0 4px 10px rgba(16,24,42,.07),0 26px 64px rgba(16,24,42,.13);
}

/* گذارِ نرمِ لحظهٔ سوییچ — کلاس را app.js فقط برای ~۲۶۰ms می‌گذارد و برمی‌دارد.
   ⚠️ عمداً همیشگی نیست: ترنزیشنِ دائمی روی رنگِ همهٔ عناصر، اسکرولِ صفحات
   بلند را سنگین می‌کند و در لودِ اول یک پرشِ رنگی نشان می‌دهد. */
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .26s var(--ease),border-color .26s var(--ease),
             color .26s var(--ease),fill .26s var(--ease),stroke .26s var(--ease),
             box-shadow .26s var(--ease)!important;
}
@media(prefers-reduced-motion:reduce){
  html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
    transition:none!important;
  }
}

/* ── ریست ─────────────────────────────────────────────────────────────
   ⚠️ این فایل فقط روی صفحاتی لود می‌شود که به «سینمای اسکن» مهاجرت کرده‌اند
   (‎_lab_head.html با ds_fusion). صفحات قدیمی سیستم خودشان را دارند و هیچ
   قاعده‌ای از اینجا رویشان نمی‌افتد — پس اینجا می‌توان نظرمند بود. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* هیچ صفحه‌ای نباید افقی اسکرول شود — قاعدهٔ ریشه‌ای، نه وصله.
     clip (نه hidden) چون scroll-container نمی‌سازد و position:sticky سالم می‌ماند. */
  overflow-x:clip;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;font-weight:300;line-height:1.9;
  min-height:100svh;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(var(--signal-rgb),.25);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:var(--bg)}

/* ── فوکوس — روی هر عنصر تعاملی، بدون استثنا ──────────────────────────── */
:where(a,button,input,select,textarea,summary,dialog,[role=button],[role=switch],[tabindex]):focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:6px;
}

/* ── مقیاس تایپوگرافی ─────────────────────────────────────────────────── */
h1,.t-h1{font-size:clamp(36px,5vw,64px);line-height:1.22;font-weight:900;letter-spacing:-1.2px}
h2,.t-h2{font-size:clamp(28px,3.4vw,42px);line-height:1.3;font-weight:900;letter-spacing:-.8px}
h3,.t-h3{font-size:clamp(18px,2vw,21px);line-height:1.5;font-weight:800;letter-spacing:-.2px}
p,.t-body{font-size:16px;font-weight:300;line-height:1.95}
.t-lead{font-size:17px;color:var(--muted);font-weight:300;line-height:2}
.t-cap{font-size:12.5px;color:var(--faint);line-height:1.75}

/* لیبل مونوی لاتین — همیشه جزیرهٔ LTR */
.mono,.t-mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;letter-spacing:2px}
.t-mono{font-size:10.5px;color:var(--faint);text-transform:uppercase}
/* هر محتوای لاتین (دامنه/کد/URL) داخل متن فارسی */
.ltr{direction:ltr;unicode-bidi:isolate;text-align:left}
/* اعداد جدولی — متریک، جدول، خروجی محاسبه */
.num{font-variant-numeric:tabular-nums}

/* ── کانتینرها ────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s6);position:relative;z-index:2}
.read{max-width:var(--read);margin-inline:auto}
@media(max-width:640px){.wrap{padding-inline:var(--s4)}}

/* ── دسترس‌پذیری ──────────────────────────────────────────────────────── */
/* پرش به محتوا — با clip پنهان می‌شود، نه با inset منفیِ بزرگ (که در RTL
   صفحه را هزاران پیکسل عریض می‌کرد؛ ریشهٔ باگ سرریز افقی همین الگو بود). */
.skip-link{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;background:var(--action);color:var(--on-action);font-weight:700;font-size:14px;
  padding:10px 16px;border-radius:var(--r-s);z-index:200;
}
.skip-link:focus-visible{
  width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
  inset-block-start:var(--s3);inset-inline-start:var(--s3);
}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;
}
/* هانی‌پات ضدبات: برای انسان نامرئی، برای بات قابل‌پرکردن. با clip پنهان
   می‌شود (نه inset:-9999px) تا عرض سند را بزرگ نکند. display:none نیست
   چون بعضی بات‌ها فیلدهای none را رد می‌کنند. */
.hp-field{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none;
}

/* ── حرکت ─────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}