/* ========================================================================
   ContractLab — Decision Lab
   ======================================================================== */

.lab-intro { background: var(--navy); color: var(--white); padding: var(--sp-7) 0; }
.lab-intro .eyebrow { color: var(--brass-light); }
.lab-intro h1 { color: var(--white); font-size: var(--fs-2xl); }
.lab-intro p { color: rgba(246,241,231,0.8); max-width: 62ch; margin-bottom: var(--sp-4); }

.lab-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.lab-tab-btn {
  background: rgba(255,255,255,0.08); color: rgba(246,241,231,0.85);
  border: 1px solid rgba(255,255,255,0.18); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600;
}
.lab-tab-btn.active { background: var(--brass); color: var(--navy-deep); border-color: var(--brass); }

.lab-progress { display: flex; gap: 6px; margin-bottom: var(--sp-5); }
.lab-progress-dot { width: 28px; height: 6px; border-radius: 3px; background: var(--parchment-line); }
.lab-progress-dot.done { background: var(--teal); }
.lab-progress-dot.current { background: var(--brass); }

.lab-facts {
  background: var(--parchment-dark);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.lab-fact-line { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.lab-fact-line b { color: var(--navy); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; margin-right: var(--sp-2); }

.lab-changed-fact {
  background: var(--tape-tint);
  border-left: 3px solid var(--tape);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5);
  font-weight: 600;
  color: var(--tape-dark);
}
.lab-changed-fact .eyebrow { color: var(--tape); display: block; margin-bottom: 4px; }

.lab-prompt { font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-4); }

.lab-options { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.lab-option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--parchment-line); border-radius: var(--radius-md);
  padding: var(--sp-4); cursor: pointer; background: var(--white);
}
.lab-option:hover { border-color: var(--brass); }
.lab-option input { margin-top: 3px; accent-color: var(--teal); }
.lab-option.picked { border-color: var(--teal); background: var(--teal-tint); }
.lab-option.correct-reveal { border-color: var(--success); background: #E4F0E7; }
.lab-option.incorrect-reveal { border-color: var(--danger); background: var(--tape-tint); }

.lab-decisive-fact { margin-bottom: var(--sp-5); }
.lab-decisive-fact label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: var(--sp-2); }
.lab-decisive-fact textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm);
  border: 1px solid var(--parchment-line); border-radius: var(--radius-sm);
  padding: var(--sp-3); resize: vertical; min-height: 60px;
}

.lab-reasoning {
  display: none;
  background: var(--white); border: 1px solid var(--parchment-line);
  border-radius: var(--radius-md); padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.lab-reasoning.shown { display: block; }
.lab-reasoning h4 { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-dark); margin-bottom: var(--sp-2); }
.lab-reasoning .authority { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--sp-3); }

.lab-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-3); padding: 4px 10px; border-radius: 999px; }
.lab-verdict.correct { background: #E4F0E7; color: var(--success); }
.lab-verdict.incorrect { background: var(--tape-tint); color: var(--tape-dark); }

.lab-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.lab-summary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: var(--white); border-radius: var(--radius-lg); padding: var(--sp-6);
}
.lab-summary .eyebrow { color: var(--brass-light); }
.lab-summary p { color: rgba(246,241,231,0.9); }