/* =========================================================
   BAYES' THEOREM CALCULATOR — component styles
   Namespaced bayes- to avoid collision with site-wide st- classes.
   Uses site design tokens (--st-*) for full visual consistency.
   ========================================================= */

.bayes-calc-card {
  background: var(--st-paper-raised);
  border: var(--st-border-width) solid var(--st-border);
  border-radius: var(--st-radius-lg);
  padding: var(--st-space-6);
}

/* ---------- Mode toggles ---------- */
.bayes-mode-toggle,
.bayes-evidence-toggle {
  display: inline-flex;
  border: var(--st-border-width) solid var(--st-border-strong);
  border-radius: var(--st-radius);
  overflow: hidden;
  margin-bottom: var(--st-space-5);
}
.bayes-mode-btn,
.bayes-evidence-btn {
  padding: 0.6em 1.1em;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  background: var(--st-paper-raised);
  border: none;
  cursor: pointer;
  color: var(--st-ink-soft);
  transition: background var(--st-transition), color var(--st-transition);
}
.bayes-mode-btn + .bayes-mode-btn,
.bayes-evidence-btn + .bayes-evidence-btn {
  border-left: var(--st-border-width) solid var(--st-border-strong);
}
.bayes-mode-btn[aria-pressed="true"],
.bayes-evidence-btn[aria-pressed="true"] {
  background: var(--st-primary);
  color: #fff;
}

/* ---------- Form layout ---------- */
.bayes-panel[hidden] { display: none; }
.bayes-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--st-space-4);
}
.bayes-field-full { grid-column: 1 / -1; }

.bayes-calc-actions {
  margin-top: var(--st-space-5);
  display: flex;
  gap: var(--st-space-3);
  flex-wrap: wrap;
}

.bayes-error {
  margin-top: var(--st-space-4);
  padding: var(--st-space-3) var(--st-space-4);
  background: var(--st-error-tint);
  color: var(--st-error);
  border-radius: var(--st-radius);
  font-size: var(--st-fs-sm);
}
.bayes-error[hidden] { display: none; }

/* ---------- Results ---------- */
.bayes-results-wrap {
  margin-top: var(--st-space-6);
  padding-top: var(--st-space-6);
  border-top: var(--st-border-width) solid var(--st-border);
}
.bayes-results-wrap:empty { display: none; }

.bayes-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--st-space-4);
  margin-bottom: var(--st-space-5);
}
.bayes-result-hero {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-2);
  padding: var(--st-space-5);
  background: var(--st-primary-tint);
  border-radius: var(--st-radius);
}
.bayes-result-hero--secondary {
  background: var(--st-valid-tint);
}
.bayes-result-label {
  font-size: var(--st-fs-xs);
  font-weight: 600;
  color: var(--st-ink-soft);
}
.bayes-result-value {
  font-family: var(--st-font-display);
  font-size: var(--st-fs-2xl);
  font-weight: 700;
  color: var(--st-primary);
  font-variant-numeric: tabular-nums;
}
.bayes-result-hero--secondary .bayes-result-value {
  color: #3E5B3B;
}

.bayes-lr-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--st-space-3);
  margin-bottom: var(--st-space-5);
}
.bayes-lr-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--st-space-3) var(--st-space-4);
  border: var(--st-border-width) solid var(--st-border);
  border-radius: var(--st-radius);
  font-size: var(--st-fs-sm);
}
.bayes-lr-item span { color: var(--st-ink-soft); }
.bayes-lr-item strong { font-variant-numeric: tabular-nums; }

.bayes-steps {
  margin-bottom: var(--st-space-5);
}
.bayes-steps h3 {
  font-size: var(--st-fs-md);
  margin-bottom: var(--st-space-3);
}
.bayes-steps ol {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--st-space-2);
}
.bayes-steps li {
  font-size: var(--st-fs-sm);
  color: var(--st-ink-soft);
  font-variant-numeric: tabular-nums;
}
.bayes-steps strong {
  color: var(--st-ink);
}

/* ---------- Natural frequency tree ---------- */
.bayes-natural-freq h3 {
  font-size: var(--st-fs-md);
  margin-bottom: var(--st-space-3);
}
.bayes-nf-tree {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--st-space-4);
}
.bayes-nf-branch {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-2);
}
.bayes-nf-node {
  padding: var(--st-space-3) var(--st-space-4);
  border-radius: var(--st-radius);
  font-weight: 600;
  font-size: var(--st-fs-sm);
  font-variant-numeric: tabular-nums;
}
.bayes-nf-node--disease { background: var(--st-accent-tint); color: var(--st-accent); }
.bayes-nf-node--healthy { background: var(--st-primary-tint); color: var(--st-primary); }
.bayes-nf-children {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-2);
  padding-left: var(--st-space-4);
  border-left: 2px solid var(--st-border);
}
.bayes-nf-leaf {
  padding: var(--st-space-2) var(--st-space-3);
  border-radius: var(--st-radius-sm);
  font-size: var(--st-fs-xs);
  font-variant-numeric: tabular-nums;
  border: var(--st-border-width) solid var(--st-border);
}
.bayes-nf-leaf--tp { border-color: var(--st-valid); background: var(--st-valid-tint); }
.bayes-nf-leaf--fp { border-color: var(--st-error); background: var(--st-error-tint); }
.bayes-nf-leaf--fn { border-color: var(--st-error); background: var(--st-error-tint); }
.bayes-nf-leaf--tn { border-color: var(--st-valid); background: var(--st-valid-tint); }

.bayes-nf-note {
  margin-top: var(--st-space-4);
  font-size: var(--st-fs-sm);
  color: var(--st-ink-soft);
  padding: var(--st-space-3) var(--st-space-4);
  background: var(--st-paper);
  border-radius: var(--st-radius);
  border: var(--st-border-width) solid var(--st-border);
}

/* ---------- Reset confirmation ---------- */
.bayes-reset-confirm {
  margin-top: var(--st-space-4);
  padding: var(--st-space-4);
  background: var(--st-error-tint);
  border-radius: var(--st-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-4);
  flex-wrap: wrap;
}
.bayes-reset-confirm[hidden] { display: none; }
.bayes-reset-confirm p {
  color: var(--st-error);
  font-size: var(--st-fs-sm);
  font-weight: 600;
  margin: 0;
}
.bayes-reset-confirm-actions {
  display: flex;
  gap: var(--st-space-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .bayes-form-grid { grid-template-columns: 1fr; }
  .bayes-result-grid { grid-template-columns: 1fr; }
  .bayes-lr-row { grid-template-columns: 1fr; }
  .bayes-nf-tree { grid-template-columns: 1fr; }
  .bayes-calc-card { padding: var(--st-space-4); }
  .bayes-mode-toggle, .bayes-evidence-toggle { width: 100%; }
  .bayes-mode-btn, .bayes-evidence-btn { flex: 1; }
}