/* Ridgeline Detection Engineering — Interactive Lab Components */

.lab-container { margin: 1.5rem 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Stat cards */
.lab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.lab-stat { background: #112436; border-radius: 6px; padding: 10px 12px; text-align: center; border: 1px solid #1a3a52; }
.lab-stat-val { font-size: 20px; font-weight: 600; color: #e2e8f0; }
.lab-stat-label { font-size: 11px; color: #64748b; margin-top: 2px; }

/* Queue rows */
.lab-queue-header { display: grid; align-items: center; padding: 6px 12px; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.lab-queue-row { display: grid; align-items: center; padding: 10px 12px; border: 1px solid #1a3a52; border-radius: 6px; margin-bottom: 4px; cursor: pointer; transition: all 0.15s; font-size: 13px; color: #cbd5e1; background: #0a1628; }
.lab-queue-row:hover { background: #112436; border-color: #2a4a62; }
.lab-queue-row.selected { background: #112436; border-color: #E86A2A; }

/* Severity badges */
.lab-sev { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.lab-sev-critical { background: #501313; color: #f09595; }
.lab-sev-high { background: #412402; color: #fac775; }
.lab-sev-medium { background: #042c53; color: #85b7eb; }
.lab-sev-low { background: #04342c; color: #5dcaa5; }

/* Detail panel */
.lab-detail { background: #0d1f30; border: 1px solid #1a3a52; border-radius: 8px; padding: 16px; margin-top: 12px; font-size: 13px; line-height: 1.7; color: #94a3b8; }
.lab-detail h4 { font-size: 14px; font-weight: 600; color: #e2e8f0; margin-bottom: 10px; }
.lab-detail-field { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #1a3a52; font-size: 13px; }
.lab-detail-label { color: #64748b; }
.lab-detail-value { color: #cbd5e1; }

/* Triage buttons */
.lab-triage { display: flex; gap: 8px; margin-top: 14px; }
.lab-triage button { padding: 7px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid; background: transparent; transition: all 0.15s; }
.lab-triage button:hover { filter: brightness(1.2); }
.lab-btn-tp { border-color: #a32d2d; color: #f09595; }
.lab-btn-tp:hover { background: rgba(163,45,45,0.15); }
.lab-btn-fp { border-color: #854f0b; color: #fac775; }
.lab-btn-fp:hover { background: rgba(133,79,11,0.15); }
.lab-btn-bp { border-color: #0f6e56; color: #5dcaa5; }
.lab-btn-bp:hover { background: rgba(15,110,86,0.15); }

/* Feedback */
.lab-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.7; }
.lab-feedback-correct { background: #042d1c; border: 1px solid #0f6e56; color: #5dcaa5; }
.lab-feedback-wrong { background: #2d0a0a; border: 1px solid #a32d2d; color: #f09595; }

/* Scenario engine */
.lab-chain-step { display: flex; gap: 12px; padding: 12px; border: 1px solid #1a3a52; border-radius: 6px; margin-bottom: 5px; cursor: pointer; transition: all 0.15s; background: #0a1628; }
.lab-chain-step:hover { background: #112436; }
.lab-chain-step.active { border-color: #E86A2A; background: #112436; }
.lab-chain-step.detected { border-color: #0f6e56; }
.lab-chain-step.missed { border-color: #a32d2d; }
.lab-step-num { width: 30px; height: 30px; border-radius: 50%; background: #1a3a52; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #94a3b8; flex-shrink: 0; }
.lab-step-num.correct { background: #0f6e56; color: #fff; }
.lab-step-num.wrong { background: #a32d2d; color: #fff; }
.lab-step-title { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.lab-step-tech { font-size: 11px; color: #64748b; margin-top: 2px; }
.lab-step-detail { background: #0d1f30; border: 1px solid #1a3a52; border-radius: 8px; padding: 16px; margin-top: 10px; }
.lab-step-log { background: #0a1628; padding: 12px; border-radius: 4px; font-family: monospace; font-size: 12px; line-height: 1.6; color: #7dd3c0; margin: 10px 0; white-space: pre-wrap; overflow-x: auto; }
.lab-options { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.lab-option { padding: 10px 14px; border: 1px solid #1a3a52; border-radius: 6px; cursor: pointer; font-size: 12px; color: #cbd5e1; transition: all 0.15s; background: #0a1628; }
.lab-option:hover { background: #112436; border-color: #2a4a62; }
.lab-option.correct { border-color: #0f6e56; background: rgba(15,110,86,0.1); color: #5dcaa5; }
.lab-option.wrong { border-color: #a32d2d; background: rgba(163,45,45,0.06); color: #94a3b8; }
.lab-explanation { margin-top: 12px; font-size: 13px; line-height: 1.7; color: #94a3b8; padding: 12px; background: #0a1628; border-radius: 6px; border-left: 3px solid #E86A2A; }

/* Score bar */
.lab-score-bar { display: flex; gap: 16px; padding: 10px 14px; background: #112436; border-radius: 6px; margin-bottom: 14px; font-size: 12px; color: #94a3b8; align-items: center; border: 1px solid #1a3a52; }
.lab-score-bar strong { color: #E86A2A; font-weight: 600; }

/* Parameter sandbox */
.lab-param-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lab-param-label { font-size: 13px; color: #94a3b8; min-width: 120px; }
.lab-param-slider { flex: 1; -webkit-appearance: none; height: 4px; background: #1a3a52; border-radius: 2px; outline: none; }
.lab-param-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #E86A2A; border-radius: 50%; cursor: pointer; }
.lab-param-val { font-size: 14px; font-weight: 600; color: #e2e8f0; min-width: 40px; text-align: right; }
.lab-query-preview { background: #0a1628; padding: 14px; border-radius: 6px; font-family: monospace; font-size: 12px; line-height: 1.6; color: #7dd3c0; margin: 12px 0; white-space: pre-wrap; border: 1px solid #1a3a52; }
.lab-query-keyword { color: #c084fc; }
.lab-query-field { color: #60a5fa; }
.lab-query-val { color: #fbbf24; }
.lab-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.lab-result-card { background: #112436; border: 1px solid #1a3a52; border-radius: 6px; padding: 12px; text-align: center; }
.lab-result-val { font-size: 22px; font-weight: 600; }
.lab-result-label { font-size: 11px; color: #64748b; margin-top: 2px; }
.lab-result-good { color: #5dcaa5; }
.lab-result-warn { color: #fac775; }
.lab-result-bad { color: #f09595; }

/* Responsive */
@media (max-width: 640px) {
  .lab-stats { grid-template-columns: repeat(2, 1fr); }
  .lab-results-grid { grid-template-columns: 1fr; }
  .lab-queue-header, .lab-queue-row { font-size: 11px; }
}