/* ============================================================
   vuah-assessment.css — VUAH Assessment Engine
   Site tokens only. Wizard + dashboard.
   ============================================================ */

.vuah {
  margin-bottom: var(--space-2xl);
}

.vuah__caption {
  text-align: left;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto var(--space-xl);
}

.vuah__caption strong {
  color: var(--text-primary);
  font-weight: 600;
}

#vuahEngine {
  max-width: 680px;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

#vuahEngine::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ── STAGES ── */
.vuah__stage { animation: vuahIn 0.45s var(--ease-out); }
.vuah__stage--center { text-align: center; }

@keyframes vuahIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vuah__stage-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.vuah__text {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.vuah__question {
  font-family: var(--font-saira);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: var(--space-lg);
}

.vuah__note {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
  min-height: 1em;
}

.vuah__link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-decoration: underline;
  margin-top: var(--space-sm);
}

/* ── INPUTS ── */
.vuah__row { display: flex; gap: var(--space-sm); }
.vuah__row--wrap { flex-wrap: wrap; }

.vuah__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  transition: border-color var(--duration-fast);
}

.vuah__input:focus { outline: none; border-color: var(--accent); }

.vuah__input--code {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.3rem;
  max-width: 220px;
}

.vuah__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* ── CHOICES ── */
.vuah__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.vuah__choice {
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-base);
  transition: all var(--duration-fast);
}

.vuah__choice:hover { border-color: var(--accent); color: var(--accent); }

.vuah__choice.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── MULTISELECT ── */
.vuah__multi { display: flex; flex-direction: column; gap: var(--space-md); }
.vuah__input--search { max-width: 100%; }

.vuah__multi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.vuah__chip {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: var(--bg-base);
  transition: all var(--duration-fast);
}

.vuah__chip:hover { border-color: var(--accent); }
.vuah__chip.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── FETCH CARD ── */
.vuah__fetch {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-ghost);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.vuah__fetch-label { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text-accent); margin-bottom: 6px; }
.vuah__fetch-name  { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; }
.vuah__fetch-value { font-family: var(--font-saira); font-weight: 800; font-size: 1.5rem; color: var(--text-primary); }

/* ── PROGRESS + NAV ── */
.vuah__progress {
  height: 3px;
  background: var(--bg-ghost);
  border-radius: 2px;
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

.vuah__progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s var(--ease-out);
}

.vuah__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.vuah__nav .vuah__next { margin-left: auto; }
.vuah__next:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── DASHBOARD ── */
.vuah-dash { animation: vuahIn 0.6s var(--ease-out); }

.vuah-dash__top {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.vuah-dash__donut-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; }

.vuah-dash__donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vuah-dash__score {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text-primary);
}

.vuah-dash__level {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--text-accent);
}

.vuah-dash__verdict { flex: 1; min-width: 220px; }

.vuah-dash__verdict-title {
  font-family: var(--font-saira);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.vuah-dash__verdict-text { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.65; }

/* Bars */
.vuah-dash__bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-xl);
}

.vuah-dash__bar-row {
  display: grid;
  grid-template-columns: 170px 1fr 34px;
  align-items: center;
  gap: var(--space-sm);
}

.vuah-dash__bar-label { font-size: 0.75rem; color: var(--text-secondary); }

.vuah-dash__bar-track {
  height: 8px;
  background: var(--bg-ghost);
  border-radius: 4px;
  overflow: hidden;
}

.vuah-dash__bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.9s var(--ease-out);
}

.vuah-dash__bar-num { font-size: 0.7rem; color: var(--text-muted); text-align: right; }

/* Summary */
.vuah-dash__summary {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.vuah-dash__sub {
  font-family: var(--font-saira);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: var(--space-md) 0 var(--space-xs);
}

.vuah-dash__list {
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.8;
}

.vuah-dash__list li::marker { color: var(--accent); }
.vuah-dash__list--num { list-style: decimal; }

/* Save */
.vuah-dash__save {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  #vuahEngine { padding: var(--space-lg); }
  .vuah-dash__bar-row { grid-template-columns: 1fr 44px; }
  .vuah-dash__bar-label { grid-column: 1 / -1; margin-bottom: -4px; }
  .vuah-dash__top { justify-content: center; text-align: center; }
  .vuah__row { flex-direction: column; }
  .vuah__input--code { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vuah__stage, .vuah-dash { animation: none; }
  .vuah-dash__bar-fill, .vuah-donut circle { transition: none !important; }
}

/* ── "Send Code": deep-red engagement state on hover & press ── */
#vuahEngine .vuah__btn--send:hover,
#vuahEngine .vuah__btn--send:active,
#vuahEngine .vuah__btn--send:focus-visible {
  background: #9C2007;
  border-color: #9C2007;
  color: #ffffff;
}

#vuahEngine .vuah__btn--send:disabled {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 0.55;
}

/* ── VUAH Monitor registration form ── */
.vuah-reg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.vuah__field { display: flex; flex-direction: column; gap: 6px; }

.vuah__field-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vuah-reg__card {
  margin-top: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-ghost);
}

/* "End" — quiet, below the action buttons */
.vuah__end {
  margin-top: var(--space-md);
  color: var(--text-muted);
}

.vuah__end:hover { color: #9C2007; }

@media (max-width: 600px) {
  .vuah-reg__grid { grid-template-columns: 1fr; }
}

/* ── VUAH Monitor inline contact panel ── */
.vuah-monitor {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-ghost);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.vuah-monitor__dial { max-width: 220px; flex-shrink: 0; }

@media (max-width: 600px) {
  .vuah-monitor__phone-row { flex-direction: column; }
  .vuah-monitor__dial { max-width: 100%; }
}

/* ── Intelligence layer: inference notes, percentile, live badge ── */
.vuah-dash__inference {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.vuah-dash__pct {
  margin-top: var(--space-sm);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-accent);
}

.vuah-dash__live {
  margin-top: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: #15803d;
}