/* drug-interaction — tool CSS. Chunk 5b retired the layout rules
   (example box and row, safety note, unit toggle, check labels)
   onto the design system (§28 simulator layout). What is left here
   is tool-specific: the field-error slots the script creates, the
   data details toggle, and the baseline-vs-new AUC bars. */
.tool-body .field-err {
  display: block;
  color: var(--lg-err);
  font-size: 13px;
  margin-top: 4px;
}
.tool-body .field-err:empty {
  display: none;
}
.tool-body .data-toggle {
  margin-top: 16px;
}
.tool-body .data-toggle summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
}
.tool-body .auc-bars {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.tool-body .auc-row {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.tool-body .auc-track {
  height: 20px;
  background: #e8eef7;
  border-radius: 6px;
  overflow: hidden;
}
.tool-body .auc-fill {
  height: 100%;
}
.tool-body .auc-fill.base {
  background: #6b7686;
}
.tool-body .auc-fill.new {
  background: #1f6fb2;
}
/* Chunk 8: dark mode — same lightened data colours as the plots. */
[data-theme="dark"] .tool-body .auc-track {
  background: var(--surface-2);
}
[data-theme="dark"] .tool-body .auc-fill.base {
  background: #9db1c7;
}
[data-theme="dark"] .tool-body .auc-fill.new {
  background: #6aa6e0;
}