/* ==========================================================================
   Native selects — one closed look, one open list
   Every visible <select> outside the custom pickers: the sort and filter
   menus on /questions and /topics, the report form on shared pages, the watch
   settings and Settings. Each keeps its own box (border, fill, height) from
   its component; this file adds the chevron and, where the browser supports
   a stylable picker (appearance: base-select), an open list made of the same
   material as the app's menus instead of the operating system's blue list.
   Older browsers keep their native list with the same closed control.
   Loaded last on every page that has such a select, after the component CSS.
   ========================================================================== */

:root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select,
:root select:is(.watch-interval-select, .wd-select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-overflow: ellipsis;
}

/* Settings draws its own triangle; one chevron is enough. */
:root .settings-select::after { display: none; }

@supports (appearance: base-select) {
  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select,
  :root select:is(.watch-interval-select, .wd-select) {
    appearance: base-select;
    display: inline-flex;
    align-items: center;
  }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select::picker-icon,
  :root select:is(.watch-interval-select, .wd-select)::picker-icon { display: none; }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select::picker(select),
  :root select:is(.watch-interval-select, .wd-select)::picker(select) {
    appearance: base-select;
    min-width: anchor-size(width);
    margin-block: 6px;
    padding: 5px;
    border: 1px solid var(--line, rgba(34, 36, 40, 0.14));
    border-radius: var(--radius-sm);
    background: var(--well, #fff);
    color: var(--ink, #222428);
    box-shadow: var(--lift, 0 1px 2px rgba(28, 30, 33, 0.05), 0 14px 34px rgba(28, 30, 33, 0.08));
    opacity: 0;
    translate: 0 -4px;
    transition: opacity var(--dur-press) var(--ease-standard), translate var(--dur-press) var(--ease-standard), overlay var(--dur-press) allow-discrete, display var(--dur-press) allow-discrete;
  }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select:open::picker(select),
  :root select:is(.watch-interval-select, .wd-select):open::picker(select) {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select:open::picker(select),
    :root select:is(.watch-interval-select, .wd-select):open::picker(select) {
      opacity: 0;
      translate: 0 -4px;
    }
  }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select option,
  :root select:is(.watch-interval-select, .wd-select) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: var(--radius-xs);
    color: var(--ink, #222428);
    font: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
  }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select option:is(:hover, :focus-visible),
  :root select:is(.watch-interval-select, .wd-select) option:is(:hover, :focus-visible) {
    background: var(--raise, #f5f5f5);
    outline: none;
  }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select option:checked,
  :root select:is(.watch-interval-select, .wd-select) option:checked { font-weight: 600; }

  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select option:disabled,
  :root select:is(.watch-interval-select, .wd-select) option:disabled { color: var(--ink-3, #64676d); cursor: default; }

  /* The tick sits at the end of the row, like the app's model menus. */
  :root :is(.hub-toolbar, .topics-toolbar, .share-report-form, .settings-select) select option::checkmark,
  :root select:is(.watch-interval-select, .wd-select) option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--ink-2, #5c5f66);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root select::picker(select) { transition: none; }
}