/* ============================================================
   BUYHOLD — Тест риск-профиля инвестора
   Маркер: BH_RISK_PROFILE_2026_06_13  (v2 — светлое редакционное тело + живой метр)
   Поверхность: тёмный hero (канон) + СВЕТЛОЕ editorial-тело визарда (единое с чекером).
   Префикс .rp-. Цифры: DM Sans + tabular-nums. Лайм #95ce5a — только интерактив.
   Риск-цвета профилей (НЕ лайм): cons=#5a95ce, mod=#14b8a6, bal=#f59e0b, agg=#f43f5e.
   ============================================================ */

#rp-app{
  --rp-cons:#5a95ce; --rp-mod:#14b8a6; --rp-bal:#f59e0b; --rp-agg:#f43f5e;
  --rp-ink:#1a1f2a; --rp-ink-soft:#4a5568; --rp-ink-mut:#6b7280;
  --rp-bd:#e6e9ee; --rp-bg:#ffffff; --rp-bg-alt:#f7f9fc; --rp-bg-soft:#eef1f6;
  --rp-serif:'Lora',Georgia,serif;
  max-width:1040px; margin:0 auto; padding:30px 24px 10px;
  font-family:var(--bh-font-body); color:var(--rp-ink-soft);
}
#rp-app .rp-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- интро ---------- */
#rp-app .rp-intro{max-width:640px;margin:0 auto;text-align:center;padding:12px 0 8px}
#rp-app .rp-intro-icon{width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;background:rgba(var(--bh-accent-rgb),.14);color:var(--bh-accent-dark)}
#rp-app .rp-intro-icon svg{width:30px;height:30px}
#rp-app .rp-intro-title{font-family:var(--rp-serif);font-size:30px;font-weight:600;color:var(--rp-ink);line-height:1.18}
#rp-app .rp-intro-title em{color:var(--bh-accent-dark);font-style:italic}
#rp-app .rp-intro-lead{font-size:15.5px;line-height:1.6;color:var(--rp-ink-mut);max-width:560px;margin:12px auto 20px}
#rp-app .rp-intro-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:24px;font-size:13.5px;color:var(--rp-ink-mut)}
#rp-app .rp-intro-meta span{display:inline-flex;align-items:center;gap:8px}
#rp-app .rp-intro-meta b{color:var(--rp-ink);font-weight:700}
#rp-app .rp-intro-meta .rp-dot{width:6px;height:6px;border-radius:50%;background:var(--bh-accent)}

/* ---------- кнопки ---------- */
#rp-app .rp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--bh-font-body);font-size:14px;font-weight:600;padding:13px 24px;border-radius:11px;border:none;cursor:pointer;line-height:1;transition:var(--bh-transition-fast)}
#rp-app .rp-btn--primary{background:var(--bh-accent);color:#0d1117}
#rp-app .rp-btn--primary:hover{background:var(--bh-accent-hover)}
#rp-app .rp-btn--primary[disabled]{opacity:.4;cursor:not-allowed}
#rp-app .rp-btn--ghost{background:#fff;color:var(--rp-ink-soft);border:1px solid var(--rp-bd)}
#rp-app .rp-btn--ghost:hover:not([disabled]){background:var(--rp-bg-alt);color:var(--rp-ink)}
#rp-app .rp-btn--ghost[disabled]{opacity:.4;cursor:not-allowed}
#rp-app .rp-btn--start{font-size:15px;padding:14px 32px}
#rp-app .rp-btn--rel{background:#fff;color:var(--rp-ink-soft);border:1px solid var(--rp-bd)}
#rp-app .rp-btn--rel:hover{background:var(--rp-bg-alt)}
#rp-app .rp-btn--partner{background:var(--bh-accent);color:#0d1117}
#rp-app .rp-btn--partner:hover{background:var(--bh-accent-hover)}

/* ---------- сплит: вопрос + метр ---------- */
#rp-app .rp-split{display:grid;grid-template-columns:1fr 330px;gap:32px;align-items:start}
#rp-app .rp-main{min-width:0}

/* ---------- прогресс/эйброу ---------- */
#rp-app .rp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
#rp-app .rp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bh-accent-dark);display:flex;align-items:center;gap:9px}
#rp-app .rp-eyebrow::before{content:"";width:22px;height:2px;background:var(--bh-accent-dark);flex:0 0 auto}
#rp-app .rp-counter{font-size:12.5px;color:var(--rp-ink-mut)}
#rp-app .rp-prog-tr{height:6px;border-radius:99px;background:var(--rp-bg-soft);overflow:hidden;margin-bottom:26px}
#rp-app .rp-prog-bar{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bh-accent-dark),var(--bh-accent));transition:width .35s cubic-bezier(.4,0,.2,1)}

