/* ============================================================
   TOOLBOX — Guide page styles (new design system)
   Restyles the existing guide markup/classes onto the tokens
   in colors_and_type.css. Loaded AFTER colors_and_type.css and
   styles.css. Header, footer, buttons, store-badges, sticky bar
   and .container come from styles.css; this file handles the
   guide article body only.
   ============================================================ */

/* ---------- Page base ---------- */
body {
  margin: 0;
  background: var(--tb-bg-warm);
  color: var(--tb-text);
  font-family: var(--tb-font-sans);
  font-size: var(--tb-fs-body);
  line-height: var(--tb-lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Content column ---------- */
.breadcrumb,
.guide-article {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--tb-s-6);
}

.breadcrumb {
  margin-top: var(--tb-s-8);
  margin-bottom: var(--tb-s-4);
  font-size: var(--tb-fs-sm);
  color: var(--tb-text-muted);
}
.breadcrumb a { color: var(--tb-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--tb-orange-700); }
.breadcrumb .sep { margin: 0 var(--tb-s-2); color: var(--tb-text-subtle); }

.guide-article { padding-bottom: var(--tb-s-20); }

/* ---------- Risk badge (safety tier) ---------- */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-s-2);
  font-size: var(--tb-fs-sm);
  font-weight: var(--tb-fw-semibold);
  padding: 6px 14px;
  border-radius: var(--tb-r-pill);
  border: 1px solid transparent;
  margin-bottom: var(--tb-s-4);
}
.risk-badge.low,
.risk-badge.green {
  color: #1B7F35;
  background: var(--tb-safe-bg);
  border-color: var(--tb-safe-border);
}
.risk-badge.medium,
.risk-badge.moderate,
.risk-badge.amber {
  color: #92500A;
  background: var(--tb-heat-bg);
  border-color: var(--tb-heat-border);
}
.risk-badge.high,
.risk-badge.red {
  color: #A11A1A;
  background: var(--tb-danger-bg);
  border-color: var(--tb-danger-border);
}

/* ---------- Meta + intro ---------- */
.guide-meta {
  font-size: var(--tb-fs-sm);
  color: var(--tb-text-subtle);
  margin-bottom: var(--tb-s-5);
}

.guide-article h1 {
  font-size: var(--tb-fs-h1);
  line-height: var(--tb-lh-snug);
  letter-spacing: var(--tb-tr-tight);
  font-weight: var(--tb-fw-bold);
  color: var(--tb-text);
  margin: 0 0 var(--tb-s-5);
  text-wrap: balance;
}

.guide-intro {
  font-size: var(--tb-fs-lg);
  line-height: var(--tb-lh-relaxed);
  color: var(--tb-text);
  margin-bottom: var(--tb-s-6);
}

.symptom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-s-2);
  margin-bottom: var(--tb-s-6);
}
.symptom-chips span {
  font-size: var(--tb-fs-xs);
  color: var(--tb-text-muted);
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-pill);
  padding: 4px 12px;
}

.key-takeaway {
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-left: 4px solid var(--tb-orange);
  border-radius: var(--tb-r-lg);
  padding: var(--tb-s-5) var(--tb-s-6);
  margin-bottom: var(--tb-s-8);
  box-shadow: var(--tb-shadow-sm);
}
.key-takeaway strong { color: var(--tb-text-strong); }

/* ---------- Body headings + text ---------- */
.guide-article h2 {
  font-size: var(--tb-fs-h2);
  line-height: var(--tb-lh-snug);
  letter-spacing: var(--tb-tr-snug);
  font-weight: var(--tb-fw-bold);
  color: var(--tb-text);
  margin: var(--tb-s-12) 0 var(--tb-s-4);
}
.guide-article h3 {
  font-size: var(--tb-fs-h4);
  font-weight: var(--tb-fw-semibold);
  color: var(--tb-text);
  margin: var(--tb-s-6) 0 var(--tb-s-3);
}
.guide-article p { margin: 0 0 var(--tb-s-4); }
.guide-article a { color: var(--tb-orange-700); }

/* ---------- Step list ---------- */
.step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tb-s-8);
}
.step-list li {
  position: relative;
  padding: 0 0 var(--tb-s-5) var(--tb-s-12);
  margin-bottom: var(--tb-s-4);
}
.step-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--tb-orange);
  color: #fff;
  font-weight: var(--tb-fw-bold);
  font-size: var(--tb-fs-sm);
  border-radius: var(--tb-r-pill);
}

/* ---------- CTA box (app download) ---------- */
.cta-box {
  background: var(--tb-bg);
  border: 1px solid var(--tb-orange-100);
  border-radius: var(--tb-r-xl);
  padding: var(--tb-s-8);
  margin: var(--tb-s-10) 0;
  box-shadow: var(--tb-shadow-md);
  text-align: center;
}
.cta-box h3 {
  font-size: var(--tb-fs-h3);
  font-weight: var(--tb-fw-bold);
  margin: 0 0 var(--tb-s-3);
}
.cta-box p { color: var(--tb-text-muted); max-width: 52ch; margin: 0 auto var(--tb-s-5); }
.cta-box .store-badges { justify-content: center; }
.cta-fineprint {
  font-size: var(--tb-fs-sm);
  color: var(--tb-text-subtle);
  margin-top: var(--tb-s-4) !important;
}

