/* Psychological test flow: page, test and result. Figma «Аура дизайн», page «Тест Бека — чат с Аурой (флоу)»,
   Semantic / Spacing light tokens. Markup: apps/website/src/psy-test-flow/. Chat: psy-test-flow-chat.css. */
.ptf, .ptf-page, .ptf-print {
  --ptf-bg-primary: #faf6f1; --ptf-bg-surface: #fff; --ptf-bg-secondary: #ffe5d9; --ptf-bg-tertiary: #f5ede5; --ptf-bg-secondary-3: #fdfcfa;
  --ptf-bg-brand: #f96; --ptf-bg-info: #e2f0f7; --ptf-bg-error: #fceaed; --ptf-bg-warning: #fff3e1;
  --ptf-border-secondary: #ffe5d9; --ptf-border-secondary-2: #f5ede5; --ptf-border-brand-subtle: #ffb899; --ptf-border-brand-strong: #f96;
  --ptf-content-primary: #292524; --ptf-content-primary-2: #44403c; --ptf-content-secondary: #57534e; --ptf-content-tertiary: #78716c;
  --ptf-content-placeholder: #6b5f50; --ptf-content-accent: #f96; --ptf-content-accent-2: #cc4414; --ptf-content-static-white: #fafaf9;
  --ptf-state-warning: #ffb347; --ptf-state-warning-bg: #fff7e5; --ptf-state-warning-text: #9a5b14;
  --ptf-state-success-bg: #e4f1e4; --ptf-state-success-text: #2d9b58; --ptf-state-error: #e85d75; --ptf-state-error-text: #a22d40;
  --ptf-emotional-growth: #6bc9a8; --ptf-emotional-energy: #ffbf00;
  /* Flower of the Aura logo: the calm colours of the chat result card (r g b for alpha variants). */
  --ptf-logo-teal: 108 176 181; --ptf-logo-green: 145 189 128; --ptf-logo-sand: 234 207 149; --ptf-logo-coral: 255 103 94; --ptf-logo-lilac: 210 152 208;
  --ptf-gradient-accent: linear-gradient(70deg, #ffa937 29.66%, #ff7167 89.1%, #ff2aa3 100%);
  --ptf-gradient-solid: linear-gradient(135deg, #f96 0%, #ffb08a 100%);
  --ptf-shadow-sm: 0 1px 3px 0 rgba(255, 153, 102, .08), 0 1px 2px -1px rgba(255, 153, 102, .06);
  --ptf-shadow-hover: 0 8px 10px -6px rgba(255, 153, 102, .12), 0 20px 25px -5px rgba(255, 153, 102, .15);
  --ptf-font: Manrope, "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ptf, .ptf *, .ptf-print, .ptf-print * { box-sizing: border-box; }
.ptf :where(p, h2, h3, ol, ul, li, fieldset, legend), .ptf-print :where(p, h2, h3, ul, li) { margin: 0; padding: 0; }
.ptf :where(ol, ul), .ptf-print ul { list-style: none; }
.ptf [hidden], .ptf-print [hidden] { display: none !important; }
.ptf { font: 500 16px/24px var(--ptf-font); color: var(--ptf-content-primary); text-align: left; }
.ptf :focus-visible { outline: 2px solid var(--ptf-border-brand-strong); outline-offset: 2px; }

/* ── Page (Figma screen 1) ─────────────────────────────────────────────── */
/* blog.css paints the article page white and pads <main> with !important. */
html:has(body.ptf-page), html body.ptf-page, html body.ptf-page .app-wrap { background: var(--ptf-bg-primary) !important; }
html body.ptf-page main.container-lg { margin-top: 0 !important; padding-top: 0 !important; }
/* Sticky progress needs a scrolling document and a static site header. */
html:has(body.ptf-page), body.ptf-page { overflow-x: clip; overflow-y: visible; scroll-padding-top: 0; }
.ptf-page .header { position: relative !important; }
.ptf-page .app-wrap { overflow: visible; }
.ptf-page .ptf-page-header, .ptf-page main.container-lg { padding-inline: 16px; }
.ptf-page .ptf-page-header { padding-top: 16px; }
.ptf-shell { max-width: 760px; margin-inline: auto; }
.ptf-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12px/14px var(--ptf-font); color: var(--ptf-content-tertiary); }
.ptf-breadcrumbs a { color: inherit; text-decoration: none; }
.ptf-breadcrumbs a:hover { text-decoration: underline; }
.ptf-title { margin: 16px 0 0; font: 700 26px/34px var(--ptf-font); color: var(--ptf-content-primary); }
.ptf { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-bottom: 32px; }
.ptf-lead { color: var(--ptf-content-secondary); }
.ptf-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.ptf-promise { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--ptf-bg-secondary); font-size: 14px; line-height: 20px; }
.ptf-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 14px; color: var(--ptf-content-tertiary); }
.ptf-icon { display: block; flex: none; margin: 0; border: 0; box-shadow: none; }
.ptf-favicon { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.ptf-favicon img { display: block; width: 87.5%; height: 85.9%; margin: 0; }
.ptf-favicon--18 { width: 18px; height: 18px; } .ptf-favicon--22 { width: 22px; height: 22px; } .ptf-favicon--24 { width: 24px; height: 24px; }
.ptf-favicon--26 { width: 26px; height: 26px; } .ptf-favicon--28 { width: 28px; height: 28px; } .ptf-favicon--32 { width: 32px; height: 32px; }

/* ── Pills and buttons ─────────────────────────────────────────────────── */
.ptf-pill { display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font: 600 13px/18px var(--ptf-font); color: var(--ptf-content-secondary); }
.ptf-pill--meta { background: var(--ptf-bg-surface); border: 1px solid var(--ptf-border-secondary-2); padding-block: 6px; }
.ptf-pill--tag { background: var(--ptf-bg-tertiary); }
.ptf-pill--missed { padding: 6px 10px; background: var(--ptf-bg-warning); color: var(--ptf-state-warning-text); }
.ptf-pill--success { background: var(--ptf-state-success-bg); color: var(--ptf-state-success-text); }
.ptf-pill--warning { background: var(--ptf-state-warning-bg); color: var(--ptf-state-warning-text); }
.ptf-pill--error { background: var(--ptf-bg-error); color: var(--ptf-state-error-text); }
.ptf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; border: 0; cursor: pointer; font-family: var(--ptf-font); text-align: center; text-decoration: none; transition: box-shadow .2s, background-color .2s; }
.ptf-btn--accent { background: var(--ptf-gradient-accent); color: var(--ptf-content-static-white); }
.ptf-btn--accent:hover { color: var(--ptf-content-static-white); box-shadow: var(--ptf-shadow-hover); }
.ptf-btn--lg { min-height: 50px; padding: 12px 24px; border-radius: 16px; font-size: 17px; font-weight: 600; line-height: 25.5px; }
.ptf-btn--block { width: 100%; }
.ptf-btn--plain { padding: 8px 16px; border-radius: 10px; background: transparent; color: var(--ptf-content-primary-2); font-size: 15px; font-weight: 600; line-height: 22px; }
.ptf-btn--plain:hover { background: var(--ptf-bg-secondary); }
.ptf-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* ── Test: progress, BeckFlow/QuestionCard, BeckFlow/AnswerOption (screens 1, 2, 2б) ── */
.ptf-test { display: flex; flex-direction: column; }
.ptf-test__instruction { font-size: 14px; line-height: 20px; color: var(--ptf-content-secondary); }
.ptf-progress { position: sticky; top: 0; z-index: 20; margin-top: -2px; padding: 10px 0 12px; background: var(--ptf-bg-primary); }
.ptf-progress.is-stuck::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--ptf-bg-primary); border-bottom: 1px solid var(--ptf-border-secondary-2); }
.ptf-progress__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 600 13px/18px var(--ptf-font); color: var(--ptf-content-secondary); }
.ptf-progress__hint { font-size: 12px; font-weight: 500; line-height: 14px; color: var(--ptf-content-tertiary); white-space: nowrap; }
.ptf-progress__hint.is-warning { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ptf-state-warning-text); }
.ptf-progress__track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ptf-bg-tertiary); }
.ptf-progress__fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ptf-bg-brand); transition: width .2s; }
.ptf-questions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px !important; }
.ptf-question { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--ptf-border-secondary-2); border-radius: 20px; background: var(--ptf-bg-surface); scroll-margin-top: 72px; }
.ptf-question.is-active { padding: 15.5px; border: 1.5px solid var(--ptf-border-brand-strong); box-shadow: var(--ptf-shadow-sm); }
.ptf-question.is-missed { padding: 15px; border: 2px solid var(--ptf-state-warning); box-shadow: none; }
.ptf-question:focus { outline: none; }
.ptf-question__title { display: flex; gap: 8px; font: 600 18px/24px var(--ptf-font); color: var(--ptf-content-primary); }
.ptf-question__number { flex: none; color: var(--ptf-content-tertiary); }
.ptf-question__options { display: flex; flex-direction: column; gap: 8px; }
.ptf-option { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 14px 16px; border: 1px solid var(--ptf-border-secondary-2); border-radius: 16px; background: var(--ptf-bg-surface); cursor: pointer; font: 500 16px/24px var(--ptf-font); color: var(--ptf-content-primary); transition: background-color .15s, border-color .15s; }
.ptf-option:hover { border-color: var(--ptf-border-secondary); }
.ptf-option:has(:checked) { padding: 13.5px 15.5px; border: 1.5px solid var(--ptf-border-brand-strong); background: var(--ptf-bg-secondary); }
.ptf-option__label { flex: 1; min-width: 0; }
.ptf-radio, .ptf-checkbox { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ptf-border-secondary-2); background: var(--ptf-bg-surface) center / 20px 20px no-repeat; cursor: pointer; }
.ptf-radio { border-radius: 50%; }
.ptf-checkbox { border-radius: 8px; }
.ptf-radio:checked, .ptf-checkbox:checked { border: 0; background-color: var(--ptf-bg-brand); background-image: url('../assets/psy-test-flow/check.svg'); }
.ptf-test > .ptf-btn { margin-top: 16px; }

