/* Medical Book — article styles. Everything is scoped under .mb so legacy site CSS is untouched. */
.mb {
  --mb-ink: #1b2430;
  --mb-muted: #5b6676;
  --mb-line: #e3e8ef;
  --mb-bg: #ffffff;
  --mb-soft: #f5f8fc;
  --mb-accent: #0b6bcb;
  --mb-accent-soft: #e7f1fc;
  --mb-ok: #1f8a4c;
  --mb-ok-soft: #e6f5ec;
  --mb-warn: #b26a00;
  --mb-warn-soft: #fff4e0;
  --mb-bad: #c62828;
  --mb-bad-soft: #fdecec;
  --mb-radius: 14px;
  box-sizing: border-box;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 3vw, 2rem) 2rem;
  color: var(--mb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  text-align: left;
  overflow-wrap: anywhere;
}
.mb *, .mb *::before, .mb *::after { box-sizing: inherit; }
.mb :lang(zh) { line-height: 1.8; }

.mb h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  color: var(--mb-ink);
  scroll-margin-top: 1rem;
}
.mb h3 { margin: 1.75rem 0 0.5rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.35; }
.mb p { margin: 0 0 1rem; }
.mb ul, .mb ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.mb li { margin: 0.3rem 0; }
.mb a { color: var(--mb-accent); text-decoration: underline; text-underline-offset: 2px; }
.mb abbr { text-decoration: none; border-bottom: 1px dotted var(--mb-muted); cursor: help; }
.mb sub, .mb sup { line-height: 0; }

/* Lead block */
.mb-lead {
  margin: 1rem 0 1.5rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-radius: var(--mb-radius);
  background: linear-gradient(135deg, #0b6bcb 0%, #2a8fd8 55%, #36b3c4 100%);
  color: #fff;
}
.mb-lead p { margin: 0; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
.mb-lead .mb-tags { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mb-lead .mb-tags span {
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.85em;
}

/* Contents */
.mb-toc {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-soft);
}
.mb-toc strong { display: block; margin-bottom: 0.4rem; }
.mb-toc ol { margin: 0; columns: 2 16rem; column-gap: 2rem; }
.mb-toc li { break-inside: avoid; }

/* Fact cards */
.mb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.mb-card {
  padding: 1rem;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-bg);
}
.mb-card b { display: block; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mb-muted); }
.mb-card span { display: block; margin-top: 0.25rem; font-size: 1.15em; font-weight: 600; }

/* Figures */
.mb-fig {
  margin: 1.25rem 0 1.75rem;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-bg);
}
.mb-fig svg { display: block; width: 100%; height: auto; max-height: 34rem; }
.mb-fig figcaption { margin-top: 0.6rem; font-size: 0.9em; color: var(--mb-muted); }
/* On phones keep diagram labels legible: the figure scrolls sideways instead of shrinking */
@media (max-width: 600px) {
  .mb-fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mb-fig svg { min-width: 560px; }
  .mb-fig figcaption { position: sticky; left: 0; max-width: calc(100vw - 3rem); }
}

/* Tables: scroll sideways on narrow screens instead of breaking the page */
.mb-table { margin: 1rem 0 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mb-line); border-radius: var(--mb-radius); }
.mb-table table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.95em; }
.mb-table th, .mb-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--mb-line); text-align: left; vertical-align: top; }
.mb-table th { background: var(--mb-soft); font-weight: 600; }
.mb-table tr:last-child td { border-bottom: 0; }
.mb-table caption { caption-side: bottom; padding: 0.5rem 0.8rem; font-size: 0.85em; color: var(--mb-muted); text-align: left; }

/* Status pills used inside tables */
.mb-pill { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.mb-pill.ok { background: var(--mb-ok-soft); color: var(--mb-ok); }
.mb-pill.warn { background: var(--mb-warn-soft); color: var(--mb-warn); }
.mb-pill.bad { background: var(--mb-bad-soft); color: var(--mb-bad); }

/* Two-column high / low comparison */
.mb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.mb-split > div { padding: 1rem 1.25rem; border-radius: var(--mb-radius); border-top: 4px solid; background: var(--mb-soft); }
.mb-split .low { border-color: #2a7fd8; }
.mb-split .high { border-color: var(--mb-bad); }
.mb-split h3 { margin-top: 0.25rem; }

/* Callouts */
.mb-note { margin: 1.25rem 0; padding: 1rem 1.25rem; border-left: 5px solid; border-radius: 0 var(--mb-radius) var(--mb-radius) 0; }
.mb-note > :last-child { margin-bottom: 0; }
.mb-note.info { border-color: var(--mb-accent); background: var(--mb-accent-soft); }
.mb-note.warn { border-color: var(--mb-warn); background: var(--mb-warn-soft); }
.mb-note.alert { border-color: var(--mb-bad); background: var(--mb-bad-soft); }
.mb-note strong:first-child { display: block; margin-bottom: 0.3rem; }

/* Formula */
.mb-formula {
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--mb-radius);
  background: #10233a;
  color: #e9f2ff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.95em;
  overflow-x: auto;
  white-space: nowrap;
}

/* References */
.mb-refs { font-size: 0.92em; padding-left: 1.6rem; }
.mb-refs li { margin: 0.5rem 0; }
.mb-refs a { word-break: break-all; }

.mb-disclaimer {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-radius: var(--mb-radius);
  background: var(--mb-soft);
  color: var(--mb-muted);
  font-size: 0.88em;
}

/* Very large screens: keep reading width comfortable, give figures more room */
@media (min-width: 1600px) {
  .mb { max-width: 80rem; font-size: 1.2rem; }
}
@media print {
  .mb-lead { background: none; color: var(--mb-ink); border: 1px solid var(--mb-line); }
  .mb-toc { display: none; }
}

/* Shown above draft texts opened with ?preview=<token> */
.mb-draft-banner { max-width: 72rem; margin: 0.75rem auto; padding: 0.5rem 1rem; border-radius: 10px; background: #fff4e0; color: #8a4f00; font: 600 0.95rem/1.4 Arial, sans-serif; text-align: center; }

/* Inline formula inside running text: no block box, may wrap on narrow screens */
span.mb-formula {
  display: inline;
  margin: 0;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: #eef3f9;
  color: #10233a;
  font-size: 0.9em;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}