/* ==================================================================
   charts.css — the chart pieces, built to spec rather than by eye.

   Rules encoded here, so they can't quietly drift:
     · thin marks, 4px rounded ends on the data end only, anchored to
       the baseline so bar length stays honest
     · a 2px surface-coloured gap between adjacent fills
     · recessive grid and axes; the data is the loudest thing
     · values are text-coloured, never series-coloured — a coloured
       swatch beside a label carries identity, the number stays ink
     · every series has a legend AND a direct label, so nothing is
       identified by colour alone
   ================================================================== */

.chart { margin: 4px 0 0; }

/* ---------- legend ---------- */
.legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-mid);
}
.legend .key { display: flex; align-items: center; gap: 8px; }
.legend .swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
}

/* ---------- horizontal bar rows ---------- */
.bars { display: flex; flex-direction: column; gap: 10px; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) 1fr auto;
  align-items: center;
  gap: 14px;
}
.bar-label {
  font-family: var(--mono); font-size: 12px; color: var(--ink-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track {
  position: relative;
  height: 22px;
  background: rgba(160, 200, 215, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  /* rounded only at the data end — the baseline end stays square so the
     bar visibly starts at zero */
  border-radius: 0 4px 4px 0;
  min-width: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: growx 0.9s var(--ease) forwards;
}
@keyframes growx { to { transform: scaleX(1); } }

.bar-value {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 62px; text-align: right;
}

/* two-series rows: a 2px gap keeps the fills from merging into one mark */
.bar-track.paired { height: 24px; display: flex; flex-direction: column; gap: 2px; background: none; }
.bar-track.paired .lane { position: relative; flex: 1; background: rgba(160,200,215,0.06); border-radius: 3px; overflow: hidden; }
.bar-track.paired .bar-fill { border-radius: 0 3px 3px 0; }

/* ---------- distribution / histogram ---------- */
.histo { display: flex; align-items: flex-end; gap: 2px; height: 168px; margin-bottom: 12px; }
.histo .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.histo .col .fill {
  border-radius: 4px 4px 0 0;         /* rounded at the data end only */
  transform-origin: bottom;
  transform: scaleY(0);
  animation: growy 0.9s var(--ease) forwards;
}
@keyframes growy { to { transform: scaleY(1); } }
.histo-axis {
  display: flex; gap: 2px;
  border-top: 1px solid var(--hair); padding-top: 8px;
}
.histo-axis span {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: 10px; color: var(--ink-low);
  letter-spacing: 0.04em;
}
.histo .col .count {
  font-family: var(--mono); font-size: 11px; color: var(--ink);
  text-align: center; margin-bottom: 5px; font-variant-numeric: tabular-nums;
}

/* ---------- hover ---------- */
.bar-row, .histo .col { cursor: default; }
.bar-row .bar-track, .histo .col { position: relative; }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #050A10; color: var(--ink);
  border: 1px solid var(--hair-lit); border-radius: 7px;
  padding: 7px 11px; white-space: pre; z-index: 20;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---------- table toggle ---------- */
.chart-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair);
}
.chart-source {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-low); text-transform: uppercase;
}
.table-toggle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em;
  background: none; border: 1px solid var(--hair); color: var(--ink-mid);
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.table-toggle:hover { color: var(--cyan); border-color: var(--hair-lit); }

@media (max-width: 620px) {
  .bar-row { grid-template-columns: minmax(78px, 110px) 1fr auto; gap: 9px; }
  .bar-label { font-size: 11px; }
  .bar-value { font-size: 11px; min-width: 52px; }
  .histo { height: 132px; }
  .histo-axis span { font-size: 8.5px; }
}