@layer pages {
  .tokens {
    & textarea {
      min-block-size: 8lh;
      max-block-size: 24lh;
    }

    & :is(.files, .attachment) {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-8) var(--space-16);
    }

    & .files {
      margin-block: var(--space-8) var(--space-16);

      & .description {
        margin: 0;
      }

      &:focus-within .description {
        color: var(--color-charcoal);
      }
    }

    & .attachment {
      justify-content: space-between;
      margin-block: var(--space-8);
      font-size: var(--text-small);

      & bdi {
        min-inline-size: 0;
      }
    }

    & .meter {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-column: 1 / -1;
      align-items: baseline;
      gap: var(--space-8) var(--space-16);
      padding-block: var(--space-24) var(--space-20);
      border-block-end: 1px dotted var(--color-line-soft);

      & > :is(.bar, .legend, .note) {
        grid-column: 1 / -1;
      }

      & .note {
        margin: 0;
      }

      @media (max-width: 600px) {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    & :is(.count, .window) {
      margin: 0;
    }

    & .window {
      color: var(--color-muted);
      text-align: end;

      @media (max-width: 600px) {
        text-align: start;
      }
    }

    & .bar {
      display: flex;
      gap: 1px;
      block-size: var(--space-20);
      overflow: hidden;
      border-radius: var(--radius-control);
      background: var(--color-page);
      box-shadow: var(--shadow-well);
    }

    & .segment {
      flex: none;
      inline-size: var(--share);
      min-inline-size: 3px;
      background: var(--tone);

      &.spread {
        background: color-mix(in oklch, var(--tone) 40%, var(--color-page));
      }
    }

    & [data-tone] {
      --tone: var(--color-cyan);
    }

    & [data-tone='1'] {
      --tone: var(--color-green-deep);
    }

    & [data-tone='2'] {
      --tone: var(--color-cyan-light);
    }

    & [data-tone='3'] {
      --tone: var(--color-focus);
    }

    & [data-tone='4'] {
      --tone: var(--color-green);
    }

    & [data-tone='5'] {
      --tone: var(--color-charcoal);
    }

    & .legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4) var(--space-20);
      margin: 0;
      padding: 0;
      font-size: var(--text-small);
      line-height: var(--leading-small);
      list-style: none;

      & li::before {
        content: '';
        display: inline-block;
        inline-size: 0.75em;
        block-size: 0.75em;
        margin-inline-end: var(--space-8);
        border-radius: var(--radius-inline);
        background: var(--tone);
      }
    }

    & .meter[data-over] {
      & .bar {
        outline: 2px solid var(--color-danger);
        outline-offset: 1px;
      }

      & .window {
        color: var(--color-danger);
      }
    }

    &[data-stale] :is(.number, .bar, .legend, .groups) {
      opacity: 0.5;
    }

    @media (prefers-reduced-motion: no-preference) {
      & :is(.number, .bar, .legend, .groups) {
        transition: opacity var(--transition-state);
      }

      & .segment {
        transition: inline-size 200ms ease-out;
      }
    }

    @media (forced-colors: active) {
      & .segment {
        background: CanvasText;
      }
    }

    & .part {
      margin-block: var(--space-16);
      font-size: var(--text-small);
      line-height: var(--leading-small);

      & bdi {
        font-weight: 600;
      }

      & p {
        margin-block: var(--space-4);
      }
    }

    & .groups {
      white-space: pre-wrap;
    }

    & mark {
      background: var(--color-cyan-soft);
      color: inherit;

      &:nth-child(even) {
        background: var(--color-page);
      }

      @media (forced-colors: active) {
        border: 1px solid CanvasText;
      }
    }

    & .support {
      grid-column: 1 / -1;
    }
  }
}