@layer PretComponent {
    /* The list renders in the wormhole, outside Select's subtree, and
       BoxelSelect has no knobs for its type or row metrics. This
       template renders inside the list, and its marker gives the list
       this template's scope attribute, so these are plain scoped rules,
       which every compiler of this module keeps, the realm's included.
       The options take the trigger's type, inline padding and height. */
    .pretui-select-dropdown.ember-power-select-dropdown[data-scopedcss-ec1bbf807a-208469f532] {
      /* the trigger's padding and default height, restated: the wrapper's
         knobs do not reach the wormhole */
      --_select-px: 0.625rem;
      --_select-h: var(--boxel-form-control-height-sm);
      /* the list matches the trigger's width as a floor, never a ceiling:
         a trigger sized to a short value must not clip the other labels.
         It never runs past the window, though: an option's meta wraps
         on its own line under the label instead. */
      min-width: max-content;
      max-width: calc(100vw - 2 * var(--boxel-sp));
      --boxel-select-option-text-display: block;
    }
    /* in the list, an option's meta sits on a line of its own and wraps,
       since the part that tells two options apart may be at its end */
    .pretui-select-dropdown[data-scopedcss-ec1bbf807a-208469f532] .pretui-select-meta {
      display: block;
      margin-inline-start: 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    /* the trigger's type, copied onto the list on each open */
    .pretui-select-dropdown[data-scopedcss-ec1bbf807a-208469f532] .boxel-select-option-item {
      font-size: var(--pretui-select-list-font-size);
      line-height: var(--pretui-select-list-line-height);
      letter-spacing: var(--boxel-lsp-xs);
      min-height: var(--_select-h);
      padding-block: 0;
      padding-inline: var(--_select-px);
    }
    /* the options' rows grow on touch screens, as Autocomplete's do */
    @media (pointer: coarse) {
      .pretui-select-dropdown[data-scopedcss-ec1bbf807a-208469f532] .boxel-select-option-item {
        padding-block: 0.6em;
      }
    }
    .pretui-selectsearch[data-scopedcss-ec1bbf807a-208469f532] {
      position: relative;
    }
    .pretui-selectsearch-icon[data-scopedcss-ec1bbf807a-208469f532] {
      color: var(--muted-foreground);
      position: absolute;
      /* the box's padding, then the input's */
      inset-inline-start: calc(var(--boxel-sp-xs) + var(--_select-px));
      top: 50%;
      translate: 0 -50%;
      pointer-events: none;
    }
    /* the trigger's type, copied onto the list on each open as the
       options' is, its 1px edge, and its 2px focus ring laid over it */
    .ember-power-select-search-input[data-scopedcss-ec1bbf807a-208469f532] {
      font-size: var(--pretui-select-list-font-size);
      line-height: var(--pretui-select-list-line-height);
      letter-spacing: var(--boxel-lsp-xs);
      min-height: var(--_select-h);
      padding-block: 0;
      border: 1px solid var(--border);
    }
    .ember-power-select-search-input[data-scopedcss-ec1bbf807a-208469f532]:focus {
      outline: 2px solid var(--ring);
      outline-offset: -1px;
    }
    /* iOS zooms into inputs under 16px on focus */
    @media (pointer: coarse) {
      .ember-power-select-search-input[data-scopedcss-ec1bbf807a-208469f532] {
        font-size: var(--boxel-form-control-touch-font-size);
        line-height: var(--boxel-form-control-line-height-sm);
      }
    }
    /* BoxelSelect's dropdown rules set the input's padding; this makes
       room for the icon */
    .pretui-selectsearch .ember-power-select-search-input[data-scopedcss-ec1bbf807a-208469f532] {
      /* less the box's 1px border */
      padding-inline-start: calc(var(--_select-px) + 1rem + var(--boxel-sp-2xs) - 1px);
      padding-inline-end: calc(var(--_select-px) - 1px);
    }
  }

  @layer PretComponent {
    /* the icon and the caret, no wider */
    .pretui-selectwrap[data-display='icon'][data-scopedcss-ec1bbf807a-0715b08c25] {
      inline-size: max-content;
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] {
      min-width: 0;
      /* BoxelSelect's knobs, set to theme tokens. The --boxel-dropdown-*
         ones and the radius travel to the wormhole, values resolved. */
      --boxel-form-control-border-radius: calc(var(--radius) - 0.125rem);
      /* Select's 0.625rem text inset, less the trigger's 1px border */
      --boxel-select-trigger-padding: 0 calc(0.625rem - 1px);
      --boxel-select-trigger-gap: var(--boxel-sp-2xs);
      --boxel-select-trigger-font-size: var(
        --pretui-field-font-size,
        var(--boxel-font-size-xs)
      );
      --boxel-select-trigger-line-height: var(--boxel-line-height-xs);
      --boxel-select-trigger-letter-spacing: var(--boxel-lsp-xs);
      /* the options' type follows the trigger's */
      --pretui-select-list-font-size: var(--boxel-select-trigger-font-size);
      --pretui-select-list-line-height: var(--boxel-select-trigger-line-height);
      /* one block line, so a long label ends in an ellipsis */
      --boxel-select-trigger-content-display: block;
      --boxel-select-background-color: var(--field);
      /* hover pulls the hairline toward --foreground, so it strengthens
         in both schemes, the way a Button's edge answers the pointer */
      --_select-edge-hover: color-mix(
        in oklch,
        var(--foreground) 30%,
        var(--input)
      );
      --boxel-select-text-color: var(--foreground);
      --boxel-dropdown-background-color: var(--popover);
      --boxel-dropdown-text-color: var(--popover-foreground);
      --boxel-dropdown-border-color: var(--border);
      --boxel-dropdown-hover-color: var(--hover);
      --boxel-dropdown-hover-text-color: var(--popover-foreground);
      /* the selected row is a --primary fill; its text and checkmark
         take --primary-foreground through currentColor. Hovered or
         keyboard-highlighted, it darkens a shade in both schemes, the
         accent Button's hover; a mix toward --foreground would lighten
         it in dark mode instead. */
      --_select-primary-hover: oklch(from var(--primary) calc(l * 0.9) c h);
      --boxel-dropdown-highlight-color: var(--primary);
      --boxel-dropdown-highlight-hover-color: var(--_select-primary-hover);
      --boxel-dropdown-selected-text-color: var(--primary-foreground);
      --boxel-dropdown-selected-highlighted-color: var(--_select-primary-hover);
      --boxel-dropdown-selected-hover-color: var(--_select-primary-hover);
      --boxel-dropdown-focus-border-color: var(--ring);
    }
    /* BoxelSelect has no knobs for the trigger's height and hairline, so
       these reach its trigger, dressed to match Input. */
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .pretui-selecttrigger {
      align-items: center;
      /* the row height LayoutControl sets (--pretui-row-h) first,
         then the per-instance knob, then the shared field knob so a
         row-level --pretui-field-h sizes Select with Input and Search */
      height: var(
        --pretui-row-h,
        var(
          --pretui-select-h,
          var(--pretui-field-h, var(--boxel-form-control-height-sm))
        )
      );
      border: 1px solid var(--input);
      width: 100%;
      text-align: start;
      transition: border-color var(--pretui-dur-snap, 180ms)
        var(--pretui-ease-snap, ease);
    }
    /* before the expanded and focus rules, which win the tie */
    @media (hover: hover) {
      .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .pretui-selecttrigger:hover {
        border-color: var(--_select-edge-hover);
      }
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .pretui-selecttrigger[aria-expanded='true'],
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .pretui-selecttrigger:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -1px;
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .pretui-selecttrigger[aria-disabled='true'] {
      opacity: var(--boxel-disabled-opacity);
      /* BoxelSelect paints disabled on --muted; this rule outranks it, so
         the field surface holds and only the opacity says disabled */
      background-color: var(--field);
      color: var(--foreground);
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .boxel-trigger {
      width: 100%;
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .boxel-trigger-content {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .boxel-trigger-placeholder {
      color: var(--muted-foreground);
    }
    .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] .pretui-selecttrigger svg {
      --icon-color: var(--muted-foreground);

      flex: none;
    }
    /* 16px on touch screens, as on Input and Autocomplete, with Input's
       line-height; the trigger's height is fixed, so it doesn't grow */
    @media (pointer: coarse) {
      .pretui-selectwrap[data-scopedcss-ec1bbf807a-0715b08c25] {
        --boxel-select-trigger-font-size: var(
          --boxel-form-control-touch-font-size
        );
        --boxel-select-trigger-line-height: var(
          --boxel-form-control-line-height-sm
        );
      }
    }
    /* an option's meta follows its label on the same line, a shade
       quieter; it takes the row's color, so it reads on a highlighted
       row too */
    .pretui-select-meta[data-scopedcss-ec1bbf807a-0715b08c25] {
      margin-inline-start: var(--boxel-sp-2xs);
      opacity: 0.7;
    }
  }