/*
 * .chart — a small bar chart of daily counts (a fault's last 30 days).
 * Each .chart__bar sets its own height via --h (0-100, a percentage).
 * Structure: .chart > .chart__bars > span.chart__bar[title] ; .chart__axis
 */
@layer components {
  .chart__bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    block-size: 4.5rem;
    padding-block-end: 1px;
    border-block-end: var(--border-size-1) solid var(--line);
  }
  .chart__bar {
    flex: 1;
    min-block-size: 1px;
    block-size: calc(var(--h, 0) * 1%);
    background: var(--brand);
    border-start-start-radius: 2px;
    border-start-end-radius: 2px;
  }
  .chart__bar[data-empty] { background: var(--line); }
  .chart__axis {
    display: flex;
    justify-content: space-between;
    margin-block-start: calc(var(--u-pad) / 4);
    font-size: var(--font-size-00, 0.7rem);
    color: var(--ink-muted);
  }
}