/* ---------- вопрос ---------- */
#rp-app .rp-qtitle{font-family:var(--rp-serif);font-size:26px;font-weight:600;color:var(--rp-ink);line-height:1.3;outline:none}
#rp-app .rp-qtitle em{color:var(--bh-accent-dark);font-style:italic}
#rp-app .rp-qhint{margin-top:12px;font-size:14px;line-height:1.6;color:var(--rp-ink-mut);max-width:620px}
#rp-app .rp-opts{margin-top:22px;display:flex;flex-direction:column;gap:11px}
#rp-app .rp-opt{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--rp-bd);border-radius:13px;background:#fff;color:var(--rp-ink-soft);transition:var(--bh-transition-fast)}
#rp-app .rp-opt:hover{border-color:#cfe3b4;box-shadow:0 3px 14px rgba(20,30,15,.06)}
#rp-app .rp-opt:focus-visible{outline:2px solid var(--bh-accent);outline-offset:2px}
#rp-app .rp-opt-mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #cfd6e0;margin-top:1px;position:relative;transition:var(--bh-transition-fast)}
#rp-app .rp-opt-b{flex:1}
#rp-app .rp-opt-t{font-size:15px;font-weight:600;color:var(--rp-ink)}
#rp-app .rp-opt-d{font-size:13px;color:var(--rp-ink-mut);margin-top:3px;line-height:1.45}
#rp-app .rp-opt-tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
#rp-app .rp-tag-ok{background:#e8f5e0;color:#4e8a2e}
#rp-app .rp-tag-warn{background:#fdeaea;color:#c0392b}
#rp-app .rp-tag-soft{background:#eef1f6;color:#5b6473}
#rp-app .rp-opt.is-selected{border-color:var(--bh-accent);background:#f6fbef;box-shadow:0 0 0 1px var(--bh-accent) inset}
#rp-app .rp-opt.is-selected .rp-opt-mark{border-color:var(--bh-accent)}
#rp-app .rp-opt.is-selected .rp-opt-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--bh-accent)}
#rp-app .rp-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
#rp-app .rp-nav--center{justify-content:center}

/* ---------- живой метр ---------- */
#rp-app .rp-meter{position:sticky;top:18px}
#rp-app .rp-meter-card{background:#fff;border:1px solid var(--rp-bd);border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(20,30,15,.06)}
#rp-app .rp-meter-h{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rp-ink-mut);text-align:center;margin-bottom:4px}
#rp-app .rp-gauge{display:block;margin:4px auto 2px}
#rp-app .rp-gauge .rp-needle{transition:transform .5s cubic-bezier(.4,0,.2,1);transform-origin:120px 128px}
#rp-app .rp-meter-name{text-align:center;font-family:var(--rp-serif);font-size:22px;font-weight:600;color:var(--rp-ink);min-height:28px}
#rp-app .rp-meter-name.placeholder{font-family:var(--bh-font-body);font-size:14px;font-weight:500;color:var(--rp-ink-mut)}
#rp-app .rp-meter-sub{text-align:center;font-size:12px;color:var(--rp-ink-mut);margin-top:3px;min-height:16px}
#rp-app .rp-draft{margin-top:18px}
#rp-app .rp-draft-ttl{font-size:11px;color:var(--rp-ink-mut);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
#rp-app .rp-draft-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--rp-bg-soft)}
#rp-app .rp-draft-bar i{height:100%}
#rp-app .rp-draft-leg{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--rp-ink-soft)}
#rp-app .rp-draft-leg span{display:flex;align-items:center;gap:7px}
#rp-app .rp-draft-leg b{width:9px;height:9px;border-radius:2px;flex:0 0 auto}

