/* Stats page (stats.html) only. Loaded after style.css, which supplies the
   shared tokens and the base table and .segmented rules this file builds on. */
.stats-page {
  /* Sequential blue ramp (light → dark) for the co-occurrence matrix; the
     chart marks below are steps from the same ramp. */
  --ramp-0: #eaf4fe;
  --ramp-1: #c0dffc;
  --ramp-2: #8cc3f7;
  --ramp-3: #4d9be8;
  --ramp-4: #1e78cd;
  --ramp-5: #0b5aa5;
  --viz-mark: var(--color-primary-dark);
  --viz-mark-strong: var(--ramp-5);
  --viz-zero: #f4f6f8;
  --cell-size: 28px;
  margin-top: var(--gap);
}
.stats-body { display: flex; flex-direction: column; gap: var(--gap); }
.stats-body[hidden] { display: none; }

/* Ramp bins, shared by the matrix cells and the legend swatches. */
.stats-page [data-bin="0"] { background: var(--ramp-0); }
.stats-page [data-bin="1"] { background: var(--ramp-1); }
.stats-page [data-bin="2"] { background: var(--ramp-2); }
.stats-page [data-bin="3"] { background: var(--ramp-3); }
.stats-page [data-bin="4"] { background: var(--ramp-4); color: #fff; }
.stats-page [data-bin="5"] { background: var(--ramp-5); color: #fff; }

/* Each chart is a card, so the sections read as separate objects. */
.stat-section {
  padding: 12px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}
.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.stat-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat-section h2 { font-size: 15px; }
.stat-meta { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stat-note { font-size: var(--fs-small); color: var(--text-muted); max-width: 84ch; margin: 8px 0 14px; }
.stat-footnote { font-size: var(--fs-small); color: var(--text-muted); max-width: 90ch; padding: 0 2px; }
.stat-footnote .mono { font-family: var(--font-mono); }
.stat-scroll { overflow-x: auto; }

/* Table view: the chart's twin, swapped in by the section's view toggle. */
.stat-table-scroll {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* Deltas from the shared table rules: auto layout, a header that sticks to this
   table's own scroll container, and tighter rows. */
.stats-table { table-layout: auto; font-size: var(--fs-small); }
.stats-table thead th { position: sticky; top: 0; z-index: 1; padding: 5px 10px; }
.stats-table tbody th,
.stats-table tbody td {
  padding: 3px 10px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
/* Row headers only — leaving the cells alone keeps .num's alignment winning. */
.stats-table tbody th { text-align: left; font-weight: normal; }

/* Frequency bars — two columns so 40 types don't become 40 screens of list. */
.bar-columns { display: flex; gap: 28px; }
.bar-column { flex: 1 1 0; min-width: 0; }
.bar-row { display: grid; grid-template-columns: minmax(84px, 128px) 1fr; gap: 8px; align-items: center; height: 19px; }
.bar-label, .cost-label, .matrix-rowhead {
  font-size: var(--fs-small);
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-label:hover, .cost-label:hover, .matrix-rowhead:hover { color: var(--color-primary-dark); }
.bar-track { position: relative; padding-right: 44px; }
.bar-fill { position: relative; height: 11px; min-width: 2px; background: var(--viz-mark); border-radius: 0 3px 3px 0; }
.bar-row:hover .bar-fill { background: var(--viz-mark-strong); }
.bar-value {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Co-occurrence matrix: 2px surface gaps separate cells; zero stays neutral. */
#cooc-chart { display: grid; gap: 2px; width: max-content; margin: 0 auto; }
.matrix-colhead {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  align-self: end;
  height: 116px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
}
.matrix-rowhead { padding-right: 8px; line-height: var(--cell-size); }
.matrix-cell { display: block; width: var(--cell-size); height: var(--cell-size); border-radius: 2px; background: var(--viz-zero); }
.matrix-cell.diag { background: repeating-linear-gradient(45deg, #e8e8e8 0 2px, transparent 2px 5px); }
.matrix-cell[data-tip]:hover,
.matrix-cell[data-tip]:focus-visible { outline: 2px solid var(--viz-mark-strong); outline-offset: -1px; }
.cooc-legend { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; margin-top: 12px; font-size: 11px; }
.cooc-legend-label { margin-right: 6px; font-size: var(--fs-small); color: var(--text-muted); }
.cooc-legend-swatch {
  min-width: 40px;
  padding: 2px 7px;
  border-radius: 3px;
  text-align: center;
  background: var(--viz-zero);
  font-variant-numeric: tabular-nums;
}

.chart-tooltip {
  position: fixed;
  z-index: 50;
  max-width: 280px;
  padding: 4px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-size: var(--fs-small);
  pointer-events: none;
}

/* Solver-cost dumbbells: median filled, p90 open, values in columns. */
#cost-chart { min-width: 660px; }
.cost-row {
  display: grid;
  grid-template-columns: minmax(104px, 150px) minmax(220px, 1fr) 60px 66px 38px 52px;
  gap: 10px;
  align-items: center;
  height: 20px;
}
.cost-row:not(.cost-head):hover { background: var(--bg-hover); }
.cost-head {
  height: auto;
  align-items: end;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border-strong);
}
.cost-label-head, .cost-num-head { font-size: 11px; font-weight: bold; text-align: right; white-space: nowrap; }
.cost-track-head { position: relative; }
.cost-keys { display: flex; gap: 14px; margin-bottom: 7px; font-size: 11px; color: var(--text-muted); }
.cost-key { display: inline-flex; align-items: center; gap: 5px; }
.cost-axis { position: relative; height: 13px; }
.cost-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cost-tick:first-child { transform: none; }
/* --cost-grid is one gradient stack of tick gridlines, set once on #cost-chart. */
.cost-track { position: relative; height: 20px; background-image: var(--cost-grid); }
/* A box plot, not a two-point range: whisker p10–p90, box p25–p75, median tick.
   The median always falls inside the box, so the tick reads against the fill. */
.cost-whisker {
  position: absolute;
  top: 50%;
  height: 2px;
  min-width: 1px;
  transform: translateY(-50%);
  background: var(--ramp-3);
}
.cost-box {
  position: absolute;
  top: 50%;
  height: 9px;
  min-width: 3px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--ramp-4);
}
.cost-median {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 11px;
  transform: translate(-50%, -50%);
  background: var(--bg-surface);
}
.cost-key-whisker, .cost-key-box, .cost-key-median { flex: none; width: 16px; }
.cost-key-whisker { height: 2px; background: var(--ramp-3); }
.cost-key-box, .cost-key-median { height: 9px; border-radius: 2px; background: var(--ramp-4); }
.cost-key-median {
  background: linear-gradient(90deg,
    var(--ramp-4) 0 6px, var(--bg-surface) 6px 10px, var(--ramp-4) 10px);
}
.cost-num { font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums; }
.cost-num.muted { color: var(--text-muted); }

@media (max-width: 800px) {
  .bar-columns { flex-direction: column; gap: 0; }
}
@media (max-width: 640px) {
  .stat-section { padding: 10px 12px 12px; }
}