/* Native controls keep form, keyboard and assistive-technology behavior.
   Authoritative shared asset: supernova/static/modern-selects.css. */
select {
  --nova-select-surface: var(--surface-2, light-dark(#fff, #182232));
  --nova-select-popup: var(--surface, light-dark(#fff, #17212b));
  --nova-select-text: var(--text, var(--ink, CanvasText));
  --nova-select-line: var(--line, light-dark(#d5deea, #3d4961));
  --nova-select-accent: var(--accent, var(--teal, #8270bd));
  --nova-select-muted: var(--muted, light-dark(#68758c, #a9b9cc));
  border-radius: 10px;
  font: inherit;
  color: var(--nova-select-text);
  background-color: var(--nova-select-surface);
  border: 1px solid var(--nova-select-line);
  min-inline-size: 0;
  max-inline-size: 100%;
  accent-color: var(--nova-select-accent);
}
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
  min-block-size: 36px;
  padding-block: 8px;
  padding-inline: 11px;
  cursor: pointer;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 #ffffff08;
}
select:focus-visible {
  outline: 2px solid var(--nova-select-accent);
  outline-offset: 2px;
}
select:disabled, fieldset:disabled select {
  cursor: not-allowed;
  opacity: .6;
}
select:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--nova-select-accent) 60%, var(--nova-select-line));
}
select[multiple], select[size]:not([size="0"]):not([size="1"]) {
  padding: 6px;
}
select option, select optgroup {
  color: var(--nova-select-text);
  background-color: var(--nova-select-popup);
}
select option:disabled, select optgroup:disabled {
  color: var(--nova-select-muted);
}
select[hidden], select option[hidden], select optgroup[hidden] { display: none !important; }

/* Unsupported engines retain their native picker and a themed closed control. */
@supports not (appearance: base-select) {
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    appearance: none;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23899aac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px;
  }
  [dir="rtl"] select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    background-position: left 11px center;
  }
}

/* Chromium/WebView2's native top-layer picker also works inside modal dialogs. */
@supports (appearance: base-select) {
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    display: inline-flex;
    align-items: center;
  }
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]),
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
    box-sizing: border-box;
    padding: 6px;
    margin-block: 6px;
    border: 1px solid var(--nova-select-line);
    border-radius: 14px;
    color: var(--nova-select-text);
    background: var(--nova-select-popup);
    box-shadow: 0 14px 42px #0004;
    max-inline-size: calc(100vw - 16px);
    max-block-size: min(360px, calc(100dvh - 32px));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font: inherit;
    text-align: start;
  }
  select::picker-icon {
    color: var(--nova-select-muted);
    margin-inline-start: auto;
    padding-inline-start: 12px;
    flex-shrink: 0;
  }
  select:open {
    border-color: var(--nova-select-accent);
  }
  select:open::picker-icon { rotate: 180deg; }
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-block-size: 36px;
    padding: 9px 10px;
    margin: 2px 0;
    border: 0;
    border-radius: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: normal;
    cursor: pointer;
  }
  select option:checked {
    color: var(--nova-select-text);
    background: color-mix(in srgb, var(--nova-select-accent) 15%, var(--nova-select-popup));
  }
  select option:not(:disabled):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--nova-select-accent) 22%, var(--nova-select-popup));
    outline: 1px solid var(--nova-select-accent);
    outline-offset: -1px;
  }
  select option:disabled, select optgroup:disabled option {
    color: var(--nova-select-muted);
    opacity: .6;
    cursor: not-allowed;
  }
  select option::checkmark {
    color: var(--nova-select-accent);
    min-inline-size: 1em;
  }
  select optgroup { font-weight: 600; }
}

@media (prefers-reduced-motion: no-preference) {
  select { transition: border-color 140ms ease, background-color 140ms ease; }
  select::picker-icon { transition: rotate 140ms ease; }
}
@media (forced-colors: active) {
  select, select::picker(select) { border-color: ButtonText; box-shadow: none; }
  select option:checked { color: HighlightText; background: Highlight; }
  select option::checkmark, select::picker-icon { color: ButtonText; }
}