/* ============================================================
   Стресс-страницы v2: тест PSS-10 (article7) + калькулятор
   стресс-старения (article12). Поверх calc-phenoage.css +
   article-iron.css; тест дополнительно грузит tool-iron-test.css
   (реюз фреймворка .q-card/.rec-card/.it-ring/.test-results).
   Палитра: индиго; смысловой цвет — только шкалы стресса/риска.
   ============================================================ */

.v2-after-hero .med-term { color: var(--v2-ink); }
.ar-callout--warn { border-left-color: #f59e0b; }
.ar-callout--warn .ar-callout__icon { background: rgba(245,158,11,.12); color: #d97706; }

/* 3 карточки в ряд (симметрия) — для блоков из 3 ar-feature */
.ar-features--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .ar-features--3 { grid-template-columns: 1fr; } }

.st-hero .pa-hero__title {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05; letter-spacing: -.03em;
  text-transform: none; max-width: 16ch;
}

/* ── Фигура (80% по центру, подпись без номера) ─────────────── */
.st-figure { max-width: 80%; margin: 18px auto 22px; }
@media (max-width: 700px) { .st-figure { max-width: 100%; } }
.st-figure__frame { border-radius: var(--v2-radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--v2-midnight); box-shadow: 0 22px 54px -26px rgba(19,20,31,.42), 0 2px 8px rgba(19,20,31,.08); }
.st-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-figcaption { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--v2-brand-2); font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.5; }
.st-figcaption strong { color: var(--v2-ink-2); font-weight: 600; }

/* ── Пайплайн (стресс → старение / путь) ───────────────────── */
.st-flow { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 4px; background: var(--v2-bg-alt); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: 24px 16px; margin: 8px 0 14px; }
.st-flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 132px; }
.st-flow-step__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(42,52,238,.09); color: var(--v2-brand-2); }
.st-flow-step__icon .material-symbols-outlined { font-size: 24px !important; }
.st-flow-step--final .st-flow-step__icon { background: var(--v2-midnight); color: #fff; }
.st-flow-step__label { font-size: 12px; font-weight: 700; color: var(--v2-ink); line-height: 1.25; }
.st-flow-step__sub { font-size: 11px; color: var(--v2-ink-3); line-height: 1.3; }
.st-flow-arrow { align-self: flex-start; margin-top: 18px; color: var(--v2-ink-3); }
.st-flow-arrow .material-symbols-outlined { font-size: 20px !important; }
@media (max-width: 760px) {
  .st-flow { flex-direction: column; align-items: center; }
  .st-flow-step { width: auto; flex-direction: row; gap: 14px; text-align: left; min-width: 240px; }
  .st-flow-step__body { flex: 1; }
  .st-flow-arrow { margin: 2px 0; transform: rotate(90deg); align-self: center; }
}

/* ── PSS-шкала в результатах теста (СМЫСЛОВЫЕ зоны) ─────────── */
.st-scale { background: var(--v2-bg-alt); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: 20px; margin: 16px 0; }
.st-scale__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--v2-ink-3); text-align: center; margin-bottom: 14px; }
.st-scale__bar { height: 14px; border-radius: 100rem; background: linear-gradient(90deg, #10b981 0%, #10b981 32.5%, #f59e0b 32.5%, #f59e0b 65%, #ef4444 65%, #ef4444 100%); }
.st-scale__labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--v2-ink-3); font-variant-numeric: tabular-nums; }
.st-scale__zones { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.st-scale__zone { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-ink-3); }
.st-scale__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Дыхательная сетка (в рекомендациях) ───────────────────── */
.st-breathing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 500px) { .st-breathing { grid-template-columns: repeat(2, 1fr); } }
.st-breathing__step { background: var(--v2-bg-alt); border: 1px solid var(--v2-border); border-radius: 12px; padding: 14px 10px; text-align: center; }
.st-breathing__icon { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 9px; background: rgba(42,52,238,.09); color: var(--v2-brand-2); }
.st-breathing__icon .material-symbols-outlined { font-size: 18px !important; }
.st-breathing__label { font-size: 11.5px; color: var(--v2-ink-3); margin-bottom: 2px; }
.st-breathing__count { font-family: var(--v2-font-display); font-size: 18px; font-weight: 700; color: var(--v2-ink); }

/* ════════════════════════════════════════════════════════════
   КАЛЬКУЛЯТОР стресс-старения (article12) — реколор в v2
   ════════════════════════════════════════════════════════════ */

