/* Central HVAC Troubleshooter */

.troubleshoot-bg { background:#f4f8fb; }
.troubleshoot-wrap { max-width:1100px; }

.troubleshoot-progress {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-bottom:26px;
}
.troubleshoot-progress button {
  padding:12px 10px;
  border-radius:10px;
  background:#e8eef4;
  color:#617286;
  text-align:center;
  font-size:.85rem;
}
.troubleshoot-progress button.active { background:#0b5ed7; color:#fff; }

.troubleshoot-step { display:none; }
.troubleshoot-step.active { display:block; }

.step-heading { margin-bottom:24px; }
.step-heading h2 { margin:7px 0 8px; }

.symptom-grid,
.system-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.symptom-card {
  display:grid;
  grid-template-columns:22px 56px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:112px;
  padding:16px 18px;
  border:1px solid #dfe7ef;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(12,36,61,.04);
}
.symptom-card:hover,
.system-option:hover { border-color:#9bc8f5; }
.symptom-card:has(input:checked),
.system-option:has(input:checked) {
  border-color:#0b5ed7;
  background:#f5f9ff;
  box-shadow:0 0 0 2px rgba(11,94,215,.10);
}
.symptom-card input,
.system-option input {
  width:18px;
  height:18px;
  margin:0;
}
.symptom-icon {
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#eef6ff;
  font-size:1.45rem;
}
.symptom-card strong,
.symptom-card small {
  display:block;
}
.symptom-card strong {
  color:#10233a;
  line-height:1.3;
}
.symptom-card small {
  margin-top:5px;
  color:#657487;
  line-height:1.4;
  font-weight:500;
}

.question-stack { display:grid; gap:16px; }
.question-card,
.filter-card,
.troubleshoot-report {
  padding:22px;
  background:#fff;
  border:1px solid #dfe7ef;
  border-radius:15px;
  box-shadow:0 8px 24px rgba(12,36,61,.05);
}
.question-card h3,
.filter-card h3 { margin-top:0; }
.question-card .choice-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.question-card label.choice {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #e0e7ef;
  border-radius:10px;
  background:#fafcfe;
  font-weight:600;
}
.question-card label.choice input { margin:0; }

.camera-box {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border:2px dashed #b8c8d8;
  border-radius:14px;
  cursor:pointer;
  background:#f8fbfe;
}
.camera-box input {
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.camera-box small,
.camera-box strong { display:block; }
.camera-box small { margin-top:4px; color:#657487; font-weight:500; }
.camera-icon { font-size:2rem; }
.photo-preview { margin-top:18px; }
.photo-preview img {
  display:block;
  max-width:100%;
  max-height:340px;
  margin-bottom:12px;
  border-radius:12px;
}

.system-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-option {
  display:grid;
  grid-template-columns:22px 44px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:86px;
  padding:14px 16px;
  border:1px solid #dfe7ef;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.system-option span {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#eef6ff;
}
.system-option strong { color:#10233a; }

.system-details { margin-top:18px; }

.filter-card label,
.form-grid label {
  font-weight:700;
  color:#10233a;
}
.filter-card input,
.filter-card select,
.form-grid input,
.form-grid select {
  width:100%;
  min-height:46px;
  margin-top:7px;
  padding:10px 12px;
  border:1px solid #cbd6e2;
  border-radius:8px;
  background:#fff;
  font:inherit;
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.form-grid .wide { grid-column:1/-1; }

.consent {
  display:grid;
  gap:10px;
  margin-top:22px;
}
.consent-option {
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:54px;
  padding:12px 14px;
  border:1px solid #e0e7ef;
  border-radius:10px;
  background:#fafcfe;
}
.consent-option input {
  width:18px;
  height:18px;
  margin:0;
}
.consent-option span {
  font-weight:600;
  color:#10233a;
}

.actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
}
.actions.right { justify-content:flex-end; }
.actions.center { justify-content:center; flex-wrap:wrap; }

.troubleshoot-error {
  margin-top:18px;
  padding:14px 16px;
  border-radius:10px;
  background:#fff1f0;
  color:#8f1d1d;
  font-weight:700;
}

.report-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}
.report-item {
  padding:16px;
  border-radius:12px;
  background:#f5f9fc;
}
.report-item strong,
.report-item span { display:block; }
.report-item strong {
  margin-bottom:4px;
  color:#63758a;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.report-item span {
  color:#10233a;
  font-weight:800;
}

.report-safe,
.report-pro,
.report-warning {
  margin-top:18px;
  padding:18px;
  border-radius:10px;
}
.report-safe { background:#eefaf3; border-left:4px solid #2b9a5b; }
.report-pro { background:#eef6ff; border-left:4px solid #0b5ed7; }
.report-warning { background:#fff5eb; border-left:4px solid #f28b20; }

.report-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

@media (max-width:900px) {
  .system-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .troubleshoot-progress { grid-template-columns:repeat(2,1fr); }
  .symptom-grid,
  .system-grid,
  .question-card .choice-row,
  .form-grid,
  .report-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .actions { flex-direction:column; }
  .actions .btn { width:100%; }
}


/* Step navigation + Step 2 alignment refinement */
.troubleshoot-progress button {
  border:0;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.troubleshoot-progress button:hover {
  background:#dce8f5;
  color:#0b5ed7;
}
.troubleshoot-progress button.active:hover {
  background:#0b5ed7;
  color:#fff;
}
.troubleshoot-progress button:disabled {
  cursor:not-allowed;
  opacity:.58;
}

.question-card .choice-row {
  align-items:stretch;
}
.question-card label.choice {
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-height:72px;
  padding:14px 18px;
  text-align:left;
}
.question-card label.choice input {
  width:18px;
  height:18px;
  margin:0;
  justify-self:center;
}
.question-card label.choice {
  color:#10233a;
  line-height:1.35;
}


/* Deeper diagnostic result ranking */
.report-ranked {
  margin-top:18px;
  padding:18px;
  border-radius:10px;
  background:#fff;
  border:1px solid #dfe7ef;
}
.report-ranked > strong {
  display:block;
  margin-bottom:12px;
  color:#10233a;
}
.ranked-cause {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-top:1px solid #e7edf3;
}
.ranked-cause:first-of-type {
  border-top:0;
}
.rank-number {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#eef6ff;
  color:#0b5ed7;
  font-weight:900;
}
.ranked-cause b,
.ranked-cause small {
  display:block;
}
.ranked-cause b {
  color:#10233a;
  line-height:1.3;
}
.ranked-cause small {
  margin-top:4px;
  color:#657487;
  line-height:1.4;
}


/* Contextual reading recommendations */
.report-reading {
  margin-top:22px;
  padding:20px;
  border:1px solid #dfe7ef;
  border-radius:12px;
  background:#fff;
}
.report-reading h3 {
  margin:6px 0 6px;
}
.report-reading > p {
  margin:0 0 14px;
  color:#657487;
}
.report-reading-links {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.reading-link {
  display:flex;
  min-height:108px;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border:1px solid #dfe7ef;
  border-radius:10px;
  background:#f8fbfe;
  text-decoration:none;
}
.reading-link:hover {
  border-color:#9bc8f5;
  background:#f1f7fd;
}
.reading-link span {
  color:#10233a;
  font-weight:800;
  line-height:1.3;
}
.reading-link b {
  color:#0b5ed7;
  font-size:.88rem;
}
@media (max-width:760px) {
  .report-reading-links { grid-template-columns:1fr; }
  .reading-link { min-height:88px; }
}