/* Native selects retain form values, labels, keyboard and touch behavior. */
body select, body #preview select, body #design-guide select {
  border: 1px solid #c9d4ed;
  border-radius: 12px;
  background-color: #fff;
  color: #152b4a;
  min-height: 48px;
  padding: 12px 16px;
  font: inherit;
  line-height: 1.5;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
body select:hover { border-color: #849ee8; }
body select:focus-visible, body #preview select:focus-visible, body #design-guide select:focus-visible {
  outline: 2px solid #2455ed;
  outline-offset: 3px;
}
body select:disabled { opacity: .55; cursor: not-allowed; }
@supports (appearance: base-select) {
  body select, body #preview select, body #design-guide select,
  select::picker(select) { appearance: base-select; }
  body select, body #preview select, body #design-guide select {
    background-image: none;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: start;
  }
  body select:open, body #preview select:open, body #design-guide select:open {
    border-color: #2455ed;
    box-shadow: 0 0 0 3px #2455ed12;
  }
  select::picker-icon { color: #2455ed; margin-inline-start: auto; }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    border: 1px solid #e2e8f5;
    border-radius: 12px;
    padding: 6px;
    margin-block: 7px;
    background: #fff;
    color: #152b4a;
    box-shadow: 0 12px 32px #1932691c, 0 2px 6px #19326908;
    max-height: min(320px, 50dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #2455ed #f1f4fc;
  }
  select option {
    padding: 11px 14px;
    min-height: 44px;
    border-radius: 7px;
    white-space: normal;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    cursor: pointer;
  }
  select option:hover, select option:focus { background: #f3f6ff; outline: none; }
  select option:checked { background: #edf2ff; color: #2455ed; font-weight: 600; }
  select option::checkmark { order: 1; margin-inline-start: auto; color: #2455ed; }
  select option:disabled { color: #8a96aa; cursor: not-allowed; }
}
@media (max-width:700px) {
  body select, body #preview select, body #design-guide select { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) { body select { transition:none; } }