/* ---------- Pro referral ---------- */
.pro-referral {
  background: var(--tb-bg-cool);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-xl);
  padding: var(--tb-s-8);
  margin: var(--tb-s-8) 0;
  text-align: center;
}
.pro-referral h3 { font-size: var(--tb-fs-h4); margin: 0 0 var(--tb-s-3); }
.pro-referral p { color: var(--tb-text-muted); max-width: 52ch; margin: 0 auto var(--tb-s-5); }
.pro-referral-btn {
  display: inline-block;
  background: var(--tb-text);
  color: #fff !important;
  text-decoration: none;
  font-weight: var(--tb-fw-semibold);
  padding: 12px 24px;
  border-radius: var(--tb-r-pill);
  transition: background var(--tb-dur-base) var(--tb-ease);
}
.pro-referral-btn:hover { background: var(--tb-text-strong); }
.pro-referral-note { font-size: var(--tb-fs-xs); color: var(--tb-text-subtle); margin-top: var(--tb-s-3) !important; }

/* ---------- Warning box ---------- */
.warning-box {
  background: var(--tb-danger-bg);
  border: 1px solid var(--tb-danger-border);
  border-radius: var(--tb-r-lg);
  padding: var(--tb-s-5) var(--tb-s-6);
  margin: var(--tb-s-6) 0 var(--tb-s-8);
}
.warning-box strong { color: #A11A1A; }
.warning-box h3 {
  display: flex;
  align-items: center;
  gap: var(--tb-s-2);
  margin-top: 0;
}
/* Brand caution icon (replaces the OS warning emoji) */
.hazard-ic {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.15em;
  color: var(--tb-danger);
}

/* ---------- Cost box ---------- */
.cost-box {
  display: flex;
  gap: var(--tb-s-4);
  margin: var(--tb-s-4) 0 var(--tb-s-8);
  flex-wrap: wrap;
}
.cost-item {
  flex: 1 1 200px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-lg);
  padding: var(--tb-s-6);
  text-align: center;
  box-shadow: var(--tb-shadow-sm);
}
.cost-item .label {
  font-size: var(--tb-fs-sm);
  font-weight: var(--tb-fw-semibold);
  color: var(--tb-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tb-tr-wide);
  margin-bottom: var(--tb-s-2);
}
.cost-item .amount {
  font-size: var(--tb-fs-h3);
  font-weight: var(--tb-fw-bold);
  color: var(--tb-text);
}
.cost-item .amount.diy { color: var(--tb-safe); }

/* ---------- FAQ ---------- */
.faq-section { margin: var(--tb-s-10) 0; }
.faq-item {
  border-bottom: 1px solid var(--tb-divider);
  padding: var(--tb-s-5) 0;
}
.faq-item h3 {
  font-size: var(--tb-fs-h4);
  font-weight: var(--tb-fw-semibold);
  margin: 0 0 var(--tb-s-2);
}
.faq-item p { color: var(--tb-text-muted); margin: 0; }

/* ---------- Related guides ---------- */
.related-guides { margin: var(--tb-s-12) 0 0; }
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--tb-s-4);
  margin-top: var(--tb-s-4);
}
.related-links a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tb-s-3);
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-lg);
  padding: var(--tb-s-5);
  text-decoration: none;
  color: var(--tb-text);
  font-size: var(--tb-fs-body);
  line-height: var(--tb-lh-snug);
  font-weight: var(--tb-fw-semibold);
  box-shadow: var(--tb-shadow-xs);
  transition: box-shadow var(--tb-dur-base) var(--tb-ease), transform var(--tb-dur-base) var(--tb-ease);
}
.related-links a:hover { box-shadow: var(--tb-shadow-md); transform: translateY(-1px); }
.badge-sm {
  font-size: 11px;
  font-weight: var(--tb-fw-semibold);
  padding: 2px 8px;
  border-radius: var(--tb-r-pill);
  white-space: nowrap;
}
.badge-sm.green, .badge-sm.low { color: #1B7F35; background: var(--tb-safe-bg); }
.badge-sm.amber, .badge-sm.moderate, .badge-sm.medium { color: #92500A; background: var(--tb-heat-bg); }
.badge-sm.red, .badge-sm.high   { color: #A11A1A; background: var(--tb-danger-bg); }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .breadcrumb, .guide-article { padding-inline: var(--tb-s-5); }
  .guide-article h1 { font-size: 30px; }
  .guide-article h2 { font-size: 26px; }
  .cta-box, .pro-referral { padding: var(--tb-s-6); }
  .cost-box { flex-direction: column; }
}