/*
 * Result / interpretation pages (2026-09-19 redesign) — one visual language for every test's report.
 * Loaded on the test pages and on page-account-result.php only (inc/result-assets.php).
 * Self-contained on purpose: it does not depend on mpt-landing.css (Conners and the account page don't load it).
 *
 * How it is applied: assets/result.js adds .res-scope to every `.test-result` (and to the account page's
 * report mounts), then upgrades the markup the renderers already produce — hero, sticky section chips,
 * reveal, animated bars, "next step" band. Every class here is prefixed .res- or scoped under .res-scope
 * so nothing leaks into the rest of the site. The colour families (.card--sky/gold/lavender/mint/rose/accent)
 * keep their meaning from docs/TEST-RESULT-DESIGN-SYSTEM.md — this file only changes the surface they sit on.
 * Motion is decorative: it is switched off for prefers-reduced-motion (and .res-js is never added then).
 */

.res-scope {
  --res-green: var(--lc-4d7c62, #4d7c62);
  --res-green-deep: var(--lc-244a39, #244a39);
  --res-green-dark: var(--lc-163527, #163527);
  --res-mint: var(--lc-dff5e3, #DFF5E3);
  --res-peach: var(--lc-fbe1d1, #FBE1D1);
  --res-line: rgba(36, 74, 57, .12);
  --res-shadow: 0 30px 60px -34px rgba(36, 74, 57, .4);
  --res-bar: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62), var(--lc-fbe1d1, #FBE1D1));
  position: relative;
}
.res-scope p { max-width: none; }
.res-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.res-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Hero (built by result.js from the renderer's own badge / title / meta / code) ---------- */
.res-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 0 var(--space-md); padding: clamp(24px, 4.5vw, 44px) clamp(20px, 4vw, 40px);
  border-radius: 28px; border: 1px solid var(--res-line); box-shadow: var(--res-shadow);
  background: linear-gradient(160deg, var(--lc-fbfdfb, #fbfdfb) 0%, var(--lc-ffffff, #fff) 60%);
  text-align: center;
}
.res-hero::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--res-bar); z-index: 2; }
.res-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.res-orb { position: absolute; border-radius: 50%; filter: blur(56px); opacity: .7; animation: res-float 14s ease-in-out infinite; }
.res-orb--a { width: 300px; height: 300px; background: var(--res-mint); inset-block-start: -120px; inset-inline-start: -70px; }
.res-orb--b { width: 260px; height: 260px; background: var(--res-peach); inset-block-end: -110px; inset-inline-end: -60px; animation-delay: -5s; }
@keyframes res-float { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(18px,-20px,0) scale(1.07); } }
.res-eyebrow {
  display: inline-flex; align-items: center; gap: .5em; margin-bottom: 14px; padding: .35em 1em;
  border-radius: var(--r-pill); background: rgba(223, 245, 227, .8); color: var(--res-green-deep);
  border: 1px solid var(--res-line); font-size: 13.5px; font-weight: 600;
}
/* the renderer's own level badge (brainmap peach eyebrow, stress/couple/conners colour-coded level) */
.res-hero .risk-badge {
  align-items: center; gap: .5em; margin: 0 0 14px; padding: .4em 1.15em; border: 1px solid rgba(0,0,0,.06);
  font-weight: 700; font-size: 14px; box-shadow: 0 10px 22px -14px rgba(0,0,0,.35);
}
.res-hero .risk-badge::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .85; }
.res-scope .res-hero h1, .res-scope .res-hero h2 {
  margin: 0 0 10px; font-size: clamp(26px, 4.6vw, 42px); line-height: 1.3; letter-spacing: -.01em; color: var(--res-green-dark);
}
.res-scope .res-lead { max-width: 60ch; margin: 0 auto 14px; font-size: clamp(15.5px, 2.2vw, 17.5px); line-height: 1.95; color: var(--lt-4b4f58, #4b4f58); }
.res-hero__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.res-hero .test-card__meta { margin: 0 !important; font-size: 13.5px; color: var(--muted); }
.res-hero .test-history-card__code, .res-hero .test-history-card__code[style] {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 5px 12px; max-width: 100%;
  border-radius: var(--r-pill); background: var(--lc-ffffff, #fff); border: 1px solid var(--res-line); box-shadow: 0 8px 18px -14px rgba(36,74,57,.5);
}
.res-hero .test-history-card__code-value { font-size: 13px; color: var(--res-green-deep); letter-spacing: .5px; }
.res-hero .test-history-card__code-copy {
  padding: 4px 12px; border-radius: var(--r-pill); background: var(--res-mint); color: var(--res-green-deep); font-size: 12.5px; font-weight: 700;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.res-hero .test-history-card__code-copy:hover, .res-hero .test-history-card__code-copy:focus-visible { background: var(--lc-c9ecd1, #c9ecd1); color: var(--res-green-deep); transform: translateY(-1px); }
.res-hero .hero__actions { margin-top: 18px; gap: 10px 12px; }

/* ---------- viewing a saved result: compact utility bar (2026-09-22) ----------
 * inc/result-assets.php's maghzeto_render_result_view_bar() -- back-link, and the dock point
 * assets/share.js appends the «اشتراک‌گذاری» pill into. Replaces a bare full-width .section that
 * used to hold only the back-link (80px top+bottom padding around one line of text, stacked right
 * above #mpt-start's own 80px top padding -- the reported "dead space"). Sits above every test's
 * own report markup, so the share pill lands in the same clean spot whether that report opens with
 * a plain .res-hero or its own card (.type-reveal/.mpt-report/.neo-report), instead of being jammed
 * against whatever renders first. */
.res-view-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  max-width: 780px; margin: 0 auto; padding: 16px var(--space-md, 20px) 12px;
}
.res-view-bar__back {
  color: var(--muted); text-decoration: none; font: 600 14px/1 var(--font, inherit);
  padding: 6px 2px; transition: color .15s;
}
.res-view-bar__back:hover, .res-view-bar__back:focus-visible { color: var(--ink); }
.res-view-bar .shr-pill { flex: none; padding: 7px 14px; font-size: 13.5px; }
.mpt-page--result #mpt-start { padding-block-start: var(--space-sm, 8px); }

/* ---------- Report header (2026-10-01 redesign) ----------
   Design read: Persian result page for end users and clinicians, calm premium-clinical language on the site's own
   emerald + peach tokens. Dials 5 / 4 / 4. The head is a deep emerald slab: the title on the reading-start side, the
   identity facts (date, code, version) as a small label-over-value list on the other, faint concentric rings as the
   only ornament, peach as the single accent. No library, no new font. */
.res-scope .neo-report__head.card, .res-scope .mpt-report__head.card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end; gap: 22px clamp(20px, 4vw, 44px); padding: clamp(24px, 4.5vw, 42px); border-radius: 24px; text-align: start;
  border: 1px solid rgba(255, 255, 255, .09); color: var(--lt-e6f1ea, #e6f1ea);
  background-color: var(--lc-163527, #163527);
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(92, 160, 124, .55), transparent 62%),
    linear-gradient(158deg, var(--lc-1d4433, #1d4433) 0%, var(--lc-122f22, #122f22) 100%);
  box-shadow: 0 34px 56px -38px rgba(12, 38, 27, .75);
}
.res-scope .neo-report__head.card::before, .res-scope .mpt-report__head.card::before {
  content: ''; position: absolute; z-index: -1; inset-block: -40%; inset-inline-start: -14%; width: 70%; aspect-ratio: 1; pointer-events: none;
  height: auto; opacity: 1; background: repeating-radial-gradient(circle at center, transparent 0 34px, rgba(255, 255, 255, .055) 34px 35px);
  -webkit-mask-image: radial-gradient(circle at center, var(--lc-000000, #000) 0%, transparent 68%); mask-image: radial-gradient(circle at center, var(--lc-000000, #000) 0%, transparent 68%);
}
.res-scope .neo-report__head.card::after, .res-scope .mpt-report__head.card::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--lc-fbe1d1, #FBE1D1), rgba(251, 225, 209, .15));
}
.res-scope .neo-report__head > *, .res-scope .mpt-report__head > * { margin: 0; }
.res-scope .neo-report__head.card h2, .res-scope .mpt-report__head.card h2 { grid-column: 1; grid-row: 2; font-size: clamp(26px, 4.6vw, 42px); line-height: 1.25; letter-spacing: -.01em; color: var(--lt-ffffff, #fff); }
.res-scope .neo-report__head p, .res-scope .mpt-report__head p, .res-scope .neo-report__head strong, .res-scope .mpt-report__head strong { color: var(--lt-e6f1ea, #e6f1ea); }
.res-scope .neo-report__kicker, .res-scope .mpt-report__kicker {
  grid-column: 1; grid-row: 1; justify-self: start; padding: 0; background: none; border: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--lt-fbe1d1, #FBE1D1) !important; opacity: 1;
}
.res-scope .res-head__meta {
  grid-column: 2; grid-row: 1 / span 2; align-self: end; display: grid; gap: 0; margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 16px; background: rgba(255, 255, 255, .055); overflow: hidden;
}
.res-scope .res-head__meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 16px; }
.res-scope .res-head__meta > div + div { border-block-start: 1px solid rgba(255, 255, 255, .1); }
.res-scope .res-head__meta dt { margin: 0; font-size: 12.5px; font-weight: 500; color: rgba(230, 241, 234, .68); white-space: nowrap; }
.res-scope .res-head__meta dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--lt-ffffff, #fff); text-align: end; min-width: 0; }
.res-scope .res-head__meta bdi { direction: ltr; unicode-bidi: isolate; font-size: 13.5px; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.res-scope .res-head__meta .res-code-copy { margin: 0; padding: 3px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); color: var(--lt-ffffff, #fff); font-size: 12px; font-weight: 600; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.res-scope .res-head__meta .res-code-copy:hover, .res-scope .res-head__meta .res-code-copy:focus-visible { background: var(--lc-fbe1d1, #FBE1D1); color: var(--lt-163527, #163527); border-color: var(--lc-fbe1d1, #FBE1D1); }
.res-scope .res-head__meta .res-code-copy:active { transform: scale(.96); }
.res-scope .neo-report__head .neo-noprint, .res-scope .mpt-report__head .mpt-noprint { grid-column: 1 / -1; }
/* the print / PDF button sits on the dark slab: light ghost at rest, peach with dark text on hover / focus (the site's .btn--ghost hover is mint with
   light text, unreadable here), a small press on :active */
.res-scope .neo-report__head.card .btn.btn--ghost, .res-scope .mpt-report__head.card .btn.btn--ghost {
  background: rgba(255, 255, 255, .1); color: var(--lt-ffffff, #fff); border: 1px solid rgba(255, 255, 255, .32); box-shadow: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.res-scope .neo-report__head.card .btn.btn--ghost:hover, .res-scope .mpt-report__head.card .btn.btn--ghost:hover,
.res-scope .neo-report__head.card .btn.btn--ghost:focus-visible, .res-scope .mpt-report__head.card .btn.btn--ghost:focus-visible {
  background: var(--lc-fbe1d1, #FBE1D1); color: var(--lt-163527, #163527); border-color: var(--lc-fbe1d1, #FBE1D1); transform: translateY(-1px);
}
.res-scope .neo-report__head.card .btn.btn--ghost:active, .res-scope .mpt-report__head.card .btn.btn--ghost:active { transform: scale(.98); }
.res-scope .neo-report__head.card .btn.btn--ghost:focus-visible, .res-scope .mpt-report__head.card .btn.btn--ghost:focus-visible { outline: 3px solid rgba(251, 225, 209, .55); outline-offset: 3px; }
@media (max-width: 720px) {
  .res-scope .neo-report__head.card, .res-scope .mpt-report__head.card { grid-template-columns: 1fr; align-items: start; }
  .res-scope .res-head__meta { grid-column: 1; grid-row: 3; align-self: stretch; }
}

/* ---------- Scale cards (2026-10-01, replaces the old three-column table) ----------
   One card per scale: name + reading, a slim track (marker = where you stand, light band = measurement range, tick =
   the middle), the position in words, what the scale means. Intensity of ONE hue carries the band; nothing else is
   colour coded. The marker slides in from the middle once (motion = "this is your position"), never loops. */
@property --at { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.res-scope .res-scales__cap { margin: 0 0 8px; font-weight: 600; color: var(--res-green-dark); }
.res-scope .res-scales { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; margin: var(--space-sm) 0; }
.res-scope .res-scale {
  --band-bg: var(--lc-e9efe9, #e9efe9); --band-ink: var(--lc-3b4a42, #3b4a42); --mark: var(--lc-2f6a50, #2f6a50);
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; border-radius: 18px; background: var(--lc-ffffff, #fff); border: 1px solid var(--res-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (max-width: 900px) { .res-scope .res-scale:last-child:nth-child(odd) { grid-column: 1 / -1; } }  /* no orphan card in a two-column row */
.res-scope .res-scale:hover { transform: translateY(-2px); border-color: rgba(36, 74, 57, .26); box-shadow: 0 16px 28px -22px rgba(36, 74, 57, .55); }
.res-scope .res-scale--high, .res-scope .res-scale--low { --band-bg: var(--lc-d8efdf, #d8efdf); --band-ink: var(--lc-1d4a35, #1d4a35); }
.res-scope .res-scale--very_high, .res-scope .res-scale--very_low { --band-bg: var(--lc-1f4d38, #1f4d38); --band-ink: var(--lc-ffffff, #fff); --mark: var(--lc-163527, #163527); }
.res-scope .res-scale__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.res-scope .res-scale__name { margin: 0; font-size: 16px; line-height: 1.5; color: var(--res-green-dark); font-family: var(--font-display); }
.res-scope .res-scale__band { flex: none; max-width: 58%; padding: 3px 11px; border-radius: var(--r-pill); background: var(--band-bg); color: var(--band-ink); font-size: 12.5px; font-weight: 600; line-height: 1.6; text-align: center; }
.res-scope .res-scale.is-weak .res-scale__band { background: transparent; border: 1px dashed rgba(36, 74, 57, .35); color: var(--lt-5b6a62, #5b6a62); }
.res-scope .res-scale__track { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--lc-edf1ed, #edf1ed); margin-block: 4px 2px; }
.res-scope .res-scale__track::after { content: ''; position: absolute; inset-block: -3px; inset-inline-start: 50%; width: 1px; background: rgba(36, 74, 57, .22); }
.res-scope .res-scale__range { position: absolute; inset-block: 0; inset-inline-start: var(--lo); inline-size: calc(var(--hi) - var(--lo)); border-radius: var(--r-pill); background: linear-gradient(90deg, rgba(92, 160, 124, .55), rgba(92, 160, 124, .3)); }
.res-scope .res-scale.is-weak .res-scale__range { background: repeating-linear-gradient(90deg, rgba(92, 160, 124, .4) 0 6px, transparent 6px 10px); }
.res-scope .res-scale__mark {
  --at: var(--to); position: absolute; inset-block-start: 50%; inset-inline-start: var(--at); width: 18px; height: 18px; margin-inline-start: -9px; margin-block-start: -9px;
  border-radius: 50%; background: var(--mark); border: 3px solid var(--lc-ffffff, #fff); box-shadow: 0 2px 6px rgba(15, 42, 31, .35);
}
@media (prefers-reduced-motion: no-preference) {
  .res-scope .res-scale__mark { animation: resMarkIn .9s cubic-bezier(.16, 1, .3, 1) .1s both; }
  .res-scope .res-scale__range { animation: resRangeIn .9s cubic-bezier(.16, 1, .3, 1) .1s both; }
}
@keyframes resMarkIn { from { --at: 50%; } to { --at: var(--to); } }
@keyframes resRangeIn { from { opacity: 0; } to { opacity: 1; } }
.res-scope .res-scale__pos { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--lt-46574e, #46574e); }
.res-scope .res-scale__more { margin: 0; padding-block-start: 10px; border-block-start: 1px solid var(--res-line); font-size: 13.5px; line-height: 1.85; color: var(--lt-5a6159, #5a6159); }
/* Text cards (2026-10-01): when a chart above already shows the positions, the cards carry words only (what the dimension
   is, what your level looks like, the other end, one everyday example), so the same bar is never drawn twice. */
.res-scope .res-scales--text { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.res-scope .res-scale--text { gap: 8px; }
.res-scope .res-scale--text .res-scale__pos { margin: -2px 0 2px; font-size: 13px; font-weight: 500; color: var(--lt-6a756e, #6a756e); }
.res-scope .res-scale__rows { display: grid; gap: 9px; margin: 0; padding-block-start: 10px; border-block-start: 1px solid var(--res-line); }
.res-scope .res-scale__rows > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.res-scope .res-scale__rows dt { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--res-green, var(--lt-4d7c62, #4d7c62)); }
.res-scope .res-scale__rows dd { margin: 0; font-size: 14px; line-height: 1.85; color: var(--lt-3f4a44, #3f4a44); }
.res-scope .res-scale__rows > div:last-child dd { color: var(--lt-6a756e, #6a756e); font-size: 13.5px; }
.res-scope .res-scale__example { margin: 2px 0 0; padding: 9px 13px; border-radius: 12px; background: var(--lc-f4f9f5, #f4f9f5); border-inline-start: 3px solid var(--lc-9fe0bf, #9fe0bf); font-size: 13.5px; line-height: 1.85; color: var(--lt-34443b, #34443b); }
@media (max-width: 480px) { .res-scope .res-scale__rows > div { grid-template-columns: 1fr; gap: 0; } }
/* ---------- Life areas, read from your own facets (2026-10-01) ----------
   Smart tier only, below the thirty facets. Deliberately NOT the lavender card grid of the summary above it: the gold family of the
   site's design system (practical guidance, like the growth and plan sections), one numbered panel per area with a solid rail on the
   reading-start side; each paragraph is a bold one-sentence reading + explanation + the scales it rests on. */
.res-scope .res-deeps { display: grid; gap: 16px; margin-block-start: var(--space-sm); }
.res-scope .res-deep {
  position: relative; padding: clamp(18px, 3vw, 28px); padding-inline-start: clamp(22px, 3.4vw, 32px); border-radius: 20px; border: 1px solid var(--lc-ecd9a0, #ecd9a0);
  background: linear-gradient(165deg, var(--lc-fffbee, #fffbee) 0%, var(--lc-fbefc7, #fbefc7) 160%); color: var(--lt-5a4512, #5a4512);
}
.res-scope .res-deep::before { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 5px; border-radius: 0 6px 6px 0; background: linear-gradient(180deg, var(--lc-e7c766, #e7c766), var(--lc-c9a032, #c9a032)); }
[dir="rtl"] .res-scope .res-deep::before, .res-scope[dir="rtl"] .res-deep::before { border-radius: 6px 0 0 6px; }
.res-scope .res-deep__head { display: flex; align-items: center; gap: 12px; margin-block-end: 8px; }
.res-scope .res-deep__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lc-c9a032, #c9a032); color: var(--lt-ffffff, #fff); font-family: var(--font-display); font-size: 16px; font-weight: 700; box-shadow: 0 0 0 4px rgba(201, 160, 50, .18); }
.res-scope .res-deep__head h3 { margin: 0; font-size: 18px; color: var(--lt-5a4512, #5a4512); }
.res-scope .res-deep__item { padding-block: 14px; border-block-start: 1px dashed rgba(156, 118, 24, .32); }
.res-scope .res-deep__item:first-of-type { border-block-start: 0; padding-block-start: 6px; }
.res-scope .res-deep__lead { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.85; color: var(--lt-4a3a0f, #4a3a0f); }
.res-scope .res-deep__text { margin: 0 0 10px; font-size: 14.5px; line-height: 1.95; color: var(--lt-5f4f23, #5f4f23); }
.res-scope .res-deep__basis { margin: 0; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .7); border: 1px solid var(--lc-ecd9a0, #ecd9a0); font-size: 12.5px; line-height: 1.8; color: var(--lt-7a6320, #7a6320); }
.res-scope .res-deeps__title { margin: var(--space-md) 0 6px; font-size: clamp(20px, 3vw, 24px); font-weight: 700; line-height: 1.4; font-family: var(--font-display); color: var(--res-green-dark); }
/* one plain sentence saying why a list is shorter than usual (five of six life areas, three of eight highlights ...) */
.res-scope .res-count-note { margin: 0 0 14px; padding: 9px 14px; border-radius: 12px; background: var(--lc-f3f6f4, #f3f6f4); border: 1px dashed rgba(36, 74, 57, .28); font-size: 13.5px; line-height: 1.9; color: var(--lt-4c5a52, #4c5a52); }
@media print { .res-scope .res-deep { break-inside: auto; } .res-scope .res-deep__item { break-inside: avoid; } }
@media print { .res-scope .res-scale { break-inside: avoid; box-shadow: none; } .res-scope .res-scale__mark { animation: none; } }

/* ---------- Compact notes (2026-10-01) ----------
   The short "how to read this / how far to trust it" sections (NEO intro + validity, MMPI validity + limits, MBTI the two
   honesty cards) used to be full-size panels with big titles and most of a screen each. They are now small tinted notes,
   two per row when there is room. One component for all three tests: .res-notes > .res-note. */
.res-scope .res-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0 0 var(--space-md); }
.res-scope .res-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--res-line); background: var(--lc-f4f9f5, #f4f9f5); }
.res-scope .res-note--validity, .res-scope .res-note--limits { background: var(--lc-fbf7ef, #fbf7ef); }
.res-scope .res-note__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--lc-ffffff, #fff); color: var(--res-green-deep, var(--lt-244a39, #244a39)); box-shadow: inset 0 0 0 1px var(--res-line); }
.res-scope .res-note__body { min-width: 0; flex: 1; }
.res-scope .res-note__title { margin: 2px 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--res-green-dark); }
.res-scope .res-note__body p, .res-scope .res-note__body blockquote { margin: 0 0 8px; font-size: 14px; line-height: 1.85; color: var(--lt-4a4f57, #4a4f57); }
.res-scope .res-note__body blockquote { padding: 0; border: 0; background: none; }
.res-scope .res-note__body > :last-child { margin-bottom: 0; }
.res-scope .res-note__body .neo-note, .res-scope .res-note__body .mpt-note { font-size: 13px; }
/* every panel heading sat under an 80px gap: main.css's `.prose h2` (specificity 0,1,1) beat `.neo-panel__title` (0,1,0) */
.res-scope .neo-panel__title, .res-scope .mpt-panel__title { margin-top: 0; }
/* ...and `.card + .prose > :first-child` put another 80px above the first block under the report header */
.res-scope .card + .prose > .res-notes:first-child, .res-scope .card + .prose > .neo-panel:first-child { margin-top: var(--space-md); }

/* the result code in a report header is copyable (button handled by main.js / the panel's own handler) */
.res-scope .res-code-copy { margin-inline-start: 6px; padding: 2px 11px; border: 1px solid var(--res-line); border-radius: var(--r-pill); background: var(--lc-ffffff, #fff); font-size: 12.5px; font-weight: 600; color: var(--res-green-deep, var(--lt-244a39, #244a39)); }
.res-scope .res-code-copy:hover, .res-scope .res-code-copy:focus-visible { background: var(--res-mint, var(--lc-e6f3ec, #e6f3ec)); }
.res-scope .neo-report__meta bdi, .res-scope .mpt-report__meta bdi { user-select: all; }

/* ---------- Sticky section chips ---------- */
.res-toc, .res-scope .neo-toc, .res-scope .mpt-toc {
  position: sticky; top: calc(var(--header-h) + 6px); z-index: 20; margin: 0 0 var(--space-md); padding: 8px;
  border-radius: 20px; border: 1px solid var(--res-line); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 32px -24px rgba(36,74,57,.45);
}
.res-toc ul, .res-scope .neo-toc ul, .res-scope .mpt-toc ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.res-toc ul::-webkit-scrollbar, .res-scope .neo-toc ul::-webkit-scrollbar, .res-scope .mpt-toc ul::-webkit-scrollbar { display: none; }
.res-toc a, .res-scope .neo-toc a, .res-scope .mpt-toc a {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 7px 14px; border-radius: var(--r-pill); background: transparent;
  color: var(--lt-3a3e46, #3a3e46); font-size: 13.5px; font-weight: 600; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.res-toc a:hover, .res-scope .neo-toc a:hover, .res-scope .mpt-toc a:hover { background: var(--res-mint); color: var(--res-green-deep); }
.res-toc a[aria-current="true"], .res-scope .neo-toc a[aria-current="true"], .res-scope .mpt-toc a[aria-current="true"] { background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047)); color: var(--lt-ffffff, #fff); }
.res-scope .neo-toc p, .res-scope .mpt-toc p { display: none; }
.res-scope h2[id], .res-scope .neo-panel, .res-scope .mpt-panel { scroll-margin-top: calc(var(--header-h) + 78px); }

/* ---------- Section headings ---------- */
.res-scope .prose { counter-reset: res-sec; }
.res-scope .prose > h2, .res-scope .res-next__title {
  display: flex; align-items: center; gap: 12px; margin: clamp(40px, 6vw, 64px) 0 16px; font-size: clamp(22px, 3.3vw, 29px); line-height: 1.4; color: var(--res-green-dark);
}
.res-scope .prose > h2::before {
  counter-increment: res-sec; content: counter(res-sec, persian); flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: linear-gradient(135deg, var(--res-mint), var(--lc-eefaf1, #eefaf1)); color: var(--res-green-deep); font-family: var(--font-display); font-size: 17px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--res-line);
}
.res-scope .neo-panel__title, .res-scope .mpt-panel__title { color: var(--res-green-dark); }
.res-scope .neo-panel, .res-scope .mpt-panel {
  position: relative; overflow: hidden; margin-top: var(--space-sm); padding: clamp(20px, 3.2vw, 32px); border: 1px solid var(--res-line); border-radius: 24px;
  background: var(--lc-ffffff, #fff); box-shadow: 0 24px 46px -34px rgba(36, 74, 57, .4);
}
.res-scope .neo-panel::before, .res-scope .mpt-panel::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--res-bar); opacity: .9; }
.res-scope .neo-panel .card, .res-scope .mpt-panel .card { box-shadow: none; }
.res-scope .neo-panel .card:hover, .res-scope .mpt-panel .card:hover { transform: none; box-shadow: none; }
.res-scope > .test-card__meta { text-align: center; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.res-scope .neo-report, .res-scope .mpt-report { gap: var(--space-md); }

/* ---------- Cards ---------- */
.res-scope .card {
  --res-mx: 50%; --res-my: 0%; --res-tint: rgba(159, 224, 191, .3);
  position: relative; overflow: hidden; padding: clamp(20px, 3.2vw, 32px); border-radius: 24px; border: 1px solid var(--res-line);
  background: var(--lc-ffffff, #fff); box-shadow: 0 24px 46px -34px rgba(36, 74, 57, .4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.res-scope .card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--res-bar); opacity: .9; pointer-events: none; }
.res-scope .card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease); background: radial-gradient(360px circle at var(--res-mx) var(--res-my), var(--res-tint), transparent 60%); }
@media (hover: hover) {
  .res-scope .card:hover { transform: translateY(-4px); border-color: rgba(77, 124, 98, .35); box-shadow: 0 34px 54px -30px rgba(36, 74, 57, .5); }
  .res-scope .card:hover::after { opacity: 1; }
}
/* families keep their meaning (design-system doc): pastel surface + a matching top bar */
.res-scope .card--accent { background: linear-gradient(160deg, var(--lc-fff4ec, #fff4ec), var(--res-peach)); --res-tint: rgba(255,255,255,.55); }
.res-scope .card--accent::before { background: linear-gradient(90deg, var(--lc-f3b99b, #f3b99b), var(--lc-e08e66, #e08e66), var(--lc-fbe1d1, #FBE1D1)); }
.res-scope .card--lavender { background: linear-gradient(160deg, var(--lc-f1eefb, #f1eefb), var(--lc-e6e1f5, #E6E1F5)); --res-tint: rgba(255,255,255,.5); }
.res-scope .card--lavender::before { background: linear-gradient(90deg, var(--lc-cfc5ee, #cfc5ee), var(--lc-8d7fd0, #8d7fd0), var(--lc-e6e1f5, #E6E1F5)); }
.res-scope .card--sky { background: linear-gradient(160deg, var(--lc-eaf5fb, #eaf5fb), var(--lc-dceef7, #DCEEF7)); --res-tint: rgba(255,255,255,.5); }
.res-scope .card--sky::before { background: linear-gradient(90deg, var(--lc-b6dcef, #b6dcef), var(--lc-4f9cc4, #4f9cc4), var(--lc-dceef7, #DCEEF7)); }
.res-scope .card--gold { background: linear-gradient(160deg, var(--lc-fdf6dc, #fdf6dc), var(--lc-fbefc7, #FBEFC7)); --res-tint: rgba(255,255,255,.5); }
.res-scope .card--gold::before { background: linear-gradient(90deg, var(--lc-f2dc96, #f2dc96), var(--lc-d1a83a, #d1a83a), var(--lc-fbefc7, #FBEFC7)); }
.res-scope .card--mint { background: linear-gradient(160deg, var(--lc-eefaf1, #eefaf1), var(--res-mint)); --res-tint: rgba(255,255,255,.5); }
.res-scope .card--mint::before { background: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62), var(--lc-dff5e3, #DFF5E3)); }
.res-scope .card--rose { background: linear-gradient(160deg, var(--lc-fdeeee, #fdeeee), var(--lc-fbe0e0, #FBE0E0)); --res-tint: rgba(255,255,255,.5); }
.res-scope .card--rose::before { background: linear-gradient(90deg, var(--lc-f3bcbc, #f3bcbc), var(--lc-d27878, #d27878), var(--lc-fbe0e0, #FBE0E0)); }
.res-scope .card > * { position: relative; z-index: 1; }
.res-scope .card h3 { font-family: var(--font); font-weight: 700; }
.res-scope .prose > .card { margin: var(--space-md) 0; }
.res-scope .two-col-grid { gap: 18px; }
.res-scope .fact-row { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed rgba(0,0,0,.09); }
.res-scope .fact-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.res-scope .fact-row dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1px; opacity: .8 !important; }
.res-scope .fact-row dd { font-size: 15px; line-height: 1.85; }
.res-scope .card--sky .fact-row dd, .res-scope .card--gold .fact-row dd, .res-scope .card--lavender .fact-row dd, .res-scope .card--rose .fact-row dd, .res-scope .card--mint .fact-row dd { color: inherit; opacity: .92; }
.res-scope .sys-card__emoji { box-shadow: 0 8px 16px -10px rgba(0,0,0,.4); }
.res-scope .card li, .res-scope .card p { line-height: 1.95; }

/* MPT calibration report: one card per group, one tile per item (result.js buildGroups + test-mindprofile.js) */
.res-scope .prose > .res-group { margin: var(--space-md) 0; }
.res-scope .res-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; font-size: clamp(18px, 2.6vw, 22px); color: var(--res-green-dark); }
.res-group__count { flex: none; padding: .2em .85em; border-radius: var(--r-pill); background: var(--res-mint); color: var(--res-green-deep); font-family: var(--font); font-size: 12.5px; font-weight: 700; }
.res-scope .res-group--limits { background: linear-gradient(160deg, var(--lc-fff4ec, #fff4ec), var(--res-peach)); border-color: rgba(93, 42, 26, .18); color: var(--accent-ink); }
.res-scope .res-group--limits::before { background: linear-gradient(90deg, var(--lc-f3b99b, #f3b99b), var(--lc-e08e66, #e08e66), var(--lc-fbe1d1, #FBE1D1)); }
.res-scope .res-group--limits h3, .res-scope .res-group--limits p { color: var(--accent-ink); }

.res-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.res-tile {
  position: relative; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--res-line);
  background: linear-gradient(160deg, var(--lc-f8fcf9, #f8fcf9), var(--lc-edf7f0, #edf7f0)); box-shadow: 0 14px 28px -24px rgba(36, 74, 57, .45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) { .res-tile:hover { transform: translateY(-3px); border-color: rgba(77, 124, 98, .35); box-shadow: 0 22px 34px -24px rgba(36, 74, 57, .55); } }
.res-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.res-tile__name { font-weight: 700; font-size: 15.5px; line-height: 1.6; color: var(--res-green-dark); }
.res-tile__chip { flex: none; padding: .1em .75em; border-radius: var(--r-pill); background: var(--lc-ffffff, #fff); border: 1px solid var(--res-line); color: var(--res-green-deep); font-size: 12px; font-weight: 700; white-space: nowrap; }
.res-tile__meter { display: block; height: 6px; margin: 10px 0 10px; border-radius: 99px; background: rgba(36, 74, 57, .1); overflow: hidden; }
.res-tile__meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62)); transform-origin: right center; }
.res-scope .res-tile p { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--lt-5a5f68, #5a5f68); }
.res-js .res-tile.res-arm .res-tile__meter i { transform: scaleX(0); }
.res-js .res-tile.res-arm.is-in .res-tile__meter i { transform: scaleX(1); transition: transform 1s var(--ease) .2s; }

/* every other bullet list in a report: one soft box per item instead of a plain bulleted run */
.res-scope :is(.card, .prose, .neo-panel, .mpt-panel) ul:not(.neo-chips):not(.neo-timeline):not(.neo-steps):not(.res-tiles):not(.oop-chip-row):not(.mpt-limits) {
  display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none;
}
.res-scope :is(.card, .prose, .neo-panel, .mpt-panel) ul:not(.neo-chips):not(.neo-timeline):not(.neo-steps):not(.res-tiles):not(.oop-chip-row):not(.mpt-limits) > li:not(.neo-week) {
  position: relative; margin: 0; padding: 12px 16px; padding-inline-start: 40px; border-radius: 16px; list-style: none;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(0, 0, 0, .06); line-height: 1.95;
}
.res-scope .card:not([class*="card--"]) ul > li:not(.neo-week) { background: var(--lc-f5faf6, #f5faf6); border-color: var(--res-line); }
.res-scope :is(.card, .prose, .neo-panel, .mpt-panel) ul:not(.neo-chips):not(.neo-timeline):not(.neo-steps):not(.res-tiles) > li:not(.neo-week)::before {
  content: ''; position: absolute; inset-inline-start: 14px; top: calc(.975em + 6px); inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: currentColor; opacity: .38; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); transform: none;
}

/* the single peach "real finding" moment (special notes) */
.res-scope .prose blockquote {
  position: relative; margin: var(--space-md) 0; padding: 22px 26px; border: 1px solid rgba(93, 42, 26, .14); border-radius: 22px;
  background: linear-gradient(160deg, var(--lc-fff4ec, #fff4ec), var(--res-peach)); color: var(--accent-ink); box-shadow: 0 24px 46px -34px rgba(93, 42, 26, .5);
}
.res-scope .prose blockquote p { color: var(--accent-ink); font-size: 15.5px; }

/* ---------- Bars ---------- */
.res-scope .dim-bars { gap: 18px; }
.res-scope .dim-bar__label { font-weight: 600; }
.res-scope .dim-bar__value { font-size: 14px; font-weight: 700; color: var(--res-green-deep); font-variant-numeric: tabular-nums; }
.res-scope .dim-bar__track { height: 12px; background: rgba(36, 74, 57, .08); box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.res-scope .dim-bar__fill { box-shadow: 0 4px 10px -4px currentColor; transform-origin: right center; }
.res-scope .bm-radar-wrap svg { filter: drop-shadow(0 18px 24px rgba(36, 74, 57, .18)); }

/* ---------- Saved-result page (page-account-result.php): the bot-formatted tier pages ---------- */
.res-account { display: grid; gap: var(--space-md); }
.res-account-head, .res-account-neo { margin-bottom: var(--space-md); }
.res-tier__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.res-scope .res-tier__title { margin: 0; font-size: clamp(18px, 2.6vw, 22px); color: inherit; }
.res-tier__badge { padding: .25em .9em; border-radius: var(--r-pill); background: rgba(255,255,255,.75); border: 1px solid var(--res-line); color: var(--res-green-deep); font-size: 12.5px; font-weight: 700; }
.res-tier__badge.is-locked { background: var(--lc-fff7f1, #fff7f1); color: var(--accent-ink); border-color: rgba(93, 42, 26, .18); }
.res-scope .res-tier__note { margin: 0 0 12px; font-size: 14px; color: inherit; opacity: .85; }
.res-tier__page { padding: 14px 0; border-bottom: 1px dashed rgba(0,0,0,.12); font-size: 15px; line-height: 2; white-space: pre-wrap; }
.res-tier__page:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Specialist opinion, structured sections (SPECIALIST-OPINION-REPORT-PLAN.md Phase 4) ---------- */
.res-tier__sections { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.res-tier__sec { display: flex; align-items: flex-start; gap: 12px; }
.res-tier__sec-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--lc-e6e1f5, #E6E1F5); color: var(--lt-3d3266, #3D3266); font-size: 16px; }
.res-scope .res-tier__sec-title { margin: 0 0 4px; font-size: 15px; color: inherit; }
.res-tier__sec-text { margin: 0; font-size: 15px; line-height: 1.95; white-space: pre-wrap; color: inherit; }
.res-scope .res-tier--locked { background: repeating-linear-gradient(135deg, var(--lc-fbfdfb, #fbfdfb) 0 14px, var(--lc-f4faf6, #f4faf6) 14px 28px); border: 1.5px dashed rgba(77, 124, 98, .4); box-shadow: none; }
.res-scope .res-tier--locked::before { opacity: .35; }
.res-scope .res-tier--locked .res-tier__title, .res-scope .res-tier--locked .res-tier__note { color: var(--lt-4b4f58, #4b4f58); }

/* ---------- Honest limits (never hidden or shrunk) ---------- */
.res-limits, .res-scope .test-disclaimer {
  display: flex; align-items: flex-start; gap: 12px; margin: var(--space-md) 0; padding: 16px 20px; border-radius: 20px;
  background: var(--lc-fffaf5, #fffaf5); border: 1px dashed rgba(93, 42, 26, .32); color: var(--lt-5a4033, #5a4033); font-size: 14.5px; line-height: 1.95;
}
.res-limits__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--res-peach); color: var(--accent-ink); }
.res-limits__icon .res-i { width: 20px; height: 20px; }
.res-limits__body strong { display: block; margin-bottom: 2px; color: var(--accent-ink); }
.res-scope .sci-note { margin: var(--space-sm) 0 var(--space-md); padding-inline-start: 14px; border-inline-start: 3px solid var(--res-peach); font-size: 13.5px; color: var(--lt-6b6f78, #6b6f78); }

/* ---------- Next step band ---------- */
.res-next {
  position: relative; overflow: hidden; margin: clamp(40px, 6vw, 64px) 0 var(--space-lg); padding: clamp(24px, 4vw, 40px); border-radius: 28px; color: var(--lt-ffffff, #fff);
  background: radial-gradient(700px 320px at 85% -10%, rgba(159,224,191,.28), transparent 60%), radial-gradient(560px 300px at 5% 110%, rgba(251,225,209,.18), transparent 60%), linear-gradient(160deg, var(--lc-1d4433, #1d4433), var(--lc-0f2a1f, #0f2a1f));
  box-shadow: 0 36px 60px -34px rgba(15, 42, 31, .8);
}
.res-scope .res-next .res-next__title { margin: 0 0 6px; color: var(--lt-ffffff, #fff); font-size: clamp(22px, 3.4vw, 30px); }
.res-scope .res-next .res-next__title::before { content: none; }
.res-next__sub { margin: 0 0 var(--space-md); color: rgba(255,255,255,.78); font-size: 15.5px; }
.res-next .test-cta { margin: 0 0 var(--space-md); }
.res-next .test-cta:last-child { margin-bottom: 0; }
.res-next .test-cta__intro { margin: 0 0 var(--space-md); color: rgba(255,255,255,.9); font-size: 16px; font-weight: 500; line-height: 1.95; }
.res-next .contact-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; grid-auto-rows: 1fr; align-items: stretch; }
.res-next .card { display: flex; flex-direction: column; padding: 22px; }
.res-next .card p { flex: 1; margin: 0 0 14px; font-size: 14.5px; }
.res-next .card h3 { margin: 0 0 6px; font-size: 17.5px; }
.res-next .card:hover { transform: translateY(-4px); }
.res-next .test-disclaimer, .res-next .res-limits { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.88); }
.res-next .res-limits__body strong { color: var(--lt-ffffff, #fff); }
.res-next .res-limits__icon { background: rgba(255,255,255,.14); color: var(--lt-ffffff, #fff); }


/* ---------- Version label: base / smart / specialist (NEO, MBTI, MPT) ---------- */
/* base = amber dot, smart = green dot, both pulsing (transform + opacity only); specialist = quiet lavender */
@keyframes res-pulse { 0% { transform: scale(1); opacity: .65; } 70%, 100% { transform: scale(2.7); opacity: 0; } }
.res-tier-pill {
  --dot: var(--lc-e8a100, #e8a100);
  position: relative; display: inline-flex; align-items: center; gap: .5em; padding: .25em .95em; border-radius: 999px; font-family: var(--font); font-size: 12.5px; font-weight: 700; line-height: 1.6; white-space: nowrap;
  background: var(--lc-ffffff, #fff); color: var(--lt-5b4300, #5b4300); border: 1px solid rgba(232, 161, 0, .45);
}
.res-tier-pill::before { content: ''; flex: none; inline-size: .6em; block-size: .6em; border-radius: 50%; background: var(--dot); }
.res-tier-pill--base::after, .res-tier-pill--smart::after {
  content: ''; position: absolute; inset-inline-start: .95em; inset-block-start: 50%; inline-size: .6em; block-size: .6em; margin-block-start: -.3em; border-radius: 50%;
  background: var(--dot); pointer-events: none; animation: res-pulse 1.9s ease-out infinite;
}
.res-tier-pill--smart { --dot: var(--lc-1fa35a, #1fa35a); background: var(--lc-dff5e3, #DFF5E3); color: var(--lt-14532d, #14532D); border-color: rgba(20, 83, 45, .28); }
.res-tier-pill--specialist { --dot: var(--lc-7a6bc4, #7a6bc4); background: var(--lc-e6e1f5, #E6E1F5); color: var(--lt-3d3266, #3D3266); border-color: rgba(61, 50, 102, .25); }
.res-tier-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; font-size: 13.5px; }
.res-tier-line__go { color: var(--lt-244a39, #244a39); font-weight: 700; border-bottom: 1.5px dashed currentColor; }
.res-tier-line__note { max-width: 46ch; color: var(--lt-6b6f78, #6b6f78); font-size: 12.5px; line-height: 1.8; }
.res-scope > .res-tier-line { margin-top: 4px; }
/* full-version discovery (docs/FULL-VERSION-DISCOVERY-PLAN.md phases 0-1): hero button + floating bar */
.res-tier-line__go--btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 0; border-radius: var(--r-pill, 999px); background: var(--ink); color: var(--on-ink); font-weight: 700; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55); animation: res-go-pulse 2.8s ease-in-out infinite; }
.res-tier-line__go--btn .res-i { width: 16px; height: 16px; }
@keyframes res-go-pulse { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .res-tier-line__go--btn { animation: none; } }
.res-fullbar { position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 60; display: flex; align-items: stretch; gap: 6px; max-width: 520px; margin-inline: auto; transform: translateY(0); transition: transform .3s ease, opacity .3s ease; }
.res-fullbar[hidden] { display: none; }
.res-fullbar__go { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 18px; background: var(--ink); color: var(--on-ink); font: inherit; text-align: start; cursor: pointer; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); }
.res-fullbar__go .res-i { width: 22px; height: 22px; flex: none; }
.res-fullbar__go span { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.res-fullbar__go strong { font-size: 13.5px; font-weight: 600; opacity: .85; }
.res-fullbar__go em { font-style: normal; font-size: 15px; font-weight: 800; }
.res-fullbar__x { width: 38px; border: 0; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: 20px; line-height: 1; cursor: pointer; opacity: .8; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); }
@media print { .res-fullbar { display: none !important; } }
/* «تست‌های من»: the pill sits in the card's top corner, just beside the trash button (which is at left: 8px, 30px wide) */
/* both share the vertical centre of the 50px icon (card padding + 25px) so the row reads as one line */
.test-history-card .test-history-card__delete, .test-history-card .res-tier-pill { top: calc(var(--space-md) + 25px); transform: translateY(-50%); }
.test-history-card .res-tier-pill { position: absolute; left: 46px; margin: 0; padding: .1em .8em; font-size: 11.5px; z-index: 1; }
.test-history-card .res-tier-pill--base::after, .test-history-card .res-tier-pill--smart::after { inset-inline-start: .8em; }

/* the smart-version offer (PHP gate: maghzeto_render_ai_tier_gate) — its own section right after the report */
.res-upgrade { margin: clamp(32px, 5vw, 56px) 0 var(--space-md); }
.res-upgrade [id$="-ai-gate"] { margin: 0; }
/* a result that must not carry a sales offer (MPT crisis screen): test-mindprofile.js marks the gate */
[data-suppressed] { display: none !important; }
.res-upgrade:has(> [data-suppressed]) { display: none; }
/* the specialist-review card as the first card of «قدم بعدی» */
.res-next > [id$="-advanced-cta"] { margin: 0 0 var(--space-md, 20px); }
.res-next > [id$="-advanced-cta"] .test-intro-card { margin-top: 0 !important; border-radius: 22px; }
.res-next > [id$="-advanced-cta"] .btn--link { display: block; margin: 8px auto 0; }
.is-pulse { animation: res-pulse 1.4s ease-out 2; }
@keyframes res-pulse { 0% { box-shadow: 0 0 0 0 rgba(159, 224, 191, .8); } 100% { box-shadow: 0 0 0 22px rgba(159, 224, 191, 0); } }
@media (prefers-reduced-motion: reduce) { .is-pulse { animation: none; } }
.res-scope .res-upgrade-card {
  margin: 0 !important; padding: clamp(22px, 4vw, 38px);
  background: radial-gradient(620px 300px at 100% -20%, rgba(159, 224, 191, .35), transparent 65%), radial-gradient(520px 260px at 0% 120%, rgba(251, 225, 209, .55), transparent 65%), var(--lc-ffffff, #fff);
  border-color: rgba(77, 124, 98, .28); box-shadow: 0 34px 60px -34px rgba(36, 74, 57, .55);
}
.res-upgrade__eyebrow { display: inline-block; margin-bottom: 10px; padding: .3em 1em; border-radius: var(--r-pill); background: var(--res-mint); color: var(--res-green-deep); font-size: 12.5px; font-weight: 700; }
.res-scope .res-upgrade__title { margin: 0 0 18px; font-size: clamp(22px, 3.6vw, 32px); line-height: 1.5; color: var(--res-green-dark); }
.res-upgrade__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.res-scope .res-upgrade__intro { margin: 0 0 14px; font-size: 16px; line-height: 2; color: var(--lt-3a3e46, #3a3e46); }
.res-upgrade__list { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.res-upgrade__list li { position: relative; padding: 12px 16px; padding-inline-start: 46px; border-radius: 16px; background: rgba(223, 245, 227, .55); border: 1px solid var(--res-line); color: var(--lt-24352c, #24352c); font-size: 15px; line-height: 1.9; }
.res-upgrade__list li::before {
  content: ''; position: absolute; inset-inline-start: 13px; top: 13px; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--res-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.res-upgrade__facts { display: grid; gap: 6px; margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px dashed rgba(0, 0, 0, .14); }
.res-upgrade__facts li { position: relative; padding-inline-start: 22px; color: var(--lt-5a5f68, #5a5f68); font-size: 13.5px; line-height: 1.9; }
.res-upgrade__facts li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .75em; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--res-green); opacity: .6; }
.res-upgrade__buy { padding: clamp(18px, 3vw, 26px); border-radius: 22px; background: linear-gradient(160deg, var(--lc-f4fbf6, #f4fbf6), var(--lc-e3f5e8, #e3f5e8)); border: 1px solid var(--res-line); box-shadow: 0 22px 40px -30px rgba(36, 74, 57, .6); }
.res-upgrade__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 14px; color: var(--lt-4b6b5a, #4b6b5a); font-size: 14px; }
.res-upgrade__price strong { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; color: var(--res-green-deep); }
.res-upgrade__code { margin: 6px 0 0; }
.res-upgrade__code label { font-size: 13px; color: var(--lt-4b6b5a, #4b6b5a); }
.res-upgrade__code input { min-height: 42px; padding: 8px 14px; border: 1px solid var(--res-line); border-radius: 14px; background: var(--lc-ffffff, #fff); }
.res-scope .res-upgrade__buy .btn--ghost { min-height: 42px; padding: .4em 1.1em; font-size: 14px; }
.res-upgrade__secure { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--lt-6b7d72, #6b7d72); }
@media (max-width: 760px) { .res-upgrade__grid { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
@property --res-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes res-beam-spin { to { --res-beam: 360deg; } }
.res-scope .btn, .res-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 46px;
  padding: .65em 1.6em; border-radius: var(--r-pill); font-family: var(--font); font-size: 15.5px; font-weight: 700; line-height: 1.3; text-align: center;
  border: 1px solid transparent; color: var(--lt-ffffff, #fff); cursor: pointer; text-decoration: none;
  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), box-shadow var(--dur) var(--ease);
}
.res-scope .btn:hover, .res-btn:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); }
.res-scope .btn:active, .res-btn:active { transform: none; }
.res-scope .btn:focus-visible, .res-btn:focus-visible, .res-toc a:focus-visible, .res-scope a:focus-visible, .res-scope summary:focus-visible { outline: 3px solid var(--res-peach); outline-offset: 3px; }
.res-scope .btn--ghost, .res-btn--ghost { background: var(--lc-ffffff, #fff); color: var(--res-green-deep); border-color: rgba(36,74,57,.28); box-shadow: 0 8px 18px -14px rgba(36,74,57,.5); }
.res-scope .btn--ghost:hover, .res-btn--ghost:hover { background: var(--res-mint); border-color: rgba(36,74,57,.4); }
.res-scope .btn--block { display: flex; width: 100%; }
/* the primary action inside a card gets the travelling beam on hover (quiet: never animates at rest) */
.res-scope .card .btn--block.btn--ghost { color: var(--lt-ffffff, #fff); border-color: transparent; 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); }
.res-scope .card .btn--block.btn--ghost:hover { background: linear-gradient(135deg, var(--lc-6aa688, #6aa688), var(--lc-46866a, #46866a) 48%, var(--lc-2f6b50, #2f6b50) 100%); }
.res-scope .card .btn--block.btn--ghost::before {
  content: ''; position: absolute; inset: -2.5px; z-index: -1; border-radius: inherit; padding: 2.5px; opacity: 0; transition: opacity var(--dur) var(--ease);
  background: conic-gradient(from var(--res-beam), transparent 0 58%, var(--lc-9fe0bf, #9fe0bf) 76%, var(--lc-ffffff, #fff) 86%, var(--lc-fbe1d1, #FBE1D1) 92%, 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: res-beam-spin 3.4s linear infinite;
}
.res-scope .card .btn--block.btn--ghost:hover::before, .res-scope .card .btn--block.btn--ghost:focus-visible::before { opacity: 1; }
.res-scope .hero__actions { margin-top: var(--space-md); gap: 10px 12px; }
/* secondary action under the primary send button («متخصص دیگری انتخاب می‌کنم»): centred, quiet, clearly not a second primary */
.mz-alt-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 8px 18px; min-height: 40px;
  font-family: var(--font); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--res-green-deep, var(--lt-244a39, #244a39));
  background: transparent; border: 1px dashed rgba(36,74,57,.38); border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mz-alt-link[hidden] { display: none; }
.mz-alt-link svg { flex: none; opacity: .8; transition: transform var(--dur) var(--ease); }
.mz-alt-link:hover { background: var(--res-mint, var(--lc-e6f3ec, #e6f3ec)); border-style: solid; border-color: rgba(36,74,57,.5); transform: translateY(-1px); }
.mz-alt-link:hover svg { transform: scale(1.12); }
.mz-alt-link:active { transform: none; }
.mz-alt-link:focus-visible { outline: 3px solid var(--res-peach, var(--lc-fbe1d1, #FBE1D1)); outline-offset: 3px; }

/* ---------- Report folds: base / smart (2026-09-22) ----------
   Once the smart tier is unlocked, both the base narrative someone already read before buying AND the newly-
   unlocked "تفسیر کامل" become their own collapsible block -- base closed by default (kept deliberately plain,
   white surface, no card-family tint, so it reads as "the free version"), smart open by default (a light sky
   tint, echoing .card--sky, so it reads as the paid one) but foldable the same way once someone's read it.
   Built by result.js's buildFolds() around whatever a renderer marks data-res-fold="base"/"smart".
   Collapsed height uses the grid-template-rows 0fr/1fr technique (no JS measuring). */
.res-basefold { margin: var(--space-md) 0; border: 1px solid var(--res-line); border-radius: 20px; background: var(--card); }
.res-basefold__toggle {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border: 0; border-bottom: 1px solid transparent;
  background: none; cursor: pointer; text-align: start; font-family: var(--font); border-radius: 20px;
  transition: border-color var(--dur) var(--ease);
}
.res-basefold.is-open .res-basefold__toggle { border-bottom-color: var(--res-line); border-radius: 20px 20px 0 0; }
.res-basefold__badge {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(135deg, var(--res-mint), var(--lc-eefaf1, #eefaf1)); color: var(--res-green-deep);
  box-shadow: inset 0 0 0 1px var(--res-line); transition: transform var(--dur) var(--ease);
}
.res-basefold__badge .res-i { width: 21px; height: 21px; }
.res-basefold__toggle:hover .res-basefold__badge { transform: scale(1.07) rotate(-4deg); }
.res-basefold__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-basefold__text strong { font-size: 15.5px; color: var(--ink); }
.res-basefold__text span { font-size: 13px; line-height: 1.7; color: var(--muted); }
.res-basefold__chevron {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--res-green-deep); background: var(--res-mint);
}
.res-basefold__chevron .res-i { transition: transform var(--dur) var(--ease); }
.res-basefold.is-open .res-basefold__chevron .res-i { transform: rotate(180deg); }
.res-basefold__toggle:focus-visible { outline: 3px solid var(--res-peach); outline-offset: -3px; }
.res-basefold__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.res-basefold.is-open .res-basefold__panel { grid-template-rows: 1fr; }
.res-basefold__body { overflow: hidden; min-height: 0; }
.res-scope .res-basefold__body > .prose { padding: 18px 20px 22px; margin: 0; }
.res-scope .res-basefold__body > .prose > *:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .res-basefold__panel, .res-basefold__toggle, .res-basefold__badge, .res-basefold__chevron .res-i { transition: none; }
}
/* smart fold: same mechanics, a quiet sky tint so it still reads as "the paid one" once it's foldable too */
.res-basefold--smart { border-color: rgba(27, 73, 101, .18); background: linear-gradient(160deg, var(--lc-f4fafd, #f4fafd), var(--lc-eaf5fb, #eaf5fb)); }
.res-basefold--smart.is-open .res-basefold__toggle { border-bottom-color: rgba(27, 73, 101, .18); }
.res-basefold--smart .res-basefold__badge { background: linear-gradient(135deg, var(--lc-dceef7, #DCEEF7), var(--lc-c9e8f5, #c9e8f5)); color: var(--lt-1b4965, #1B4965); box-shadow: inset 0 0 0 1px rgba(27, 73, 101, .18); }
.res-basefold--smart .res-basefold__chevron { background: var(--lc-dceef7, #DCEEF7); color: var(--lt-1b4965, #1B4965); }
.res-basefold--smart .res-basefold__text strong { color: var(--lt-163a52, #163a52); }

/* the locked smart fold's title carries a small inline lock next to the text (2026-09-22) -- currentColor
   picks up whatever .res-basefold__text strong is already set to, light or dark, no extra override needed */
.res-basefold__lock { display: inline-flex; vertical-align: -3px; margin-inline-start: 6px; opacity: .85; }
.res-basefold__lock .res-i { width: 15px; height: 15px; }
/* the real purchase gate (PHP: maghzeto_render_ai_tier_gate), moved whole into the locked fold's body by
   buildLockedFold -- it already carries its own card look (.res-upgrade-card), so only a little breathing
   room is needed here, not another layer of card chrome */
.res-scope .res-basefold__body > [id$="-ai-gate"] { padding: 10px 16px 18px; }

/* ---------- Paid-tier gates that sit under the result (PHP: maghzeto_render_ai_tier_gate & co.) ---------- */
.res-scope .test-intro-card {
  position: relative; overflow: hidden; padding: clamp(20px, 3.2vw, 32px); border-radius: 24px; border: 1px solid var(--res-line);
  background: var(--lc-ffffff, #fff); box-shadow: 0 24px 46px -34px rgba(36, 74, 57, .4); text-align: start;
}
.res-scope .test-intro-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--res-bar); }
.res-scope .test-intro-card .h3-scale { font-size: clamp(19px, 2.8vw, 24px); color: var(--res-green-dark); }
/* a wider column for a finished report (the quiz itself stays narrow) */
.mpt-narrow:has(.res-ready) { max-width: 920px; }

/* ---------- Locked / paid preview ---------- */
.res-scope .neo-locked, .res-scope .mpt-locked {
  border: 1.5px dashed rgba(77, 124, 98, .4); border-radius: 22px; background: repeating-linear-gradient(135deg, var(--lc-fbfdfb, #fbfdfb) 0 14px, var(--lc-f4faf6, #f4faf6) 14px 28px);
}

/* ---------- Motion (only when result.js added .res-js, i.e. reduced-motion is off) ---------- */
.res-js .res-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--res-d, 0ms); }
.res-js .res-rv.is-in { opacity: 1; transform: none; }
.res-js .dim-bar.res-arm .dim-bar__fill { transform: scaleX(0); }
.res-js .dim-bar.res-arm.is-in .dim-bar__fill { transform: scaleX(1); transition: transform 1s var(--ease) .15s; }
.res-js .bm-radar-wrap.res-arm .bm-radar { opacity: 0; transform: scale(.86) rotate(-6deg); }
.res-js .bm-radar-wrap.res-arm.is-in .bm-radar { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); }
/* once a result is on screen the quiz card around it stops being a card of its own */
.test-quiz:has([data-step="result"]:not([hidden]) .res-ready) { padding: 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
.res-confetti { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9999; pointer-events: none; width: 100%; height: 100%; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .res-tiles { grid-template-columns: 1fr; }
  .res-hero { border-radius: 22px; padding: 26px 18px; }
  .res-scope .card { border-radius: 20px; padding: 20px 18px; }
  .res-scope .prose > h2::before { width: 34px; height: 34px; font-size: 15px; }
  .res-next { border-radius: 22px; padding: 24px 18px; }
  .res-scope .btn { min-height: 50px; }
  .res-scope .hero__actions .btn { flex: 1 1 100%; }
  .res-toc, .res-scope .neo-toc, .res-scope .mpt-toc { border-radius: 16px; padding: 6px; }
  .res-limits, .res-scope .test-disclaimer { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) { .res-tier-pill::after { animation: none; opacity: 0; } }

/* ---------- Print: clean, no chrome ---------- */
@media print {
  .res-toc, .res-hero__bg, .res-fx, .res-confetti, .res-next .contact-grid, .res-next__sub, .res-noprint { display: none !important; }
  .res-js .res-rv, .res-js .dim-bar__fill, .res-js .bm-radar { opacity: 1 !important; transform: none !important; }
  .res-hero, .res-scope .card, .res-scope .neo-report__head, .res-scope .mpt-report__head, .res-scope .prose blockquote { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .res-next { background: var(--lc-ffffff, #fff) !important; color: var(--lt-17191c, #17191C) !important; box-shadow: none; border: 1px solid var(--lc-cccccc, #ccc); }
  .res-next .test-cta__intro, .res-scope .res-next .res-next__title { color: var(--lt-17191c, #17191C) !important; }
  .res-scope .card::after { display: none; }

  /* Browser «ذخیره‌ی PDF / چاپ» on any result page (same fixes assets/pdf-print.css makes for the server-made PDF, which
     only apply under body.pdf-mode). Without them the screen layout (sidebar, fixed-width containers, the off-screen
     skip-link in this RTL page) is wider than the paper, so Chrome cuts the report off on the left instead of centring it. */
  html, body { background: var(--lc-ffffff, #fff) !important; color: var(--lt-17191c, #17191c); overflow-x: clip !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
  .skip-link, .screen-reader-text { display: none !important; }
  header, .site-header, footer, .site-footer, .announce, #maghzeto-chat, .chat-widget, #maghzeto-auth-modal, .mnav, [class*="mobile-nav"],
  .account-sidebar, .account-nav-list, .breadcrumbs, .rank-math-breadcrumb, .theme-toggle, .res-share, .res-share-top, .shr-modal, .res-upgrade,
  .maghzeto-purchase-gate, [id$="-ai-gate"], [id$="-cta"], .mz-saved, .maghzeto-fb, .fb-modal, .mz-pr, [class*="feedback-pop"], .mpt-hero, .mpt-marketing, .mpt-sticky,
  .neo-toc, .mpt-toc, .test-cta, .hero__actions, .res-tier-line, main button, main .btn { display: none !important; }
  .container, main, .account-shell, .account-content, .section, .account-section, .test-quiz {
    max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important;
    grid-template-columns: none !important; float: none !important; position: static !important; transform: none !important; overflow: visible !important;
  }
  .res-scope { max-width: none !important; width: 100% !important; margin-inline: 0 !important; float: none !important; transform: none !important; overflow: visible !important; }
  .res-scope *, .res-scope *::before, .res-scope *::after { text-shadow: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important; }
  .res-scope .card { padding: 12px 14px !important; margin-bottom: 10px !important; }
  .res-scope .two-col-grid, .res-scope .sys-grid, .res-scope .contact-grid { display: block !important; }
  .res-scope .two-col-grid > *, .res-scope .sys-grid > * { margin: 0 0 8px !important; width: auto !important; }
  .res-scope svg, .res-scope img { max-width: 100% !important; height: auto; }
  .res-scope .reveal, .res-scope .res-rv, .res-scope .res-arm { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  /* a collapsed fold is a real layout collapse (grid-template-rows: 0fr), not just a visual one -- printing/PDF
     must never lose content someone just hasn't clicked open yet, so both folds force open here regardless
     of on-screen state (NEO's own "ذخیره‌ی PDF" button prints straight from the live DOM) */
  .res-basefold__panel { grid-template-rows: 1fr !important; }
  .res-basefold__body { overflow: visible !important; }
  .res-basefold__toggle { display: none !important; }
}

/* safety pointer (board B10/B11) */
.res-safety { margin: 28px 0 8px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(160deg, var(--lc-fff4ec, #fff4ec), var(--res-peach)); color: var(--accent-ink); border: 1px solid rgba(93, 42, 26, .18); }
.res-safety strong { display: block; margin-bottom: 4px; }
.res-safety p { margin: 0; line-height: 1.9; font-size: 14.5px; }

/* 2026-10-03: an OPEN «تفسیر کامل» fold made the whole report wider than the phone. The fold's panel is a one-column grid whose
   implicit `auto` track grew to the min-content of the chip nav inside (nowrap list, ~860px) because the open body is overflow:visible
   (the chips are sticky) and had min-width:auto. A 0-minimum track + min-width:0 keep it inside the column; the chips still scroll
   sideways inside their own box. Same classes serve NEO / MBTI / MPT, so all three are covered. */
.res-basefold__panel { grid-template-columns: minmax(0, 1fr); }
.res-basefold__body { min-width: 0; }

/* phase 2: bridge card at the end of the base report */
.res-bridge { margin: 22px 0 6px; padding: 18px 20px; border: 1px dashed var(--res-green); border-radius: 20px; background: var(--card); }
.res-bridge__title { display: block; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.res-bridge__lead { margin: 0 0 10px; font-size: 14px; opacity: .85; }
.res-bridge__list { margin: 0 0 8px; padding-inline-start: 20px; font-size: 14px; line-height: 1.8; }
.res-bridge__more { display: block; margin-bottom: 12px; font-size: 13px; opacity: .7; }
.res-bridge__go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: var(--r-pill, 999px); background: var(--ink); color: var(--on-ink); font: inherit; font-weight: 700; cursor: pointer; }
.res-bridge__go .res-i { width: 16px; height: 16px; }
@media print { .res-bridge { display: none !important; } }
.test-history-card__fullhint { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: var(--r-pill, 999px); background: var(--ink); color: var(--on-ink); font-size: 12.5px; font-weight: 700; }

/* ---------- Hero card v2 (2026-10-13): light = «هاله‌ی نفس», dark / report heads = «شب سبز» ----------
 * result.js (buildFx) drops one decorative .res-fx layer into every .res-hero and into the dark report slabs
 * (.neo-report__head / .mpt-report__head, class .res-fx--night). Everything is aria-hidden, pointer-events none,
 * transform/opacity only. Light theme shows pattern + breathing rings + rising dust; dark theme (and the report slabs,
 * which are dark in both themes) shows glowing pattern + top glow + cursor spotlight + brain wave.
 * Pattern tiles are the home hero's own (hero-pattern.svg / hero-twinkle-*.svg / hero-wave.svg). Preview + rationale:
 * docs/result-hero-preview/index.html (variants B and C). Font on these cards is Shabnam. */
.res-scope .res-hero, .res-scope .res-hero *, .res-scope .neo-report__head.card, .res-scope .neo-report__head.card *, .res-scope .mpt-report__head.card, .res-scope .mpt-report__head.card * { font-family: 'Shabnam', 'Vazirmatn', sans-serif; }
.res-scope .res-hero h1, .res-scope .res-hero h2, .res-scope .neo-report__head.card h2, .res-scope .mpt-report__head.card h2 { font-weight: 700; }
.res-hero { background: radial-gradient(ellipse at 50% 40%, var(--lc-ffffff, #ffffff) 0%, var(--lc-eef8f1, #eef8f1) 70%, var(--lc-e6f2ea, #e6f2ea) 100%); }
.res-hero__bg { display: none; }   /* the old two orbs are replaced by .res-fx */

.res-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --fx-ink: 42, 67, 53; --fx-glow: 232, 150, 108; }
.res-fx > * { position: absolute; }
.res-fx__pat { inset: 0; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.5) 62%, var(--lc-000000, #000000) 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.5) 62%, var(--lc-000000, #000000) 100%); }
.res-fx__pat i {
  position: absolute; inset: -400px; display: block; background: rgb(var(--fx-ink)); opacity: .07; will-change: transform;
  -webkit-mask: url("hero-pattern.svg") 0 0 / 400px 400px repeat; mask: url("hero-pattern.svg") 0 0 / 400px 400px repeat;
  animation: res-fx-drift 120s linear infinite;
}
.res-fx__pat i.tw { background: rgb(var(--fx-glow)); opacity: 0; }
.res-fx__pat i.tw { display: none; }   /* peach twinkle glows belong to the dark look only (light = variant B has none) */
.res-fx__pat i.a { -webkit-mask-image: url("hero-twinkle-a.svg"); mask-image: url("hero-twinkle-a.svg"); animation: res-fx-drift 120s linear infinite, res-fx-pulse 7s ease-in-out -1s infinite; }
.res-fx__pat i.b { -webkit-mask-image: url("hero-twinkle-b.svg"); mask-image: url("hero-twinkle-b.svg"); animation: res-fx-drift 120s linear infinite, res-fx-pulse 9s ease-in-out -4.5s infinite; }
.res-fx__pat i.c { -webkit-mask-image: url("hero-twinkle-c.svg"); mask-image: url("hero-twinkle-c.svg"); animation: res-fx-drift 120s linear infinite, res-fx-pulse 11s ease-in-out -8s infinite; }
@keyframes res-fx-drift { to { transform: translate3d(400px, 400px, 0); } }
@keyframes res-fx-drift-sm { to { transform: translate3d(320px, 320px, 0); } }
@keyframes res-fx-pulse { 0%, 100% { opacity: 0; } 40% { opacity: .42; } 75% { opacity: 0; } }   /* dark look only; soft, a few nodes at a time */

/* light only: breathing rings + dust */
.res-fx__ring { left: 50%; top: 48%; width: 520px; height: 520px; border-radius: 50%; translate: -50% -50%; will-change: transform, opacity; }
.res-fx__ring--1 { border: 1.5px solid rgba(var(--fx-ink), .2); background: radial-gradient(closest-side, rgba(159,224,191,.35), transparent); animation: res-fx-breathe 9s ease-in-out infinite; }
.res-fx__ring--2 { border: 1px solid rgba(var(--fx-ink), .13); animation: res-fx-breathe 9s ease-in-out -4.5s infinite; }
.res-fx__ring--3 { border: 1px dashed rgba(var(--fx-ink), .12); animation: res-fx-breathe 9s ease-in-out -2.2s infinite; }
@keyframes res-fx-breathe { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } }
.res-fx__dust { inset: 0 0 auto 0; height: 200%; background-repeat: repeat-y; background-size: 100% 50%; will-change: transform, opacity; animation: res-fx-rise 70s linear infinite, res-fx-glow 6s ease-in-out infinite alternate; }
.res-fx__dust--1 { background-image: radial-gradient(circle at 8% 12%, rgba(var(--fx-ink),.55) 0 1.6px, transparent 2.6px), radial-gradient(circle at 22% 41%, rgba(var(--fx-ink),.55) 0 2.2px, transparent 3px), radial-gradient(circle at 35% 78%, rgba(var(--fx-ink),.55) 0 1.5px, transparent 2.4px), radial-gradient(circle at 58% 62%, rgba(var(--fx-ink),.55) 0 1.6px, transparent 2.4px), radial-gradient(circle at 78% 51%, rgba(var(--fx-ink),.55) 0 2.2px, transparent 3px), radial-gradient(circle at 92% 84%, rgba(var(--fx-ink),.55) 0 1.5px, transparent 2.4px), radial-gradient(circle at 70% 9%, rgba(var(--fx-glow),.9) 0 2.4px, transparent 3.6px), radial-gradient(circle at 14% 90%, rgba(var(--fx-glow),.9) 0 2.2px, transparent 3.4px); }
.res-fx__dust--2 { background-image: radial-gradient(circle at 5% 55%, rgba(var(--fx-ink),.5) 0 2.8px, transparent 4px), radial-gradient(circle at 41% 66%, rgba(var(--fx-ink),.5) 0 3px, transparent 4px), radial-gradient(circle at 63% 35%, rgba(var(--fx-glow),.8) 0 2.6px, transparent 3.8px), radial-gradient(circle at 92% 58%, rgba(var(--fx-ink),.5) 0 2.4px, transparent 3.4px); animation-duration: 45s, 8s; }
@keyframes res-fx-rise { to { transform: translate3d(0, -50%, 0); } }
@keyframes res-fx-glow { from { opacity: .4; } to { opacity: 1; } }

/* night only: top glow, cursor spotlight, brain wave (hidden in light) */
.res-fx__glow, .res-fx__spot, .res-fx__wave { display: none; }

/* night = dark theme on a .res-hero, and the always-dark report slabs */
html[data-theme="dark"] .res-fx--auto, .res-fx--night { --fx-ink: 190, 225, 205; --fx-glow: 190, 238, 214; }
html[data-theme="dark"] .res-fx--auto .res-fx__ring, html[data-theme="dark"] .res-fx--auto .res-fx__dust, .res-fx--night .res-fx__ring, .res-fx--night .res-fx__dust { display: none; }
html[data-theme="dark"] .res-fx--auto .res-fx__pat, .res-fx--night .res-fx__pat { -webkit-mask-image: none; mask-image: none; }
html[data-theme="dark"] .res-fx--auto .res-fx__pat i, .res-fx--night .res-fx__pat i { opacity: .16; }
html[data-theme="dark"] .res-fx--auto .res-fx__pat i.tw, .res-fx--night .res-fx__pat i.tw { display: block; opacity: 0; }
html[data-theme="dark"] .res-fx--auto .res-fx__pat i.tw.b, .res-fx--night .res-fx__pat i.tw.b { display: none; }   /* only two of the three glow layers: fewer, calmer lights */
html[data-theme="dark"] .res-fx--auto .res-fx__glow, html[data-theme="dark"] .res-fx--auto .res-fx__spot, html[data-theme="dark"] .res-fx--auto .res-fx__wave,
.res-fx--night .res-fx__glow, .res-fx--night .res-fx__spot, .res-fx--night .res-fx__wave { display: block; }
.res-fx__glow { left: 50%; top: -80px; width: 520px; max-width: 120%; height: 260px; translate: -50% 0; background: radial-gradient(closest-side, rgba(159,224,191,.4), transparent); filter: blur(10px); animation: res-fx-glowpulse 6s ease-in-out infinite; }
@keyframes res-fx-glowpulse { 50% { opacity: .5; transform: scaleX(1.2); } }
.res-fx__spot {
  inset: 0; background: rgb(var(--fx-glow)); opacity: 0; transition: opacity .5s;
  -webkit-mask: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), var(--lc-000000, #000000), transparent), url("hero-pattern.svg") 0 0 / 400px 400px repeat;
  mask: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), var(--lc-000000, #000000), transparent), url("hero-pattern.svg") 0 0 / 400px 400px repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.res-hero:hover .res-fx__spot, .neo-report__head:hover .res-fx__spot, .mpt-report__head:hover .res-fx__spot { opacity: .75; }
.res-fx__wave { inset-inline: 0; bottom: 10px; height: 60px; direction: ltr; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--lc-000000, #000000) 18%, var(--lc-000000, #000000) 82%, transparent); mask-image: linear-gradient(90deg, transparent, var(--lc-000000, #000000) 18%, var(--lc-000000, #000000) 82%, transparent); }
.res-fx__wave i { position: absolute; inset: 0 0 0 -600px; display: block; background: rgb(var(--fx-ink)); opacity: .28; will-change: transform; -webkit-mask: url("hero-wave.svg") 0 0 / 600px 60px repeat-x; mask: url("hero-wave.svg") 0 0 / 600px 60px repeat-x; animation: res-fx-flow 22s linear infinite; }
@keyframes res-fx-flow { to { transform: translate3d(600px, 0, 0); } }

@media (max-width: 600px) {
  .res-fx__pat i { inset: -320px; -webkit-mask-size: 320px 320px; mask-size: 320px 320px; animation-name: res-fx-drift-sm; }
  .res-fx__pat i.a, .res-fx__pat i.b, .res-fx__pat i.c { animation-name: res-fx-drift-sm, res-fx-pulse; }
  .res-fx__ring { width: 380px; height: 380px; }
  .res-fx__dust--2, .res-fx__spot { display: none !important; }
}
@media (hover: none), (pointer: coarse) { .res-fx__spot { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .res-fx *, .res-fx { animation: none !important; } }

/* ---------- start-card title: typewriter + key-phrase marker (2026-10-13; result.js buildTitleFx) ----------
 * Everything hidden here is gated on .res-tw (added by JS in the same step that hides it, removed by the failsafe timer),
 * so a script failure can never leave the card empty. Letters are display:inline on purpose (Persian joining). */
.res-ch { opacity: 0; transition: opacity .25s ease; }
.res-ch.is-on { opacity: 1; }
.res-caret { display: inline; position: relative; }   /* empty inline box: it must not change the line height while it travels */
.res-caret::after { content: ''; position: absolute; inset-inline-start: -1px; top: .12em; width: 2.5px; height: 1.05em; border-radius: 2px; background: var(--res-green); animation: res-blink .8s steps(2) infinite; }
.res-caret.is-end::after { animation: res-caret-out .7s ease forwards; }
@keyframes res-blink { 50% { opacity: 0; } }
@keyframes res-caret-out { to { opacity: 0; transform: scaleY(.2); } }
.res-mk {
  background: linear-gradient(transparent 60%, rgba(159,224,191,.65) 60%, rgba(159,224,191,.65) 92%, transparent 92%) no-repeat right center / 0% 100%;
  transition: background-size 1s cubic-bezier(.3,.7,.2,1); -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 3px; padding: 0 2px;
}
.res-tw-done .res-mk { background-size: 100% 100%; }
.res-tw-done .res-mk:nth-of-type(2) { transition-delay: .35s; }
.res-tw-done .res-mk:nth-of-type(3) { transition-delay: .7s; }
.res-flash { animation: res-flash 1.4s ease-out; }
@keyframes res-flash { 0% { text-shadow: 0 0 0 rgba(159,224,191,0); } 25% { text-shadow: 0 0 22px rgba(159,224,191,.9); } 100% { text-shadow: 0 0 0 rgba(159,224,191,0); } }
.res-sp { position: absolute; width: var(--s, 12px); height: var(--s, 12px); background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; pointer-events: none; z-index: 3; animation: res-sp 1.1s ease-out forwards; animation-delay: var(--t, 0s); }
@keyframes res-sp { 0% { opacity: 0; transform: translate(0,0) scale(.2) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2) rotate(140deg); } }
/* the rest of the card waits for the title, then pops in */
.res-hero.res-tw .res-eyebrow, .res-hero.res-tw .risk-badge { opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.3,1.3); }
.res-hero.res-tw .res-lead, .res-hero.res-tw .res-hero__meta { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .6s, transform .7s cubic-bezier(.2,.9,.3,1.35); }
.res-hero.res-tw.res-tw-in .res-eyebrow, .res-hero.res-tw.res-tw-in .risk-badge, .res-hero.res-tw.res-tw-fin .res-lead, .res-hero.res-tw.res-tw-fin .res-hero__meta { opacity: 1; transform: none; }
.res-hero.res-tw-fin .test-history-card__code-copy { animation: res-wig .8s .5s ease; }
@keyframes res-wig { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(6deg) scale(1.05); } }
html[data-theme="dark"] .res-caret::after { background: rgba(159,224,191,.95); box-shadow: 0 0 10px rgba(159,224,191,.8); }
html[data-theme="dark"] .res-mk { background-image: linear-gradient(transparent 60%, rgba(159,224,191,.30) 60%, rgba(159,224,191,.30) 92%, transparent 92%); }
html[data-theme="dark"] .res-flash { animation-name: res-flash-d; }
@keyframes res-flash-d { 0% { text-shadow: 0 0 0 rgba(190,238,214,0); } 25% { text-shadow: 0 0 26px rgba(190,238,214,.85); } 100% { text-shadow: 0 0 0 rgba(190,238,214,0); } }
@media (prefers-reduced-motion: reduce) {
  .res-ch { opacity: 1; transition: none; }
  .res-hero.res-tw .res-eyebrow, .res-hero.res-tw .risk-badge, .res-hero.res-tw .res-lead, .res-hero.res-tw .res-hero__meta { opacity: 1; transform: none; transition: none; }
  .res-mk { background-size: 100% 100%; transition: none; }
}
@media print {
  .res-ch, .res-hero.res-tw .res-eyebrow, .res-hero.res-tw .risk-badge, .res-hero.res-tw .res-lead, .res-hero.res-tw .res-hero__meta { opacity: 1 !important; transform: none !important; }
  .res-mk { background-size: 100% 100% !important; }
  .res-caret, .res-sp { display: none !important; }
}
body.pdf-mode .res-ch, body.pdf-mode .res-hero.res-tw .res-eyebrow, body.pdf-mode .res-hero.res-tw .risk-badge, body.pdf-mode .res-hero.res-tw .res-lead, body.pdf-mode .res-hero.res-tw .res-hero__meta { opacity: 1 !important; transform: none !important; }
body.pdf-mode .res-mk { background-size: 100% 100% !important; }
body.pdf-mode .res-caret, body.pdf-mode .res-sp { display: none !important; }

/* result code pill: the label is never part of a selection, the code is one LTR chunk that a click/triple-click selects whole */
.res-code__label { user-select: none; -webkit-user-select: none; }
.res-code__val { direction: ltr; unicode-bidi: isolate; user-select: all; -webkit-user-select: all; cursor: text; }
.res-hero .test-history-card__code-copy { cursor: pointer; flex: none; }

/* ---------- NEO / MPT report heads wearing the shared start card (result.js unifyHeads) ---------- */
.res-scope .neo-report__head.card.res-hero, .res-scope .mpt-report__head.card.res-hero {
  display: block; text-align: center; color: inherit; border: 1px solid var(--res-line); box-shadow: var(--res-shadow);
  padding: clamp(24px, 4.5vw, 44px) clamp(20px, 4vw, 40px); border-radius: 28px;
  background: radial-gradient(ellipse at 50% 40%, var(--lc-ffffff, #ffffff) 0%, var(--lc-eef8f1, #eef8f1) 70%, var(--lc-e6f2ea, #e6f2ea) 100%);
}
/* the old decorative rings (::before) become the shared top bar; the old peach rule (::after) goes */
.res-scope .neo-report__head.card.res-hero::before, .res-scope .mpt-report__head.card.res-hero::before {
  content: ''; position: absolute; inset-block: 0 auto; inset-inline: 0; width: auto; height: 4px; aspect-ratio: auto; opacity: 1; z-index: 2;
  background: var(--res-bar); -webkit-mask-image: none; mask-image: none;
}
.res-scope .neo-report__head.card.res-hero::after, .res-scope .mpt-report__head.card.res-hero::after { display: none; }
.res-scope .neo-report__head.card.res-hero h2, .res-scope .mpt-report__head.card.res-hero h2 {
  grid-column: auto; grid-row: auto; margin: 0 0 10px; color: var(--res-green-dark);
}
.res-scope .res-hero--head p { color: var(--muted); max-width: none; }
.res-scope .res-hero--head strong { color: var(--res-green-deep); }
.res-scope .res-hero--head .res-eyebrow {
  grid-column: auto; grid-row: auto; justify-self: auto; display: inline-flex; align-items: center; gap: .5em; margin: 0 0 14px; padding: .35em 1em;
  border-radius: var(--r-pill); background: rgba(223, 245, 227, .8); border: 1px solid var(--res-line); font-size: 13.5px; font-weight: 600;
  color: var(--res-green-deep) !important;
}
.res-scope .res-hero--head .neo-noprint, .res-scope .res-hero--head .mpt-noprint { margin: 16px 0 0; }
html:not([data-theme="dark"]) .res-scope .neo-report__head.card.res-hero .btn.btn--ghost:not(:hover):not(:focus-visible),
html:not([data-theme="dark"]) .res-scope .mpt-report__head.card.res-hero .btn.btn--ghost:not(:hover):not(:focus-visible) {
  background: rgba(255, 255, 255, .75); color: var(--res-green-deep); border-color: var(--res-line);
}

/* the MBTI «تیپ شخصیتی شما» card keeps its per-type tint; it just gets the shared backdrop, font and code chip */
.type-reveal { isolation: isolate; }
.res-scope .type-reveal, .res-scope .type-reveal * { font-family: 'Shabnam', 'Vazirmatn', sans-serif; }
.type-reveal:hover .res-fx__spot { opacity: .75; }
.type-reveal__footer-code { padding: 5px 12px; }
.type-reveal__footer-copy { padding: 6px 12px; }

/* heads that are also .card: «.res-scope .card > *» (position: relative; z-index: 1) used to win over the backdrop / sparkles and put them in the flow */
.res-scope .card > .res-fx { position: absolute; inset: 0; z-index: -1; }
.res-scope .card > .res-sp { position: absolute; z-index: 3; }