:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F2F2F3;
  --surface-alt: #FAFAFB;
  --ink: #17191C;
  --muted: #5F636D;
  --faint: #6B6E76;
  --placeholder: #A3A6AF;
  --accent: #FBE1D1;
  --accent-ink: #5D2A1A;
  --mint: #DFF5E3;
  --mint-ink: #14532D;
  --border: #ECECEC;
  /* Tokens that exist so dark mode (assets/dark.css) can flip them; in light they equal the old hard-coded values. */
  --card: #FFFFFF;          /* raised panels / inputs / modals that used a literal #fff */
  --on-ink: #FFFFFF;        /* text sitting ON a var(--ink) fill (buttons, selected chips) */
  --ink-hover: #000000;
  --header-bg: rgba(255,255,255,.72);
  --header-line: rgba(23,25,28,.06);
  --danger: #B03A3A;
  --chart-grid: rgba(70, 74, 82, .22);
  /* solid green FILLS that carry white text — deliberately NOT flipped in dark mode (unlike --color-accent-*, which are also used as text colours) */
  --fill-500: #4d7c62;
  --fill-600: #3b604c;
  --fill-700: #2a4335;

  --font: 'Vazirmatn', -apple-system, sans-serif;
  --font-display: 'Estedad', -apple-system, sans-serif;

  --space-sm: 8px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 80px;

  --r-sm: 16px;
  --r-md: 24px;
  --r-artifact: 20px;
  --r-pill: 999px;

  --container: 1200px;
  --header-h: 66px;
  --dur: 240ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(.22,.8,.32,1);
  --shadow-artifact: 0 0 0 1px rgba(4,23,43,.05), 0 16px 32px -12px rgba(0,0,0,.12);

  --color-accent-50:  #c5dbce;
  --color-accent-100: #98bfaa;
  --color-accent-300: #66a080;
  --color-accent-500: #4d7c62;
  --color-accent-600: #3b604c;
  --color-accent-700: #2a4335;

  --color-notify: #F5A623;
}

*, *::before, *::after { box-sizing: border-box; }
button, input, textarea, select {
  font-family: inherit; font-size: inherit; color: inherit;
}
button {
  appearance: none; -webkit-appearance: none; background: none; border: none;
  cursor: pointer; text-align: inherit;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Honeypot / visually-hidden fields — clipped in place, never pushed
   off-canvas. An off-screen -9999px offset can blow out the horizontal
   scroll bounds on RTL pages, scrolling real content out of view. */
.hp-field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
  color: var(--ink);
}
h1 { font-size: clamp(22px, 2.4vw, 30px); }
/* Utility/content pages (FAQ, etc.) use a smaller heading than hero pages. */
/* FAQ heading is long — sized/widened to stay on one line on desktop. */
.page-template-page-faq h1 { font-size: clamp(19px, 2vw, 24px); }
.page-template-page-faq .section__head { max-width: none; }
/* Contact page: shorter heading sized/widened to stay on one line on desktop. */
.page-template-page-contact h1 { font-size: clamp(20px, 2.2vw, 24px); }
.page-template-page-contact .section__head { max-width: 820px; }
/* Services hub (خدمات): hero now carries two lead paragraphs (2026-09-23 rebuild) — a bit wider than the 640px default reads better. */
.page-template-page-services .section__head--center { max-width: 760px; }
/* Magazine listing (مجله): a quiet, centered utility heading — the hero-card
   and grid below carry the visual weight of the page, so the h1 doesn't
   need hero-page sizing. Kept at the original editorial scale — the site-wide
   type-scale reduction deliberately excludes the magazine/blog templates. */
.magazine-head h1 { font-size: clamp(22px, 2.6vw, 34px); }
.magazine-head { max-width: 620px; }
h2 { font-size: clamp(19px, 2vw, 24px); }
h3 { font-size: clamp(17px, 1.5vw, 19px); font-family: var(--font); font-weight: 600; }
/* Applied to h2/h3 elements that must sit at a small visual size for heading-hierarchy correctness (no skipped levels) without inheriting the larger default h2 display style. */
.h3-scale { font-size: clamp(17px, 1.5vw, 19px); font-family: var(--font); font-weight: 600; }
p { margin: 0 0 var(--space-md); max-width: 62ch; color: var(--muted); font-weight: 400; }

.skip-link {
  position: absolute; right: 0; top: 0; transform: translateY(-150%); background: var(--ink); color: var(--on-ink);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 0 var(--r-sm);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); }

.label {
  display: inline-block; font-size: 13px; font-weight: 400; letter-spacing: 0;
  color: var(--faint); margin-bottom: var(--space-sm);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-pill); font-weight: 500; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  min-height: 48px; font-family: var(--font);
}
.btn--accent { background: var(--ink); color: var(--on-ink); }
.btn--accent:hover { transform: translateY(-2px); background: var(--ink-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--surface); }
.btn--link { border: none; padding: 0; min-height: auto; color: var(--ink); font-weight: 400; }
.btn--link:hover { text-decoration: underline; color: var(--color-accent-600); }
.btn--block { width: 100%; justify-content: center; }
.btn-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }

/* «مقایسه با شریک» (2026-09-22): پس‌زمینه‌ی هلویی نرم (همون --accent/--accent-ink
   جفتی که .card--accent هم استفاده می‌کنه، پس تو دارک‌مود هم خودکار درست می‌شه)
   با یه بیمِ هلویی همیشه‌چرخان دور حاشیه -- همون تکنیک mpt-landing.css's
   .mpt-cta::before. کلاس مخصوص خودشه، چیزی از .btn--accent رو تغییر نمی‌ده. */
@property --mz-cmp-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mz-cmp-beam-spin { to { --mz-cmp-beam: 360deg; } }
.btn--compare-beam {
  position: relative; isolation: isolate; z-index: 0;
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn--compare-beam::before {
  content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--mz-cmp-beam), transparent 0 62%, var(--lc-f4b48d, #f4b48d) 78%, var(--lc-ffffff, #fff) 88%, var(--lc-d8935f, #d8935f) 96%, transparent 100%);
  -webkit-mask: linear-gradient(var(--lc-000000, #000) 0 0) content-box, linear-gradient(var(--lc-000000, #000) 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mz-cmp-beam-spin 4.2s linear infinite;
}
.btn--compare-beam:hover { transform: translateY(-2px); filter: brightness(.96); }
.btn--compare-beam:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--space-sm); font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); }
.breadcrumbs p { margin: 0; max-width: none; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs .separator { margin-inline: 6px; }
.breadcrumbs .last { color: var(--ink); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--header-line);
  box-shadow: 0 8px 24px -16px rgba(4,23,43,.15);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-lg); padding-block: 13px; }
