/* ============================================================
   ГипноФилин - главная (index.html)
   Интерактивный мини-разбор ситуации, амбер-система.
   Требует tokens.css + components.css (переиспользует .exp-eyebrow/
   .exp-h1/.exp-sub/.exp-form/.exp-field/.exp-submit).
   ============================================================ */

.home-hero{padding:64px 0 8px;text-align:center}
.home-hero .exp-eyebrow{text-align:center}
.home-hero .exp-h1{max-width:16ch;margin-left:auto;margin-right:auto}
.home-hero .exp-h1 em{font-style:normal;color:var(--amber)}
.home-hero .exp-sub{max-width:560px;margin:14px auto 0;text-align:center;font-size:16px}

.diag-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px;margin:34px 0 64px;box-shadow:0 24px 60px -34px rgba(0,0,0,.5)}
.diag-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.diag-step-name{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.diag-prog{display:flex;gap:5px}
.diag-prog i{width:26px;height:4px;border-radius:2px;background:var(--line)}
.diag-prog i.on{background:var(--amber)}
.diag-q{font-family:var(--disp);font-weight:600;font-size:1.5rem;margin-bottom:20px;color:var(--ink)}

.diag-goals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.diag-goal{padding:22px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-3);cursor:pointer;
  text-align:center;font-family:var(--body);font-weight:700;color:var(--ink);font-size:1.02rem;transition:all .2s ease}
.diag-goal:hover{border-color:var(--amber);transform:translateY(-2px)}
.diag-goal .d{display:block;font-size:.78rem;font-weight:500;color:var(--ink-faint);margin-top:6px}

.diag-row{display:flex;gap:12px;align-items:center;margin-top:8px}
.diag-btn-ghost{background:none;color:var(--ink-dim);border:1px solid var(--line);border-radius:12px;padding:15px;
  font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.diag-btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.diag-btn-ghost:disabled,.exp-submit:disabled{opacity:.4;pointer-events:none}

.diag-muted{font-size:13px;color:var(--ink-faint)}
.diag-result{font-family:var(--body);font-size:1.02rem;color:var(--ink-dim);line-height:1.7;white-space:pre-wrap}
.diag-result-title{font-family:var(--disp);font-weight:600;font-size:1.2rem;color:var(--ink);margin-bottom:6px}
.diag-divider{border-top:1px solid var(--line-soft);margin:26px 0 22px}
.diag-spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--amber);border-radius:50%;
  animation:diagSpin 1s linear infinite;margin:30px auto}
@keyframes diagSpin{to{transform:rotate(360deg)}}
.diag-note{text-align:center;font-size:12px;color:var(--ink-faint);margin-top:10px}
.diag-hide{display:none}

@media(max-width:560px){
  .diag-goals{grid-template-columns:1fr}
  .diag-box{padding:22px}
}