@scope (otp-input-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    /* Digit boxes grow to fill the row, capped at ~1.75× the base control size
       (~52px) so they read as comfortable single-digit boxes. Radius is the
       plain --a-radius-lg token (no min()/clamp expression — radius patterns
       stay simple). Scales with [size] + density (relative to --a-size). */
    --otp-input-size:         calc(var(--a-size) * 1.75);
    --otp-input-gap:          var(--a-space-2);
    --otp-input-radius:       var(--a-radius-lg);
    --otp-input-border:       var(--a-ui-border);
    --otp-input-border-hover: var(--a-ui-border-hover);
    --otp-input-border-focus: var(--a-accent);
    --otp-input-bg-disabled:  var(--a-ui-bg-disabled);
    --otp-input-fg-disabled:  var(--a-ui-text-disabled);
    --otp-input-border-disabled: var(--a-ui-border-disabled);
    --otp-input-font:         var(--a-font-family-code);
    --otp-input-font-size:    var(--a-body-md);
    --otp-input-bg:           var(--a-ui-bg);
    --otp-input-fg:           var(--a-ui-text);

    /* ── Transitions ── */
    --otp-input-duration:     var(--a-duration-fast);
    --otp-input-easing:       var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: var(--otp-input-gap);
    /* Fill the container (a block-level control per ADR-0037) so the digit
       boxes grow to use the available width instead of sitting content-width
       on the left. Boxes flex to fill up to their cap; once capped (very wide
       container) the group centers rather than packing left. (bug-37 follow-up) */
    width: 100%;
  }

  /* ── Digit inputs ── */
  /* Boxes grow equally to fill the row (flex), staying square (aspect-ratio)
     and capped at --otp-input-size so they read as digit boxes — not huge on a
     wide container, not cramped on a narrow one. The cap keeps --a-radius-md
     proportional (a rounded square, ~25-30%), which is the whole point of the
     bug-37 sizing. */
  [slot="digit"] {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--otp-input-size);
    aspect-ratio: 1;
    text-align: center;
    border: 1px solid var(--otp-input-border);
    border-radius: var(--otp-input-radius);
    background: var(--otp-input-bg);
    color: var(--otp-input-fg);
    font-family: var(--otp-input-font);
    font-size: var(--otp-input-font-size);
    line-height: 1;
    outline: none;
    transition: border-color var(--otp-input-duration) var(--otp-input-easing);
    /* Hide number spinner */
    -moz-appearance: textfield;
  }
  [slot="digit"]::-webkit-inner-spin-button,
  [slot="digit"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  [slot="digit"]:hover:not(:disabled) {
    border-color: var(--otp-input-border-hover);
  }

  [slot="digit"]:focus {
    border-color: var(--otp-input-border-focus);
  }

  /* ── Disabled ── */
  :scope[disabled] {
    pointer-events: none;
  }
  :scope[disabled] [slot="digit"] {
    background: var(--otp-input-bg-disabled);
    color: var(--otp-input-fg-disabled);
    /* Native dashed border — it follows the box's border-radius (a rounded
       dashed square, matching the enabled state). An SVG border-image would
       give more uniform dashes but is clipped to a SQUARE — it ignores
       border-radius — so the disabled corners wouldn't round. */
    border: 1px dashed var(--otp-input-border-disabled);
    cursor: not-allowed;
  }
}