/* ── Result card (screen 3) ────────────────────────────────────────────── */
.ptf-result { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.ptf-result:focus { outline: none; }
.ptf-result__card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 16px; border: 1px solid var(--ptf-border-secondary-2); border-radius: 24px; background: var(--ptf-bg-surface); }
.ptf-result__overline { font: 600 12px/16px var(--ptf-font); letter-spacing: .6px; text-transform: uppercase; color: var(--ptf-content-tertiary); }
.ptf-result__score { display: flex; align-items: baseline; gap: 8px; color: var(--ptf-content-tertiary); }
.ptf-result__value { font-size: 40px; font-weight: 700; line-height: 48px; color: var(--ptf-content-primary); }
.ptf-scale { position: relative; width: 100%; height: 40px; }
.ptf-scale__track { position: absolute; top: 24px; left: 0; right: 0; display: grid; gap: 2px; height: 8px; }
.ptf-scale__segment { border-radius: 4px; }
.ptf-scale__marker { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.ptf-scale__value { font: 600 13px/18px var(--ptf-font); color: var(--ptf-content-primary); }
.ptf-scale__marker .ptf-icon { margin-top: -1px; }
.ptf-color--growth { background: var(--ptf-emotional-growth); } .ptf-color--energy { background: var(--ptf-emotional-energy); }
.ptf-color--accent { background: var(--ptf-content-accent); } .ptf-color--error { background: var(--ptf-state-error); }
.ptf-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; line-height: 14px; color: var(--ptf-content-tertiary); }
.ptf-legend li { display: flex; align-items: center; gap: 6px; }
.ptf-legend__dot { width: 8px; height: 8px; border-radius: 50%; }
.ptf-result__text { color: var(--ptf-content-secondary); }
.ptf-result__group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ptf-result__group--tight { gap: 8px; }
.ptf-result__heading { font: 600 16px/24px var(--ptf-font); color: var(--ptf-content-primary); }
.ptf-subscale { display: flex; flex-direction: column; gap: 6px; }
.ptf-subscale__head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ptf-content-secondary); }
.ptf-subscale__value { flex: none; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ptf-content-primary); }
.ptf-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ptf-bg-tertiary); }
.ptf-bar__fill { display: block; width: 0; height: 100%; background: var(--ptf-content-accent); }
.ptf-top { display: flex; flex-wrap: wrap; gap: 8px; }
.ptf-callout { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 12px; border-radius: 20px; background: var(--ptf-state-warning-bg); font-size: 14px; line-height: 20px; color: var(--ptf-content-secondary); }
.ptf-result__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Application handoff without the site chat. */
.ptf-app { display: none; text-align: center; }
.ptf--app .ptf-app { display: block; }
.ptf--app .ptf-promise { display: none; }
.ptf-app__note { margin-top: 8px !important; font-size: 12px; line-height: 14px; color: var(--ptf-content-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .ptf * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body.ptf-page :is(.header, footer, nav, article, .psy-test-offer, .psy-test-faq, .psy-test-related) { display: none !important; }
  .ptf:has(.ptf-result:not([hidden])) > :not(.ptf-result), .ptf-result > :not(.ptf-result__card), .ptf-result__actions { display: none !important; }
  .ptf-result__card { break-inside: avoid; }
}