/* Shared choice controls; load after each surface's adapter.
   Native select values, events, labels and keyboard semantics stay browser-owned.
   Unsupported browsers retain the platform picker with a branded closed field. */
:root {
  --ag-action-gap: var(--ag-space-3);
  --ag-field-block-pad: var(--ag-space-2);
  --ag-field-inline-pad: var(--ag-space-4);
}
body select:not([multiple]):not([size]) {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  min-block-size: 48px;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--ag-field-block-pad) 44px var(--ag-field-block-pad) var(--ag-field-inline-pad);
  border: 1px solid var(--ag-ui-border-strong);
  border-radius: var(--ag-control-radius);
  color: var(--ag-ui-text);
  background-color: var(--ag-ui-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--ag-ui-secondary) 50%), linear-gradient(135deg, var(--ag-ui-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  font: 500 var(--ag-body1-size)/var(--ag-body1-line) var(--ag-font-sans);
  text-overflow: ellipsis;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--ag-duration) var(--ag-ease), background-color var(--ag-duration) var(--ag-ease);
}
body select:not([multiple]):not([size]):hover:not(:disabled) { border-color: var(--ag-ui-accent); }
body select:not([multiple]):not([size]):focus-visible {
  outline: var(--ag-focus-width) solid var(--ag-ui-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 var(--ag-focus-halo) color-mix(in srgb, var(--ag-ui-accent) 35%, transparent);
}
body select:not([multiple]):not([size]):disabled { opacity: var(--ag-disabled-opacity); cursor: not-allowed; }
body select:not([multiple]):not([size])[aria-busy="true"] { cursor: progress; }
body select:not([multiple]):not([size])[aria-invalid="true"] { border-color: #edb0a6; }
body select option { color: var(--ag-ui-text); background-color: var(--ag-ui-raised); }

/* Progressive enhancement, not a replacement widget or hidden duplicate input.
   The picker stays in the top layer, escaping scroll/dialog clipping. */
@supports (appearance: base-select) {
  body select:not([multiple]):not([size]),
  body select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  body select:not([multiple]):not([size]) {
    padding-inline-end: var(--ag-field-inline-pad);
    background-image: none;
    gap: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
  }
  body select:not([multiple]):not([size])::picker-icon { color: var(--ag-ui-secondary); flex: none; margin-inline-start: auto; }
  body select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  body select:not([multiple]):not([size])::picker(select) {
    box-sizing: border-box;
    min-inline-size: anchor-size(width);
    max-inline-size: calc(100vw - 24px);
    max-block-size: min(320px, calc(100% - 16px));
    position-try-order: most-block-size;
    margin-block: 8px;
    padding: 6px;
    border: 1px solid var(--ag-ui-border-strong);
    border-radius: var(--ag-card-radius);
    color: var(--ag-ui-text);
    background: var(--ag-ui-raised);
    box-shadow: 0 16px 40px #0008;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--ag-ui-border-strong) var(--ag-ui-raised);
  }
  body select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 48px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--ag-control-radius);
    font: var(--ag-type-body1);
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  body select:not([multiple]):not([size]) option + option { margin-block-start: 4px; }
  body select:not([multiple]):not([size]) option:checked {
    border-color: var(--ag-ui-accent);
    background: color-mix(in srgb, var(--ag-ui-accent) 16%, var(--ag-ui-raised));
  }
  body select:not([multiple]):not([size]) option:is(:hover,:focus-visible):not(:disabled) {
    background: color-mix(in srgb, var(--ag-ui-accent) 24%, var(--ag-ui-raised));
    outline: 2px solid var(--ag-ui-accent);
    outline-offset: -2px;
  }
  body select:not([multiple]):not([size]) option:disabled { opacity: var(--ag-disabled-opacity); cursor: not-allowed; }
  body select:not([multiple]):not([size]) option::checkmark { color: var(--ag-ui-accent); flex: none; }
}
@media (pointer:coarse),(max-width:767px) {
  body select:not([multiple]):not([size]) { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  body select:not([multiple]):not([size]) { transition: none; }
}
@media (forced-colors:active) {
  body select:not([multiple]):not([size]) { appearance: auto; background-image: none; border: 1px solid ButtonText; }
  body select:not([multiple]):not([size])::picker(select) { appearance: auto; }
}

/* Short landscape viewports use a bounded choice sheet, avoiding a picker
   that extends beyond the visible controls. Native selection semantics remain. */
@supports (appearance: base-select) {
  @media (max-height: 500px) {
    body select:not([multiple]):not([size])::picker(select) {
      position-area: none;
      position-try-fallbacks: none;
      inset: 16px;
      margin: auto;
      min-inline-size: 0;
      inline-size: min(560px, calc(100vw - 32px));
      block-size: max-content;
      max-block-size: calc(100svh - 32px);
    }
  }
}