/* ==========================================================================
   select.css: branded dropdown (src/select.js). One look for every select:
   neutral field at rest, ink border + signature offset shadow when open,
   lime-tinted menu rows, lime check tile on the chosen option.
   ========================================================================== */

/* the native <select> stays as the data source, hidden from view & AT */
select.bsel-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.bsel { position: relative; min-width: 0; width: 100%; }

/* ------------------------------------------------------------------ field */
.bsel-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: var(--field-h);
  padding: 0 10px 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: 500 var(--fs-body)/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.bsel-value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bsel-chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: transform var(--t-med) var(--spring), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.bsel-trigger:hover { border-color: var(--ink); background: var(--lime-tint-1); }
.bsel-trigger:hover .bsel-chevron { color: var(--ink); }
.bsel-trigger:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime);
}
.bsel-trigger:active { transform: translateY(1px); }

/* open: matches the branded buttons (ink border + offset shadow) */
.bsel.is-open .bsel-trigger {
  border-color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow-brut);
}
.bsel.is-open .bsel-chevron { transform: rotate(180deg); background: var(--lime); color: var(--ink); }

.bsel.is-disabled .bsel-trigger { opacity: 0.55; cursor: not-allowed; background: var(--panel-2); }
.bsel.is-disabled .bsel-trigger:hover { border-color: var(--line); }

/* ------------------------------------------------------------------- menu */
.bsel-menu {
  position: fixed;
  z-index: var(--z-popover);
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow-brut), var(--shadow-lg);
  font: 500 var(--fs-body)/1.35 var(--font-ui);
  color: var(--text);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 160ms var(--ease-out), transform 200ms var(--spring);
  scrollbar-width: thin;
}
.bsel-menu.is-up { transform: translateY(6px) scale(0.98); transform-origin: bottom center; }
.bsel-menu.is-open { opacity: 1; transform: none; }
.bsel-menu.is-leaving { opacity: 0; transform: translateY(-4px) scale(0.98); transition-duration: 120ms; }
.bsel-menu.is-up.is-leaving { transform: translateY(4px) scale(0.98); }

.bsel-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 40px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 90ms var(--ease-out), border-color 90ms var(--ease-out);
}
.bsel-option + .bsel-option { margin-top: 2px; }
.bsel-option-text { flex: 1; min-width: 0; }

/* hover / keyboard-active */
.bsel-option.is-active { background: var(--lime-tint-1); }

/* chosen */
.bsel-option[aria-selected="true"] { background: var(--lime-tint-2); font-weight: 600; }
.bsel-option[aria-selected="true"].is-active { border-color: var(--ink); }

.bsel-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: var(--lime);
  background: var(--ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--spring);
}
.bsel-option[aria-selected="true"] .bsel-check { opacity: 1; transform: none; }

.bsel-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: none; }

@media (prefers-reduced-motion: reduce) {
  .bsel-menu, .bsel-menu.is-up, .bsel-menu.is-leaving { transform: none; transition: opacity 1ms; }
  .bsel-chevron, .bsel-check { transition: none; }
}