/* full-bleed soft-blue зебра под калькулятор (как pa-calc-wrap) */
.stress-calc {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 1.25rem;
  padding: 32px;
  box-shadow: 0 18px 48px -28px rgba(19,20,31,.28);
  margin: 16px 0 8px;
}
@media (max-width: 600px) { .stress-calc { padding: 22px 18px; } }
.stress-calc__title { font-family: var(--v2-font-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; color: var(--v2-ink); letter-spacing: -.02em; margin-bottom: 6px; }
.stress-calc__subtitle { font-size: 13.5px; color: var(--v2-ink-3); line-height: 1.5; margin-bottom: 28px; }

/* PSS input row */
.pss-input-row { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 26px; }
@media (max-width: 560px) { .pss-input-row { flex-direction: column; align-items: stretch; } }
.pss-input-main { flex: 0 0 180px; }
@media (max-width: 560px) { .pss-input-main { flex: none; } }
.pss-input-main label { display: block; font-size: 11px; font-weight: 700; color: var(--v2-ink-3); margin-bottom: 8px; letter-spacing: .08em; text-transform: uppercase; }
.pss-input-main input[type="number"] {
  width: 100%; padding: 13px 16px; font-family: var(--v2-font-display);
  font-size: 26px; font-weight: 700; text-align: center; color: var(--v2-brand-2);
  background: rgba(42,52,238,.06); border: 2px solid var(--v2-border); border-radius: 12px;
  transition: border-color .18s, box-shadow .18s;
}
.pss-input-main input:focus { outline: none; border-color: var(--v2-brand-2); box-shadow: 0 0 0 3px rgba(42,52,238,.14); }
.pss-scale-mini { flex: 1; background: var(--v2-bg-alt); border: 1px solid var(--v2-border); border-radius: 12px; padding: 14px 16px; }
.pss-scale-mini__label { font-size: 11.5px; color: var(--v2-ink-3); margin-bottom: 10px; font-weight: 600; }
.pss-scale-mini__bar { height: 12px; border-radius: 100rem; background: linear-gradient(90deg, #10b981 0%, #10b981 32.5%, #f59e0b 32.5%, #f59e0b 65%, #ef4444 65%, #ef4444 100%); position: relative; margin-bottom: 8px; cursor: pointer; }
.pss-scale-mini__indicator { position: absolute; top: 50%; width: 16px; height: 16px; background: #fff; border: 2px solid var(--v2-brand-2); border-radius: 50%; transform: translate(-50%, -50%); transition: left .2s ease, border-color .2s; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pss-scale-mini__zones { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--v2-ink-3); }

/* Lifestyle grid */
.lifestyle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 640px) { .lifestyle-grid { grid-template-columns: 1fr; gap: 12px; } }
.lifestyle-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--v2-ink-3); margin-bottom: 8px; letter-spacing: .08em; text-transform: uppercase; }
.lifestyle-label .material-symbols-outlined { font-size: 17px !important; color: var(--v2-brand-2); }
.option-cards { display: flex; flex-direction: column; gap: 6px; }
.option-card { position: relative; }
.option-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.option-card label { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--v2-border); border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--v2-ink-2); transition: all .16s; line-height: 1.35; }
.option-card label:hover { border-color: rgba(42,52,238,.3); background: rgba(42,52,238,.04); }
.option-card input:checked + label { border-color: var(--v2-brand-2); background: rgba(42,52,238,.06); color: var(--v2-ink); font-weight: 600; }
.option-card__dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--v2-ink-3); opacity: .5; flex-shrink: 0; transition: background .16s, border-color .16s, opacity .16s; }
.option-card input:checked + label .option-card__dot { background: var(--v2-brand-2); border-color: var(--v2-brand-2); opacity: 1; }
.option-card__text { flex: 1; }
.option-card__badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 100rem; flex-shrink: 0; letter-spacing: .02em; }
.badge--good { background: rgba(16,185,129,.12); color: #059669; }
.badge--ok   { background: rgba(245,158,11,.14); color: #d97706; }
.badge--bad  { background: rgba(239,68,68,.10); color: #dc2626; }

/* Submit (graphite, как все v2 CTA) */
.calc-submit-btn {
  width: 100%; padding: 15px; border: none; border-radius: 12px;
  background: var(--v2-ink-2); color: #fff;
  font-family: var(--v2-font); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .18s, transform .18s;
}
.calc-submit-btn:hover { background: var(--v2-ink); transform: translateY(-1px); }

/* ── Результат ─────────────────────────────────────────────── */
.stress-result { display: none; margin-top: 32px; border-top: 1px solid var(--v2-border); padding-top: 32px; animation: pa-fadeUp .4s ease; }
.result-gauge-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.gauge-svg { overflow: visible; }
.gauge-bg-track { fill: none; stroke: var(--v2-border); stroke-width: 20; stroke-linecap: round; }
.gauge-fill-track { fill: none; stroke-width: 20; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; transition: stroke-dashoffset 1.2s cubic-bezier(0.34,1.4,0.64,1), stroke .4s; }
.gauge-center-num { font-family: var(--v2-font-display); font-size: 2.2rem; font-weight: 700; fill: var(--v2-ink); text-anchor: middle; dominant-baseline: central; }
.gauge-center-label { font-size: .72rem; fill: var(--v2-ink-3); text-anchor: middle; dominant-baseline: central; }
.gauge-risk-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; border-radius: 100rem; font-weight: 700; font-size: 15px; margin-top: 14px; }

/* Factor bars */
.factor-section { margin-bottom: 28px; }
.factor-section__title { font-size: 11px; font-weight: 700; color: var(--v2-ink-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.factor-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.factor-bar__icon { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(42,52,238,.09); color: var(--v2-brand-2); }
.factor-bar__icon .material-symbols-outlined { font-size: 17px !important; }
.factor-bar__label { font-size: 13px; color: var(--v2-ink-2); min-width: 150px; flex-shrink: 0; }
@media (max-width: 480px) { .factor-bar__label { min-width: 110px; font-size: 12px; } }
.factor-bar__track { flex: 1; height: 10px; background: var(--v2-bg-alt); border-radius: 100rem; overflow: hidden; }
.factor-bar__fill { height: 100%; border-radius: 100rem; width: 0%; transition: width 1s cubic-bezier(0.34,1.2,0.64,1); }
.factor-bar__val { font-family: var(--v2-font-display); font-size: 13px; font-weight: 700; color: var(--v2-ink); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* Risk profile cards (top-border → индиго, без декор-радуги) */
.risk-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
@media (max-width: 560px) { .risk-profile-grid { grid-template-columns: 1fr; } }
.risk-profile-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-top: 3px solid var(--v2-brand-2); border-radius: var(--v2-radius); padding: 18px; }
.risk-profile-card__title { font-family: var(--v2-font-display); font-size: 14px; font-weight: 700; color: var(--v2-ink); margin-bottom: 6px; }
.risk-profile-card__text { font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.55; }
.risk-profile-card .med-term { color: var(--v2-ink-2); }

/* Recommendations (rec-item) */
.result-recs { margin-top: 24px; }
.result-recs__title { font-size: 11px; font-weight: 700; color: var(--v2-ink-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.rec-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--v2-border); }
.rec-item:last-child { border-bottom: none; }
.rec-item__icon { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(42,52,238,.09); color: var(--v2-brand-2); }
.rec-item__icon .material-symbols-outlined { font-size: 20px !important; }
.rec-item__title { font-family: var(--v2-font-display); font-size: 14px; font-weight: 700; color: var(--v2-ink); margin-bottom: 3px; }
.rec-item__text { font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.55; }

/* Disclaimer + reset */
.calc-disclaimer { display: flex; gap: 10px; align-items: flex-start; background: var(--v2-bg-alt); border: 1px solid var(--v2-border); border-radius: 12px; padding: 14px 16px; margin-top: 16px; font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.55; }
.calc-disclaimer .material-symbols-outlined { font-size: 18px !important; flex-shrink: 0; color: var(--v2-ink-3); margin-top: 1px; }
.calc-disclaimer strong { color: var(--v2-ink-2); }
.result-reset-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--v2-bg-alt); color: var(--v2-ink-2); border: 1px solid var(--v2-border); border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 20px; transition: background .18s; font-family: var(--v2-font); }
.result-reset-btn:hover { background: var(--v2-surface); border-color: rgba(42,52,238,.3); }

/* ── Источники ─────────────────────────────────────────────── */
.st-sources { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; counter-reset: src; list-style: none; padding: 0; }
.st-source { display: flex; gap: 14px; align-items: flex-start; font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.5; }
.st-source::before { counter-increment: src; content: counter(src); flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--v2-bg-alt); font-family: var(--v2-font-display); font-size: 12px; font-weight: 700; color: var(--v2-ink-2); }
.st-source em { color: var(--v2-ink-2); }
.st-source a { color: var(--v2-brand-2); word-break: break-word; }