/* ═══════════════════════════════════════════
   TrustSphere 4Sight™ — Cyber Risk Quantification
   Maturity Self-Assessment
   Reuses shared brand variables (../styles.css)
   and the crq.css component set (card, badges,
   progress bar, option cards, buttons). This file
   only adds what's unique to the quiz/results flow.
═══════════════════════════════════════════ */

/* Bootstrap isn't loaded on this page — supply the one utility crq.css expects. */
.d-none { display: none !important; }

#tsa-app {
  min-height: 100vh;
  padding: 1rem 0 3rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-light, #F0E8DC);
  font-size: 0.92rem;
}
#tsa-app .crq-container { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
#tsa-app h1, #tsa-app h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
#tsa-app h1 { font-size: 1.6rem; line-height: 1.35; margin-bottom: 0.5rem; }
#tsa-app h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
#tsa-app p { font-size: 0.92rem; line-height: 1.6; }
#tsa-app a { text-decoration: none; }

.tsa-screen.d-none { display: none !important; }
.tsa-anim-fade { animation: tsaFadeIn 0.4s ease; }

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

/* ── Progress dots ── */
.tsa-dots { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.tsa-dot {
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--border, rgba(184,134,11,0.25));
  background: rgba(255,255,255,0.02);
  color: var(--text-muted, #9A8870);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  padding: 0;
}
.tsa-dot.is-answered { border-color: var(--gold, #B8860B); color: var(--gold, #B8860B); background: rgba(184,134,11,0.1); }
.tsa-dot.is-current { border-color: var(--rust-light, #D4503A); color: #fff; background: var(--rust-light, #D4503A); box-shadow: 0 0 0 3px rgba(212,80,58,0.2); }
.tsa-dot.is-clickable { cursor: pointer; }
.tsa-dot:not(.is-clickable) { cursor: default; opacity: 0.5; }

/* ── Question + options ── */
#tsa-q-text { margin-top: 0.1rem; }
.tsa-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.1rem; }

.tsa-option-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  animation: tsaOptIn 0.4s ease both;
}
.tsa-option-card:nth-child(1) { animation-delay: 0.02s; }
.tsa-option-card:nth-child(2) { animation-delay: 0.06s; }
.tsa-option-card:nth-child(3) { animation-delay: 0.10s; }
.tsa-option-card:nth-child(4) { animation-delay: 0.14s; }
.tsa-option-card:nth-child(5) { animation-delay: 0.18s; }

@keyframes tsaOptIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tsa-option-card .tsa-option-index {
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(184,134,11,0.12);
  color: var(--gold, #B8860B);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.tsa-option-card:has(input:checked) .tsa-option-index { background: var(--gold, #B8860B); color: #170A06; }
.tsa-option-card .tsa-option-text { font-size: 0.9rem; font-weight: 500; line-height: 1.4; }

/* ── Contact screen ── */
.tsa-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; margin-bottom: 0.25rem; }
#tsa-app .crq-field label { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.3rem; }
#tsa-app .form-control {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(184,134,11,0.18));
  color: var(--text-light, #F0E8DC);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}
#tsa-app .form-control:focus {
  outline: none;
  background: rgba(255,255,255,0.05);
  border-color: var(--gold, #B8860B);
  box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
}
@media (max-width: 560px) { .tsa-contact-grid { grid-template-columns: 1fr; } }

/* ── Results ── */
.tsa-results-layout { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.1rem; }

.tsa-gauge {
  --pct: 0;
  --gauge-color: #B8860B;
  width: 190px; height: 190px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--gauge-color) calc(var(--pct) * 1%), rgba(240,232,220,0.10) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.tsa-gauge::before {
  content: '';
  position: absolute; inset: 16px;
  border-radius: 50%;
  background: #170A06;
}
.tsa-gauge-inner { position: relative; z-index: 1; text-align: center; }
.tsa-gauge-pct { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; font-weight: 700; color: var(--text-light, #F0E8DC); }
.tsa-gauge-score { display: block; font-size: 0.78rem; color: var(--text-muted, #9A8870); margin-top: 0.2rem; }

.tsa-result-details { flex: 1; min-width: 220px; }
.tsa-result-details .crq-badge { margin-bottom: 0.65rem; }
.tsa-band-desc { font-size: 0.96rem; }

.tsa-submit-status { font-size: 0.8rem; color: var(--text-muted, #9A8870); margin-top: 1rem; min-height: 1.1em; }

.tsa-result-ctas { display: flex; gap: 0.85rem; margin-top: 1.5rem; flex-wrap: wrap; }
.tsa-result-ctas a { padding: 0.65rem 1.3rem; font-size: 0.85rem; }

@media (max-width: 640px) {
  .tsa-results-layout { flex-direction: column; text-align: center; }
  .tsa-result-ctas, .crq-nav-buttons { flex-direction: column-reverse; }
  .tsa-result-ctas a,
  .crq-nav-buttons .btn-primary, .crq-nav-buttons .btn-secondary { width: 100%; text-align: center; justify-content: center; }
}