/* ============ РЕЗУЛЬТАТ (светлый отчёт) ============ */
#rp-app .rp-result{max-width:760px;margin:0 auto}
#rp-app .rp-card{background:#fff;border:1px solid var(--rp-bd);border-radius:18px;padding:26px;box-shadow:0 6px 22px rgba(20,30,15,.05)}
#rp-app .rp-card+.rp-card{margin-top:14px}
#rp-app .rp-card-title{font-size:15px;font-weight:700;color:var(--rp-ink);margin-bottom:16px}
#rp-app .rp-res-hero{text-align:center;border-top:3px solid var(--rp-accent,var(--bh-accent))}
#rp-app .rp-res-hero--conservative{--rp-accent:var(--rp-cons)}
#rp-app .rp-res-hero--moderate{--rp-accent:var(--rp-mod)}
#rp-app .rp-res-hero--balanced{--rp-accent:var(--rp-bal)}
#rp-app .rp-res-hero--aggressive{--rp-accent:var(--rp-agg)}
#rp-app .rp-res-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rp-accent);margin-bottom:6px}
#rp-app .rp-res-name{font-family:var(--rp-serif);font-size:32px;font-weight:600;color:var(--rp-ink);line-height:1.15;outline:none}
#rp-app .rp-res-tagline{font-size:15px;color:var(--rp-ink-mut);margin-top:8px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.5}
#rp-app .rp-scale{display:flex;justify-content:center;gap:9px;margin:18px 0 6px}
#rp-app .rp-scale-dot{width:30px;height:6px;border-radius:99px;background:var(--rp-bg-soft)}
#rp-app .rp-scale-dot.on{background:var(--rp-accent)}
#rp-app .rp-res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--rp-bd)}
#rp-app .rp-res-stat{display:flex;flex-direction:column;gap:5px}
#rp-app .rp-res-stat-l{font-size:12px;color:var(--rp-ink-mut)}
#rp-app .rp-res-stat-v{font-size:17px;font-weight:700;color:var(--rp-ink);font-variant-numeric:tabular-nums}
#rp-app .rp-res-stat-max{font-size:13px;color:var(--rp-ink-mut);font-weight:500;margin-left:3px}
#rp-app .rp-res-desc p{font-size:14.5px;line-height:1.65;color:var(--rp-ink-soft)}
#rp-app .rp-alloc-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;background:var(--rp-bg-soft);margin-bottom:18px}
#rp-app .rp-alloc-seg{height:100%}
#rp-app .rp-alloc-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
#rp-app .rp-alloc-item{display:flex;align-items:center;gap:10px;font-size:13.5px}
#rp-app .rp-alloc-dot{flex:0 0 auto;width:11px;height:11px;border-radius:3px}
#rp-app .rp-alloc-name{flex:1;color:var(--rp-ink-soft)}
#rp-app .rp-alloc-pct{font-weight:700;color:var(--rp-ink);font-variant-numeric:tabular-nums}
#rp-app .rp-alloc-note{margin-top:16px;font-size:12.5px;color:var(--rp-ink-mut);line-height:1.5}
#rp-app .rp-instr-list{display:flex;flex-direction:column;gap:11px}
#rp-app .rp-instr-item{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:12px;background:var(--rp-bg-alt);border:1px solid var(--rp-bd);border-left:3px solid var(--bh-accent)}
#rp-app .rp-instr-name{font-size:14.5px;font-weight:600;color:var(--rp-ink)}
#rp-app .rp-instr-note{font-size:13px;color:var(--rp-ink-mut);line-height:1.5}
#rp-app .rp-res-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
#rp-app .rp-res-cta .rp-btn{flex:1 1 220px}
#rp-app .rp-res-disclaimer{margin-top:16px;font-size:12px;line-height:1.55;color:var(--rp-ink-mut);padding:14px 16px;border-radius:12px;background:var(--rp-bg-alt);border:1px solid var(--rp-bd)}

/* ---------- мобайл ---------- */
@media (max-width:820px){
  /* RP_MOBILE_FIX_2026_06_21: колонка не должна превышать контейнер; карточка гейджа переносится, длинное имя профиля не распирает экран */
  #rp-app .rp-split{grid-template-columns:minmax(0,1fr);gap:20px}
  #rp-app .rp-meter{position:static;order:-1;min-width:0}
  #rp-app .rp-meter-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px;min-width:0}
  #rp-app .rp-meter-card .rp-meter-left{flex:0 0 auto}
  #rp-app .rp-gauge{width:150px;height:88px;margin:0}
  #rp-app .rp-meter-h{text-align:left}
  #rp-app .rp-meter-name{text-align:left;font-size:19px;min-height:0;overflow-wrap:anywhere}
  #rp-app .rp-meter-sub{text-align:left}
  #rp-app .rp-draft{display:none}
}
@media (max-width:600px){
  #rp-app{padding:20px 14px 6px}
  #rp-app .rp-card{padding:20px}
  #rp-app .rp-qtitle{font-size:21px}
  #rp-app .rp-intro-title{font-size:25px}
  #rp-app .rp-res-name{font-size:26px}
  #rp-app .rp-res-stats{grid-template-columns:1fr;gap:14px}
  #rp-app .rp-res-stat{flex-direction:row;justify-content:space-between;align-items:baseline}
  #rp-app .rp-alloc-legend{grid-template-columns:1fr}
  #rp-app .rp-nav .rp-btn{flex:1}
  #rp-app .rp-res-cta .rp-btn{flex:1 1 100%}
  #rp-app .rp-scale-dot{width:22px}
}
@media (pointer:coarse){#rp-app .rp-opt{padding:17px 16px}}
