/* F9–F10 counter: one column, big targets, for one hand; the scanner. */
@layer components {
  .counter {
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline: auto;
  }

  .counter__header {
    & h1 { margin: 0; }
    & p { margin: 0; color: var(--color-subtle); font-size: var(--text-small); }
  }

  .counter__name { margin: 0; font-size: var(--text-large); font-weight: 700; }

  .counter__unverified { margin: 0; color: var(--color-warning); font-size: var(--text-small); font-weight: 600; }

  .scanner__video {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #000;
    border-radius: var(--radius-large);
  }

  .scanner__status { margin: 0; }
}