/* RT Diagnostic Tool — branching decision tree.
   Design tokens (var(--orange) etc.) come from the shared interactive-card.css.
   Scoped under #bsb-rt-diagnostic so internals never leak.

   NOTE: the source article shipped these .diag-* rules in an inline <style> block
   that was not captured in the source extract. The rules below reconstruct that
   styling using the shared BSB interactive-card tokens to stay on-brand. */

#bsb-rt-diagnostic {
  /* seed the shared tokens so var(--orange) etc. resolve even though the
     .bsb-icard shell is not used by this tool's markup */
  --orange: #ec6607;
  --orange-hover: #fc8a39;
  --tint: #fff8f4;
  --tint-border: #f0c8a0;
  --text: #242425;
  --body-text: #404040;
  --muted: #707070;
  --border: #d6d6d6;
  --light-bg: #f5f5f5;
  display: block;
  margin: 2em 0;
  font-family: inherit;
  color: var(--body-text);
  line-height: 1.6;
}

#bsb-rt-diagnostic *,
#bsb-rt-diagnostic *::before,
#bsb-rt-diagnostic *::after { box-sizing: border-box; }

#bsb-rt-diagnostic .diag-tool {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

#bsb-rt-diagnostic .diag-tool > h3 {
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

#bsb-rt-diagnostic .diag-q {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.4;
}

#bsb-rt-diagnostic .diag-btn {
  display: block;
  width: 100%;
  background: var(--light-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 13px 18px;
  margin: 0 0 10px;
  text-align: left;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

#bsb-rt-diagnostic .diag-btn:hover {
  border-color: var(--orange);
  background: var(--tint);
  color: var(--orange);
}

#bsb-rt-diagnostic .diag-result {
  background: var(--tint);
  border: 1.5px solid var(--tint-border);
  border-radius: 8px;
  padding: 18px 20px;
}

#bsb-rt-diagnostic .diag-result h4 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

#bsb-rt-diagnostic .diag-result p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--body-text);
  line-height: 1.6;
}

#bsb-rt-diagnostic .diag-result p:last-of-type { margin-bottom: 16px; }

#bsb-rt-diagnostic .diag-result a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#bsb-rt-diagnostic .diag-restart {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#bsb-rt-diagnostic .diag-restart:hover { color: var(--text); }

@media (max-width: 480px) {
  #bsb-rt-diagnostic .diag-tool { padding: 18px; }
  #bsb-rt-diagnostic .diag-q { font-size: 1rem; }
}