/* Browse pages (compartments, families, data issues).
 *
 * Page layout, tables, buttons and About boxes use the shared tool-page
 * rules in batch.css; this file adds the chart colours (design tokens) and
 * the few browse-only details.
 */

.browse-page .tool-count {
  margin-left: 6px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 400;
}

/* Charts: one accent for the data, ink for intervals, warning colour for the
 * reference line. */
.browse-page .chart-grid,
.browse-page .chart-axis { stroke: var(--line); stroke-width: 1; }
.browse-page .chart-tick { font-size: 11px; fill: var(--ink-soft); }
.browse-page .chart-label { font-size: 12px; fill: var(--ink); }
.browse-page .chart-value { font-size: 11px; fill: var(--ink-soft); }
.browse-page .chart-bar { fill: var(--teal); }
.browse-page .chart-ci { stroke: var(--ink); stroke-width: 1.2; }
.browse-page .chart-reference { stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 4 3; }
.browse-page .chart-reference-label { font-size: 11px; fill: var(--orange); }
.browse-page .dot-called { fill: var(--orange); }
.browse-page .dot-negative { fill: var(--teal); }
.browse-page .dot-other { fill: var(--line); stroke: var(--ink-soft); stroke-width: 0.6; }
.browse-page .key {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px 0 6px;
  border-radius: 50%;
  vertical-align: baseline;
}
.browse-page .key-called { background: var(--orange); }
.browse-page .key-negative { background: var(--teal); }
.browse-page .key-other { box-sizing: border-box; background: var(--line); border: 1px solid var(--ink-soft); }

.browse-page .browse-rule { color: var(--ink-soft); }
.browse-page .browse-description { min-width: 300px; }
.browse-page .browse-evidence { min-width: 240px; color: var(--ink-soft); font-size: 12.5px; }
.browse-page .browse-categories tr.selected td { background: var(--teal-soft); }

/* Wide tables keep readable cells and scroll inside their box on phones. */
@media (max-width: 900px) {
  .browse-page .browse-description,
  .browse-page .browse-evidence { min-width: 220px; }
}