/* Shared select treatment. Keep native form semantics, keyboard and touch input. */
.aether-shell select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  box-sizing: border-box;
  padding: 13px 46px 13px 16px;
  border: 1px solid #3b3b3b;
  border-radius: 14px;
  background-color: #171717;
  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='%23bdbdbd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: #f0f0f0;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.aether-shell select:not([multiple]):hover:not(:disabled) {
  border-color: #656565;
  background-color: #1d1d1d;
}
.aether-shell select:not([multiple]):focus {
  outline: none;
  border-color: #b5b5b5;
}
.aether-shell select:not([multiple]):focus-visible {
  outline: 2px solid #d0d0d0;
  outline-offset: 3px;
}
.aether-shell select:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.aether-shell select option,
.aether-shell select optgroup {
  color: #f0f0f0;
  background: #1a1a1a;
}
.trim-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 520px) { .trim-fields { grid-template-columns: minmax(0,1fr); } }

/* Browsers with customizable selects get a matching top-layer popup.
   Other browsers retain their native accessible picker and the field above. */
@supports (appearance: base-select) {
  .aether-shell select:not([multiple]),
  .aether-shell select:not([multiple])::picker(select) {
    appearance: base-select;
  }
  .aether-shell select:not([multiple]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-inline-end: 19px;
    background-image: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .aether-shell select::picker-icon {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 auto;
    border-right: 1.5px solid #bdbdbd;
    border-bottom: 1.5px solid #bdbdbd;
    transform: rotate(45deg);
    transition: transform .16s;
  }
  .aether-shell select:open::picker-icon {
    transform: translateY(4px) rotate(225deg);
  }
  .aether-shell select::picker(select) {
    min-inline-size: min(anchor-size(inline), calc(100vw - 32px));
    max-inline-size: calc(100vw - 32px);
    max-block-size: min(380px, 55dvh);
    margin-block: 8px;
    padding: 7px;
    border: 1px solid #454545;
    border-radius: 16px;
    background: #171717;
    color: #f0f0f0;
    box-shadow: 0 16px 48px #0009, 0 2px 8px #0006;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
  }
  .aether-shell select option {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  .aether-shell select option:checked { background: #303030; color: white; }
  .aether-shell select option:hover,
  .aether-shell select option:focus-visible { background: #282828; outline: none; }
  .aether-shell select option:disabled { color: #777; cursor: not-allowed; }
  .aether-shell select option::checkmark {
    order: 1;
    margin-inline-start: auto;
    color: #f4f4f4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aether-shell select,
  .aether-shell select::picker-icon { transition: none; }
}