/* Help article shared styles */

.article-meta {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 24px;
  font-size: 13px;
  color: var(--text-muted);
}
.article-meta-pill {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.crumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--text); }

.article-toc {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
}
.article-toc h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 10px;
}
.article-toc ul { margin: 0; padding-left: 18px; }
.article-toc li { font-size: 14px; margin: 4px 0; }

.callout {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 16px 0;
  font-size: 14px;
}
.callout.tip {
  background: #DBEAFE; color: #1E3A8A;
  border-left: 4px solid #3B82F6;
}
.callout.warn {
  background: #FEF3C7; color: #92400E;
  border-left: 4px solid #F59E0B;
}
.callout.danger {
  background: #FEE2E2; color: #991B1B;
  border-left: 4px solid #DC2626;
}

.next-articles {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.next-articles h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 12px;
}
.next-articles ul { list-style: none; padding: 0; }
.next-articles li { margin: 6px 0; }