/* ==========================================================================
   .tp-select — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   A native <select>, styled. Deliberately native: the platform's own popup is
   keyboard-operable, screen-reader-correct, and usable on a touch device
   without a single line of JavaScript, and no custom listbox in this product
   would earn back what replacing it costs.

   Variants   --small  --multiple
   Elements   __field  __label  __hint  __error  __chevron  __control
   States     :hover  :focus-visible  :disabled  [aria-invalid]

   The chevron is an inline SVG in the template rather than a background-image,
   so it inherits currentColor and is therefore correct in both themes without
   a second asset.
   ========================================================================== */

.tp-select {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-2);
  min-width: 0;
}

.tp-select__label {
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  line-height: var(--tp-leading-tight);
}

/* Positioning context for the chevron. */
.tp-select__control {
  position: relative;
  display: flex;
  min-width: 0;
}

.tp-select__field {
  width: 100%;
  min-height: var(--tp-space-8);
  /* Inline-end padding leaves room for the chevron without overlapping the
     longest option text. */
  padding: var(--tp-space-2) var(--tp-space-9) var(--tp-space-2) var(--tp-space-3);
  border: var(--tp-border-width-hairline) solid var(--tp-color-border-default);
  border-radius: var(--tp-radius-md);
  background-color: var(--tp-color-surface-raised);
  color: var(--tp-color-text-primary);
  font-family: var(--tp-font-sans);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-normal);
  cursor: pointer;
  /* Suppress the platform chevron so ours is the only one; color-scheme in
     tokens.css keeps the popup itself matched to the theme. */
  appearance: none;
  transition: border-color var(--tp-motion-duration-fast) var(--tp-motion-ease-standard);
}

.tp-select__field:hover {
  border-color: var(--tp-color-border-strong);
}

.tp-select__field:disabled {
  background-color: var(--tp-color-surface-sunken);
  color: var(--tp-color-text-muted);
  border-color: var(--tp-color-border-subtle);
  opacity: var(--tp-opacity-disabled);
  cursor: not-allowed;
}

.tp-select__field[aria-invalid="true"] {
  border-color: var(--tp-color-state-danger);
  border-width: var(--tp-border-width-thick);
  background-color: var(--tp-color-state-danger-subtle);
}

.tp-select__field:focus-visible {
  border-color: var(--tp-color-border-focus);
}

/* The chevron never intercepts a click: the whole control stays one target. */
.tp-select__chevron {
  position: absolute;
  inset-inline-end: var(--tp-space-3);
  top: 50%;
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  transform: translateY(-50%);
  color: var(--tp-color-text-muted);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.tp-select__field--small {
  min-height: var(--tp-space-7);
  padding: var(--tp-space-1) var(--tp-space-8) var(--tp-space-1) var(--tp-space-2);
  font-size: var(--tp-text-sm);
}

/* A multiple select is a list box, not a popup: it needs height and no
   chevron. The chevron element is simply omitted from the template. */
.tp-select__field--multiple {
  min-height: var(--tp-space-11);
  padding: var(--tp-space-2);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Supporting text
   -------------------------------------------------------------------------- */

.tp-select__hint {
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
  line-height: var(--tp-leading-normal);
}

.tp-select__error {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-2);
  color: var(--tp-color-state-danger-text);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  line-height: var(--tp-leading-normal);
}

.tp-select__error-icon {
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  flex: none;
  margin-top: var(--tp-space-1);
  color: var(--tp-color-state-danger);
}