/* Roast Recon Quiz — tactical card aesthetic matching the Foxhole brand. */
.recon-wrap { min-height: 100vh; background: var(--bg, #0D0D0D); display: flex; flex-direction: column; }
.recon-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px 80px; }
.recon-card { background: #111; border: 1px solid rgba(212,197,169,0.12); border-radius: 4px; width: 100%; max-width: 580px; padding: 40px 36px 36px; position: relative; }

/* Progress bar */
.recon-progress { display: flex; gap: 6px; margin-bottom: 36px; }
.recon-progress-step { flex: 1; height: 3px; background: #2A2A2A; border-radius: 2px; transition: background 0.3s ease; }
.recon-progress-step.active { background: var(--olive-light, #6B7D33); }
.recon-progress-step.complete { background: var(--olive, #4A5D23); }

/* ---- Question screens ---- */
.recon-screen {
  display: none;
}

.recon-screen.active {
  display: block;
}

.recon-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--olive-light, #6B7D33);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.recon-question {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--off-white, #F0EDE6);
  margin-bottom: 8px;
  line-height: 1.15;
}

.recon-question-sub {
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  color: var(--text-muted, #666);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ---- Options grid ---- */
.recon-options {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.recon-options.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.recon-option {
  background: #161616;
  border: 1px solid rgba(212,197,169,0.1);
  border-radius: 3px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: inherit;
}

.recon-option:hover {
  border-color: rgba(212,197,169,0.28);
  background: #1A1A1A;
}

.recon-option.selected {
  border-color: var(--olive-light, #6B7D33);
  background: rgba(107,125,51,0.08);
}

.recon-option-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.recon-option-label {
  display: block;
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--off-white, #F0EDE6);
  margin-bottom: 2px;
}

.recon-option-sub {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
  line-height: 1.4;
}

/* Tonal pill options (for Q1: light/medium/dark) */
.recon-options.tonal {
  grid-template-columns: repeat(3, 1fr);
}

.recon-option.tonal-light { border-color: rgba(107,125,51,0.25); }
.recon-option.tonal-medium { border-color: rgba(196,98,26,0.25); }
.recon-option.tonal-dark { border-color: rgba(50,30,10,0.5); }
.recon-option.tonal-light.selected { background: rgba(107,125,51,0.12); border-color: #6B7D33; }
.recon-option.tonal-medium.selected { background: rgba(196,98,26,0.12); border-color: #C4621A; }
.recon-option.tonal-dark.selected { background: rgba(50,30,10,0.25); border-color: #8B7355; }

/* ---- Navigation ---- */
.recon-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recon-btn-back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  padding: 0;
}

.recon-btn-back:hover { color: var(--khaki-muted, #A89E83); }

.recon-btn-next {
  background: var(--olive, #4A5D23);
  border: none;
  color: var(--off-white, #F0EDE6);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 2px;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.recon-btn-next.enabled {
  opacity: 1;
  pointer-events: auto;
}

.recon-btn-next.enabled:hover {
  background: var(--olive-light, #6B7D33);
}

/* ---- Loading spinner ---- */
#recon-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  gap: 16px;
}

.recon-loader {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(107,125,51,0.2);
  border-top-color: var(--olive-light, #6B7D33);
  border-radius: 50%;
  animation: recon-spin 0.8s linear infinite;
}

@keyframes recon-spin {
  to { transform: rotate(360deg); }
}

/* ---- Result screen ---- */
#recon-result {
  display: none;
}

.recon-result-assignment {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-light, #6B7D33);
  margin-bottom: 6px;
}

.recon-result-headline {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--off-white, #F0EDE6);
  margin-bottom: 4px;
}

.recon-result-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 20px 0 24px;
}

.recon-result-bag {
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.recon-result-info {
  flex: 1;
}

.recon-result-meta {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.recon-result-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.recon-note-tag {
  background: rgba(212,197,169,0.08);
  border: 1px solid rgba(212,197,169,0.18);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--khaki-muted, #A89E83);
}

.recon-result-grind {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--olive-light, #6B7D33);
  margin-bottom: 10px;
}

.recon-result-why {
  font-size: 13px;
  color: #A89E83;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ---- CTAs ---- */
.recon-cta-primary {
  display: block;
  background: var(--olive, #4A5D23);
  color: var(--off-white, #F0EDE6);
  text-decoration: none;
  text-align: center;
  padding: 16px 24px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 10px;
  transition: background 0.2s ease;
}

.recon-cta-primary:hover { background: var(--olive-light, #6B7D33); }

.recon-cta-secondary {
  display: block;
  background: transparent;
  border: 1px solid rgba(212,197,169,0.25);
  color: var(--khaki-muted, #A89E83);
  text-decoration: none;
  text-align: center;
  padding: 14px 24px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.recon-cta-secondary:hover {
  border-color: rgba(212,197,169,0.5);
  color: var(--off-white, #F0EDE6);
}

/* ---- Email gate ---- */
.recon-email-gate {
  margin-top: 20px;
  border-top: 1px solid #222;
  padding-top: 20px;
}

.recon-email-gate-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted, #666);
  margin-bottom: 8px;
}

.recon-email-gate p {
  font-size: 13px;
  color: #A89E83;
  margin-bottom: 12px;
  line-height: 1.5;
}

.recon-email-row {
  display: flex;
  gap: 8px;
}

.recon-email-input {
  flex: 1;
  background: #0D0D0D;
  border: 1px solid rgba(212,197,169,0.18);
  color: var(--off-white, #F0EDE6);
  padding: 10px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  border-radius: 2px;
  outline: none;
}

.recon-email-input::placeholder { color: #444; }
.recon-email-input:focus { border-color: rgba(107,125,51,0.5); }

.recon-email-btn {
  background: rgba(107,125,51,0.5);
  border: 1px solid var(--olive-light, #6B7D33);
  color: var(--off-white, #F0EDE6);
  padding: 10px 16px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.recon-email-btn:hover { background: var(--olive-light, #6B7D33); }

.recon-code-display {
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  letter-spacing: 0.2em;
  color: var(--off-white, #F0EDE6);
  font-weight: 700;
  margin: 8px 0 4px;
}

.recon-share-block {
  margin-top: 24px;
  background: #0D0D0D;
  border: 1px solid #1A1A1A;
  border-radius: 3px;
  padding: 14px 18px;
  text-align: center;
}

.recon-retake {
  margin-top: 20px;
  text-align: center;
}

.recon-retake button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted, #666);
  text-transform: uppercase;
}

/* ---- PDP widget (sidebar embed) ---- */
.recon-widget {
  background: #111;
  border: 1px solid rgba(107,125,51,0.25);
  border-radius: 4px;
  padding: 18px 20px;
  margin-top: 24px;
}

.recon-widget-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--olive-light, #6B7D33);
  margin-bottom: 6px;
}

.recon-widget p {
  font-size: 13px;
  color: #A89E83;
  margin-bottom: 12px;
  line-height: 1.5;
}

.recon-widget a {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive-light, #6B7D33);
  text-decoration: none;
  border-bottom: 1px solid rgba(107,125,51,0.4);
  padding-bottom: 2px;
}

/* ---- Shop banner ---- */
.recon-shop-banner {
  background: rgba(107,125,51,0.08);
  border-top: 1px solid rgba(107,125,51,0.18);
  border-bottom: 1px solid rgba(107,125,51,0.18);
  padding: 14px 24px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--khaki-muted, #A89E83);
}

.recon-shop-banner a {
  color: var(--olive-light, #6B7D33);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 540px) {
  .recon-card { padding: 28px 20px 24px; }
  .recon-question { font-size: 22px; }
  .recon-options.cols-3 { grid-template-columns: 1fr; }
  .recon-options.tonal { grid-template-columns: 1fr; }
  .recon-result-hero { flex-direction: column; }
  .recon-result-bag { width: 100%; height: 200px; }
  .recon-email-row { flex-direction: column; }
}