@layer components {
  

  .storage { display: grid; gap: var(--space); }

  .storage__track {
    block-size: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--surface-sunk);
    overflow: hidden;
  }

  .storage__bar {
    block-size: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    
    transition: inline-size var(--transition-enter);
  }

  .storage--nearly-full .storage__bar { background: var(--warn); }
  .storage--full .storage__bar { background: var(--danger); }

  .storage__line {
    margin: 0;
    color: var(--ink);
  }

  .storage--nearly-full .storage__line { color: var(--warn); }
  .storage--full .storage__line { color: var(--danger); }

  .storage__figure { font-family: var(--font-mono); }
}