/* Keep single-choice admin pickers in the page's coordinate system. Browsers
   without base-select support retain the native HTML control. */
@supports (appearance: base-select) {
  .br-admin select.br-input:not([multiple]):not([size]),
  .br-admin select.br-input:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  .br-admin select.br-input:not([multiple]):not([size]) {
    align-items: center;
    gap: 0.75rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .br-admin select.br-input:not([multiple]):not([size])::picker(select) {
    min-inline-size: anchor-size(self-inline);
    max-inline-size: calc(100vw - 1.5rem);
    max-block-size: min(20rem, calc(100dvh - 2rem));
    margin-block: 0.25rem;
    padding: 0.3rem;
    overflow: auto;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-control);
    background: var(--app-elevated);
    color: var(--app-text);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 30%);
    font: inherit;
  }

  .br-admin select.br-input:not([multiple]):not([size])::picker-icon {
    flex: 0 0 auto;
    color: var(--app-text-muted);
  }

  .br-admin select.br-input:not([multiple]):not([size]) option {
    min-block-size: 2.75rem;
    padding: 0.6rem 0.75rem;
    gap: 0.65rem;
    border-radius: 0.25rem;
    color: var(--app-text);
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .br-admin select.br-input:not([multiple]):not([size]) option:checked {
    background: var(--app-nav-active);
  }

  .br-admin select.br-input:not([multiple]):not([size]) option:is(:hover, :focus-visible) {
    background: var(--app-nav-hover);
    outline: 1px solid var(--app-text-muted);
    outline-offset: -1px;
  }

  .br-admin select.br-input:not([multiple]):not([size]) option:disabled {
    color: var(--app-text-faint);
    cursor: not-allowed;
  }
}

@media (max-width: 767px) {
  /* Beat the later shared .br-app select.br-input rule, including its type
     specificity, so mobile controls and their pickers keep readable text. */
  .br-admin .br-admin-content select.br-input {
    min-height: 2.75rem;
    font-size: 1rem;
  }
}