@layer components {
  /* Storage

     A meter and a sentence, on the workspace page and on the admin's copy of
     it. There is one of these in the whole product and it is deliberately not
     a `<progress>`: that element is styled through three different pseudo-
     elements depending on the browser, none of them takes a token, and the one
     thing this has to do is change colour at two thresholds. A div with a
     width is the same picture and can be read. */

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

  /* Explicit height rather than padding, so the track is the same size whether
     or not the bar inside it has anything in it. */
  .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);
    /* The width is set inline from Workspace#storage_fraction, which clamps at
       1.0 — so this can never be drawn outside its own track. */
    transition: inline-size var(--transition-enter);
  }

  /* Two states and no third. Nearly full is a colour, full is a colour; the
     wording beside it is what says which and what to do. */
  .storage--nearly-full .storage__bar { background: var(--warn); }
  .storage--full .storage__bar { background: var(--danger); }

  .storage__line {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

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

  /* The number itself set in the mono face, for the same reason a task
     reference is: it is data the system produced rather than a word anybody
     wrote, and two of these read down a column on the admin screen. */
  .storage__figure { font-family: var(--font-mono); }
}