/* ============================================================================
   COMPONENT: text-size — the discrete font-size stepper in the shell menu
   (FEA-0005). The % value is a live region; A+ disables at the 150% cap.
   ========================================================================== */

@layer components {
  .text-size { flex-wrap: wrap; cursor: default; }

  .text-size__controls { --cluster-gap: var(--space-2xs); }

  .text-size__value {
    min-inline-size: 3.5ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .text-size__controls .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}