/* ── Troubleshooter — guided decision-tree wizard ───────────────────────────
   Pairs with troubleshoot.html / troubleshoot.js. Relies on the shared theme
   tokens defined in hub.css / the page's inline :root. */

.ts-wrap { max-width: 760px; margin: 0 auto; }

.ts-content { display: block; }

/* ── Breadcrumb of answers ──────────────────────────────────────────────── */
.ts-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 16px; font-size: 0.8rem;
}
.ts-crumb {
  background: var(--surface-alt, #22262e); border: 1px solid var(--border);
  color: var(--text-muted); padding: 4px 10px; border-radius: 999px;
  font: inherit; cursor: pointer; transition: color .15s, border-color .15s;
}
.ts-crumb:hover { color: var(--text); border-color: var(--blue, #4da6e8); }
.ts-crumb-current { color: var(--text); cursor: default; background: rgba(255,255,255,0.05); }
.ts-crumb-sep { color: var(--text-muted); opacity: .55; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.ts-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 14px); padding: 28px;
}
@media (max-width: 600px) { .ts-card { padding: 20px 16px; } }

/* ── Question ───────────────────────────────────────────────────────────── */
.ts-q-prompt {
  font-family: 'Poppins', sans-serif; font-size: 1.5rem; line-height: 1.3;
  letter-spacing: -0.4px; margin: 0 0 8px;
}
@media (max-width: 600px) { .ts-q-prompt { font-size: 1.25rem; } }
.ts-q-help { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 20px; }
.ts-q-help a { color: var(--blue, #4da6e8); }

.ts-options { display: flex; flex-direction: column; gap: 10px; }
.ts-option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface-alt, #22262e); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 14px 16px; cursor: pointer;
  color: var(--text); font: inherit; transition: border-color .15s, background .15s, transform .05s;
}
.ts-option:hover { border-color: var(--red, #c0392b); background: #262a32; }
.ts-option:active { transform: translateY(1px); }
.ts-option-icon { font-size: 1.3rem; line-height: 1; flex: none; width: 26px; text-align: center; }
.ts-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ts-option-label { font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.ts-option-desc { color: var(--text-muted); font-size: 0.83rem; line-height: 1.4; }
.ts-option-arrow { color: var(--text-muted); flex: none; transition: transform .15s, color .15s; }
.ts-option:hover .ts-option-arrow { color: var(--red, #c0392b); transform: translateX(2px); }

/* ── Quick-pick chips (common issues) ───────────────────────────────────── */
.ts-quick { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ts-quick-label, .ts-related-label {
  display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 8px;
}
.ts-quick-chips, .ts-related { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ts-chip {
  background: rgba(192,57,43,0.10); border: 1px solid rgba(192,57,43,0.35);
  color: var(--text); padding: 7px 12px; border-radius: 999px; font: inherit;
  font-size: 0.84rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.ts-chip:hover { background: rgba(192,57,43,0.2); border-color: var(--red, #c0392b); }
.ts-chip-related {
  background: var(--surface-alt, #22262e); border-color: var(--border); color: var(--text-muted);
}
.ts-chip-related:hover { color: var(--text); border-color: var(--blue, #4da6e8); background: #262a32; }

/* ── Controls (Back / Start over) ───────────────────────────────────────── */
.ts-controls { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.ts-btn {
  display: inline-block; font: inherit; font-size: 0.88rem; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-sm, 8px); cursor: pointer;
  text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.ts-btn-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.ts-btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }
.ts-btn-primary {
  background: var(--red, #c0392b); color: #fff; border-color: var(--red, #c0392b);
  box-shadow: 0 2px 12px var(--red-glow, rgba(192,57,43,0.15));
}
.ts-btn-primary:hover { background: var(--red-dark, #a93226); }
.ts-btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.ts-btn-outline:hover { border-color: var(--red, #c0392b); }

/* ── Outcome card ───────────────────────────────────────────────────────── */
.ts-outcome { border-top-width: 3px; border-top-style: solid; }
.ts-sev-fix { border-top-color: var(--blue, #4da6e8); }
.ts-sev-maintenance { border-top-color: var(--amber, #e8a838); }
.ts-sev-support { border-top-color: var(--red, #c0392b); }
.ts-sev-info { border-top-color: var(--text-muted); }

.ts-outcome-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ts-sev-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text-muted);
}
.ts-sev-fix .ts-sev-badge { background: rgba(77,166,232,0.15); color: var(--blue, #4da6e8); }
.ts-sev-maintenance .ts-sev-badge { background: rgba(232,168,56,0.15); color: var(--amber, #e8a838); }
.ts-sev-support .ts-sev-badge { background: rgba(192,57,43,0.18); color: #e8857a; }
.ts-model-tag {
  font-size: 0.74rem; color: var(--text-muted); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px;
}
.ts-outcome-title {
  font-family: 'Poppins', sans-serif; font-size: 1.4rem; line-height: 1.3;
  letter-spacing: -0.3px; margin: 0 0 8px;
}
@media (max-width: 600px) { .ts-outcome-title { font-size: 1.2rem; } }
.ts-outcome-lead { color: var(--text); font-size: 0.96rem; line-height: 1.6; margin: 0 0 18px; }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.ts-steps { list-style: none; counter-reset: ts; margin: 0 0 4px; padding: 0; }
.ts-steps li {
  position: relative; padding: 12px 0 12px 40px; line-height: 1.6; font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.ts-steps li:last-child { border-bottom: none; }
.ts-steps li::before {
  counter-increment: ts; content: counter(ts);
  position: absolute; left: 0; top: 11px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(77,166,232,0.15); color: var(--blue, #4da6e8);
  font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ts-sev-maintenance .ts-steps li::before { background: rgba(232,168,56,0.15); color: var(--amber, #e8a838); }
.ts-sev-support .ts-steps li::before { background: rgba(192,57,43,0.16); color: #e8857a; }
.ts-sev-info .ts-steps li::before { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.ts-steps a { color: var(--blue, #4da6e8); }
.ts-steps strong { color: var(--text); }

/* ── Caution / note callouts ────────────────────────────────────────────── */
.ts-caution, .ts-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem; line-height: 1.6;
}
.ts-caution { background: rgba(192,57,43,0.10); border: 1px solid rgba(192,57,43,0.3); }
.ts-caution-ic { color: var(--red, #c0392b); font-size: 1.1rem; line-height: 1.5; flex: none; }
.ts-note { background: rgba(77,166,232,0.08); border: 1px solid rgba(77,166,232,0.25); }
.ts-note-ic { color: var(--blue, #4da6e8); font-size: 1rem; line-height: 1.6; flex: none; }
.ts-caution p, .ts-note p { margin: 0; }
.ts-caution strong, .ts-note strong { color: var(--text); }

/* ── Resource chips (videos, help articles) ─────────────────────────────── */
.ts-resources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ts-resource {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 12px; border-radius: var(--radius-sm, 8px); font-size: 0.84rem;
  text-decoration: none; color: var(--text); border: 1px solid var(--border);
  background: var(--surface-alt, #22262e); transition: border-color .15s, background .15s;
}
.ts-resource:hover { border-color: var(--blue, #4da6e8); background: #262a32; }
.ts-resource-ic { flex: none; }
.ts-resource-video .ts-resource-ic { color: var(--red, #c0392b); }
.ts-resource-doc .ts-resource-ic { color: var(--blue, #4da6e8); }
.ts-resource-pending {
  border-style: dashed; color: var(--text-muted); cursor: default; background: transparent;
}
.ts-resource-pending:hover { border-color: var(--border); background: transparent; }

/* ── "Also:" related links row ──────────────────────────────────────────── */
.ts-related { margin-top: 18px; }
.ts-related-label { display: inline-block; margin: 0 8px 0 0; }

/* ── Outcome footer + escalation ────────────────────────────────────────── */
.ts-outcome-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.ts-escalate {
  margin-top: 24px; padding: 18px 20px; border-radius: var(--radius-sm, 8px);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.ts-escalate-firm { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.3); }
.ts-escalate-h { font-family: 'Poppins', sans-serif; font-size: 1rem; margin: 0 0 6px; }
.ts-escalate-p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 14px; }
.ts-escalate-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-escalate-note { color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; margin: 14px 0 0; }
.ts-escalate-note a { color: var(--blue, #4da6e8); }

/* ── Embed mode tweaks ──────────────────────────────────────────────────── */
body.is-embed .ts-wrap { max-width: 760px; }
body.is-embed main { padding-top: 20px; }