/* Styles for the MarpolBase "Orthologs and alleles" section. All selectors are prefixed with
 * .mpb- so they do not collide with the site's own CSS. */
.mpb-root {
  --mpb-ink: #1b2a27; --mpb-muted: #5b6b67; --mpb-line: #c9d3d0; --mpb-accent: #0b5d4d;
  --mpb-bg: #f7fbfa; --mpb-warn: #8a4b00;
  margin: 32px 0; padding: 18px 22px 22px; box-sizing: border-box;
  border: 2px solid #0f6b5a; border-radius: 8px; background: var(--mpb-bg); color: var(--mpb-ink);
  font-size: 14px; line-height: 1.55;
}
.mpb-root *, .mpb-root *::before, .mpb-root *::after { box-sizing: border-box; }
.mpb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.mpb-title { margin: 0; font-size: 18px; font-weight: 700; }
.mpb-badge { margin-left: 10px; padding: 1px 10px; border: 1px solid #d9a800; border-radius: 999px; background: #fff0c2; color: #5a3b00; font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.mpb-run { flex: 1 1 200px; text-align: right; font-size: 12.5px; color: var(--mpb-muted); }
.mpb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .mpb-grid { grid-template-columns: minmax(0, 1fr); } }
.mpb-block { margin: 0 0 16px; }
.mpb-h3 { margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--mpb-line); color: var(--mpb-accent); font-size: 13px; font-weight: 700; }
.mpb-list { display: flex; flex-direction: column; }
.mpb-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; }
.mpb-sprow { border-bottom: 1px dashed #dbe3e1; }
.mpb-tag { min-width: 44px; padding: 0 8px; border-radius: 4px; background: #e3ece9; font-size: 12px; font-weight: 700; text-align: center; }
.mpb-tag-u { background: #fcf0e8; color: #8a3a0c; }
.mpb-tag-v { background: #dbe8f8; color: #11417a; }
.mpb-id { font-size: 13px; }
.mpb-self { font-weight: 700; }
.mpb-note, .mpb-rel { font-size: 12px; color: var(--mpb-muted); }
.mpb-rel { margin-left: 3px; }
.mpb-warn { color: var(--mpb-warn); }
.mpb-empty, .mpb-absent { padding: 4px 0; color: var(--mpb-muted); font-size: 13px; }
.mpb-clade { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.mpb-sp { flex: 0 0 190px; font-size: 13px; font-style: italic; font-weight: 700; }
.mpb-body { flex: 1 1 220px; min-width: 0; }
.mpb-genes { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.mpb-rich { display: flex; flex-direction: column; }
.mpb-gline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 2px 0; }
.mpb-links { font-size: 12.5px; color: var(--mpb-muted); }
.mpb-body .mpb-more { margin-top: 4px; }
.mpb-gene { white-space: nowrap; }
.mpb-hidden { display: none; }
.mpb-more, .mpb-toggle { padding: 2px 10px; border: 1px solid var(--mpb-accent); border-radius: 6px; background: #fff; color: var(--mpb-accent); font: inherit; font-size: 12.5px; cursor: pointer; min-height: 28px; }
.mpb-toggle.mpb-on { background: var(--mpb-accent); color: #fff; }
.mpb-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.mpb-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--mpb-line); }
.mpb-scale path { fill: none; stroke: var(--mpb-muted); stroke-width: 1; }
.mpb-scale text { fill: var(--mpb-muted); }
.mpb-scroll { max-height: 640px; overflow: auto; border: 1px solid #dbe3e1; border-radius: 6px; background: #fff; }
.mpb-svg { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.mpb-branches path { fill: none; stroke: #7d8c88; stroke-width: 1.2; }
.mpb-leaf-gene { fill: #33443f; }
.mpb-leaf a { cursor: pointer; }
.mpb-leaf a:hover .mpb-leaf-gene { text-decoration: underline; }
.mpb-leaf-self rect { fill: #cfe8e1; }
.mpb-leaf-allele rect { fill: #e6f2ef; }
.mpb-leaf-gametolog rect { fill: #fcf0e8; }
.mpb-leaf-self text, .mpb-leaf-gametolog text { font-weight: 700; }
.mpb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; }
.mpb-foot { margin-top: 8px; font-size: 12.5px; color: var(--mpb-muted); }
.mpb-root a { color: #0b5d4d; }
.mpb-root a:hover { color: #063a30; }