@layer components {
  .week { display: grid; gap: 6px; }

  .week__bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 64px;
    gap: 6px;
  }

  .week__day { position: relative; height: 100%; }

  .week__bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--worked);
    min-height: 3px;
    border-radius: 4px 4px 2px 2px;
    background: var(--accent);
  }

  .week__bar--empty { background: var(--surface-sunken); }

  .week__target {
    position: absolute;
    inset-inline: -2px;
    bottom: var(--target);
    border-top: 2px solid var(--ink-faint);
  }

  .week__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--ink-muted);
  }

  .week__today { color: var(--ink); font-weight: 700; }
}