.site-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 400; font-size: 22px; color: var(--ink); }
.site-logo__icon { width: 30px; height: 30px; flex-shrink: 0; }
.site-header .btn { padding: 10px 22px; min-height: 38px; font-size: 14px; border-width: 1.5px; }
.site-header .btn--ghost:hover { background: var(--ink); color: var(--on-ink); transform: translateY(-2px); }
.site-logo--footer { color: var(--ink); display: inline-flex; margin-bottom: var(--space-sm); }
.site-nav { flex: 1; }
.site-nav__list { display: flex; gap: var(--space-lg); font-weight: 400; font-size: 14px; }
.site-nav__list a { color: var(--ink); position: relative; padding-bottom: 4px; }
.site-nav__list a:hover { color: var(--muted); }
/* «برای کلینیک‌ها» (2026-10-13): چیپ هلویی بدون کادر، سمت چپِ «شروع تست»؛ رنگ‌ها از پالت توکن‌دار همان کارت‌های هلویی سایت. فقط دسکتاپ (زیر ۹۰۰px کارت خودش را در منوی موبایل دارد). */
.site-header-b2b {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-inline-start: 10px; padding: 9px 15px 9px 16px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: var(--lt-5d2a1a, #5D2A1A); background: linear-gradient(135deg, var(--lc-fbe1d1, #FBE1D1), var(--lc-fbe1d1, #FBE1D1));
  box-shadow: 0 6px 14px -8px rgba(93, 42, 26, .55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header-b2b svg { flex-shrink: 0; }
.site-header-b2b:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -9px rgba(93, 42, 26, .6); color: var(--lt-5d2a1a, #5D2A1A); }
.site-header-b2b:active { transform: scale(.97); }
/* Current-page indicator: WordPress adds these classes to the <li> of
   whichever nav item matches the page being viewed (and its ancestor, for
   a child page under a hub like خدمات). */
.site-nav__list li.current-menu-item > a,
.site-nav__list li.current_page_item > a,
.site-nav__list li.current-menu-ancestor > a,
.site-nav__list li.current_page_ancestor > a,
.site-nav__list li.current_page_parent > a {
  font-weight: 600;
}
.site-nav__list li.current-menu-item > a::after,
.site-nav__list li.current_page_item > a::after,
.site-nav__list li.current-menu-ancestor > a::after,
.site-nav__list li.current_page_ancestor > a::after,
.site-nav__list li.current_page_parent > a::after {
  content: ""; position: absolute; right: 0; left: 0; bottom: -4px;
  height: 2px; border-radius: var(--r-pill); background: var(--color-accent-500);
}
.site-phone { font-weight: 400; color: var(--muted); white-space: nowrap; }
.site-phone:hover { color: var(--ink); }
.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* Mobile (hamburger) menu, redesigned 2026-09-20. The bar's button morphs into an ×; the panel hangs off the
   header's bottom edge over a dimmed scrim, rows stagger in. Rows are built in inc/mobile-nav.php.
   --mnav-top is the header's real bottom edge (set in main.js on open) so the panel still fits when the
   announcement bar is showing above the sticky header. Colours are tokens, so dark.css needs no twin
   except the scrim/glow. The green CTA uses --fill-* (never flipped) so its white text stays readable. */
@media (max-width: 900px) {
  .site-nav, .site-phone { display: none; }
  .site-header-cta, .site-header-b2b { display: none; }

  .nav-toggle {
    display: grid; place-content: center; justify-items: end; gap: 5px; flex-shrink: 0;
    width: 44px; height: 44px; margin-inline-start: auto; border-radius: 14px;
    background: var(--surface); cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .nav-toggle span {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), width var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .nav-toggle span:nth-child(2) { width: 13px; }
  .nav-toggle[aria-expanded="true"] { background: var(--ink); }
  .nav-toggle[aria-expanded="true"] span { background: var(--on-ink); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  html.nav-open { overflow: hidden; }

  .mobile-nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--mnav-top, 66px)); height: calc(100dvh - var(--mnav-top, 66px));
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear var(--dur-slow);
  }
  .mobile-nav.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

  .mobile-nav__scrim {
    position: absolute; inset: 0; background: rgba(10, 18, 14, .46);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity var(--dur) var(--ease);
  }
  .mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }

  .mobile-nav__panel {
    position: relative; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px var(--space-md) 22px;
    border-radius: 0 0 28px 28px; border-bottom: 1px solid var(--border);
    background:
      radial-gradient(70% 55% at 100% 0%, rgba(102, 160, 128, .20), transparent 70%),
      linear-gradient(180deg, var(--bg), var(--surface-alt));
    box-shadow: 0 32px 48px -24px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(-14px);
    transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .mobile-nav.is-open .mobile-nav__panel { opacity: 1; transform: none; }

  .mobile-nav__list { display: flex; flex-direction: column; gap: 4px; }

  .mnav-link {
    display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 10px;
    border-radius: 20px; color: var(--ink);
    transition: background var(--dur) var(--ease);
  }
  .mnav-link:hover, .mnav-link:active { background: var(--surface); }
  .mnav-link__icon {
    display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 15px;
    background: var(--surface); color: var(--color-accent-600);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .mnav-link:hover .mnav-link__icon, .mnav-link:active .mnav-link__icon { background: var(--card); transform: scale(1.05); }
  .mnav-link__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .mnav-link__title { font-size: 17px; font-weight: 600; line-height: 1.5; }
  .mnav-link__desc { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
  .mnav-link__go { flex-shrink: 0; color: var(--faint); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
  .mnav-link:hover .mnav-link__go, .mnav-link:active .mnav-link__go { transform: translateX(-3px); color: var(--ink); }
  /* current page: same row, but the icon tile fills green and the row holds its tint */
  .mnav-link[aria-current="page"] { background: var(--surface); }
  .mnav-link[aria-current="page"] .mnav-link__icon { background: var(--fill-600); color: var(--lt-ffffff, #fff); }
  .mnav-link[aria-current="page"] .mnav-link__go { color: var(--ink); }

  .mnav-cta {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding: 18px 20px; border-radius: 24px; color: var(--lt-ffffff, #fff);
    background: linear-gradient(135deg, var(--fill-500), var(--fill-700));
    box-shadow: 0 14px 28px -14px rgba(42, 67, 53, .7);
    transition: transform var(--dur) var(--ease);
  }
  .mnav-cta:active { transform: scale(.985); }
  .mnav-cta__mark {
    position: absolute; z-index: -1; left: 28px; top: 50%; width: 112px; height: 112px;
    margin-top: -56px; opacity: .13; filter: invert(1); pointer-events: none;
  }
  .mnav-cta__text { display: flex; flex-direction: column; }
  .mnav-cta__title { font-size: 18px; font-weight: 700; line-height: 1.5; }
  .mnav-cta__sub { font-size: 12.5px; line-height: 1.6; opacity: .82; }
  .mnav-cta__arrow {
    display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    background: var(--lc-fbe1d1, #FBE1D1); color: var(--lt-5d2a1a, #5D2A1A); transition: transform var(--dur) var(--ease);
  }
  .mnav-cta:hover .mnav-cta__arrow, .mnav-cta:active .mnav-cta__arrow { transform: translateX(-4px); }

  .mnav-b2b {
    position: relative; display: block; margin-top: 12px; padding: 12px 16px 12px 44px;
    border: 1.5px dashed var(--border); border-radius: 16px; color: var(--ink);
    transition: background var(--dur) var(--ease);
  }
  .mnav-b2b:active { background: var(--surface); }
  .mnav-b2b__title { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; }
  .mnav-b2b__sub { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); }
  .mnav-b2b__arrow { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; }

  .mnav-phone {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px; padding: 12px 8px; border-radius: 16px;
    font-size: 13.5px; color: var(--muted);
  }
  .mnav-phone bdi { font-weight: 600; color: var(--ink); letter-spacing: .02em; }
  .mnav-phone:hover bdi { color: var(--color-accent-600); }

  /* entrance stagger — only when opening; closing is instant (no delays outside .is-open) */
  .mobile-nav__list li, .mnav-b2b, .mnav-cta, .mnav-phone {
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), background var(--dur) var(--ease);
  }
  .mobile-nav.is-open .mobile-nav__list li, .mobile-nav.is-open .mnav-b2b, .mobile-nav.is-open .mnav-cta, .mobile-nav.is-open .mnav-phone { opacity: 1; transform: none; }
  .mobile-nav.is-open .mnav-b2b { transition-delay: .26s, .26s, 0s; }
  .mobile-nav.is-open .mobile-nav__list li:nth-child(1) { transition-delay: .06s; }
  .mobile-nav.is-open .mobile-nav__list li:nth-child(2) { transition-delay: .10s; }
  .mobile-nav.is-open .mobile-nav__list li:nth-child(3) { transition-delay: .14s; }
  .mobile-nav.is-open .mobile-nav__list li:nth-child(4) { transition-delay: .18s; }
  .mobile-nav.is-open .mobile-nav__list li:nth-child(5) { transition-delay: .22s; }
  .mobile-nav.is-open .mobile-nav__list li:nth-child(n+6) { transition-delay: .26s; }
  .mobile-nav.is-open .mnav-cta { transition-delay: .30s, .30s, 0s; }
  .mobile-nav.is-open .mnav-phone { transition-delay: .36s; }
}

/* Hero */
.hero { padding-block: var(--space-xl) var(--space-lg); text-align: center; }
.hero__inner { max-width: 760px; margin-inline: auto; }
.hero p.lead { font-size: 17px; max-width: 52ch; margin-inline: auto; }

/* Homepage hero: a full first-screen "cover" panel in a distinct warm tone
   (the peach/terracotta accent family, not a new color), so the page opens
   on a deliberate held beat before the rest of the site's plain --bg content
   arrives on scroll. Sized to the viewport minus the sticky header — a
   min-height, not a hard height, so unusually short viewports still scroll
   instead of clipping text. */
.hero--home {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-lg);
  background: linear-gradient(160deg, var(--lc-e4f0e8, #E4F0E8) 0%, var(--color-accent-50) 55%, var(--lc-abcfb9, #ABCFB9) 100%);
  /* Reads as a raised panel sitting above the plain white content that follows: a soft downward
     shadow cast onto the next section. box-shadow paints outside the border box regardless of this
     element's own overflow:hidden (that only clips its children/background), and because .hero--home
     is position:relative with z-index:auto it already stacks above the following non-positioned
     .section — so the shadow shows through instead of being hidden behind it. */
  box-shadow: 0 32px 46px -28px rgba(23, 25, 28, .32), 0 10px 18px -12px rgba(23, 25, 28, .16);
}
.hero__glow {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 45% at 82% 12%, rgba(251, 225, 209, .55), transparent 70%),
    radial-gradient(32% 38% at 10% 88%, rgba(255, 255, 255, .6), transparent 70%);
}
.hero--home .hero__inner { position: relative; z-index: 1; }
.hero--home .label { color: var(--color-accent-700); opacity: .7; }
.hero--home .hero__title--home { color: var(--color-accent-700); }
.hero--home p.lead.hero__lead--home { color: rgba(42, 67, 53, .72); }

/* Small affordance signalling more content below the fold — the "before
   scroll" panel's handoff cue. Hidden on short/narrow viewports so it never
   crowds the CTA row. */
.hero__scroll-cue {
  position: absolute; z-index: 1; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  width: 22px; height: 34px; border: 1.5px solid rgba(42, 67, 53, .3); border-radius: var(--r-pill);
}
.hero__scroll-cue span {
  position: absolute; top: 6px; left: 50%; margin-inline-start: -2px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent-700); opacity: .65;
  animation: hero-scroll-cue 1.8s var(--ease) infinite;
}
@keyframes hero-scroll-cue {
  0% { transform: translateY(0); opacity: .7; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}
@media (max-height: 700px), (max-width: 600px) { .hero__scroll-cue { display: none; } }

/* Homepage hero headline/lead use manual <br> line breaks to hold an exact
   pyramid shape — both need a wider box than the shared .hero__inner/.lead
   so the longer forced lines don't wrap a second time. */
.hero__inner--home { max-width: 900px; }
.hero__title--home { font-size: clamp(22px, 2.4vw, 28px); max-width: 820px; margin-inline: auto; }
.hero p.lead.hero__lead--home { max-width: 720px; }
/* Below ~600px the desktop pyramid's forced lines no longer fit — swap to a
   shorter mobile-specific set of manual breaks (own wording/line lengths)
   rather than letting the desktop lines re-wrap unpredictably. */
.hero__title-mobile, .hero__lead-mobile { display: none; }
@media (max-width: 600px) {
  .hero__title-desktop, .hero__lead-desktop { display: none; }
  .hero__title-mobile, .hero__lead-mobile { display: inline; }
  .hero__title--home { font-size: clamp(20px, 6vw, 24px); max-width: 340px; }
  .hero p.lead.hero__lead--home { font-size: 14px; max-width: 340px; }
  /* Phone: no full-viewport centring — that left a dead band above the label and
     pushed the buttons + brain-wave below the fold. Content starts near the top,
     and the hero is only as tall as content plus room for the wave underneath. */
  .hero--home {
    min-height: calc(100svh - var(--header-h) - var(--announce-h, 0px));
    align-items: center; padding-block: var(--space-sm) 84px;
  }
  .hero--home .hero__title--home { margin-top: 12px; }
  .hero--home p.lead.hero__lead--home { margin-top: 14px; line-height: 1.85; }
  .hero--home .hero__actions { margin-top: 22px; gap: 14px; }
}
.hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }

/* Artifact-card collage: the "after scroll" reveal right after the hero,
   sitting fully in the page's plain light background (not straddling the
   hero's colored panel — that overlap read as an unexplained visual glitch
   rather than an intentional layer, so the cards live entirely below the
   seam instead). */
.hero-collage-wrap { background: var(--bg); padding-block: var(--space-xl) var(--space-lg); }
.hero-collage { position: relative; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); }
.hero-collage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: start; }
.artifact-card {
  background: var(--bg); border-radius: var(--r-artifact); box-shadow: var(--shadow-artifact);
  padding: var(--space-md); border: 1px solid var(--border);
}
.artifact-card--offset-up { transform: translateY(-24px); }
.artifact-card--offset-down { transform: translateY(24px); }
@media (max-width: 860px) {
  .hero-collage__grid { grid-template-columns: 1fr; }
  .artifact-card--offset-up, .artifact-card--offset-down { transform: none; }
}

/* Sections */
.section { padding-block: var(--space-xl); }
.section--alt { background: var(--surface-alt); }
.section--divider { border-top: 1px solid var(--color-accent-500); }
/* 2026-09-22 home page: pulls a section up over the bottom of the one before it (negative margin) and
   casts its own shadow UPWARD onto that section, so the section in between reads as sunk into a valley
   between two raised panels — same idea as .hero--home's downward shadow, mirrored. position:relative
   is required so this section's box-shadow paints above the (non-positioned) section it overlaps,
   regardless of DOM order — see the long comment on .hero--home for why that's how CSS stacking works.
   2026-09-22 (later same day): also carries a DOWNWARD shadow at its own bottom edge — the same two
   values .hero--home uses — so the panel reads as fully floating (raised on both edges), not just
   pulled up on top. Both directions live in one box-shadow list (shadows don't merge across rules). */
.section--raised {
  position: relative; margin-top: -60px;
  box-shadow:
    0 -30px 44px -26px rgba(23,25,28,.26), 0 -10px 16px -10px rgba(23,25,28,.14),
    0 32px 46px -28px rgba(23,25,28,.32), 0 10px 18px -12px rgba(23,25,28,.16);
}
@media (max-width: 700px) {
  .section--raised {
    margin-top: -40px;
    box-shadow:
      0 -20px 32px -20px rgba(23,25,28,.24), 0 -8px 14px -8px rgba(23,25,28,.12),
      0 32px 46px -28px rgba(23,25,28,.32), 0 10px 18px -12px rgba(23,25,28,.16);
  }
}
/* 2026-09-22: #home-tests's own padding-bottom (normally .section's 80px) is eaten into by
   how-it-works's .section--raised negative margin-top right after it, so the "مشاهده‌ی تمام تست‌ها"
   button's gap to the boundary ended up smaller than its gap to the divider line above it (34px,
   .hub-more's padding-top in tests-hub.css). Restoring: 34px + however much the next section overlaps. */
#home-tests { padding-bottom: 94px; }
@media (max-width: 700px) { #home-tests { padding-bottom: 74px; } }
/* Same fix, same cause, for #home-magazine: its own top gap is a clean, untouched 80px (nothing pulls
   IT up), but the specialists section right after it (.section--raised) pulls itself up 60/40px into
   magazine's bottom padding, so bottom looked smaller than top. Padding-bottom = 80px + that overlap,
   so the visible gap comes back to matching 80px on both edges. */
#home-magazine { padding-bottom: 140px; }
@media (max-width: 700px) { #home-magazine { padding-bottom: 120px; } }
.section__head { max-width: 640px; margin-bottom: var(--space-lg); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }

.zigzag { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.zigzag--reverse .zigzag__visual { order: -1; }
@media (max-width: 900px) { .zigzag { grid-template-columns: 1fr; } .zigzag--reverse .zigzag__visual { order: 0; } }
.zigzag__visual, .portrait-visual {
  aspect-ratio: 4/5; border-radius: var(--r-md); background: var(--surface); position: relative; overflow: hidden;
}
.portrait-visual { aspect-ratio: 3/4; }

/* Cards */
.card { background: var(--surface); border-radius: var(--r-md); padding: var(--space-lg); }
.card--accent { background: var(--accent); color: var(--accent-ink); }
.card--accent h2, .card--accent h3, .card--accent p, .card--accent strong { color: var(--accent-ink); }
.card--accent p { margin-inline: auto; }
.card--mint { background: var(--mint); color: var(--mint-ink); }
.card--mint h2, .card--mint h3, .card--mint p, .card--mint strong { color: var(--mint-ink); }
.card--mint p { margin-inline: auto; }
.prose .card > h3:first-child, .prose .card > h2:first-child { margin-top: 0; }
/* .prose > *:first-child normally zeroes the first heading's top margin
   (so .prose doesn't add awkward padding when it's the very first thing in
   a content area) -- but a test-result report puts a plain .card (the
   brain-map/radar block) directly before .prose, so that same reset was
   squeezing the "تحلیل شخصیتی" heading flush against the card above it.
   Restore real spacing specifically for that case. */
.card + .prose > *:first-child { margin-top: var(--space-xl); }

/* MBTI phase 7 follow-up (2026-09-14) — two real layout bugs the owner
   found on the live page, both from rules that were fine elsewhere on the
   site but wrong for a run of full-width report cards:
   1. `.card` itself carries no margin (spacing came from `.two-col-grid`'s
      `gap` everywhere it was used before) -- a bare sequence of `.card`
      siblings inside `.prose` (narrative sections, oop, famous, the AI-tier
      cards) had ZERO gap and looked glued together.
   2. `p { max-width: 62ch }` is right for long-form prose but, inside a
      report card that's as wide as the whole container, it leaves a big
      empty gap on the paragraph's non-text side. Same pattern already
      exists for .single-post below; test-result content gets the same
      treatment. */
.prose > .card { margin: var(--space-md) 0; }
.test-result .prose p,
.test-result .prose li { max-width: none; }

/* Extra soft pastel pairs, same family already used for test-history-card
   icon badges (gold/rose/lavender/sky) — extended here to full card
   backgrounds for report sections, so a page with several cards reads as
   a set of distinct, colorful findings instead of one undifferentiated
   grey block repeated N times. Each color is assigned to one content
   family consistently (science=sky, guidance=gold, etc. — see
   test-brainmap.js), not per-card at random. */
.card--sky { background: var(--lc-dceef7, #DCEEF7); color: var(--lt-1b4965, #1B4965); }
.card--gold { background: var(--lc-fbefc7, #FBEFC7); color: var(--lt-6b5416, #6B5416); }
.card--lavender { background: var(--lc-e6e1f5, #E6E1F5); color: var(--lt-3d3266, #3D3266); }
.card--rose { background: var(--lc-fbe0e0, #FBE0E0); color: var(--lt-7a2e2e, #7A2E2E); }
.card--sky h2, .card--sky h3, .card--sky p, .card--sky strong, .card--sky dt, .card--sky dd, .card--sky ul, .card--sky li { color: var(--lt-1b4965, #1B4965); }
.card--gold h2, .card--gold h3, .card--gold p, .card--gold strong, .card--gold dt, .card--gold dd, .card--gold ul, .card--gold li { color: var(--lt-6b5416, #6B5416); }
.card--lavender h2, .card--lavender h3, .card--lavender p, .card--lavender strong, .card--lavender dt, .card--lavender dd, .card--lavender ul, .card--lavender li { color: var(--lt-3d3266, #3D3266); }
.card--rose h2, .card--rose h3, .card--rose p, .card--rose strong, .card--rose dt, .card--rose dd, .card--rose ul, .card--rose li { color: var(--lt-7a2e2e, #7A2E2E); }
.card--sky dt, .card--gold dt, .card--lavender dt, .card--rose dt { opacity: .65; }
.card--sky .sys-card__nf, .card--gold .sys-card__nf, .card--lavender .sys-card__nf, .card--rose .sys-card__nf { border-top-color: rgba(0, 0, 0, .12); }

/* Result-report structure: a test result reads as a series of small
   labeled panels (one per finding) rather than one long undifferentiated
   h2/p scroll — every section presenting several parallel facts (a
   system's science profile, career guidance, environment, growth) uses
   the same two building blocks below instead of a dense <p> joined by
   manual <br>s.

   .two-col-grid — a generic 2-up layout (collapses to 1 col on mobile) for
   any pair of parallel panels: two system cards, strengths vs challenges,
   career vs relationships, environment vs growth. */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); }
@media (max-width: 640px) { .two-col-grid { grid-template-columns: 1fr; } }
.card > .two-col-grid:first-child { margin-top: 0; }
.card > .two-col-grid:last-child { margin-bottom: 0; }

/* .fact-list/.fact-row — a labeled fact (small muted dt above its dd
   value), used inside a plain .card wherever a section has 2-4 findings
   to present together. */
.fact-list { margin: 0; }
.fact-row { margin-bottom: 12px; }
.fact-row:last-child { margin-bottom: 0; }
.fact-row dt { font-size: 12px; color: var(--faint); margin-bottom: 2px; }
.fact-row dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Per-system "science card" — one self-contained block (EEG association,
   brain regions, network, neurofeedback path) instead of the same facts
   spread across several disconnected paragraphs. */
.sys-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-sm); }
/* 2026-09-14 (owner screenshot) -- emoji glyphs carry a lot of built-in
   vertical padding in their own font metrics, so `align-items:center` on
   the flex row alone still left them sitting visibly high next to the
   heading. Pinning the glyph inside its own centered square box (instead
   of trusting ambient line-height) is the reliable fix. */
.sys-card__emoji {
  font-size: 22px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.3em; height: 1.3em; flex-shrink: 0;
}
/* 2026-09-15 -- the `transform: translateY(4px)` that used to sit here
   was a guess from eyeballing a zoomed screenshot, made before the real
   bug (the .prose h3 margin-top conflict below) was found. Once that
   real bug was fixed, this 4px became a visible overshoot the OTHER way
   (owner: "پایین‌تر از متن افتاده"). Removed rather than re-guessed a new
   number -- getBoundingClientRect() on the owner's live page after the
   margin-top fix alone already reads a 0px difference between the emoji
   box and the heading box, so no compensating transform belongs here at
   all right now. If a specific glyph still looks off after this, that's
   a real, separate, per-glyph question -- measure it live, don't nudge
   by eye again. */
.sys-card__head h3 { margin: 0; line-height: 1; }
/* 2026-09-15 (owner, 4th report of the same bug -- this time actually
   found the real cause instead of re-guessing) -- measured every
   .sys-card__head on a live page with getBoundingClientRect(): the one
   card NOT nested inside .prose (dim-spectrum) was correctly centered
   (off by +4px, matching the emoji nudge above), but every single card
   that IS nested inside .prose (all of renderNarrative's cards,
   renderOopSection, renderFamousSection) was off by -16px, exactly and
   consistently. Root cause: `.prose h3 { margin-top: var(--space-lg) }`
   (theme/assets/main.css, prose typography rules) has the SAME
   specificity (0,1,1) as the `margin: 0` rule directly above and comes
   LATER in this file, so it wins the cascade and silently reintroduces
   a 40px top margin on any h3 inside `.sys-card__head` that happens to
   also be inside `.prose` -- flexbox then centers that lopsided margin
   box, shifting the visible heading down by half of it. This is why the
   earlier "fixed" attempts kept failing: they were never wrong about
   the emoji, they just never had a case that exercised this specific
   conflict. Needs strictly higher specificity than `.prose h3`, not
   just equal-with-hope-of-source-order. */
.prose .sys-card__head h3 { margin-top: 0; }
.sys-card__nf { margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); line-height: 1.6; }
.sys-card__nf strong { color: inherit; }
/* 2026-09-15 (owner screenshot) -- the global `p { max-width: 62ch }`
   (a readability cap meant for page-width prose) is narrower than a
   .sys-card's own content width, so any paragraph long enough to need
   it left visible dead space beside it instead of filling the card --
   same fix already applied ad hoc elsewhere (#bm-result p,
   .profile-slide p, .about-prose p, ...), just scoped to every .sys-card
   paragraph at once instead of one more one-off override. */
.sys-card p { max-width: none; }

/* A recurring methodology disclaimer (shown on every report), not a
   one-off editorial callout — stays a plain small note, not the peach
   blockquote treatment, which the design system reserves for one real
   finding per page (see .prose blockquote and the special-notes block
   that uses it in test-brainmap.js). */
.sci-note { font-size: 13px; color: var(--faint); }

/* Service list (no cards) */
.service-list { border-top: 1px solid var(--border); }
.service-row { display: grid; grid-template-columns: 2fr 3fr auto; gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--border); }
.service-row h2, .service-row h3 { margin-bottom: 0; }
.service-row p { margin-bottom: 0; }
@media (max-width: 780px) { .service-row { grid-template-columns: 1fr; gap: var(--space-sm); text-align: right; } }

/* Credentials list (no cards — hairline rows with an icon + a year pill) */
.cred-list { border-top: 1px solid var(--border); }
.cred-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md);
  align-items: center; padding-block: var(--space-md); border-bottom: 1px solid var(--border);
}
.cred-row__icon {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  background: var(--color-accent-50); color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
}
.cred-row h3 { margin-bottom: 2px; font-size: 16px; }
.cred-row p { margin-bottom: 0; font-size: 14px; color: var(--faint); }
.cred-row__year {
  font-size: 13px; font-weight: 500; color: var(--color-accent-700);
  background: var(--color-accent-50); padding: 6px 16px; border-radius: var(--r-pill);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .cred-row { grid-template-columns: auto 1fr; row-gap: var(--space-sm); }
  .cred-row__year { grid-column: 2; justify-self: start; }
}

.about-teaser { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); align-items: center; }
@media (max-width: 900px) { .about-teaser { grid-template-columns: 1fr; } }

.cta-band {
  background: var(--surface); border-radius: var(--r-md); padding: var(--space-xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
}
.cta-band h2 { margin-bottom: 4px; }
.cta-band p { margin-bottom: 0; }

/* Scroll-reveal: base .reveal fades/slides in on scroll. Add a direction
   modifier (--left/--right/--down; default with no modifier is up) and/or
   a stagger modifier (--d1..--d5) for cascading groups. JS only toggles
   .is-visible via IntersectionObserver (see main.js) — this file owns the
   actual motion. */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal--down  { transform: translateY(-28px); }
.js .reveal--left  { transform: translateX(-56px); }
.js .reveal--right { transform: translateX(56px); }
.js .reveal--scale { transform: scale(.94); }
.js .reveal.is-visible { opacity: 1; transform: none; }

.reveal--d1 { --reveal-delay: 90ms; }
.reveal--d2 { --reveal-delay: 180ms; }
.reveal--d3 { --reveal-delay: 270ms; }
.reveal--d4 { --reveal-delay: 360ms; }
.reveal--d5 { --reveal-delay: 450ms; }

@media (max-width: 900px) {
  .js .reveal--left, .js .reveal--right { transform: translateY(24px); }
}

/* ---------- Footer (2026-09-19 redesign) ---------- */
.site-footer { margin-top: var(--space-xl); background: transparent; color: rgba(255,255,255,.72); position: relative; }
.footer-cta { position: relative; z-index: 2; margin-bottom: -56px; }
.footer-cta__card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
  padding: clamp(22px, 3.4vw, 36px) clamp(22px, 4vw, 44px); border-radius: 28px; color: var(--lt-ffffff, #fff);
  background: radial-gradient(500px 220px at 90% 0%, rgba(159,224,191,.35), transparent 65%), linear-gradient(135deg, var(--lc-3d7a5d, #3d7a5d), var(--lc-244a39, #244a39));
  box-shadow: 0 30px 50px -28px rgba(15,42,31,.7);
}
.footer-cta__text h2 { margin: 0 0 6px; color: var(--lt-ffffff, #fff); font-size: clamp(20px, 2.6vw, 28px); }
.footer-cta__text p { margin: 0; max-width: 46ch; color: rgba(255,255,255,.82); }
.footer-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .8em 1.8em; border-radius: var(--r-pill);
  background: var(--lc-ffffff, #fff); color: var(--lt-244a39, #244a39); font-weight: 700; font-size: 16px; overflow: hidden;
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.5); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.footer-btn::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(159,224,191,.55), transparent); transform: translateX(-150%) skewX(-20deg); animation: footer-shine 4.5s ease-in-out infinite; will-change: transform; }
@keyframes footer-shine { 0%, 60% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
.footer-btn svg { transition: transform var(--dur) var(--ease); }
.footer-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 30px -14px rgba(0,0,0,.55); }
.footer-btn:hover svg { transform: translateX(-4px); }
.footer-btn--ghost { background: transparent; color: var(--lt-ffffff, #fff); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.footer-btn--ghost::after { display: none; }
.footer-btn--ghost:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--lc-ffffff, #fff); }

.site-footer__main { background: var(--lc-0f2a1f, #0f2a1f); padding-top: 56px; }
/* the CTA is redundant right under a landing page's own closing banner */
main:has(.mpt-final) ~ .site-footer .footer-cta { display: none; }
main:has(.mpt-final) ~ .site-footer { margin-top: 0; }
main:has(.mpt-final) ~ .site-footer .site-footer__main { padding-top: 0; }

.site-footer__inner { display: grid; grid-template-columns: 1.5fr .9fr 1fr 1.3fr; gap: var(--space-lg) clamp(24px, 4vw, 56px); padding-block: var(--space-xl) var(--space-lg); }
.site-footer .site-logo--footer { display: inline-flex; align-items: center; gap: 12px; color: var(--lt-ffffff, #fff); font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.site-footer .site-logo__icon { width: 46px; height: 46px; padding: 7px; border-radius: 14px; background: var(--lc-ffffff, #fff); }
.site-footer__brand p { margin: 14px 0 18px; color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.95; }
.footer-phone { display: inline-flex; align-items: center; gap: 10px; padding: .6em 1.3em; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--lc-4f8a6c, #4f8a6c), var(--lc-2a6047, #2a6047)); color: var(--lt-ffffff, #fff); font-weight: 700; font-size: 16px; letter-spacing: .02em; box-shadow: 0 12px 22px -12px rgba(0,0,0,.6); transition: transform var(--dur) var(--ease); }
.footer-phone:hover { transform: translateY(-2px); }

.site-footer__col h3 { margin: 0 0 16px; padding-bottom: 10px; position: relative; font-size: 15px; color: var(--lt-ffffff, #fff); font-weight: 700; font-family: var(--font); }
.site-footer__col h3::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--lc-9fe0bf, #9fe0bf); }
.site-footer__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-footer__list a { display: inline-block; padding: 5px 0; color: rgba(255,255,255,.72); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.site-footer__list a:hover { color: var(--lt-9fe0bf, #9fe0bf); transform: translateX(-5px); }

.site-footer address { font-style: normal; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.9; margin: 2px 0 8px; }
.footer-location { margin-bottom: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.footer-location:hover { background: rgba(255,255,255,.09); border-color: rgba(159,224,191,.4); }
.footer-location strong { color: var(--lt-ffffff, #fff); font-size: 15px; }
.footer-directions { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--r-pill); background: rgba(159,224,191,.16); font-size: 13px; font-weight: 600; color: var(--lt-9fe0bf, #9fe0bf); transition: background var(--dur) var(--ease), gap var(--dur) var(--ease); }
.footer-directions svg { flex-shrink: 0; }
.footer-directions:hover { background: rgba(159,224,191,.3); gap: 9px; }

/* Social + bots (inc/social.php). Tiles glow in each brand colour (--soc) on hover. */
.footer-social { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-md); border-top: 1px solid rgba(255,255,255,.1); }
.footer-social__head { flex: 1 1 260px; max-width: 380px; }
.footer-social__head h3 { margin: 0 0 8px; font-size: 17px; color: var(--lt-ffffff, #fff); font-family: var(--font); }
.footer-social__head p { margin: 0; font-size: 13.5px; line-height: 1.9; color: rgba(255,255,255,.65); }
.soc { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; --soc-fg: var(--lc-ffffff, #fff); --soc-bg: rgba(255,255,255,.06); --soc-bd: rgba(255,255,255,.12); --soc-sub: rgba(255,255,255,.55); }
.soc__link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 20px; border-radius: 18px; background: var(--soc-bg); border: 1px solid var(--soc-bd); color: var(--soc-fg); overflow: hidden; isolation: isolate; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.soc__link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--soc), color-mix(in srgb, var(--soc) 55%, var(--lc-000000, #000))); opacity: 0; transition: opacity var(--dur) var(--ease); }
.soc__link:hover, .soc__link:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: 0 16px 28px -14px var(--soc); color: var(--lt-ffffff, #fff); }
.soc__link:hover::before, .soc__link:focus-visible::before { opacity: 1; }
.soc__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: color-mix(in srgb, var(--soc) 22%, transparent); color: var(--soc); flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .4s var(--ease); }
.soc__link:hover .soc__ico { background: rgba(255,255,255,.22); color: var(--lt-ffffff, #fff); transform: rotate(-8deg) scale(1.08); }
.soc__txt { display: flex; flex-direction: column; line-height: 1.45; text-align: start; }
.soc__txt b { font-size: 14px; font-weight: 700; }
.soc__txt i { font-style: normal; font-size: 12px; color: var(--soc-sub); transition: color var(--dur) var(--ease); unicode-bidi: plaintext; text-align: left; }
.soc__link:hover .soc__txt i { color: rgba(255,255,255,.85); }
.soc--compact .soc__link { padding: 0; border-radius: 50%; }
.soc--compact .soc__ico { width: 44px; height: 44px; border-radius: 50%; }
.contact-social { max-width: 900px; margin: var(--space-lg) auto 0; text-align: center; }
.contact-social p { color: var(--muted, var(--lt-5b6b63, #5b6b63)); }
.contact-social .soc { justify-content: center; margin-top: var(--space-md); --soc-fg: var(--ink, var(--lc-12352a, #12352a)); --soc-bg: var(--card, var(--lc-ffffff, #fff)); --soc-bd: var(--border, rgba(0,0,0,.1)); --soc-sub: var(--muted, var(--lc-6b7a72, #6b7a72)); }
@media (max-width: 760px) {
  .footer-social { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-social { gap: var(--space-md); }
  .footer-social__head { max-width: none; flex: none; }
  .soc { justify-content: center; }
  .soc__link { flex: 1 1 calc(50% - 12px); min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .soc__link, .soc__ico { transition: none; } .soc__link:hover { transform: none; } }

.site-footer__legal { position: relative; padding-block: var(--space-lg) var(--space-lg); font-size: 13px; color: rgba(255,255,255,.75); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.site-footer__legal::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.site-footer__legal p { margin: 0; }
.site-footer__note { max-width: 640px; line-height: 2; }
.site-footer__warn { display: inline-flex; align-items: center; gap: 10px; max-width: 680px; padding: 12px 20px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); font-weight: 500; line-height: 1.9; text-align: start; }
.site-footer__warn svg { flex-shrink: 0; opacity: .85; }
.site-footer__warn strong { font-weight: 700; color: var(--lt-ffffff, #fff); }
.site-footer__policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.site-footer__policy-links a { padding: 7px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.78); text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.site-footer__policy-links a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: var(--lt-ffffff, #fff); transform: translateY(-1px); }
.site-footer__trust { flex-shrink: 0; line-height: 0; padding: 8px; border-radius: 16px; background: var(--lc-ffffff, #fff); }
.site-footer__trust img { height: 64px; width: auto; }
.site-footer__copy { font-size: 12.5px; color: rgba(255,255,255,.45); letter-spacing: .01em; }
@media (max-width: 1000px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .footer-cta { margin-bottom: -40px; }
  .footer-cta__card { flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-md); border-radius: 24px; }
  .footer-cta__text p { margin-inline: auto; }
  .footer-cta__btns { flex-direction: column; }
  .site-footer__main { padding-top: 40px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); padding-block: var(--space-lg); }
  .site-footer__brand { text-align: center; }
  .site-footer__legal { gap: 16px; }
  .site-footer__warn { padding: 12px 16px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .footer-btn::after { animation: none; } }

/* Assessment quiz */
#maghzeto-quiz { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--bg); border-radius: var(--r-artifact); box-shadow: var(--shadow-artifact); }
@media (max-width: 600px) { #maghzeto-quiz { padding: var(--space-md); } }
.quiz-progress { height: 2px; background: var(--border); margin-bottom: var(--space-lg); border-radius: 2px; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: 0%; background: var(--ink); transition: width var(--dur-slow) var(--ease); }
.quiz-branches { display: flex; gap: var(--space-md); margin-top: var(--space-md); flex-wrap: wrap; }
.quiz-branch { flex: 1; min-width: 160px; text-align: center; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 15px; color: var(--ink); }
.quiz-branch:hover { border-color: var(--ink); background: var(--surface); }
.quiz-options { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-md); }
.quiz-option {
  width: 100%; justify-content: flex-start; text-align: right; border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border); padding: 16px 14px; color: var(--ink); font-weight: 400;
  font-size: 15px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quiz-option:hover, .quiz-option:focus-visible { background: var(--surface-alt); color: var(--ink); }
.quiz-option:last-child { border-bottom: none; }
.quiz-step[hidden] { display: none; }
.quiz-result-title { color: var(--ink); }

.quiz-lead { margin: var(--space-lg) 0; }
.quiz-lead[hidden] { display: none; }
.quiz-lead__intro { font-weight: 500; margin-bottom: var(--space-md); color: var(--ink); }
.quiz-lead .contact-grid { gap: var(--space-md); grid-auto-rows: 1fr; align-items: stretch; }
.quiz-lead .card { padding: var(--space-md); display: flex; flex-direction: column; }
.quiz-lead .card h3 { margin-bottom: 6px; }
.quiz-lead .card p { flex: 1; }
.quiz-tel-fallback[hidden] { display: none; }

/* Tests hub */
.test-list { display: flex; flex-direction: column; gap: var(--space-md); }
.test-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-artifact);
  padding: var(--space-lg); color: var(--ink); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.test-card:hover { box-shadow: var(--shadow-artifact); transform: translateY(-2px); }
.test-price-badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  color: var(--color-accent-700); background: var(--color-accent-50);
  padding: 4px 13px; border-radius: var(--r-pill); margin-bottom: 6px;
}
.test-card__meta { display: block; font-size: 13px; color: var(--faint); margin-bottom: 6px; }
.test-card__body p { margin-bottom: 0; }
.test-card__cta { flex-shrink: 0; font-weight: 500; white-space: nowrap; }
.test-card__visual {
  flex-shrink: 0; width: 96px; aspect-ratio: 1/1; border-radius: var(--r-md);
  overflow: hidden; background: var(--surface);
}
.test-card__visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .test-card { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .test-card__visual { width: 100%; aspect-ratio: 16/9; order: -1; }
}

/* Test landing sections (what it measures / who it's for / result preview) */
.test-landing { margin-bottom: var(--space-xl); }
.test-landing .zigzag { margin-bottom: var(--space-xl); }
.test-landing__steps { margin: var(--space-md) 0; padding-inline-start: 20px; list-style: decimal; color: var(--muted); }
.test-landing__steps li { margin-bottom: 8px; }
.test-landing__banner {
  max-width: 520px; border-radius: var(--r-artifact); overflow: hidden;
  box-shadow: var(--shadow-artifact); margin: var(--space-lg) auto; background: var(--surface);
}
/* the banner art is square; cropping it to 21:9 cut it to an unreadable strip */
.test-landing__banner img { width: 100%; height: auto; }

/* Single collapsible disclosure — e.g. "بیشتر درباره‌ی این تست" below the
   quiz card, so the actual start button never requires scrolling past a
   wall of marketing copy first. Content ships expanded in the HTML
   (SEO/no-JS-safe); main.js collapses it after load — same progressive-
   enhancement pattern as .faq-item, just a standalone box instead of a
   bordered list-item since this is a single toggle, not a list. */
.disclosure { border: 1px solid var(--border); border-radius: var(--r-md); margin-top: var(--space-xl); }
.disclosure__q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg); cursor: pointer;
  font-family: var(--font); font-size: clamp(15px, 1.3vw, 16px); font-weight: 600; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.disclosure__q:hover, .disclosure__q[aria-expanded="true"] { color: var(--color-accent-600); }
.disclosure__icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; position: relative;
  border: 1px solid var(--border); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.disclosure__icon::before, .disclosure__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink);
  transform: translate(-50%, -50%);
}
.disclosure__icon::before { width: 9px; height: 1px; }
.disclosure__icon::after { width: 1px; height: 9px; transition: opacity var(--dur) var(--ease); }
.disclosure__q[aria-expanded="true"] .disclosure__icon { background: var(--surface); transform: rotate(180deg); }
.disclosure__q[aria-expanded="true"] .disclosure__icon::after { opacity: 0; }
.disclosure__body { padding: 0 var(--space-lg) var(--space-lg); }
.disclosure__body .test-landing { margin-bottom: 0; }

/* Conners test */
.test-quiz { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--bg); border-radius: var(--r-artifact); box-shadow: var(--shadow-artifact); }
@media (max-width: 600px) { .test-quiz { padding: var(--space-md); } }
/* The result report reads better wider than the 760px quiz-question column
   it lives inside — break out of that narrower parent (viewport-relative
   width, centered via the margin/transform trick) rather than widening the
   whole page, which would make the questions themselves too wide to read
   comfortably. Guarded to desktop widths only; mobile is already narrower
   than 760px so there's nothing to break out of. */
@media (min-width: 900px) {
  /* Percentage margins are relative to the PARENT's width, not the
     viewport — so a translateX-based centering trick misreads that and
     overflows off-screen. This calc() form avoids that, but the box is
     "over-constrained" (width + both margins effectively specified), and
     per the CSS2 box-model spec the browser resolves that by ignoring
     margin-left and recalculating it for LTR content — but ignoring
     margin-right instead for RTL content (this site). So on this RTL page
     it's margin-right that actually gets used as specified. */
  .test-quiz.is-result { width: min(70vw, 1100px); margin-right: calc(50% - min(70vw, 1100px) / 2); margin-left: 0; }
}
/* The sitewide `p { max-width: 62ch }` rule exists for normal narrow body
   copy — inside the now-widened result box it left every paragraph capped
   at ~half the available width, wasting the extra room this just gained. */
#bm-result p { max-width: none; }
.test-step[hidden] { display: none; }

/* Loading step (redesigned 2026-10-01, owner: the orbiting dots felt generic and the three text dots sat off the text baseline).
   Markup is unchanged and shared by every test page: the four `.test-loading__dot` spans become four rising bars, a tiny
   T-profile assembling itself in the brand's sage tints; the text gets its ellipsis from a pseudo-element, so it sits on the
   text baseline (the old `.test-loading__text-dots` spans are hidden); a skeleton of three report lines sits underneath, so the
   wait already has the shape of what is coming. Only transform and opacity animate; reduced motion shows the still version. */
.test-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: var(--space-xl) 0; }
.test-loading__orbit { display: flex; align-items: flex-end; justify-content: center; gap: 9px; width: auto; height: 76px; }
.test-loading__dot {
  position: static; width: 12px; height: 100%; margin: 0; border-radius: 6px;
  transform-origin: 50% 100%; transform: scaleY(.3);
  animation: test-loading-bar 1.3s cubic-bezier(.4, 0, .2, 1) infinite;
}
.test-loading__dot:nth-child(1) { background: var(--lc-2a6047, #2A6047); animation-delay: 0s; }
.test-loading__dot:nth-child(2) { background: var(--lc-3f7a5e, #3F7A5E); animation-delay: .14s; }
.test-loading__dot:nth-child(3) { background: var(--lc-6b9e86, #6B9E86); animation-delay: .28s; }
.test-loading__dot:nth-child(4) { background: var(--lc-9cc1ae, #9CC1AE); animation-delay: .42s; }
.test-loading__text { display: block; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; text-align: center; }
.test-loading__text::after { content: ""; display: inline-block; width: 1.5em; text-align: start; animation: test-loading-ellipsis 1.3s steps(1) infinite; }
.test-loading__text-dots { display: none; }
.test-loading::after {
  content: ""; display: block; width: min(320px, 78%); height: 62px; margin-top: 8px; border-radius: 6px; opacity: .8;
  background:
    linear-gradient(rgba(120,145,130,.32), rgba(120,145,130,.32)) 100% 0 / 100% 10px no-repeat,
    linear-gradient(rgba(120,145,130,.32), rgba(120,145,130,.32)) 100% 26px / 72% 10px no-repeat,
    linear-gradient(rgba(120,145,130,.32), rgba(120,145,130,.32)) 100% 52px / 88% 10px no-repeat;
  animation: test-loading-skeleton 1.3s ease-in-out infinite;
}

@keyframes test-loading-bar { 0%, 100% { transform: scaleY(.3); opacity: .55; } 45% { transform: scaleY(1); opacity: 1; } }
@keyframes test-loading-ellipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
@keyframes test-loading-skeleton { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .test-loading__dot, .test-loading__text::after, .test-loading::after { animation: none; }
  .test-loading__dot:nth-child(1) { transform: scaleY(.45); }
  .test-loading__dot:nth-child(2) { transform: scaleY(.75); }
  .test-loading__dot:nth-child(3) { transform: scaleY(1); }
  .test-loading__dot:nth-child(4) { transform: scaleY(.6); }
  .test-loading__text::after { content: "..."; }
}

.test-intro-list { margin: var(--space-md) 0; padding-inline-start: 20px; list-style: disc; color: var(--muted); }
.test-intro-list li { margin-bottom: 8px; }

.test-progress { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.test-progress__track { flex: 1; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.test-progress__track span { display: block; height: 100%; width: 0%; background: var(--ink); transition: width var(--dur-slow) var(--ease); }
.test-progress__count { font-size: 13px; color: var(--faint); white-space: nowrap; }

.test-question { font-size: clamp(17px, 1.6vw, 19px); }
.test-options { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-md); }
.test-option {
  width: 100%; justify-content: flex-start; text-align: right; border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border); padding: 16px 14px; color: var(--ink); font-weight: 400;
  font-size: 15px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.test-option:focus-visible { background: var(--surface-alt); }
@media (hover: hover) { .test-option:hover { background: var(--surface-alt); } }
.test-option.is-selected { background: var(--ink); color: var(--on-ink); }
.test-option:last-child { border-bottom: none; }
.test-prev { margin-top: var(--space-md); }
.test-prev:disabled { opacity: 0.35; pointer-events: none; }

/* NEO pre-result review, self-check, resume, mid-test read (NEO overhaul phase 3) */
.test-start[hidden], .test-resume[hidden], .test-milestone[hidden] { display: none; }
.test-own-comparison { margin: var(--space-md) 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-alt); font-size: 14px; line-height: 1.9; }
.test-own-comparison small { color: var(--muted); }
.test-resume { margin-bottom: var(--space-md); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-alt); }
.test-resume__text { margin-top: 0; }
.test-milestone { margin: 0 0 var(--space-md); padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-alt); color: var(--ink); font-size: 14px; line-height: 1.8; }
.test-review__item { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--space-md); margin: var(--space-md) 0; }
.test-review__relation { margin-top: 0; color: var(--muted); font-size: 14px; }
.test-review__statement { font-weight: 500; margin: var(--space-sm) 0 4px; }
.test-review__item .test-options { margin-top: 0; }
.test-review__item .test-option { padding: 10px 12px; font-size: 14px; }
.test-selfcheck__q { margin: var(--space-md) 0; }
.test-selfcheck__q p { margin: 0 0 8px; font-weight: 500; }
.test-selfcheck__choices { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.test-selfcheck__choices .btn.is-selected { background: var(--ink); color: var(--on-ink); }

/* Result */
.risk-badge { display: inline-flex; padding: 6px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; margin-bottom: var(--space-sm); }
/* Type-reveal card (2026-09-15) -- was a flat single-color box
   (.test-code-display, now unused/removed) + a bolted-on gray code chip
   below it; merged into one card, moved to the lavender family (this is
   identity content per TEST-RESULT-DESIGN-SYSTEM.md, not generic peach).
   2026-09-15b -- تم رنگیِ کارت حالا با گروهِ کِرزیِ تیپ (NT/NF/SJ/SP) عوض
   می‌شه، دقیقاً همون ۴ رنگی که خودِ آدمکِ فاز ۹ باهاش رنگ شده
   (test-typemap.js's typeRevealGroup()، مشتق از حرفِ ۲ام+۳ام یا ۲ام+۴ام
   کد). به‌جای تکرارِ هر رنگ توی هر سلکتور، یه توکنِ محلی (--tr-*) رو مادر
   تعریف می‌کنه؛ هر کلاسِ گروه فقط همون توکن‌ها رو عوض می‌کنه، بقیه‌ی
   سلکتورها دست‌نخورده می‌مونن. */
.type-reveal {
  --tr-bg-1: var(--lc-f1edfb, #F1EDFB); --tr-bg-2: var(--lc-e1d9f5, #E1D9F5); --tr-bg-3: var(--lc-d6cbf0, #D6CBF0);
  --tr-ink: var(--lc-3d3266, #3D3266); --tr-ink-strong: var(--lc-362a5c, #362A5C); --tr-ink-soft: var(--lc-4a3d73, #4A3D73);
  --tr-border: rgba(61, 50, 102, .12); --tr-shadow: rgba(61, 50, 102, .38);
  --tr-line: rgba(61, 50, 102, .25);
  position: relative; overflow: hidden; text-align: center;
  margin: var(--space-md) 0; padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, var(--tr-bg-1) 0%, var(--tr-bg-2) 55%, var(--tr-bg-3) 100%);
  border: 1px solid var(--tr-border);
  box-shadow: 0 24px 48px -28px var(--tr-shadow);
}
.type-reveal--nf { --tr-bg-1: var(--lc-ebf7ef, #EBF7EF); --tr-bg-2: var(--lc-d2ecda, #D2ECDA); --tr-bg-3: var(--lc-bee2c9, #BEE2C9); --tr-ink: var(--lc-2c5b3c, #2C5B3C); --tr-ink-strong: var(--lc-1f4630, #1F4630); --tr-ink-soft: var(--lc-3a6b49, #3A6B49); --tr-border: rgba(31, 70, 48, .14); --tr-shadow: rgba(31, 70, 48, .32); --tr-line: rgba(31, 70, 48, .25); }
.type-reveal--sj { --tr-bg-1: var(--lc-eaf5f7, #EAF5F7); --tr-bg-2: var(--lc-d0eaee, #D0EAEE); --tr-bg-3: var(--lc-b9dfe6, #B9DFE6); --tr-ink: var(--lc-1b535f, #1B535F); --tr-ink-strong: var(--lc-123c46, #123C46); --tr-ink-soft: var(--lc-2a6875, #2A6875); --tr-border: rgba(18, 60, 70, .14); --tr-shadow: rgba(18, 60, 70, .32); --tr-line: rgba(18, 60, 70, .25); }
.type-reveal--sp { --tr-bg-1: var(--lc-fbf3e3, #FBF3E3); --tr-bg-2: var(--lc-f5e3c0, #F5E3C0); --tr-bg-3: var(--lc-efd49c, #EFD49C); --tr-ink: var(--lc-6e4b14, #6E4B14); --tr-ink-strong: var(--lc-5c3e10, #5C3E10); --tr-ink-soft: var(--lc-82591c, #82591C); --tr-border: rgba(92, 62, 16, .16); --tr-shadow: rgba(92, 62, 16, .28); --tr-line: rgba(92, 62, 16, .25); }
.type-reveal::before {
  content: ""; position: absolute; top: -22%; left: 50%; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, transparent 68%);
  transform: translateX(-50%); pointer-events: none;
}
/* ۲۰۲۶-۰۹-۱۵ (فاز ۹) -- کارت دو ستونه: آدمک یه‌طرف، متن یه‌طرف، طبقِ
   عرضِ واقعیِ کانتینر (۷۶۰px، نه کارتِ باریکِ موبایلی). زیرِ ۵۶۰px
   `.type-reveal__inner` هنوز عمودی/وسط‌چین می‌مونه (پیش‌فرضِ بدونِ مدیاکوئری)،
   چون دو ستون توی اون عرض جا نمی‌شه.
   ۲۰۲۶-۰۹-۱۵ج -- اولین نسخه پس‌زمینه‌ی عکس‌ها رو توی یه قابِ سفید می‌ذاشت
   (چون خودِ فایل‌ها پس‌زمینه‌ی تخت داشتن)؛ کاربر گفت اون قابِ سفید خوشش
   نمیاد. حالا خودِ پس‌زمینه از عکس‌ها حذف شده (آلفای واقعی، نه CSS)، پس
   قاب/پدینگ/باکس‌شدو حذف شدن و به‌جاش یه drop-shadow روی خودِ سیلوئتِ
   آدمک می‌شینه -- انگار روی کارت شناوره، نه یه عکسِ توی کادر. */
.type-reveal__inner {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: var(--space-sm);
}
.type-reveal__portrait-img {
  display: block; flex-shrink: 0; height: 176px; width: auto;
  filter: drop-shadow(0 14px 18px var(--tr-shadow));
}
.type-reveal__body { min-width: 0; }
@media (min-width: 560px) {
  .type-reveal__inner { flex-direction: row; text-align: start; gap: var(--space-lg); }
  .type-reveal__portrait-img { height: 232px; }
  .type-reveal__body { flex: 1; }
}
.type-reveal__eyebrow {
  position: relative; margin: 0 0 var(--space-sm);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--tr-ink); opacity: .6;
}
.type-reveal__code {
  position: relative; margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 9vw, 64px); letter-spacing: .1em; line-height: 1.05; color: var(--tr-ink-strong);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 24px var(--tr-shadow);
}
.type-reveal__rule {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: var(--space-sm) auto var(--space-md); max-width: 180px;
}
.type-reveal__rule::before, .type-reveal__rule::after { content: ""; flex: 1; height: 1px; background: var(--tr-line); }
.type-reveal__rule span { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--tr-ink); opacity: .5; }
.type-reveal__name { position: relative; margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--tr-ink); }
.type-reveal__blurb { position: relative; margin: 0 auto; max-width: 46ch; font-size: 15px; color: var(--tr-ink-soft); opacity: .85; }
/* ۲۰۲۶-۰۹-۱۵د -- تو چیدمانِ دوستونه، نسخه‌ی موبایلِ کوتاه (خط-نقطه-خط
   وسط‌چین، ۱۸۰px) توی ستونِ متنِ عریض یه خلاءِ بصریِ بزرگ سمتِ چپ می‌ذاشت
   چون خودش خیلی کوتاه‌تر از عرضِ واقعیِ ستونه. **این بلاک باید بعدِ قاعده‌ی
   بی‌شرطِ بالا بیاد، نه قبلش** -- یه‌بار عکسش اشتباهاً تویِ مدیاکوئریِ اولِ
   فایل (بالاتر) نوشته شد و قاعده‌ی بی‌شرطِ هم‌specificityِ پایین‌تر خودش،
   چون توی سورس بعد از اونه، بی‌سروصدا رویِ max-width/margin/justify-content
   دوباره برد -- کارتِ زنده هم‌زمان نصفه‌قدیمی/نصفه‌جدید دیده می‌شد. از این
   عرض به بعد خط تمامِ عرضِ ستون رو پر می‌کنه (نقطه‌ی وسط با یه خط‌تیکِ کوتاه
   سمتِ شروع جایگزین شد)، و بلرب هم به‌جای وسط‌چینِ باریک، تمامِ عرض رو با یه
   نوارِ رنگیِ کنارش پر می‌کنه -- دقیقاً همون منطقی که خطِ بالاش داره. */
@media (min-width: 560px) {
  .type-reveal__rule { margin-inline: 0; max-width: none; justify-content: flex-start; }
  .type-reveal__rule::before { flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--tr-ink); opacity: .55; }
  .type-reveal__rule span { display: none; }
  .type-reveal__blurb {
    margin-inline: 0; max-width: 58ch;
    padding-inline-start: 14px; border-inline-start: 2px solid var(--tr-line);
  }
}
/* ۲۰۲۶-۰۹-۱۵د -- قبلاً فقط یه خطِ چین‌دار نازک با متنِ خام بود، جدا و
   بی‌ربط از باقیِ کارت به‌نظر می‌رسید (آیتمِ سومِ «نامنظم»). حالا مثلِ
   بریدنِ ته‌بلیط: پرفراسیونِ چین‌دار همون‌جا می‌مونه، ولی زیرش یه نوارِ
   کم‌رنگ‌ترِ خودِ رنگِ کارت می‌شینه و کد توی یه چیپِ جدا قرار می‌گیره --
   یعنی «ته‌بلیطِ نتیجه»، نه یه پاورقیِ فراموش‌شده. */
.type-reveal__footer {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  flex-wrap: wrap; margin-top: var(--space-md); padding: 12px var(--space-md);
  border-top: 1px dashed var(--tr-line); background: rgba(255, 255, 255, .35); font-size: 13px;
}
.type-reveal__footer-code {
  color: var(--tr-ink); opacity: .8; letter-spacing: .05em; font-family: var(--font-display);
  background: rgba(255, 255, 255, .55); padding: 5px 14px; border-radius: var(--r-pill);
}
.type-reveal__footer-copy {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--tr-border); background: rgba(255, 255, 255, .65); margin: 0;
  padding: 6px 16px; border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--tr-ink); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.type-reveal__footer-copy::before {
  content: ""; width: 13px; height: 13px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.type-reveal__footer-copy:hover, .type-reveal__footer-copy:focus-visible { background: var(--lc-ffffff, #fff); }
.type-reveal--uncertain { background: linear-gradient(165deg, var(--lc-f4f4f5, #F4F4F5) 0%, var(--lc-e9e9ec, #E9E9EC) 100%); border-color: rgba(23, 25, 28, .08); box-shadow: none; }
.type-reveal--uncertain::before { display: none; }
.type-reveal--uncertain .type-reveal__eyebrow { color: var(--ink); }
.type-reveal--uncertain .type-reveal__code { font-size: clamp(28px, 6vw, 36px); color: var(--ink); opacity: .75; text-shadow: none; }
.type-reveal--uncertain .type-reveal__footer { border-top-color: rgba(23, 25, 28, .12); }
.type-reveal--uncertain .type-reveal__footer-code, .type-reveal--uncertain .type-reveal__footer-copy { color: var(--ink); }

/* ۲۰۲۶-۰۹-۲۲ — نمودارهای ۴ بُعد (که قبلاً کارتِ جدا زیرِ این کارت بودن) حالا
   توی سمتِ چپِ همین کارت جا می‌گیرن (dead space کنارِ متنِ کوتاهِ هویت) -- یه
   کارتِ پرمحتوای واحد به‌جای دو تا. طراحیِ کامل/گزینه‌های ردشده:
   docs/mti-merge-preview/index.html. */
.type-reveal__grid { position: relative; display: grid; gap: var(--space-md); }
@media (min-width: 620px) {
  .type-reveal__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .type-reveal__grid .type-reveal__inner { grid-column: 2; grid-row: 1; }
  .type-reveal__grid .mti-dims { grid-column: 1; grid-row: 1; }
}
/* باگِ واقعیِ کشف‌شده حینِ تست: portrait-img عرضش auto ـه (از ~۶۲px تا ~۲۱۳px
   بسته به کدوم یکی از ۳۲ کاراکتر، ISTP-Man عریض‌ترینه) و gap ِ inner قبلاً
   40px بود -- قبلاً مشکلی نبود چون این بلوک عرضِ کاملِ کارت (700px+) رو
   داشت. اینجا فقط نصفِ کارت مالِ اونه (نصفِ دیگه ستونِ نمودارهاست)، و
   type-reveal__code از clamp(44px,9vw,64px) استفاده می‌کنه که به عرضِ واقعیِ
   فلکس‌آیتم کاری نداره -- با عریض‌ترین عکس، متنِ کد واقعاً از کارت بیرون
   می‌زد. کَپ‌کردنِ عرضِ پرتره + کم‌کردنِ gap + کلمپِ کوچیک‌ترِ مخصوصِ همین
   ستون حلش کرد؛ با هر ۳۲ کاراکتر تست شد. */
.type-reveal__grid .type-reveal__inner { gap: 14px; }
.type-reveal__grid .type-reveal__portrait-img { width: auto; max-width: 128px; height: auto; max-height: 232px; }
.type-reveal__grid .type-reveal__code { font-size: clamp(30px, 7vw, 44px); }

/* ستونِ نمودارها -- رنگِ خودِ خانواده‌ی --tr-* کارت رو می‌گیره (نه لاوندرِ
   عمومیِ card--lavender که قبلاً به‌عنوانِ یه sys-card مستقل داشت)، تا یه
   سطحِ واحد به‌نظر برسه. فاصله‌ها فشرده شدن تا ارتفاعِ کلِ این بلوک با ستونِ
   عکس+هویتِ کنارش نزدیک بمونه (چک‌شده با getBoundingClientRect، نه حدسی). */
.mti-dims { position: relative; text-align: start; }
.mti-dims__title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--tr-ink); opacity: .85; }
.mti-dims .dim-row { margin-bottom: 5px; }
.mti-dims .dim-row:last-child { margin-bottom: 0; }
.mti-dims .dim-row__top { display: none; }
.mti-dims .dim-row__poles { margin-bottom: 3px; font-size: 12.5px; line-height: 1.3; color: var(--tr-ink-strong); }
.mti-dims .dim-row__track { height: 7px; }
.mti-dims .dim-row__marker, .mti-dims .dim-row__fill { color: var(--tr-ink-strong); }
.mti-dims .dim-row__marker { width: 14px; height: 14px; border-color: var(--card); }
.mti-dims .dim-row__caption { font-size: 11px; line-height: 1.3; margin-top: 3px; color: var(--tr-ink); opacity: .6; }
@media (max-width: 619px) {
  .mti-dims { padding-top: var(--space-sm); border-top: 1px dashed var(--tr-line); }
}

/* پاراگرافِ توضیحِ «این نمودارها یعنی چه؟» -- پشتِ همون کامپوننتِ res-basefold
   (base/smart fold از همینجا استفاده می‌کنن)، فقط رنگش با --tr-* کارت عوض
   شده تا بخشی از خودِ کارت به‌نظر برسه، نه یه چیزِ چسبیده‌شده‌ی جدا.
   انیمیشنِ باز/بسته‌شدنِ پیش‌فرضِ res-basefold (گرید-تمپلیت-روزِ ۰fr/۱fr)
   با این پاراگراف تکه‌تکه/جهشی به‌نظر می‌رسید (رشدِ ردیف باعثِ جابه‌جاییِ
   discrete‌ی متن می‌شد)؛ transition:none هم خودش یه‌جور جهش بود (پاپ‌آپِ
   آنی). راه‌حلِ واقعی: محتوا فِید+اسلاید می‌کنه، و خودِ height-snap با
   transition-delay به بعد از تمومِ فِید موکول می‌شه -- چون دیگه چیزی دیده
   نمی‌شه، جهش‌ش هم دیده نمی‌شه. max-height هیچ‌وقت 'none' نمی‌شه (برخلافِ
   نسخه‌ی اولِ همین طراحی) چون transition نمی‌تونه از 'none' انیمیت کنه؛
   یه سقفِ ثابتِ سخاوتمندانه (خیلی بیشتر از ارتفاعِ واقعیِ متن) جایگزینش شد. */
.type-reveal__legend { margin-top: var(--space-md); }
.type-reveal__legend .res-basefold {
  margin: 0; text-align: start;
  border-color: var(--tr-line);
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
  box-shadow: 0 10px 24px -18px var(--tr-shadow);
}
.type-reveal__legend .res-basefold.is-open .res-basefold__toggle { border-bottom-color: var(--tr-line); }
.type-reveal__legend .res-basefold__badge {
  background: linear-gradient(135deg, var(--tr-bg-3), var(--tr-bg-2));
  color: var(--tr-ink-strong);
  box-shadow: inset 0 0 0 1px var(--tr-border);
}
.type-reveal__legend .res-basefold__text strong { color: var(--tr-ink-strong); }
.type-reveal__legend .res-basefold__text span { color: var(--tr-ink); opacity: .75; }
.type-reveal__legend .res-basefold__chevron { background: var(--tr-bg-2); color: var(--tr-ink-strong); }
.type-reveal__legend .res-basefold__panel {
  display: block; grid-template-rows: none; overflow: hidden;
  max-height: 0; opacity: 0; transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, max-height 0s linear .25s;
}
.type-reveal__legend .res-basefold.is-open .res-basefold__panel {
  max-height: 500px; opacity: 1; transform: translateY(0);
  transition: opacity .3s ease .05s, transform .3s ease .05s, max-height 0s linear 0s;
}
.type-reveal__legend .sys-card__nf { border: 0; padding: 18px 20px 20px; margin: 0; color: var(--tr-ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .type-reveal__legend .res-basefold__panel { transition: none; }
  .type-reveal__legend .res-basefold__chevron .res-i { transition: none; }
}

.gauge-wrap { position: relative; max-width: 320px; margin: var(--space-md) auto var(--space-lg); }
.gauge { width: 100%; display: block; }
.gauge-score { position: absolute; inset-inline: 0; bottom: 4px; text-align: center; }
.gauge-score__num { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--ink); }
.gauge-score__max { display: block; font-size: 13px; color: var(--faint); }

.bm-radar-wrap { display: flex; justify-content: center; margin: var(--space-md) 0; }
.bm-radar-wrap svg { width: 100%; max-width: 400px; height: auto; }
.dim-bars { display: flex; flex-direction: column; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); }
.dim-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: 6px; }
.dim-bar__label { font-weight: 500; color: var(--ink); }
.dim-bar__value { font-size: 13px; color: var(--faint); white-space: nowrap; }
.dim-bar__track { height: 10px; background: var(--surface); border-radius: var(--r-pill); overflow: hidden; }
.dim-bar__fill { display: block; height: 100%; border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }

/* MBTI phase 7 (2026-09-14) — result-report infographics. See
   docs/TEST-RESULT-DESIGN-SYSTEM.md + docs/MTI-OVERHAUL-PLAN.md phase 7. */

/* infographic #1 (free tier): four-dimension spectrum. Deliberately a
   single neutral fill (not percentColor red/green) — these dimensions
   aren't good/bad, only "which side is stronger". */
.dim-spectrum .dim-row { margin-bottom: var(--space-md); }
.dim-spectrum .dim-row:last-child { margin-bottom: 0; }
.dim-row__top { margin-bottom: 6px; }
.dim-row__title { font-size: 12px; font-weight: 600; opacity: .7; }
.dim-row__poles { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.dim-row__poles .win { font-weight: 700; }
.dim-row__track { position: relative; height: 10px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .1); }
.dim-row__fill { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: currentColor; opacity: .55; }
.dim-row__marker { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: currentColor; border: 3px solid var(--surface); transform: translate(50%, -50%); z-index: 1; }
/* 2026-09-15 (owner, still didn't understand "clarity" after a text-only
   explanation) -- the cut point (where the two sides of a dimension are
   actually decided) had no visual presence on the bar at all, so "distance
   from the border" had nothing concrete to point at. This tick mark is
   that border, drawn from the same `cut` value/is_high_pole transform as
   the score dot -- clarity is now literally "how far apart are these two
   marks", not a sentence you have to take on faith. */
.dim-row__cutmark { position: absolute; top: 50%; width: 2px; height: 16px; background: rgba(0, 0, 0, .35); transform: translate(50%, -50%); border-radius: 1px; }
.card--lavender .dim-row__marker, .card--lavender .dim-row__fill { color: var(--lt-3d3266, #3D3266); }
.dim-row__caption { font-size: 12px; opacity: .7; margin-top: 6px; }

/* infographic #2 (AI tier): 24-facet profile, grouped by dimension. */
.facet-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-sm); }
@media (max-width: 560px) { .facet-groups { grid-template-columns: 1fr; } }
.facet-panel { background: rgba(0, 0, 0, .04); border-radius: var(--r-sm); padding: 14px; }
.facet-panel h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.facet-line { margin-bottom: 9px; }
.facet-line:last-child { margin-bottom: 0; }
.facet-line__label { font-size: 12px; display: flex; justify-content: space-between; margin-bottom: 4px; opacity: .8; }
.facet-line--opposed .facet-line__label { opacity: 1; font-weight: 700; }
.facet-line__track { position: relative; height: 5px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .12); }
.facet-line__dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--lc-1b4965, #1B4965); transform: translate(50%, -50%); }
.facet-line--opposed .facet-line__dot { background: var(--lc-7a2e2e, #7A2E2E); width: 12px; height: 12px; }
.facet-legend { display: flex; gap: 16px; margin-top: var(--space-sm); font-size: 12px; opacity: .8; }
.facet-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-dot--sky { background: var(--lc-1b4965, #1B4965); }
.legend-dot--rose { background: var(--lc-7a2e2e, #7A2E2E); }

/* infographic #3 (AI tier): cognitive-function ladder. Equal-width rows,
   opacity only — never width/length, so nothing reads as "measured". */
.ladder { position: relative; padding-right: 26px; margin-top: var(--space-sm); }
.ladder::before { content: ""; position: absolute; right: 9px; top: 10px; bottom: 10px; width: 2px; background: rgba(0, 0, 0, .15); }
.ladder-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ladder-row__dot { position: absolute; right: -26px; width: 20px; height: 20px; border-radius: 50%; background: var(--lc-1b4965, #1B4965); color: var(--lt-dceef7, #DCEEF7); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ladder-row:nth-child(1) { opacity: 1; }
.ladder-row:nth-child(2) { opacity: .8; }
.ladder-row:nth-child(3) { opacity: .6; }
.ladder-row:nth-child(4) { opacity: .42; }
.ladder-row__body strong { display: block; font-size: 14px; }
.ladder-row__body span { font-size: 13px; opacity: .85; }

/* infographic #4 (AI tier): grip normal-state / under-pressure comparison. */
.grip-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: var(--space-sm) 0 var(--space-md); }
@media (max-width: 480px) { .grip-compare { grid-template-columns: 1fr; } .grip-compare__arrow { transform: rotate(90deg); margin: 0 auto; } }
.grip-state { background: rgba(0, 0, 0, .05); border-radius: var(--r-sm); padding: 14px; text-align: center; }
.grip-state span { display: block; font-size: 11px; font-weight: 700; opacity: .75; margin-bottom: 4px; }
.grip-state strong { font-size: 14px; }
.grip-compare__arrow { font-size: 20px; opacity: .55; }

/* infographic #5 (AI tier): styles-at-a-glance strip. */
.styles-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: var(--space-sm) 0; }
@media (max-width: 600px) { .styles-strip { grid-template-columns: repeat(2, 1fr); } }
.style-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 8px; text-align: center; }
.style-tile__icon { font-size: 18px; margin-bottom: 4px; }
.style-tile__title { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.style-tile__hint { font-size: 11px; color: var(--faint); line-height: 1.5; }

/* famous-examples avatar grid (cosmetic upgrade over a plain <ul>). */
.famous-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-sm); }
@media (max-width: 480px) { .famous-grid { grid-template-columns: 1fr; } }
.famous-item { display: flex; align-items: center; gap: 10px; }
.famous-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--lc-6b5416, #6B5416); color: var(--lt-fbefc7, #FBEFC7); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.famous-item strong { display: block; font-size: 14px; }
.famous-item p { margin: 0; font-size: 13px; }

/* 2026-09-14, phase 7 round 3 (owner: "یک کادر باشه، اسلایدر، ورق بزنه") --
   general_profile went from 5 stacked cards to one wide "book": a single
   card, five long-form chapters, paged with prev/next + a chapter-tab strip
   (each tab is that domain's own icon -- doubles as a mini table of
   contents, not decoration). Chapters use native horizontal scroll-snap so
   a touch reader can genuinely swipe/"ورق بزنه", while buttons and tabs
   give the same result via scrollIntoView (RTL-safe -- it never depends on
   the sign convention of scrollLeft, which differs across browsers in
   RTL). Icon badges are solid circles (same language as .famous-avatar)
   rather than bare emoji glyphs next to text -- emoji glyphs carry
   unpredictable internal padding per font/platform that kept misaligning
   against the heading baseline no matter how the bare glyph was boxed;
   a colored circle absorbs that wobble instead of exposing it. */
.profile-book { padding: 0; overflow: hidden; }
.profile-book__top { padding: var(--space-lg) var(--space-lg) 0; }
.profile-book__eyebrow { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.profile-book__title { margin: 0 0 var(--space-sm); }
.profile-book__intro { font-size: 13px; color: var(--faint); margin-bottom: var(--space-md); }

.profile-book__bar {
  display: flex; align-items: center; gap: 12px; margin: 0 var(--space-lg) var(--space-md);
  padding-bottom: var(--space-md); border-bottom: 1px solid var(--border);
}
.profile-book__chapter { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.profile-book__badge {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: var(--surface); transition: background var(--dur, .2s) ease;
}
.profile-book__chapter-title { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-book__count { font-size: 12px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.profile-book__nav { display: flex; gap: 6px; flex-shrink: 0; }
.profile-book__nav-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg, var(--lc-ffffff, #fff)); color: var(--ink); display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.profile-book__nav-btn:hover { background: var(--surface); }
.profile-book__nav-btn:disabled { opacity: .3; cursor: default; }

.profile-book__viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.profile-book__viewport::-webkit-scrollbar { display: none; }
.profile-slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  padding: 0 var(--space-lg) var(--space-lg);
}
.profile-slide p { font-size: 15.5px; line-height: 1.95; max-width: none; }
.profile-slide p:last-child { margin-bottom: 0; }

/* 2026-09-14, phase 7 round 4 (owner screenshot) -- the tab strip read as
   washed-out: low opacity on inactive tabs, a near-invisible active-state
   (var(--surface) on var(--surface-alt), both pale grays), and a tiny
   faint label. Inactive tabs now carry real ink at real size; the active
   tab gets that chapter's own color (background+ink, same pair as the
   badge) instead of a barely-there neutral, set inline by JS in
   initProfileBook's setActive() so it matches whichever domain is open. */
.profile-book__tabs { display: flex; gap: 6px; padding: var(--space-md) var(--space-lg); background: var(--surface-alt); border-top: 1px solid var(--border); }
.profile-book__tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: var(--r-sm); border: none; background: transparent;
  color: var(--ink); cursor: pointer; opacity: .8;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.profile-book__tab:hover { opacity: 1; background: rgba(0, 0, 0, .04); }
.profile-book__tab.is-active { opacity: 1; }
.profile-book__tab-icon { font-size: 19px; line-height: 1; }
.profile-book__tab-label { font-size: 11.5px; color: inherit; font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.profile-book__tab.is-active .profile-book__tab-label { font-weight: 700; }

@media (max-width: 480px) {
  .profile-book__top { padding: var(--space-md) var(--space-md) 0; }
  .profile-book__bar { margin: 0 var(--space-md) var(--space-sm); }
  .profile-slide { padding: 0 var(--space-md) var(--space-md); }
  .profile-book__tabs { padding: var(--space-sm) var(--space-md); }
  .profile-book__tab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-book__viewport { scroll-behavior: auto; }
}

/* 2026-09-14 (owner screenshot) -- a narrative section with more than one
   item used to stack plain <p> tags with no visual separation between
   distinct facts. Bulleted for real list content; a single item still
   renders as plain flowing prose (see renderNarrative in test-typemap.js).
   Marker color inherits from the card (currentColor) so it matches
   whichever content-family card it's sitting in. */
/* ⚠ `.prose ul { list-style: disc }` is (0,1,1) specificity -- a bare
   `.narrative-list { list-style: none }` (0,1,0) loses to it, so the
   browser's own disc bullet was showing *behind* the custom ::before dot
   (the "two dots" the owner spotted). `.prose .narrative-list` (0,2,0)
   beats it cleanly. */
/* 2026-09-15 -- also used standalone inside a .sys-card (oop_summary's
   list, not wrapped in .prose) -- same (0,2,0) specificity, still beats
   `.prose ul` for the nested case, harmless outside it. */
.prose .narrative-list, .sys-card .narrative-list { margin: 0; padding: 0; list-style: none; }
.narrative-list li { position: relative; padding-inline-start: 20px; margin-bottom: var(--space-sm); list-style: none; }
.narrative-list li:last-child { margin-bottom: 0; }
.narrative-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: currentColor; opacity: .5;
}

/* oop_summary chips */
.oop-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-sm); }
.oop-chip { background: rgba(0, 0, 0, .08); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; font-weight: 700; }

.highlight-box { background: var(--surface-alt); border-radius: var(--r-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.highlight-box[hidden] { display: none; }
.highlight-list { list-style: disc; padding-inline-start: 20px; }
.highlight-list li { color: var(--ink); margin-bottom: 6px; }

.test-cta { margin: var(--space-lg) 0; }
.test-cta__intro { font-weight: 500; margin-bottom: var(--space-md); color: var(--ink); }
.test-cta .contact-grid { gap: var(--space-md); grid-auto-rows: 1fr; align-items: stretch; }
.test-cta .card { padding: var(--space-md); display: flex; flex-direction: column; }
.test-cta .card h3 { margin-bottom: 6px; }
.test-cta .card p { flex: 1; }

.test-disclaimer { font-size: 13px; color: var(--faint); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.location-card h4 { margin-bottom: 4px; }
.location-card__map { aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; margin-block: var(--space-md); background: var(--surface-alt); }
.location-card__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.form-field { margin-bottom: var(--space-lg); }
.form-field label { display: block; font-weight: 500; margin-bottom: 8px; color: var(--ink); font-size: 13px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 15px; background: var(--bg); color: var(--ink);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--placeholder); }
.form-field textarea { min-height: 100px; resize: vertical; }
.form-field select { cursor: pointer; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--color-accent-600); box-shadow: 0 0 0 3px var(--color-accent-50); }
.form-note { font-size: 13px; color: var(--muted); margin-top: var(--space-sm); }

/* OTP boxes -- one digit per input, see footer.php's auth modal + assets/js/auth.js */
.otp-boxes { display: flex; gap: 10px; }
.otp-boxes .otp-box {
  flex: 1; min-height: 56px; padding: 0; text-align: center;
  font-size: 22px; font-weight: 600; letter-spacing: 0;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.otp-boxes .otp-box:disabled { color: var(--ink); background: var(--bg); opacity: 1; }
.otp-boxes .otp-box--success {
  border-color: var(--color-accent-600) !important;
  background: var(--color-accent-50) !important;
  box-shadow: 0 0 0 3px rgba(59, 96, 76, .15);
}
.otp-boxes .otp-box:nth-child(2).otp-box--success { transition-delay: .08s; }
.otp-boxes .otp-box:nth-child(3).otp-box--success { transition-delay: .16s; }
.otp-boxes .otp-box:nth-child(4).otp-box--success { transition-delay: .24s; }
.otp-boxes .otp-box--error {
  border-color: var(--lc-b03a3a, #B03A3A) !important;
  background: rgba(176, 58, 58, .08) !important;
  animation: maghzeto-otp-shake .4s ease;
}
@keyframes maghzeto-otp-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.profile-header { display: flex; align-items: center; gap: var(--space-md); }

.history-list { border-top: 1px solid var(--border); }
.history-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-md); border-bottom: 1px solid var(--border);
}
.history-item__label { display: block; font-weight: 500; color: var(--ink); }
.history-item__type { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; }
.history-item__meta { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
.history-item__date { font-size: 13px; color: var(--faint); white-space: nowrap; }
.history-item__meta a { font-weight: 500; white-space: nowrap; }
.history-item__meta a:hover { color: var(--color-accent-600); }
.history-item__delete { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.history-item__delete:hover { color: var(--lt-b03a3a, #B03A3A); }
.history-item__delete:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) { .history-item { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* «تست‌های من» — colour-coded result cards (2026-09-11). Its own grid rather
   than .history-list/.history-item above (still used by سفارشات): with 7
   different tests, a plain hairline list gave no visual index to scan by,
   and the whole point of coming back here is to tell "which test is this"
   at a glance before reading the label. New pastel tones (gold/rose/
   lavender/sky) are additive, kept in the same soft/desaturated family as
   the sitewide peach/mint/sage -- no saturated/off-brand colour. */
.test-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-md);
}
.test-history-card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md); border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--border);
  text-decoration: none; color: inherit; min-height: 0;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.test-history-card:hover, a.test-history-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-artifact);
  border-color: transparent;
}
a.test-history-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.test-history-card--locked { opacity: .6; cursor: default; }

/* 2026-09-13 -- "حذف" per-row, see page-account-tests.php's own delete
   script. Absolutely positioned in the corner (not part of the flex flow)
   so it never shifts the card's own layout; transparent-until-hovered
   keeps the grid visually calm when nothing is being deleted. */
.test-history-card__delete {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint);
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: .55;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.test-history-card__delete:hover, .test-history-card__delete:focus-visible {
  /* same red used by .account-nav-item--danger elsewhere in this theme */
  opacity: 1; background: rgba(176, 58, 58, .08); color: var(--lt-b03a3a, #B03A3A);
  outline: none;
}

.test-history-card__icon {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.test-history-card__body { display: flex; flex-direction: column; gap: 2px; }
.test-history-card__label { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.4; }
.test-history-card__type { font-size: 13px; color: var(--muted); line-height: 1.5; }
.test-history-card__foot {
  margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.test-history-card__date { font-size: 12px; color: var(--faint); white-space: nowrap; }
.test-history-card__cta { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
a.test-history-card:hover .test-history-card__cta { color: var(--color-accent-600); }
.test-history-card__note { font-size: 12px; color: var(--faint); }

/* Unified per-result code (TEST-RESULT-CODES-PLAN.md Phase 1) -- a compact
   chip + copy button, deliberately smaller/quieter than .test-code-display
   (that one is a single just-finished-test hero moment; this is one line
   inside a dense history grid). */
.test-history-card__code {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 4px var(--space-sm); border-radius: var(--r-sm);
  background: var(--bg-alt, var(--border)); font-size: 12px;
}
.test-history-card__code-value { letter-spacing: 1px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test-history-card__code-copy {
  flex-shrink: 0; border: none; background: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.test-history-card__code-copy:hover, .test-history-card__code-copy:focus-visible { color: var(--color-accent-600); }

.test-history-card--peach .test-history-card__icon { background: var(--accent); color: var(--accent-ink); }
.test-history-card--mint .test-history-card__icon { background: var(--mint); color: var(--mint-ink); }
.test-history-card--sage .test-history-card__icon { background: var(--color-accent-50); color: var(--color-accent-700); }
.test-history-card--gold .test-history-card__icon { background: var(--lc-fbefc7, #FBEFC7); color: var(--lt-6b5416, #6B5416); }
.test-history-card--rose .test-history-card__icon { background: var(--lc-fbe0e0, #FBE0E0); color: var(--lt-7a2e2e, #7A2E2E); }
.test-history-card--lavender .test-history-card__icon { background: var(--lc-e6e1f5, #E6E1F5); color: var(--lt-3d3266, #3D3266); }
.test-history-card--sky .test-history-card__icon { background: var(--lc-dceef7, #DCEEF7); color: var(--lt-1b4965, #1B4965); }

@media (max-width: 480px) {
  .test-history-grid { grid-template-columns: 1fr; }
}

.form-success { background: var(--surface); border: 1px solid var(--border); color: var(--ink); padding: var(--space-md); border-radius: var(--r-sm); margin-bottom: var(--space-md); }
.form-error { background: var(--accent); border: none; color: var(--accent-ink); padding: var(--space-md); border-radius: var(--r-sm); margin-bottom: var(--space-md); }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { aspect-ratio: 9/16; border-radius: var(--r-md); background: var(--surface); position: relative; overflow: hidden; }
.testimonial-empty { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-xl); text-align: center; color: var(--muted); }

.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-lg); }
.prose > *:first-child { margin-top: 0; }
.prose a:not(.btn):not(.mpt-cta) { color: var(--color-accent-600); font-weight: 700; text-decoration: none; }
.prose a:not(.btn):not(.mpt-cta):hover { color: var(--color-accent-700); }
.prose ul { padding-inline-start: 20px; list-style: disc; color: var(--muted); }
.prose ol { padding-inline-start: 20px; list-style: decimal; color: var(--muted); }
.prose li { margin-bottom: var(--space-sm); }
.prose li > ul, .prose li > ol { margin-top: var(--space-sm); }
.prose strong { color: var(--ink); }
.prose img { height: auto; border-radius: var(--r-md); margin-block: var(--space-md); }
.prose .post-figure { margin: 0; }
.prose .post-figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.prose blockquote {
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-md);
  padding: var(--space-lg); margin: var(--space-lg) 0;
}
.prose blockquote p, .prose blockquote strong { color: var(--accent-ink); }
.prose blockquote p { max-width: none; margin-bottom: 0; }
.prose blockquote p + p { margin-top: var(--space-sm); }
.prose .faq-list { margin-top: var(--space-md); }
.prose .table-scroll { overflow-x: auto; margin: var(--space-lg) 0; border-radius: var(--r-sm); border: 1px solid var(--border); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--color-accent-50); color: var(--color-accent-700); font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: none; }

/* Single post: wider, quieter editorial column (ref: Noorjoo character-page
   typography — small restrained headings, generous line length, an accent
   bar standing in for heading-size hierarchy instead of huge type). */
.post-container { max-width: 880px; }
.single-post h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; }
.single-post .prose p,
.single-post .prose li { max-width: none; }
.single-post .prose { font-size: 17px; line-height: 1.9; }
.single-post .prose h2 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; }
.single-post .prose h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600;
}
.single-post .prose h3::before {
  content: ''; flex: 0 0 auto; width: 3px; height: 15px; border-radius: 2px;
  background: var(--color-accent-600);
}

/* About page: same wider editorial column + accent-bar heading treatment
   as the single-post prose, so the bio doesn't read as a cramped, plain
   block of text next to the wide hero/zigzag sections above and below it. */
.about-prose { max-width: 900px; }
.about-prose p { max-width: none; font-size: 16px; line-height: 1.9; }
.about-prose h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(19px, 1.8vw, 22px);
}
.about-prose h2::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 22px; border-radius: 2px;
  background: var(--color-accent-600);
}
@media (max-width: 640px) { .about-prose h2 { font-size: 18px; } }

/* Single-post header */
.post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--faint); margin-bottom: var(--space-sm); }
.post-meta__dot { color: var(--border); }
.post-category { color: var(--color-accent-600); font-weight: 600; }
.post-category:hover { color: var(--color-accent-700); }
.post-hero {
  aspect-ratio: 16/9; border-radius: var(--r-artifact); overflow: hidden;
  box-shadow: var(--shadow-artifact); margin-block: var(--space-lg); background: var(--surface);
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

.author-box {
  display: flex; gap: var(--space-md); align-items: center;
  margin-top: var(--space-xl); padding: var(--space-lg);
  background: var(--color-accent-50); border-radius: var(--r-md);
}
.author-box__photo {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--bg);
}
.author-box__label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--color-accent-700); opacity: .75; margin-bottom: 4px;
}
.author-box__name { margin-bottom: 6px; font-size: 20px; color: var(--color-accent-700); }
.author-box p { color: var(--color-accent-700); opacity: .85; margin-bottom: var(--space-sm); }
.author-box .btn--link { color: var(--color-accent-700); font-weight: 700; }
.author-box .btn--link:hover { color: var(--color-accent-600); text-decoration: underline; }
@media (max-width: 480px) {
  .author-box { flex-direction: column; align-items: flex-start; text-align: start; }
}

.qa-list { border-top: 1px solid var(--border); }
.qa-item { border-bottom: 1px solid var(--border); padding-block: var(--space-lg); }
.qa-item h2 { margin-bottom: var(--space-sm); }
.qa-item p { margin-bottom: 0; }

/* Magazine listing (مجله) */
.magazine-tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  color: var(--color-accent-700); background: var(--bg); padding: 6px 14px;
  border-radius: var(--r-pill); box-shadow: 0 2px 10px -2px rgba(0,0,0,.18);
}
.magazine-card__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); }

.magazine-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-xl); align-items: center;
  margin-bottom: var(--space-xl); color: inherit;
}
.magazine-hero__media {
  position: relative; aspect-ratio: 16/11; border-radius: var(--r-artifact); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-artifact);
}
.magazine-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.magazine-hero:hover .magazine-hero__media img { transform: scale(1.045); }
.magazine-hero__media .magazine-tag { position: absolute; top: var(--space-md); right: var(--space-md); }
.magazine-hero__body .label { color: var(--color-accent-600); }
.magazine-hero__body h2 {
  font-size: clamp(22px, 2.6vw, 32px); transition: color var(--dur) var(--ease);
}
.magazine-hero:hover .magazine-hero__body h2 { color: var(--color-accent-700); }
.magazine-hero__body p { max-width: none; }
.magazine-hero__cta { margin-top: var(--space-sm); pointer-events: none; }
@media (max-width: 860px) {
  .magazine-hero { grid-template-columns: 1fr; gap: var(--space-md); }
}

.magazine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 980px) { .magazine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .magazine-grid { grid-template-columns: 1fr; } }

.magazine-card {
  display: flex; flex-direction: column; color: inherit; border-radius: var(--r-artifact);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.magazine-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-artifact); }
.magazine-card__media {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-artifact); overflow: hidden;
  background: var(--surface); margin-bottom: var(--space-md);
}
.magazine-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.magazine-card:hover .magazine-card__media img { transform: scale(1.06); }
.magazine-card__media .magazine-tag { position: absolute; top: var(--space-sm); right: var(--space-sm); }
/* 2026-09-22: the title (and, on the archive, the excerpt/meta/link below it) had zero inset, so the
   text ran edge-to-edge flush with the image above it — standardized to a small, consistent inset,
   same on the homepage teaser and the /مجله/ archive grid since both use this one component. */
.magazine-card__body { display: flex; flex-direction: column; flex: 1; padding: 0 8px 8px; }
.magazine-card__body h3 { transition: color var(--dur) var(--ease); }
.magazine-card:hover .magazine-card__body h3 { color: var(--color-accent-700); }
.magazine-card__body p { font-size: 15px; margin-bottom: var(--space-sm); flex: 1; }
.magazine-card__link {
  font-size: 14px; font-weight: 600; color: var(--color-accent-600); margin-top: var(--space-sm);
  display: inline-flex; align-items: center; gap: 4px; transition: gap var(--dur) var(--ease);
}
.magazine-card:hover .magazine-card__link { gap: 8px; }

.magazine-pagination { margin-top: var(--space-xl); display: flex; justify-content: center; }

/* Magazine category cards */
.mag-cats { margin-bottom: var(--space-xl); }
.mag-cats__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.mag-cats__head h2 { font-size: clamp(18px, 2vw, 22px); margin: 0; }
.mag-cats__head span { font-size: 13px; color: var(--faint); }
.mag-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.mag-cat {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); color: inherit;
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mag-cat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-accent-500);
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur-slow) var(--ease);
}
.mag-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-artifact); border-color: var(--color-accent-300); }
.mag-cat:hover::before { transform: scaleX(1); }
.mag-cat__icon {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--color-accent-700); background: var(--surface); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mag-cat:hover .mag-cat__icon { background: var(--color-accent-600); color: var(--on-ink, var(--card)); }
.mag-cat__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mag-cat__text strong { font-size: 16px; font-weight: 700; line-height: 1.4; }
.mag-cat__text small { font-size: 13px; color: var(--faint); }
.mag-cat__arrow { color: var(--color-accent-600); opacity: 0; transform: translateX(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mag-cat:hover .mag-cat__arrow { opacity: 1; transform: none; }
@media (max-width: 980px) { .mag-cats__grid { grid-template-columns: repeat(2, 1fr); } }

/* Magazine category chips (archive pages) */
.mag-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: var(--space-xl); }
.mag-chip { padding: 8px 16px; font-size: 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--border); color: inherit; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mag-chip:hover { border-color: var(--color-accent-300); color: var(--color-accent-700); }
.mag-chip.is-active { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--on-ink, var(--card)); }
.magazine-empty { text-align: center; color: var(--muted); }
@media (max-width: 520px) {
  .mag-cats__grid { grid-template-columns: 1fr; gap: 10px; }
  .mag-cat { padding: 14px; }
  .mag-cat__arrow { opacity: 1; transform: none; }
}
.magazine-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  margin-inline: 3px; padding-inline: 10px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500;
  color: var(--ink); border: 1px solid var(--border); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.magazine-pagination .page-numbers.current { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.magazine-pagination a.page-numbers:hover { background: var(--surface); }
.magazine-pagination .page-numbers.dots { border: none; }

/* FAQ accordion (plain button + JS toggle, same pattern as .nav-toggle;
   answers ship fully visible in the HTML — main.js collapses all but the
   first one after load, so content is never hidden if JS doesn't run). */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-lg); cursor: pointer;
  font-family: var(--font); font-size: clamp(16px, 1.4vw, 17px); font-weight: 600; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.faq-item__q:hover, .faq-item__q[aria-expanded="true"] { color: var(--color-accent-600); }
.faq-item__icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; position: relative;
  border: 1px solid var(--border); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink);
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 10px; height: 1px; }
.faq-item__icon::after { width: 1px; height: 10px; transition: opacity var(--dur) var(--ease); }
.faq-item__q[aria-expanded="true"] .faq-item__icon { background: var(--surface); transform: rotate(180deg); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { opacity: 0; }
.faq-item__body { padding-bottom: var(--space-lg); margin-top: calc(var(--space-sm) * -1); }
.faq-item__body p { margin-bottom: 0; max-width: 68ch; }
.note { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-md); padding: var(--space-lg); margin-top: var(--space-lg); }
.note p { color: var(--accent-ink); margin-bottom: 0; }

/* Live chat widget */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-widget { position: fixed; left: var(--space-md); bottom: var(--space-md); z-index: 250; }
.chat-widget [hidden] { display: none; }
.chat-widget__bubble {
  position: relative; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--fill-600); color: var(--lt-ffffff, #fff);
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  box-shadow: var(--shadow-artifact); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chat-widget__bubble:hover { transform: translateY(-2px); background: var(--fill-700); }

/* Unread-count badge: shown once as a gentle nudge after a delay, then again
   whenever a new operator message arrives while the panel is closed. Opening
   the panel clears it. */
.chat-widget__badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--color-notify); color: var(--lt-ffffff, #fff);
  font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.chat-widget__panel {
  position: absolute; bottom: 72px; left: 0; width: min(360px, calc(100vw - 2 * var(--space-md)));
  max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-artifact); box-shadow: var(--shadow-artifact); border: 1px solid var(--border);
  overflow: hidden;
}
.chat-widget__header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-md);
  background: var(--surface-alt); border-bottom: 1px solid var(--border); font-weight: 500; color: var(--ink);
}
.chat-widget__close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.chat-widget__close:hover { color: var(--ink); }

/* Body holds the scrolling transcript + the (pre-chat only) name/phone row —
   the composer below is a sibling, pinned outside this scroll area, so
   sending the first message never needs a scroll or a separate button. */
.chat-widget__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.chat-widget__messages { display: flex; flex-direction: column; gap: var(--space-sm); }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: var(--r-sm); font-size: 15px; line-height: 1.6; word-break: break-word; }
.chat-msg--visitor { align-self: flex-end; background: var(--fill-600); color: var(--lt-ffffff, #fff); border-bottom-left-radius: 4px; }
.chat-msg--operator { align-self: flex-start; background: var(--surface-alt); color: var(--ink); border: 1px solid var(--border); border-bottom-right-radius: 4px; }
.chat-msg__time { display: block; margin-top: 3px; font-size: 11px; line-height: 1.2; opacity: .6; font-weight: 400; }
.chat-msg--visitor .chat-msg__time { text-align: end; }
.chat-msg a { text-decoration: none; font-weight: 600; word-break: break-all; }
.chat-msg a:hover { opacity: 0.8; }
.chat-msg--operator a { color: var(--color-accent-600); }
.chat-msg--visitor a { color: var(--lt-ffffff, #fff); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg--system { align-self: center; background: none; color: var(--muted); font-size: 13px; padding: 4px; }
.chat-widget__contact-row { display: flex; gap: var(--space-sm); }
.chat-widget__contact-row input {
  flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14px; background: var(--bg); color: var(--ink);
}
.chat-widget__contact-row input::placeholder { color: var(--placeholder); }
.chat-widget__contact-row input:focus { outline: none; border-color: var(--color-accent-600); box-shadow: 0 0 0 3px var(--color-accent-50); }

.chat-widget__composer { position: relative; padding: var(--space-sm) 14px 14px; background: var(--bg); }
.chat-widget__field {
  display: flex; align-items: flex-end; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-alt); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chat-widget__field:focus-within { border-color: var(--color-accent-600); background: var(--bg); box-shadow: 0 0 0 3px var(--color-accent-50); }
.chat-widget__input {
  flex: 1; min-width: 0; min-height: 36px; height: 36px; max-height: 96px; padding: 8px 6px; border: 0; outline: 0; border-radius: 0;
  font-family: var(--font); font-size: 15px; line-height: 20px; background: transparent; color: var(--ink); resize: none;
}
.chat-widget__input::placeholder { color: var(--placeholder); }
.chat-widget__icon-btn, .chat-widget__send {
  flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chat-widget__icon-btn { background: transparent; color: var(--muted); }
.chat-widget__icon-btn:hover, .chat-widget__icon-btn[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.chat-widget__send { background: var(--fill-600); color: var(--lt-ffffff, #fff); }
.chat-widget__send:hover { background: var(--fill-700); transform: scale(1.06); }
.chat-widget__send:disabled { opacity: .4; cursor: default; transform: none; }
.chat-widget__title { display: inline-flex; align-items: center; gap: 8px; }
.chat-widget__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc-3fb96a, #3fb96a); box-shadow: 0 0 0 3px rgba(63,185,106,.2); }
.chat-msg { animation: chat-msg-in .2s var(--ease); }
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-msg { animation: none; } }

.chat-emoji {
  position: absolute; bottom: calc(100% - 4px); inset-inline: 14px; z-index: 5;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-artifact); overflow: hidden;
}
.chat-emoji[hidden] { display: none; }
.chat-emoji__tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); }
.chat-emoji__tab { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; height: 34px; margin: 0; border: 0; background: transparent; border-radius: 10px; padding: 0; font-size: 17px; line-height: 1; cursor: pointer; opacity: .55; }
.chat-emoji__tab:hover { opacity: .9; }
.chat-emoji__tab.is-on { background: var(--surface); opacity: 1; }
.chat-emoji__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; height: 170px; overflow-y: auto; align-content: start; scrollbar-width: thin; }
.chat-emoji__grid button { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 36px; margin: 0; border: 0; background: transparent; border-radius: 8px; font-size: 20px; line-height: 1; padding: 0; cursor: pointer; }
.chat-emoji__grid button:hover { background: var(--surface); }
@media (max-width: 480px) {
  .chat-widget { left: var(--space-sm); bottom: var(--space-sm); }
  .chat-widget__panel { bottom: 68px; }
}
.note strong { color: var(--accent-ink); }

/* ------------------------------------------------------------------ */
/* Account: header avatar/login trigger, dropdown, auth modal          */
/* ------------------------------------------------------------------ */

.account-nav-link {
  font-family: var(--font); font-weight: 500; font-size: 15px; color: var(--ink);
  background: none; border: none; cursor: pointer; padding: 8px 4px;
}
.account-nav-link:hover { color: var(--color-accent-600); }

.account-nav { position: relative; display: flex; align-items: center; }
.account-nav-trigger { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  overflow: hidden; object-fit: cover; color: var(--lt-ffffff, #fff); font-weight: 600; user-select: none;
  line-height: 1; text-align: center;
}
.user-avatar--initial { padding-bottom: 0.42em; }
.account-nav-trigger:hover .user-avatar { box-shadow: 0 0 0 3px var(--color-accent-50); }

.account-menu-panel {
  /* Desktop: the avatar sits at the header's left end (RTL: nav flex:1 pushes the actions there), so the panel's
     left edge lines up with the avatar's and it opens toward the middle. (Anchoring the right edge, as before
     2026-09-20, ran a 264px panel past the screen edge on ~1100px windows.) Phones override this below. */
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 264px; max-width: min(300px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.06); padding: 8px;
  transform-origin: top center;
}
/* `hidden` is display:none, so the pop plays each time the panel is shown */
.account-menu-panel:not([hidden]) { animation: account-menu-pop var(--dur) var(--ease) both; }
@keyframes account-menu-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.account-nav-trigger[aria-expanded="true"] .user-avatar { box-shadow: 0 0 0 3px var(--color-accent-100); }
/* On phones the avatar sits mid-header, so anchoring a 264px+ panel to it pushed the panel off the screen edge.
   There it hangs off the header's bottom edge instead (.site-header is the containing block once .account-nav
   stops being positioned), as a card that fits any width. */
@media (max-width: 900px) {
  .account-nav { position: static; }
  .account-menu-panel { inset-inline-end: auto; inset-inline-start: 16px; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); max-width: none; min-width: 0; }
}

/* Redesigned 2026-09-20 (markup: header.php). Welcome card with the brand mark as a faint watermark (same motif as the
   mobile menu's CTA), icon-tile rows, a labelled dark-mode switch, and «خروج» set apart at the bottom. */
.account-menu-head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 14px;
  border-radius: 18px; background: linear-gradient(160deg, var(--mint), var(--color-accent-50));
}
.account-menu-head__mark { position: absolute; z-index: -1; left: -10px; bottom: -18px; width: 96px; height: 96px; opacity: .10; pointer-events: none; }
.account-menu-avatar { flex-shrink: 0; box-shadow: 0 0 0 3px var(--card); }
.account-menu-head__text { display: flex; flex-direction: column; min-width: 0; }
.account-menu-head__hello { font-size: 12px; line-height: 1.6; color: var(--muted); }
.account-menu-name { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-divider { border-top: 1px solid var(--border); margin: 6px 8px; }
.account-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border-radius: 16px; color: var(--ink);
  font-size: 14.5px; font-weight: 500; text-align: start; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.account-menu-item:hover { background: var(--surface); }
.account-menu-item__icon {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px;
  background: var(--surface); color: var(--color-accent-600);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.account-menu-item:hover .account-menu-item__icon { background: var(--card); transform: scale(1.06); }
.account-menu-item__label { flex: 1; }
.account-menu-item__go { flex-shrink: 0; color: var(--faint); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.account-menu-item:hover .account-menu-item__go { transform: translateX(-3px); color: var(--ink); }
.account-menu-item--danger { color: var(--danger); }
.account-menu-item--danger .account-menu-item__icon { background: rgba(176, 58, 58, .10); color: var(--danger); }
.account-menu-item--danger:hover { background: rgba(176, 58, 58, .08); }
.account-menu-item--danger:hover .account-menu-item__icon { background: rgba(176, 58, 58, .16); }

/* Display-mode switch: the whole row is the button (logic: main.js [data-theme-toggle]). on = dark. */
.theme-toggle { position: relative; display: block; flex-shrink: 0; width: 50px; height: 28px; margin-inline-end: 2px; border-radius: var(--r-pill); background: var(--border); transition: background var(--dur) var(--ease); }
.theme-toggle__knob { position: absolute; top: 3px; inset-inline-start: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lc-ffffff, #fff); color: var(--lt-b7791f, #b7791f); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start var(--dur) var(--ease), color var(--dur) var(--ease); }
.theme-toggle__icon { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
.account-menu-theme-row[aria-checked="true"] .theme-toggle { background: var(--fill-600); }
.account-menu-theme-row[aria-checked="true"] .theme-toggle__knob { inset-inline-start: 25px; color: var(--lt-2a4335, #2a4335); }
.account-menu-theme-row[aria-checked="true"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(40deg) scale(.6); }
.account-menu-theme-row[aria-checked="true"] .theme-toggle__icon--moon { opacity: 1; transform: none; }
.account-menu-theme-row:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }

/* Site notification bell (2026-09-25). Markup: header.php -- a direct child
   of .site-header__inner, between the account menu and the "شروع تست" CTA
   (.site-header-cta), a true flex sibling of both on desktop. On mobile the
   CTA hides and the bell hugs the hamburger's right side instead (see the
   mobile rule below). Logic: assets/notifications.js. */
.bell-nav { position: relative; display: flex; align-items: center; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: none; border-radius: 50%; background: none; color: var(--lt-cba135, #CBA135);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bell-btn:hover, .bell-btn[aria-expanded="true"] { background: var(--surface); color: var(--lt-dbb44a, #DBB44A); }
.bell-btn__badge {
  position: absolute; top: 1px; inset-inline-end: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill);
  background: var(--danger); color: var(--lt-ffffff, #fff); font-size: 10px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--card);
}
.bell-btn__badge[hidden] { display: none; }
/* Rings twice like a real bell being struck, then stops -- exactly "shake on arrival, stop once checked":
   JS only (re)adds .has-unread when the unread count grows, and removes it the moment the panel opens. */
@keyframes mz-bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.bell-btn.has-unread .bell-btn__icon { transform-origin: 50% 6%; animation: mz-bell-ring 1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .bell-btn.has-unread .bell-btn__icon { animation: none; } }

.bell-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60;
  width: min(360px, calc(100vw - 32px)); max-height: min(480px, 70vh); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.06); padding: 8px;
  transform-origin: top center;
}
.bell-panel:not([hidden]) { animation: account-menu-pop var(--dur) var(--ease) both; }
@media (max-width: 900px) {
  /* Groups the bell with the hamburger at the header's left edge instead of
     floating alone in the gap between the account menu and the hamburger.
     .bell-nav sits between the account menu and the (hidden-on-mobile)
     .site-header-cta link in the real DOM -- true siblings of .nav-toggle,
     not nested inside a wrapper (a display:contents wrapper was tried here
     first and silently failed: + / ~ match the DOM tree, not the flattened
     render tree, so a sibling selector reaching past that wrapper never
     actually matched). .bell-nav claims the free space (pushing the
     [bell][hamburger] pair together to the header's end, while account-nav
     stays put near the logo); .nav-toggle's own auto margin below is only a
     fallback for a logged-out visitor, who never gets a .bell-nav at all --
     the sibling override here cancels it whenever a bell IS present, so the
     two never both claim space and leave a gap between them. */
  .bell-nav { position: static; margin-inline-start: auto; }
  /* .site-header__inner's own row gap (--space-lg, 40px) would otherwise sit
     between every pair of children including this one -- pulled back down to
     a tight ~8px so the bell reads as hugging the hamburger, not floating
     near it. */
  .bell-nav ~ .nav-toggle { margin-inline-start: calc(-1 * var(--space-lg) + 8px); }
  .bell-panel { inset-inline-end: auto; inset-inline-start: 16px; width: min(380px, calc(100vw - 32px)); }
}
/* Empty inbox: a small self-dismissing hint instead of the full panel (logic: notifications.js showEmptyToast). */
.bell-toast {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; overflow: hidden;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; white-space: nowrap;
  background: var(--card); color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: 13px; box-shadow: 0 10px 28px -10px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.06);
  opacity: 0; transform: translateY(-8px) scale(.94); transform-origin: top center; pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease), filter .4s var(--ease);
}
.bell-toast.is-in { opacity: 1; transform: none; }
.bell-toast.is-out { opacity: 0; transform: translateY(-6px) scale(.97); filter: blur(2px); transition-duration: .45s; }
.bell-toast__icon { flex-shrink: 0; color: var(--color-accent-500); }
.bell-toast__bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 100%; background: var(--color-accent-500); opacity: .35; transform-origin: right center; }
.bell-toast.is-in .bell-toast__bar { animation: mz-toast-bar 2.6s linear forwards; }
@keyframes mz-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 900px) { .bell-toast { inset-inline-end: auto; inset-inline-start: auto; right: auto; left: 16px; transform-origin: 20% top; } }
@media (prefers-reduced-motion: reduce) { .bell-toast, .bell-toast.is-out { transition: opacity .2s; transform: none; filter: none; } .bell-toast.is-in .bell-toast__bar { animation: none; } }
.bell-panel__head { display: flex; align-items: center; padding: 8px 10px; font-weight: 600; color: var(--ink); }
.bell-panel__empty { padding: 30px 12px; text-align: center; color: var(--muted); font-size: 14px; }
.bell-item { position: relative; display: block; padding: 10px; padding-inline-end: 34px; border-radius: 14px; color: var(--ink); touch-action: pan-y; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.bell-item.is-swiping { transition: none; }
.bell-item.is-leaving { opacity: 0; transform: translateX(110%); }
.bell-item__close { position: absolute; top: 8px; inset-inline-end: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.bell-item__close:hover, .bell-item__close:focus-visible { background: var(--border); color: var(--ink); }
.bell-item:hover { background: var(--surface); }
.bell-item + .bell-item { margin-top: 2px; }
.bell-item__title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.bell-item.is-unread .bell-item__title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-500); flex-shrink: 0; }
.bell-item__body { margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.bell-item__time { margin-top: 4px; font-size: 11.5px; color: var(--faint); }

/* 2026-09-19: the full-screen overlays spell out top/right/bottom/left next to `inset`.
   Mi Browser (older Chromium, before the `inset` shorthand in Chrome 87) ignored `inset: 0`,
   so the fixed modal fell back to its static position at the very end of the page: focus still
   landed in the phone field (keyboard opened) but the modal was drawn far off-screen. */
.auth-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-md); }
.auth-modal[hidden] { display: none; }
.auth-modal__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(23,25,28,.55); }
.auth-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 400px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--card); border-radius: var(--r-md); padding: var(--space-lg); box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
@supports (height: 100dvh) { .auth-modal__panel { max-height: calc(100dvh - 40px); } }
html.auth-modal-open, html.auth-modal-open body { overflow: hidden; }
.auth-modal__close {
  position: absolute; left: var(--space-sm); inset-inline-end: var(--space-sm); top: var(--space-sm); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.auth-modal__close:hover { background: var(--border); }
.auth-modal__panel h2 { margin-bottom: 6px; font-size: 18px; }
.auth-modal__subtitle { font-size: 14px; margin-bottom: var(--space-md); }

/* Generic confirm dialog (2026-09-13, window.maghzetoConfirm in main.js) --
   narrower than the auth/profile panels since it only ever holds a
   question and two buttons, on both mobile and desktop (the shared
   .auth-modal wrapper already centers/pads it responsively either way). */
.auth-modal__panel--confirm { max-width: 340px; text-align: center; }
.auth-modal__panel--confirm h2 { font-size: 16px; font-weight: 500; line-height: 1.7; margin-bottom: 0; }
.auth-modal__confirm-actions { display: flex; gap: 10px; margin-top: var(--space-lg); }
.auth-modal__confirm-actions .btn { flex: 1; }
/* 2026-09-19: the confirm button is the site's green gradient, never black (same as .mpt-cta / result buttons) */
.auth-modal__confirm-actions .btn--accent { border-color: transparent; color: var(--lt-ffffff, #fff); background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c) 0%, var(--lc-3d7a5d, #3d7a5d) 48%, var(--lc-2a6047, #2a6047) 100%); box-shadow: 0 12px 26px -12px rgba(36,74,57,.65), inset 0 1px 0 rgba(255,255,255,.28); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.auth-modal__confirm-actions .btn--accent:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); }
.auth-modal__confirm-actions .btn--accent:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
  font-family: var(--font); font-weight: 500; font-size: 15px;
}
.btn-google:hover { background: var(--surface); border-color: var(--color-accent-500); }

.auth-modal__divider { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; color: var(--muted); font-size: 13px; }
.auth-modal__divider::before, .auth-modal__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-modal__forgot, .auth-modal__back {
  display: block; margin-bottom: var(--space-md); font-size: 13px; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer;
}
.auth-modal__forgot[hidden], .auth-modal__back[hidden] { display: none; }
.auth-modal__forgot:hover, .auth-modal__back:hover { color: var(--ink); text-decoration: underline; }
.btn--block { width: 100%; }
/* Scanned credentials — the actual certificate/licence images behind .cred-list.
   Thumbnails stay uncropped (object-fit: contain on a neutral mat) because a
   document you cannot read the issuer of proves nothing; the lightbox in
   main.js opens the full-size scan. */
.cred-gallery__title {
  margin-top: var(--space-lg); margin-bottom: var(--space-sm);
  font-family: var(--font); font-size: 17px;
}
.cred-gallery__note { font-size: 14px; color: var(--muted); margin-bottom: var(--space-md); }
.cred-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md); margin-bottom: var(--space-lg);
}
.cred-doc { margin: 0; }
.cred-doc__frame {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cred-doc__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cred-doc__frame:hover, .cred-doc__frame:focus-visible {
  border-color: var(--color-accent-300); box-shadow: var(--shadow-artifact); outline: none;
}
.cred-doc figcaption {
  margin-top: var(--space-sm); font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink);
}
.cred-doc figcaption span { display: block; font-weight: 400; font-size: 13px; color: var(--faint); }

/* The membership card is wider and shorter than the certificates. Give it a
   frame matching its own proportions rather than cropping it into the 4/3 one —
   a cropped licence with the field labels sliced off proves nothing. */
.cred-doc--card .cred-doc__frame { aspect-ratio: 1001 / 631; }

.cred-book { margin: var(--space-md) 0 0; max-width: 340px; }
.cred-book__frame {
  display: block; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cred-book__frame img { width: 100%; height: auto; display: block; }
.cred-book__frame:hover, .cred-book__frame:focus-visible {
  border-color: var(--color-accent-300); box-shadow: var(--shadow-artifact); outline: none;
}
.cred-book figcaption { margin-top: var(--space-sm); font-size: 13px; color: var(--muted); }

/* Lightbox (progressive enhancement — without JS every figure is just a link
   straight to the full-size image, which is also what crawlers follow). */
.doc-lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 200; border: none; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: rgba(10, 12, 14, .92);
  display: flex; align-items: center; justify-content: center;
}
.doc-lightbox[hidden] { display: none; }
.doc-lightbox__img {
  max-width: min(96vw, 1400px); max-height: 84vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-sm); background: var(--lc-ffffff, #fff);
}
.doc-lightbox__cap {
  position: absolute; inset-inline: 0; bottom: 24px; text-align: center;
  color: var(--lt-ffffff, #fff); font-size: 14px; padding-inline: var(--space-md);
}
.doc-lightbox__close {
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); color: var(--lt-ffffff, #fff);
  display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1;
}
.doc-lightbox__close:hover { background: rgba(255, 255, 255, .26); }

/* ------------------------------------------------------------------ */
/* Account hub (حساب کاربری) — right sidebar + content, five real pages */
/* sharing one shell (inc/account-shell.php). Sidebar container is a    */
/* neutral mist card, content blocks inside each page use the floating  */
/* artifact-card family — the design system's only two card families,   */
/* see docs/design-v4-editorial-CURRENT.md.                             */
/* ------------------------------------------------------------------ */
.account-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.account-sidebar {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--space-md);
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
}
.account-sidebar__profile {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.account-sidebar__name { font-weight: 600; color: var(--ink); font-size: 14px; }
.account-sidebar__meta { font-size: 12px; color: var(--faint); margin-top: 2px; }

.account-nav-list { display: flex; flex-direction: column; gap: 2px; }
.account-nav-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 10px var(--space-sm);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  border-inline-end: 3px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.account-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
.account-nav-item.is-active {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
  border-inline-end-color: var(--ink);
}
.account-nav-item__icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.account-nav-item--danger { color: var(--lt-b03a3a, #B03A3A); }
.account-nav-item--danger:hover { background: rgba(176, 58, 58, .08); color: var(--lt-b03a3a, #B03A3A); }
.account-nav-divider { border-top: 1px solid var(--border); margin: var(--space-sm) 4px; }

/* Dashboard-style compact type scale, scoped to this area only. This was
   the original source for the site-wide type-scale reduction (2026-09) --
   the rest of the site (outside the مجله/magazine templates) now sits close
   to this same compact scale rather than the old spacious editorial one. */
.account-content { min-width: 0; font-size: 14px; }
.account-content > * + * { margin-top: var(--space-md); }
.account-content h1 { font-size: 22px; line-height: 1.3; margin-bottom: 2px; }
.account-content p { font-size: 14px; max-width: none; }
.account-card {
  background: var(--bg);
  border-radius: var(--r-artifact);
  box-shadow: var(--shadow-artifact);
  padding: var(--space-lg);
}
.account-card > * + * { margin-top: var(--space-sm); }
.account-card h2, .account-content .h3-scale { font-size: 15px; margin-bottom: var(--space-sm); }
.account-empty { text-align: center; padding: var(--space-lg) var(--space-md); color: var(--muted); }
.account-empty p { margin-bottom: var(--space-sm); }

.account-content .form-field label { font-size: 13px; margin-bottom: 6px; }
.account-content .form-field input,
.account-content .form-field select,
.account-content .form-field textarea { min-height: 40px; padding: 9px 14px; font-size: 14px; }
.account-content .btn { font-size: 14px; min-height: 40px; padding: 9px 20px; }
.account-content .form-note, .account-content .form-error, .account-content .form-success { font-size: 13px; }
.account-content .history-item__label { font-size: 14px; }
.account-content .history-item__type,
.account-content .history-item__date { font-size: 12px; }

/* اطلاعات حساب's merged card: profile picture + نام/نام‌خانوادگی/نام‌نمایشی +
   شماره موبایل used to be three separate stacked account-cards, each with a
   single field per row. Merged into one card (dividers between the three
   sub-sections) with fields set two-up via .form-row wherever a real pair
   exists (نام/نام‌خانوادگی, سن/جنسیت, استان/شهر) -- collapses to one column
   on narrow screens same as the shell itself. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
/* روز/ماه/سال تولد (2026-09-29): three short selects, month gets a bit more room for the Persian name. */
.form-row--birthdate { grid-template-columns: 1fr 1.3fr 1fr; }
.account-card__divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.account-avatar-row { display: flex; align-items: center; gap: var(--space-md); }
/* Illustrated-avatar picker (inc/avatars.php + page-account.php) */
.avatar-picker { margin-top: var(--space-md); }
.avatar-picker__grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.avatar-pick {
  padding: 0; border: 2px solid transparent; background: none; border-radius: 50%;
  cursor: pointer; line-height: 0; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.avatar-pick img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.avatar-pick:hover { transform: scale(1.06); }
.avatar-pick:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.avatar-pick--on { border-color: var(--color-accent-600); box-shadow: 0 0 0 3px var(--color-accent-100); }
@media (prefers-reduced-motion: reduce) {
  .avatar-pick { transition: none; }
  .avatar-pick:hover { transform: none; }
}
.form-static-value {
  min-height: 40px; padding: 9px 14px; display: flex; align-items: center;
  background: var(--surface); border-radius: var(--r-sm); font-weight: 600;
}
.form-required { color: var(--lt-b03a3a, #B03A3A); }
.form-optional { color: var(--faint); font-weight: 400; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* min-width: 0 at every level down to the scrollable nav list itself --
     without it, a flex/grid item's default min-width:auto lets its content's
     intrinsic (unwrapped) width push every ancestor wider than the viewport
     instead of scrolling internally, blowing out the whole page horizontally
     on an RTL layout (confirmed live: text was cut off and shifted on a real
     mobile-width check). overflow-x:auto below only actually contains the
     overflow once nothing upstream is allowed to grow to fit it. */
  .account-shell { grid-template-columns: 1fr; min-width: 0; }
  .account-sidebar {
    position: static;
    padding: var(--space-sm);
    min-width: 0;
  }
  .account-sidebar__profile { display: none; }
  /* Tile grid instead of a scrolling strip (2026-09-21): all six sections
     are visible at once, three per row, so nothing hides off-screen. */
  .account-nav-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }
  .account-nav-item {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 82px;
    padding: 12px 6px 10px;
    background: var(--card);
    border-radius: 14px;
    border-inline-end: none;
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 12.5px;
    line-height: 1.45;
    text-wrap: balance;
  }
  .account-nav-item:active { transform: scale(.97); }
  .account-nav-item:hover { background: var(--card); }
  /* each tile's icon sits in its own softly tinted chip; the current page
     is a solid brand-green tile with a white chip so the icon stays legible */
  .account-nav-item__icon {
    width: 40px; height: 40px; padding: 9px; border-radius: 13px;
    box-sizing: border-box; background: var(--chip, rgba(77,124,98,.14));
    transition: transform var(--dur) var(--ease);
  }
  .account-nav-item:nth-child(1) { --chip: rgba(77,124,98,.16); }
  .account-nav-item:nth-child(2) { --chip: rgba(245,166,35,.20); }
  .account-nav-item:nth-child(3) { --chip: rgba(96,120,220,.16); }
  .account-nav-item:nth-child(4) { --chip: rgba(230,110,90,.16); }
  .account-nav-item:nth-child(5) { --chip: rgba(60,160,190,.18); }
  .account-nav-item:nth-child(6) { --chip: rgba(150,100,200,.16); }
  .account-nav-item:nth-child(7) { --chip: rgba(200,120,170,.16); }
  /* «مقایسه با شریک» is the last tile: with 7 tiles it would sit alone in a 3-col row, so it becomes a full-width row */
  .account-nav-item--wide:nth-child(7) { grid-column: 1 / -1; flex-direction: row; min-height: 0; padding: 10px 14px; gap: 10px; justify-content: center; }
  .account-nav-item--wide:nth-child(7) .account-nav-item__icon { width: 34px; height: 34px; padding: 7px; }
  .account-nav-item__icon--svg { color: var(--ink); }
  .account-nav-list .account-nav-item.is-active {
    background: linear-gradient(140deg, var(--lc-5a9977, #5a9977), var(--lc-2a6047, #2a6047));
    box-shadow: 0 12px 22px -12px rgba(42,96,71,.75);
    color: var(--lt-ffffff, #fff);
    font-weight: 600;
  }
  .account-nav-item.is-active .account-nav-item__icon { background: rgba(255,255,255,.94); transform: translateY(-1px); }
  .account-nav-item.is-active .account-nav-item__icon--svg { color: var(--lt-2a6047, #2a6047); }
  .account-nav-badge {
    position: absolute; top: 6px; inset-inline-start: 6px;
    min-width: 18px; height: 18px; font-size: 11px; margin: 0;
  }
  .account-nav-divider { display: none; }
  /* «خروج» becomes a slim full-width row under the grid, not a seventh tile */
  .account-nav-item--danger {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 0;
    padding: 9px 12px;
    background: transparent;
    box-shadow: none;
    gap: 8px;
  }
  .account-nav-item--danger:hover { background: rgba(176, 58, 58, .08); }
  .account-nav-item--danger .account-nav-item__icon { width: 20px; height: 20px; padding: 0; background: none; border-radius: 0; }
  /* the desktop rhythm (80px above/below) leaves a big empty band on phones */
  .account-section { padding-block: 14px 40px; }
  .account-sidebar { border-radius: 20px; }
}

/* Specialty tag pills + directory filter (Phase 4, 2026-09-11) */
.tag-pill {
  display: inline-block; background: var(--surface-alt); color: var(--muted);
  border-radius: 999px; padding: 3px 12px; font-size: 12px; margin-inline-end: 6px; margin-top: 6px;
}
.tag-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-md) 0; }
.tag-filter-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--ink); border-radius: 999px;
  padding: 6px 16px; font-size: 13.5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tag-filter-btn:hover { border-color: var(--ink); }
.tag-filter-btn.is-active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.specialist-card[hidden] { display: none; }
/* Cards carry a different amount of real content per person (bio, tags,
   registry number are each rendered only if that specialist actually has
   them -- see single-specialist.php's own "no placeholder, no empty
   heading" rule), so without this the base .contact-grid's `align-items:
   start` left shorter cards visibly shorter than their row-mates instead of
   lining up. Same fix already used for .quiz-lead/.test-cta's own grids. */
#specialist-grid { grid-auto-rows: 1fr; align-items: stretch; }
#specialist-grid .specialist-card { display: flex; flex-direction: column; }
#specialist-grid .specialist-card > p:last-child { margin-top: auto; padding-top: 8px; }

/* NEO report (neo-overhaul phase 9, assets/neo-report.js) — labelled panels,
   a jump list, engine-drawn SVG charts, print/PDF via window.print(). */
.neo-report { display: flex; flex-direction: column; gap: var(--space-md); }
.neo-report__head h2 { margin: 4px 0 8px; font-size: clamp(22px, 4vw, 30px); }
.neo-report__kicker { margin: 0; font-size: 14px; opacity: .8; }
.neo-report__meta { margin: 0 0 8px; font-size: 14px; }
.neo-report__head .btn { margin-top: 8px; }
.neo-toc { position: sticky; top: calc(var(--header-h) + 4px); z-index: 5; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; }
.neo-toc p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.neo-toc ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.neo-toc a, .neo-chips a { display: inline-block; white-space: nowrap; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 13px; text-decoration: none; }
.neo-toc a:hover, .neo-chips a:hover { background: var(--accent); color: var(--accent-ink); }
.neo-panel { scroll-margin-top: calc(var(--header-h) + 90px); border-top: 1px solid var(--border); padding-top: var(--space-md); }
.neo-panel__title { font-size: clamp(20px, 3.4vw, 26px); margin: 0 0 var(--space-sm); }
.neo-panel p { line-height: 1.9; }
.neo-panel h3 { margin: var(--space-md) 0 var(--space-sm); }
.neo-panel .card { padding: var(--space-md); }
.neo-lead { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; }
.neo-note { font-size: 14px; color: var(--muted); }
.neo-tip { font-size: 14.5px; background: var(--surface-alt); border-radius: 12px; padding: 8px 12px; }
.neo-chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .06); vertical-align: middle; }
.neo-mark { font-size: 12px; letter-spacing: 1px; opacity: .75; }
.neo-list { padding-inline-start: 1.4em; list-style: disc; }
ol.neo-list { list-style: persian; }
.neo-list li { margin-bottom: 6px; line-height: 1.8; }
.neo-list--plain { list-style: none; padding-inline-start: 0; }
.neo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.neo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0; }
.neo-grid--styles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.neo-card h3, .neo-card h4 { margin-top: 0; }
.neo-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
@media (max-width: 760px) { .neo-split { grid-template-columns: 1fr; } }
.neo-figure { margin: var(--space-sm) 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; }
.neo-figure figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; font-size: 14px; }
.neo-figure figcaption span { color: var(--muted); font-size: 13px; }
.neo-figure__svg { max-width: 560px; margin-inline: auto; }
.neo-figure__svg svg, .neo-style__graph svg { display: block; width: 100%; height: auto; }
.neo-figure--radar .neo-figure__svg { max-width: 460px; margin-inline: auto; }
.neo-figure__note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.neo-style__graph { max-width: 300px; margin: 0 auto 8px; }
.neo-style--lead { box-shadow: inset 0 0 0 2px var(--color-accent-100); }
.neo-table-wrap { overflow-x: auto; margin: var(--space-sm) 0; }
.neo-scale { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.neo-scale caption { text-align: start; font-weight: 600; padding-bottom: 6px; }
.neo-scale th, .neo-scale td { text-align: start; vertical-align: top; padding: 8px 10px; }
.neo-scale tbody { border-bottom: 1px solid var(--border); }
.neo-scale__more td { padding-top: 0; font-size: 13px; color: var(--muted); line-height: 1.8; }
.neo-scale thead th { font-size: 12px; color: var(--faint); font-weight: 500; }
.neo-scale tbody th { font-weight: 600; min-width: 8em; }
.neo-scale__range { white-space: nowrap; }
.neo-details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 14px; margin: var(--space-sm) 0; background: var(--card); }
.neo-details > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.neo-details[open] > summary { margin-bottom: 6px; }
.neo-facet { margin: var(--space-sm) 0; }
.neo-evidence { font-size: 14px; color: var(--muted); border-inline-start: 3px solid var(--color-accent-100); padding-inline-start: 10px; }
.neo-quotes { margin: 0 0 8px; padding-inline-start: 1.1em; font-size: 14px; color: var(--muted); }
.neo-timeline { list-style: none; padding: 0; margin: var(--space-sm) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm); counter-reset: week; }
.neo-week { background: var(--surface-alt); border-radius: var(--r-sm); padding: 12px 14px; border-top: 3px solid var(--color-accent-300); }
.neo-week p { margin: 6px 0 0; font-size: 14px; }
.neo-week__n { display: inline-block; font-size: 12px; font-weight: 600; color: var(--color-accent-600); margin-inline-end: 6px; }
.neo-steps { padding-inline-start: 0; list-style: none; }
.neo-steps li { padding: 6px 0; border-bottom: 1px dashed rgba(0, 0, 0, .12); line-height: 1.8; }
.neo-goal.is-picked { box-shadow: inset 0 0 0 2px var(--lc-6b5416, #6B5416); }
.neo-goal .btn { margin-top: 8px; }
.neo-locked { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--space-md); align-items: center; background: var(--surface); border-radius: var(--r-md); padding: var(--space-md); }
.neo-locked strong { color: var(--ink); }
.neo-locked__preview { position: relative; filter: blur(3px); opacity: .7; }
.neo-locked__preview span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; filter: none; }
@media (max-width: 600px) {
  .neo-report__head.card { padding: var(--space-md); }
  .neo-toc { padding: 6px 8px; }
  .neo-toc p { display: none; }
  .neo-figure { padding: 8px; }
  .neo-panel .card { padding: 16px; }
  .neo-scale th, .neo-scale td { padding: 7px 6px; }
  .neo-scale__range { white-space: normal; }
}
@media (max-width: 600px) { .neo-locked { grid-template-columns: 1fr; } .neo-locked__preview { max-width: 180px; margin-inline: auto; } }

/* MPT report (MPT overhaul phase 11.3, assets/mpt-report.js) — the same visual
   language as the NEO panels above, but a v3 report is a flat list of sections
   (intro paragraph, lines, note, figures), so it needs far fewer rules. */
.mpt-report { display: flex; flex-direction: column; gap: var(--space-md); }
.mpt-report__head h2 { margin: 4px 0 8px; font-size: clamp(22px, 4vw, 30px); }
.mpt-report__kicker { margin: 0; font-size: 14px; opacity: .8; }
.mpt-report__meta { margin: 0 0 8px; font-size: 14px; }
.mpt-report__head .btn { margin-top: 8px; }
.mpt-toc { position: sticky; top: calc(var(--header-h) + 4px); z-index: 5; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; }
.mpt-toc p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.mpt-toc ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mpt-toc a { display: inline-block; white-space: nowrap; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 13px; text-decoration: none; }
.mpt-toc a:hover { background: var(--accent); color: var(--accent-ink); }
.mpt-panel { scroll-margin-top: calc(var(--header-h) + 90px); border-top: 1px solid var(--border); padding-top: var(--space-md); }
.mpt-panel__title { font-size: clamp(20px, 3.4vw, 26px); margin: 0 0 var(--space-sm); }
.mpt-panel p { line-height: 1.9; }
.mpt-panel__intro p { color: var(--muted); font-size: 15px; }
.mpt-list { padding-inline-start: 1.4em; list-style: disc; }
.mpt-list li { margin-bottom: 8px; line-height: 1.9; }
/* rich report lines (expansion plan phase 4): «## x» sub-headings inside a chapter */
.mpt-sub { margin: 22px 0 6px; font-size: 16px; font-weight: 800; color: var(--ink); }
.mpt-panel .mpt-sub:first-child { margin-top: 6px; font-size: 18px; }
/* full report layout (expansion plan phase 7): reading-time chip beside a section title, the quick-jump chip, spacing between the long chapters */
.mpt-read { display: inline-block; margin-inline-start: 10px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; vertical-align: middle; }
.mpt-toc__jump { background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 700; }
.mpt-full > .mpt-panel { margin-top: var(--space-lg); }
.mpt-report > * { min-width: 0; }   /* the report is a flex column: without this the chip nav's nowrap list widens the whole page */
.mpt-full .mpt-toc ul { padding-bottom: 4px; }
/* 2026-10-01 live bug (owner screenshot): inside `.prose` the chip nav's list picked up the article list style (grid, bordered rows with dots), grew taller
   than the viewport and, being sticky, covered the whole page while scrolling. Force it back to one scrolling row of chips. */
.mpt-report .prose .mpt-toc ul, .res-scope .mpt-report .prose .mpt-toc ul { display: flex !important; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; max-height: none; }
.mpt-report .prose .mpt-toc li, .res-scope .mpt-report .prose .mpt-toc li { display: block; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0; }
.mpt-report .prose .mpt-toc li::before, .mpt-report .prose .mpt-toc li::after { content: none !important; display: none !important; }
.mpt-report .prose .mpt-toc a { white-space: nowrap; }
.mpt-report .mpt-toc { max-height: 120px; }
/* the full report's chip nav is sticky: an OPEN fold must not clip its content (overflow hidden on the fold body would stop `position: sticky`) */
.res-scope .mpt-report .res-basefold.is-open .res-basefold__body { overflow: visible; }
.mpt-full .mpt-toc { margin-bottom: var(--space-sm); }
.mpt-full .mpt-panel__title { line-height: 1.5; }
@media print { .mpt-toc { display: none; } }
.mpt-note { font-size: 14px; color: var(--muted); }
.mpt-note--block { background: var(--surface-alt); border-radius: 12px; padding: 8px 12px; }
.mpt-limits { margin: 0; }
.mpt-limits p { font-size: 14.5px; }
/* the safety section is the one panel that must not read as one more score */
.mpt-panel--safety { border-top: 0; background: var(--surface); border-radius: var(--r-md); padding: var(--space-md); }
.mpt-figure { margin: var(--space-sm) 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; }
.mpt-figure figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; font-size: 14px; }
.mpt-figure figcaption span { color: var(--muted); font-size: 13px; }
.mpt-figure__svg { max-width: 560px; margin-inline: auto; }
.mpt-figure__svg svg { display: block; width: 100%; height: auto; }
.mpt-figure--resources .mpt-figure__svg, .mpt-figure--pressure_resources .mpt-figure__svg { max-width: 460px; }
.mpt-figure__note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) {
  .mpt-report__head.card { padding: var(--space-md); }
  .mpt-toc { padding: 6px 8px; }
  .mpt-toc p { display: none; }
  .mpt-figure { padding: 8px; }
  .mpt-list { padding-inline-start: 1.1em; }
}

/* ── Homepage, tests-first (MULTI-SPECIALIST-OVERHAUL-PLAN.md phase 4) ──
   Two sections the site did not have before: the three-step explanation that
   connects a test to a specialist, and the strip of everyone in the network.
   Both use auto-fit rather than a fixed column count, because the number of
   specialists changes whenever the owner adds one from the admin panel — a
   hardcoded `repeat(4, 1fr)` would strand a fifth person on their own row. */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }
.how-step {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-artifact);
  padding: var(--space-lg); display: flex; flex-direction: column; gap: 10px;
}
.how-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 34px; block-size: 34px; border-radius: var(--r-pill);
  background: var(--surface-alt); color: var(--ink);
  font-weight: 600; font-size: 15px; flex-shrink: 0;
}
.how-step h3 { margin-bottom: 0; }
.how-step p { margin-bottom: 0; color: var(--muted); }

.people-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
}
.people-chip {
  display: flex; align-items: center; gap: 12px; color: inherit;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-artifact);
  padding: 14px; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.people-chip:hover { box-shadow: var(--shadow-artifact); transform: translateY(-2px); }
.people-chip img {
  inline-size: 56px; block-size: 56px; border-radius: var(--r-pill);
  object-fit: cover; object-position: center top; flex-shrink: 0;
}
/* One public specialist: a single compact card instead of a lone chip stretched across the whole row. */
.people-strip--single { grid-template-columns: minmax(0, 420px); }
/* Directory with one specialist: one wide card, photo beside the text, no empty half-grid. */
.contact-grid.contact-grid--single { grid-template-columns: minmax(0, 1fr); }
#specialist-grid.contact-grid--single .specialist-card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-md); align-items: start;
}
#specialist-grid.contact-grid--single .specialist-card > img {
  grid-row: 1 / span 12; inline-size: 112px; block-size: 112px; border-radius: 16px; margin-bottom: 0;
}
#specialist-grid.contact-grid--single .specialist-card > :not(img) { grid-column: 2; }
@media (max-width: 560px) {
  #specialist-grid.contact-grid--single .specialist-card { display: flex; }
}
.people-chip__name { font-weight: 600; display: block; line-height: 1.5; }
.people-chip__title { font-size: 13px; color: var(--muted); display: block; line-height: 1.5; }

@media print {
  @page { margin: 14mm 12mm; }
  body { background: var(--lc-ffffff, #fff); }
  .site-header, .site-footer, .neo-noprint, .neo-toc, .mpt-noprint, .mpt-toc, #neo-ai-gate, #neo-advanced-cta, .test-cta, .hero__actions, #maghzeto-chat, .chat-widget { display: none !important; }
  .neo-report { gap: 10px; }
  .neo-panel { border-top: none; padding-top: 0; }
  .neo-panel--areas, .neo-panel--evidence, .neo-panel--styles, .neo-panel--chapters, .neo-panel--growth { break-before: page; }
  .neo-figure, .neo-card, .neo-week, .neo-scale tbody, .neo-style { break-inside: avoid; }
  .neo-panel__title, .neo-panel h3, .neo-details > summary { break-after: avoid; }
  .mpt-report { gap: 10px; }
  .mpt-panel { border-top: none; padding-top: 0; }
  .mpt-figure { break-inside: avoid; }
  .mpt-panel__title { break-after: avoid; }
  .test-quiz { box-shadow: none; padding: 0; }
  .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .neo-details { border: none; padding: 0; }
  .neo-details > summary { list-style: none; }
  .neo-scale { font-size: 12px; }
  a[href]::after { content: none !important; }
}

/* Announcement bar (inc/announcement.php) — sits above the sticky header and scrolls away with the page */
.announce {
  position: relative; overflow: hidden; isolation: isolate; color: var(--lt-ffffff, #fff);
  background: linear-gradient(100deg, var(--fill-700) 0%, var(--fill-600) 55%, var(--lc-35573f, #35573f) 100%);
  animation: announce-in .5s var(--ease) both;
  transition: opacity .26s var(--ease), max-height .26s var(--ease);
  max-height: 200px;
}
.announce::before { /* slow light sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(251,225,209,.22) 50%, transparent 65%);
  background-size: 250% 100%; animation: announce-sheen 7s ease-in-out infinite;
}
.announce::after { /* fine bottom rule in the brand peach */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,225,209,.55), transparent);
}
.announce.is-leaving { opacity: 0; max-height: 0; }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 10px; padding-inline: 44px; position: relative; flex-wrap: wrap; }
.announce__badge { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(251,225,209,.16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(251,225,209,.35); }
.announce__text { margin: 0; color: var(--lt-ffffff, #fff); font-size: 14.5px; font-weight: 600; line-height: 1.7; letter-spacing: .1px; }
.announce__extras { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.announce__timer { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(0,0,0,.2); color: var(--lt-f4f7f5, #f4f7f5); white-space: nowrap; }
.announce__timer[hidden] { display: none; }
.announce__timer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: announce-pulse 1.8s ease-in-out infinite; }
.announce__code {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; cursor: pointer;
  border: 1.5px dashed rgba(251,225,209,.7); border-radius: var(--r-pill); background: rgba(255,255,255,.07);
  color: var(--lt-ffffff, #fff); font-size: 13px; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.announce__code:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.announce__code-label { opacity: .8; font-size: 12px; }
.announce__code-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 1.2px; direction: ltr; unicode-bidi: isolate; }
.announce__code-copy { padding: 3px 11px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.announce__code.is-copied .announce__code-copy { background: var(--mint); color: var(--mint-ink); }
.announce__cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--r-pill);
  background: var(--lc-ffffff, #fff); color: var(--fill-700); font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.announce__cta span { display: inline-block; transition: transform var(--dur) var(--ease); }
.announce__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(0,0,0,.55); }
.announce__cta:hover span { transform: translateX(-3px); }
.announce__close { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--lt-ffffff, #fff); opacity: .7; transition: opacity .2s, background .2s; }
.announce__close:hover { opacity: 1; background: rgba(255,255,255,.16); }
@keyframes announce-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes announce-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
@keyframes announce-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@media (max-width: 720px) {
  .announce__inner { gap: 8px 10px; padding-inline: 38px 40px; padding-block: 10px; }
  .announce__badge { display: none; }
  .announce__text { flex-basis: 100%; text-align: center; font-size: 13.5px; }
  .announce__extras { flex-basis: 100%; gap: 8px; }
}
@media (max-width: 480px) { .announce__timer { display: none; } .announce__code-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .announce, .announce::before, .announce__timer-dot { animation: none; } }
@media print { .announce { display: none !important; } }

/* ---------- «تست‌های من» + unfinished-test nudges (2026-09-19) ---------- */
.mt-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.mt-head__sub { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.mt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: var(--space-md) 0 var(--space-lg); }
.mt-stat { padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, var(--lc-f3faf5, #f3faf5), var(--lc-ffffff, #fff)); border: 1px solid rgba(36,74,57,.12); }
.mt-stat strong { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--lt-244a39, #244a39); }
.mt-stat span { font-size: 13px; color: var(--muted); }
.mt-stat--warm { background: linear-gradient(135deg, var(--lc-fff6ee, #fff6ee), var(--lc-ffffff, #fff)); }
.mt-stat--warm strong { color: var(--lt-8a4a2a, #8a4a2a); }
.mt-section { margin-top: var(--space-lg); }
.mt-section[hidden] { display: none; }
.mt-section__title { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-sm); font-size: 17px; }
.mt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc-f5a623, #f5a623); box-shadow: 0 0 0 5px rgba(245,166,35,.2); animation: mt-pulse 2.2s ease-in-out infinite; }
.mt-dot--done { background: var(--lc-4d7c62, #4d7c62); box-shadow: 0 0 0 5px rgba(77,124,98,.18); animation: none; }
.mt-dot--next { background: var(--lc-9fb8ff, #9fb8ff); box-shadow: 0 0 0 5px rgba(159,184,255,.25); animation: none; }
@keyframes mt-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(245,166,35,.2); } 50% { box-shadow: 0 0 0 9px rgba(245,166,35,0); } }

.mt-progress-list { display: grid; gap: 12px; }
.mt-progress { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, var(--lc-fffaf3, #fffaf3), var(--lc-ffffff, #fff)); border: 1px solid rgba(245,166,35,.35); color: inherit; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mt-progress:hover { transform: translateY(-3px); box-shadow: 0 22px 34px -24px rgba(138,74,42,.55); }
.mt-progress__ring, .mz-resume__ring, .mpt-resume__ring { --p: 0; flex: none; position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(var(--lc-4d7c62, #4d7c62) calc(var(--p) * 1%), var(--lc-ecefe9, #ecefe9) 0); }
.mt-progress__ring::before, .mz-resume__ring::before, .mpt-resume__ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--lc-ffffff, #fff); }
.mt-progress__ring b, .mz-resume__ring b, .mpt-resume__ring b { position: relative; font-size: 14px; color: var(--lt-244a39, #244a39); }
.mt-progress__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-progress__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.mt-progress__icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--lc-ffffff, #fff); color: var(--lt-244a39, #244a39); box-shadow: inset 0 0 0 1px rgba(36,74,57,.12); }
.mt-progress__icon svg { width: 18px; height: 18px; }
.mt-progress__meta { font-size: 13px; color: var(--muted); }
.mt-progress__bar { height: 6px; border-radius: 999px; background: var(--lc-f0efe9, #f0efe9); overflow: hidden; margin-top: 4px; }
.mt-progress__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62)); }
.mt-progress__go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: .55em 1.2em; border-radius: 999px; background: linear-gradient(135deg, var(--lc-4f8a6c, #4f8a6c), var(--lc-2a6047, #2a6047)); color: var(--lt-ffffff, #fff); font-weight: 700; font-size: 14px; box-shadow: 0 10px 18px -10px rgba(36,74,57,.7); }

/* «حذف» روی یک تست نیمه‌کاره (2026-09-22): کنار خودِ دکمه‌ی «ادامه»، توی
   یک گروه مشترک (.mt-progress__actions) به‌جای گوشه‌ی شناور -- همون gap
   استاندارد ردیف (16px) بین «ادامه» و دکمه‌ی حذف هم رعایت می‌شه. */
.mt-progress__actions { flex: none; display: flex; align-items: center; gap: 16px; }
.mt-progress__delete {
  flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--lc-ffffff, #fff); color: var(--faint);
  box-shadow: inset 0 0 0 1px rgba(36,74,57,.12);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mt-progress__delete:hover, .mt-progress__delete:focus-visible {
  background: var(--lc-b03a3a, #B03A3A); color: var(--lt-ffffff, #fff); outline: none;
  box-shadow: inset 0 0 0 1px var(--lc-b03a3a, #B03A3A);
}
.mt-progress.is-removing { opacity: 0; transform: scale(.96) translateY(-4px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }

/* finished results: a tone-coloured top edge, bigger icon, tidier delete */
.test-history-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.test-history-card { border-radius: 22px; overflow: hidden; box-shadow: 0 8px 20px -18px rgba(0,0,0,.4); }
.test-history-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--tone, var(--lc-cfe3d6, #cfe3d6)); }
.test-history-card--peach { --tone: var(--lc-f4b48d, #f4b48d); } .test-history-card--mint { --tone: var(--lc-9fe0bf, #9fe0bf); } .test-history-card--sage { --tone: var(--lc-98bfaa, #98bfaa); }
.test-history-card--gold { --tone: var(--lc-f1d27a, #f1d27a); } .test-history-card--rose { --tone: var(--lc-e9a6a6, #e9a6a6); } .test-history-card--lavender { --tone: var(--lc-b9aee6, #b9aee6); } .test-history-card--sky { --tone: var(--lc-9cc9e3, #9cc9e3); }
.test-history-card__icon { width: 50px; height: 50px; border-radius: 16px; }
.test-history-card__label { font-size: 16px; }
.test-history-card__type { font-size: 14px; color: var(--lt-3a3e46, #3a3e46); font-weight: 500; }
.test-history-card__delete { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--faint); }
.test-history-card__foot { padding-top: 10px; border-top: 1px dashed var(--border); }
.test-history-card__cta { padding: 3px 12px; border-radius: 999px; background: var(--lc-f3faf5, #f3faf5); color: var(--lt-244a39, #244a39); }
/* footer: date + icon actions on the start side, CTA at the end; wraps cleanly instead of squeezing buttons */
.test-history-card__foot { flex-wrap: wrap; row-gap: 10px; }
.test-history-card__actions { display: flex; align-items: center; gap: 6px; margin-inline-end: auto; }
.test-history-card .test-history-card__icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin: 0; flex-shrink: 0; line-height: 0;
}
.test-history-card__cta { margin-inline-start: auto; }

.mt-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mt-next__item { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; border: 1px dashed rgba(36,74,57,.3); background: var(--lc-fbfdfb, #fbfdfb); transition: transform var(--dur) var(--ease), border-color var(--dur); }
.mt-next__item:hover { transform: translateY(-3px); border-color: var(--lc-4d7c62, #4d7c62); border-style: solid; }
.mt-next__item strong { font-family: var(--font-display); font-size: 15.5px; }
.mt-next__item span { font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.mt-next__item em { font-style: normal; font-size: 12.5px; color: var(--lt-4d7c62, #4d7c62); font-weight: 600; }
@media (max-width: 640px) {
  .mt-stats { grid-template-columns: 1fr 1fr; }
  .mt-stat:last-child { grid-column: 1 / -1; }
  .mt-progress { flex-wrap: wrap; }
  .mt-progress__actions { width: 100%; }
  .mt-progress__go { flex: 1; justify-content: center; }
}

/* account nav badge */
.account-nav-item { position: relative; }
.account-nav-badge { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--lc-f5a623, #f5a623); color: var(--lt-ffffff, #fff); font-size: 12px; font-weight: 700; }

/* resume bar (every page, for signed-in people with an unfinished test) */
.mz-resume { position: fixed; left: 12px; right: 12px; bottom: 12px; inset-inline: 12px; inset-block-end: 12px; z-index: 70; max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; background: rgba(255,255,255,.97); border: 1px solid rgba(36,74,57,.16); box-shadow: 0 24px 40px -18px rgba(15,42,31,.55); transform: translateY(140%); transition: transform .5s var(--ease); }
.mz-resume[hidden] { display: none; }
.mz-resume.is-on { transform: none; }
.mz-resume__ring { width: 46px; height: 46px; }
.mz-resume__ring::before { inset: 5px; }
.mz-resume__ring b { font-size: 11.5px; }
.mz-resume__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; font-size: 13px; color: var(--muted); }
.mz-resume__text strong { color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-resume__go { flex: none; padding: .5em 1.2em; border-radius: 999px; background: linear-gradient(135deg, var(--lc-4f8a6c, #4f8a6c), var(--lc-2a6047, #2a6047)); color: var(--lt-ffffff, #fff); font-weight: 700; font-size: 14px; }
.mz-resume__x { flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); font-size: 20px; line-height: 1; }
.mz-resume__x:hover { background: var(--surface); }
@media (max-width: 760px) { .mz-resume { bottom: 76px; inset-block-end: 76px; } }
@media (prefers-reduced-motion: reduce) { .mt-dot { animation: none; } .mz-resume { transition: none; } }

/* ---- Custom select popup (see main.js "Custom select popup") ---- */
.mz-select-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
.mz-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; text-align: start; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mz-select.is-placeholder .mz-select__text { color: var(--placeholder); }
.mz-select__chev { flex: none; color: var(--muted); }
.mz-select:hover { border-color: var(--color-accent-300); }
.mz-select:focus-visible { outline: none; border-color: var(--color-accent-600); box-shadow: 0 0 0 3px var(--color-accent-50); }
.mz-select:disabled { opacity: .55; cursor: not-allowed; }
.mz-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.mz-sheet__scrim { position: absolute; inset: 0; background: rgba(15, 20, 18, .5); opacity: 0; transition: opacity .2s var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mz-sheet__panel {
  position: relative; width: 100%; max-width: 480px; max-height: min(78vh, 560px); display: flex; flex-direction: column;
  background: var(--card); color: var(--ink); border-radius: 24px 24px 0 0; padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.22); transform: translateY(100%); transition: transform .26s var(--ease);
}
.mz-sheet.is-open .mz-sheet__scrim { opacity: 1; }
.mz-sheet.is-open .mz-sheet__panel { transform: none; }
.mz-sheet__grab { width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 4px auto 6px; flex: none; }
.mz-sheet__title { font-weight: 600; font-size: 15px; padding: 6px 12px 10px; flex: none; }
.mz-sheet__list { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.mz-sheet__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px; min-height: 52px;
  border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; text-align: start; cursor: pointer;
  transition: background .15s var(--ease);
}
.mz-sheet__opt:hover, .mz-sheet__opt:focus-visible { background: var(--surface); outline: none; }
.mz-sheet__opt.is-on { background: var(--color-accent-50); border-color: var(--color-accent-300); font-weight: 600; }
.mz-sheet__opt:disabled { opacity: .4; cursor: not-allowed; }
.mz-sheet__mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.mz-sheet__opt.is-on .mz-sheet__mark { border-color: var(--fill-600); background: var(--fill-600) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M5.5 10.5l3 3 6-6.5%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/16px no-repeat; }
html.mz-sel-open { overflow: hidden; }
@media (min-width: 640px) {
  .mz-sheet { align-items: center; }
  .mz-sheet__panel { border-radius: 24px; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); }
  .mz-sheet.is-open .mz-sheet__panel { opacity: 1; }
  .mz-sheet__grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mz-sheet__scrim, .mz-sheet__panel { transition: none; } }
.soc__ico img { display: block; width: 26px; height: 26px; border-radius: 0; }

/* ===== چک‌باکس یکدست (مهر با جرقه؛ تیکِ دقیقاً وسط که هنگام زدن از کادر بیرون می‌پرد) ===== */
input[type=checkbox][type=checkbox] {
  --cb-fill: var(--ink); --cb-fill2: var(--ink); --cb-tick: var(--on-ink,var(--lc-ffffff, #fff)); --cb-bg: var(--card,var(--lc-ffffff, #fff)); --cb-ring: var(--lc-e3a07e, #E3A07E); --cb-light: var(--lc-fbe1d1, #FBE1D1); --cb-s: 24px;
  -webkit-appearance: none; appearance: none; position: relative; flex: none; display: inline-block; vertical-align: middle;
  width: var(--cb-s); height: var(--cb-s); min-width: 0; min-height: 0; padding: 0;
  margin: 1px 0 0; margin-top: max(0px, calc((1lh - var(--cb-s)) / 2));
  border: 2px solid var(--cb-ring); border-radius: 50%; background: var(--cb-bg); cursor: pointer;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-ring) 22%, transparent);
  accent-color: var(--cb-fill);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
input[type=checkbox][type=checkbox]:focus-visible { outline: 2px solid var(--cb-ring); outline-offset: 5px; }
input[type=checkbox][type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
input[type=checkbox][type=checkbox]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--cb-s); height: var(--cb-s);
  margin: calc(var(--cb-s) / -2) 0 0 calc(var(--cb-s) / -2); background: var(--cb-tick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.6l4.2 4.2L18.5 7.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.6l4.2 4.2L18.5 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; pointer-events: none; border: 0; transform: none;
}
input[type=checkbox][type=checkbox]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px;
  border-radius: 50%; pointer-events: none; opacity: 0;
}
input[type=checkbox][type=checkbox]:checked { background: linear-gradient(135deg, var(--cb-fill2), var(--cb-fill)); animation: mzcb-ring .7s ease-out; }
input[type=checkbox][type=checkbox]:checked::after { opacity: 1; animation: mzcb-out .65s cubic-bezier(.34, 1.3, .5, 1) both; }
input[type=checkbox][type=checkbox]:checked::before { animation: mzcb-burst .65s ease-out; }
@keyframes mzcb-out { 0% { transform: scale(0); clip-path: inset(0 100% 0 0); } 35% { transform: scale(2.2); clip-path: inset(0 0 0 0); } 100% { transform: scale(1); clip-path: inset(0 0 0 0); } }
@keyframes mzcb-ring { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-ring) 22%, transparent), 0 0 0 0 color-mix(in srgb, var(--cb-ring) 55%, transparent); } 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-ring) 22%, transparent), 0 0 0 16px transparent; } }
@keyframes mzcb-burst {
  0% { opacity: 1; box-shadow: 0 0 0 0 var(--cb-ring), 0 0 0 0 var(--cb-ring), 0 0 0 0 var(--cb-ring), 0 0 0 0 var(--cb-ring), 0 0 0 0 var(--cb-ring), 0 0 0 0 var(--cb-ring), 0 0 0 0 var(--cb-light), 0 0 0 0 var(--cb-light); }
  100% { opacity: 0; box-shadow: -26px -4px 0 -1px var(--cb-ring), 26px -4px 0 -1px var(--cb-ring), 0 -27px 0 -1px var(--cb-ring), -16px 20px 0 -1px var(--cb-ring), 16px 20px 0 -1px var(--cb-ring), 0 27px 0 -1px var(--cb-ring), -19px -19px 0 -2px var(--cb-light), 19px -19px 0 -2px var(--cb-light); }
}
@media (prefers-reduced-motion: reduce) { input[type=checkbox][type=checkbox], input[type=checkbox][type=checkbox]::before, input[type=checkbox][type=checkbox]::after { animation: none !important; transition: none !important; } }

/* ---- Branded file picker (filepick.js) — RULE: never show the native Browse button ---- */
.fp { position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:60px; padding:8px 8px 8px 14px; box-sizing:border-box;
  background:var(--card); border:1.5px dashed var(--border); border-radius:var(--r-sm); transition:border-color .15s, background .15s, box-shadow .15s; }
.fp:hover, .fp.is-drag { border-color:var(--color-accent-600); background:var(--surface-alt); }
.fp:focus-within { border-color:var(--color-accent-600); box-shadow:0 0 0 3px var(--color-accent-50); }
.fp.has-file { border-style:solid; border-color:var(--color-accent-600); background:var(--surface-alt); }
.fp-native { position:absolute !important; inset:0; width:100% !important; height:100% !important; min-height:0 !important; opacity:0; cursor:pointer; margin:0; padding:0 !important; border:0 !important; }
.fp-native::file-selector-button { cursor:pointer; }
.fp-btn { flex:none; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:700; color:var(--on-ink);
  background:var(--ink); transition:transform .15s, background .15s; }
.fp:hover .fp-btn { transform:translateY(-1px); background:var(--ink-hover); }
.fp-name { flex:1; min-width:0; font-size:13.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp.has-file .fp-name { color:var(--ink); font-weight:600; }

/* ---------- Scrollbar (desktop): thin, rounded, in the site's green. Overlay scrollbars on phones are untouched. ----------
   Chrome/Edge/Safari use ::-webkit-scrollbar (gradient thumb with a gap around it); Firefox gets scrollbar-color.
   Class rules that hide a scrollbar (scrollbar-width: none / ::-webkit-scrollbar { display: none }) still win. */
@media (hover: hover) and (pointer: fine) {
  *::-webkit-scrollbar { width: 12px; height: 12px; }
  *::-webkit-scrollbar-track { background: rgba(36, 74, 57, .06); }
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047));
    border: 3px solid transparent; background-clip: padding-box; border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--lc-3d7a5d, #3d7a5d), var(--lc-244a39, #244a39)); background-clip: padding-box; }
  *::-webkit-scrollbar-corner { background: transparent; }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-color: var(--lc-3d7a5d, #3d7a5d) rgba(36, 74, 57, .06); }
  }
}