@scope (time-picker-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --time-picker-bg:                  var(--a-ui-bg);
    --time-picker-fg:                  var(--a-ui-text);
    --time-picker-fg-muted:            var(--a-ui-text-placeholder);
    --time-picker-border:              var(--a-ui-border);
    --time-picker-border-hover:        var(--a-ui-border-hover);
    --time-picker-radius:              var(--a-radius);
    --time-picker-height:              var(--a-size);
    --time-picker-px:                  var(--a-ui-px);
    --time-picker-py:                  0;
    --time-picker-gap:                 var(--a-space-1);
    --time-picker-font-size:           var(--a-ui-size);

    --time-picker-segment-radius:      var(--a-radius-sm);
    --time-picker-segment-px:          var(--a-space-1);
    --time-picker-segment-bg-focus:    var(--a-accent);
    --time-picker-segment-fg-focus:    var(--a-accent-fg);

    --time-picker-separator-fg:        var(--a-fg-muted);

    --time-picker-focus-ring:          var(--a-focus-ring);
    --time-picker-focus-ring-invalid:  var(--a-focus-ring-invalid);

    --time-picker-duration:            var(--a-duration-fast);
    --time-picker-easing:              var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--time-picker-gap);
    min-height: var(--time-picker-height);
    padding: var(--time-picker-py) var(--time-picker-px);
    background: var(--time-picker-bg);
    color: var(--time-picker-fg);
    border: 1px solid var(--time-picker-border);
    border-radius: var(--time-picker-radius);
    font-family: var(--time-picker-font-family, var(--a-font-family-ui));
    font-size: var(--time-picker-font-size);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    cursor: text;
    transition:
      border-color var(--time-picker-duration) var(--time-picker-easing),
      background   var(--time-picker-duration) var(--time-picker-easing),
      box-shadow   var(--time-picker-duration) var(--time-picker-easing);
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-flex; }

  /* ── Segments ── */
  :scope [data-segment] {
    display: inline-block;
    min-width: 2ch;
    padding: 0 var(--time-picker-segment-px);
    text-align: center;
    border-radius: var(--time-picker-segment-radius);
    color: inherit;
    background: transparent;
    outline: none;
    caret-color: transparent;
    cursor: text;
    transition:
      background var(--time-picker-duration) var(--time-picker-easing),
      color      var(--time-picker-duration) var(--time-picker-easing);
  }

  /* Meridiem is a touch wider since it carries two letters (AM/PM). */
  :scope [data-segment="meridiem"] {
    min-width: 2.5ch;
    text-transform: uppercase;
  }

  /* ── State: empty (placeholder via :empty) ── */
  :scope [data-segment]:empty::before {
    content: '--';
    color: var(--time-picker-fg-muted);
  }

  /* ── State: focused segment ── */
  :scope [data-segment]:focus,
  :scope [data-segment]:focus-visible {
    background: var(--time-picker-segment-bg-focus);
    color: var(--time-picker-segment-fg-focus);
    outline: none;
  }

  /* ── Separator ── */
  :scope [data-separator] {
    color: var(--time-picker-separator-fg);
    pointer-events: none;
    user-select: none;
  }
}

/* hover rules — outside @scope (matches input-ui's Safari 17.x workaround). */
time-picker-ui:not([disabled]):hover {
  border-color: var(--time-picker-border-hover);
}

/* Focus ring on the host when any segment is focused.
   Canonical L3 ring; consumed via --time-picker-focus-ring (aliases --a-focus-ring). */
time-picker-ui:not([disabled]):focus-within {
  box-shadow: var(--time-picker-focus-ring);
}

time-picker-ui[aria-invalid="true"]:not([disabled]):focus-within,
time-picker-ui[error]:not([disabled]):focus-within {
  box-shadow: var(--time-picker-focus-ring-invalid);
}

/* Disabled / readonly affordance */
time-picker-ui[disabled] {
  opacity: var(--a-opacity-disabled, 0.5);
  pointer-events: none;
}

time-picker-ui[readonly] [data-segment] {
  cursor: default;
}
