.endemic-section {
    margin-top: 28px;
  }
 
  .endemic-minibar {
    margin-bottom: 24px;
  }
 
  /* Section heading above the tab panel */
  .endemic-heading {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
  }
  .endemic-subheading {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 12px;
  }
 
  /* Equal-width tabs, aligned to the 5 bars/x-labels in the chart above.
 
     ALIGNMENT NOTE: Plotly's fig.update_layout(margin=dict(l=50, r=20, ...))
     insets the actual plot area from the chart div's edges. For the tab-bar
     below to line up with the bars, this section needs the SAME left/right
     inset as that margin — either:
       (a) wrap the chart div and this .endemic-section in one parent with
           identical padding, then add matching l/r padding here equal to
           the chart's margin.l / margin.r, OR
       (b) set the chart's margin to 0 and let the chart div itself carry
           all the padding via CSS, matching this section's padding exactly.
     Simplest: put both under one .card with shared padding, and zero out
     Plotly's l/r margin so the plot area = the div's full width. */

  .endemic-section .tab-bar .tab {
    flex: 1 1 0;
    justify-content: center;
    flex-shrink: 1;  /* override the base rule */
}

  .endemic-section .tab-bar .tab-sep {
    display: none;
}
 
  .endemic-table-wrap {
    padding: 0 0px 14px 0px;  /* top: 0, keep sides and bottom */
    max-height: 400px;
    overflow-y: auto;
    background: var(--surface);
}
 
  .endemic-table-caption {
    padding-top: 14px;  /* move the top spacing here */
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--text-2);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-lt);
}

  .endemic-table-caption .n {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--text);
  }
 
  .endemic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
	table-layout: fixed;
  }
 
.endemic-table th {
    text-align: left;
    font-family: var(--sans);
    font-weight: 500;
    color: var(--text-2);
    font-size: 11px;
    letter-spacing: 0.03em;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    /* sticky header */
    position: sticky;
    top: 0;
    background: var(--surface);  /* must be opaque or rows bleed through */
    z-index: 1;
}
 
  .endemic-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-lt);
    color: var(--text);
  }
 
  .endemic-table tr:last-child td {
    border-bottom: none;
  }
  
  .endemic-table td.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
  .endemic-table td.name a {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 12px;
  }
  .endemic-table td.name a:hover { text-decoration: underline; }
 
  .endemic-table td.section-cell {
    align-items: center;
    color: var(--text-2);
  }
  
    /* Fixed column widths — adjust % to taste, must sum to 100 */
  .endemic-table th.col-name    { width: 60%; }
  .endemic-table th.col-section { width: 20%; }
  .endemic-table th.col-class   { width: 20%; }
 
  .endemic-empty {
    padding: 24px 16px;
    text-align: center;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--text-3);
  }
  
    /* Section color dots — keep in sync with SECTION_COLORS in endemic_chart.py */
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex: none;
  }
  .dot.metabolome             { background: #4a9e6b; }
  .dot.lipidome                { background: #4a7ec4; }
  .dot.exposome                 { background: #e07b3a; }
  .dot.microbiome               { background: #9b59b6; }
  .dot.chemical-dark-matter     { background: #888888; }