/*
 * Admin dashboard — headline stat blocks + a small per-day activity bar list.
 * Composed from Cohwall tokens; no bespoke chart library.
 */
@layer components {
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--u-pad);
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u-pad) / 4);
    padding: var(--u-pad);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-2);
  }
  .stat__value {
    font-size: var(--font-size-6);
    font-weight: var(--font-weight-8);
    line-height: var(--font-lineheight-0);
    color: var(--ink);
  }
  .stat__label {
    font-size: var(--font-size-0);
    color: var(--ink-muted);
  }

  /* Per-day activity: label | proportional track | count. */
  .bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u-pad) / 2); }
  .bar-list__row {
    display: grid;
    grid-template-columns: 4rem 1fr 2rem;
    align-items: center;
    gap: var(--u-pad);
  }
  .bar-list__label { font-size: var(--font-size-0); color: var(--ink-muted); }
  .bar-list__track {
    block-size: 0.75rem;
    border-radius: var(--radius-round);
    background: color-mix(in oklab, var(--canvas), var(--ink) 8%);
    overflow: clip;
  }
  .bar-list__fill {
    display: block;
    block-size: 100%;
    min-inline-size: 2px;
    border-radius: var(--radius-round);
    background: var(--brand-strong);
  }
  .bar-list__value {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    text-align: end;
    color: var(--ink);
  }
}