/* Shared by the React shell and the isolated legacy modules.
   Single-choice menus opt in only when the browser supports native pickers.
   Unsupported browsers keep their existing system controls and semantics. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  select:not([multiple]):not([size]) {
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  select:not([multiple]):not([size])::picker(select) {
    color: var(--text, #171717);
    background: var(--paper, var(--bg, #fff));
    background: color-mix(in srgb, var(--paper, var(--bg, #fff)) 96%, transparent);
    border: 1px solid var(--line, #ddd);
    border-radius: 18px;
    padding: 5px;
    margin-block: 6px;
    min-inline-size: anchor-size(inline);
    max-inline-size: calc(100vw - 24px);
    max-block-size: min(360px, 60dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 12px 36px #00000020;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font: inherit;
  }

  select:not([multiple]):not([size]) option {
    align-items: center;
    gap: 10px;
    min-block-size: 36px;
    padding: 7px 10px;
    border-radius: 12px;
    color: var(--text, #171717);
    background: transparent;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  select:not([multiple]):not([size]) option:checked {
    background: var(--selected, #e9e9e9);
    font-weight: 600;
  }

  select:not([multiple]):not([size]) option:not(:disabled):hover,
  select:not([multiple]):not([size]) option:focus-visible {
    background: var(--hover, #f2f2f2);
    outline: 2px solid var(--accent, var(--teal, #007f88));
    outline-offset: -2px;
  }

  select:not([multiple]):not([size]):focus-visible {
    outline: 2px solid var(--accent, var(--teal, #007f88));
    outline-offset: 3px;
  }

  select:not([multiple]):not([size])::picker-icon { color: var(--muted, #666); }
  /* Preserve native selection, keyboard and screen-reader behavior. */
  @supports selector(select:open) {
    select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
    @media (prefers-reduced-motion: no-preference) {
      select:not([multiple]):not([size])::picker-icon { transition: rotate 140ms ease; }
      select:not([multiple]):not([size]):open::picker(select) { animation: workspace-picker-in 140ms ease-out; }
      @keyframes workspace-picker-in {
        from { opacity: 0; translate: 0 -3px; }
        to { opacity: 1; translate: 0 0; }
      }
    }
  }
  select:not([multiple]):not([size]) option::checkmark { color: var(--accent, var(--teal, #007f88)); }
  select:not([multiple]):not([size]):disabled,
  select:not([multiple]):not([size]) option:disabled { opacity: .5; cursor: default; }

  @media (pointer: coarse) {
    select:not([multiple]):not([size]) option { min-block-size: 44px; }
  }

  @media (prefers-reduced-transparency: reduce) {
    select:not([multiple]):not([size])::picker(select) {
      background: var(--paper, var(--bg, #fff));
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (forced-colors: active) {
    select:not([multiple]):not([size])::picker(select) {
      background: Canvas;
      color: CanvasText;
      border-color: ButtonText;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    select:not([multiple]):not([size]) option:checked { background: Highlight; color: HighlightText; }
    select:not([multiple]):not([size]) option::checkmark { color: inherit; }
  }
}

/* Keep editable text legible on touch devices without disabling user zoom. */
@media (pointer: coarse) {
  .app-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select),
  .module-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    font-size: max(16px, 1rem);
  }
}