/* Ported from the Anders Group design repo: css/adv-select.css
   Scoped to .anders-design and re-indented on the way in; the rules
   themselves are verbatim. Do not hand-edit — a re-port overwrites this
   file. Change the design repo and re-run:
     node tools/port-design.js
   See JOB-TEMPLATES-PLAN.md. */

/**
 * advSelect — custom select component (pairs with assets/js/adv-select.js).
 *
 * Base, reusable styles. Page-level skins (e.g. the jobs archive floating
 * label anchors) style .advs-trigger alongside their native select rules.
 */

.anders-design .advs-native[data-adv-enhanced] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;

  /* Page-level skins put a generic `transition` on the native select for its
     hover/focus states. Left unset here, that transition also animates the
     jump to 1x1 above, and because this element keeps its layout box while
     invisible (opacity, not display), the animated shrink ripples into
     sibling flex items for the full duration — a visible reflow, not the
     intended instant swap. */
  transition: none !important;
}

.anders-design .advs-trigger {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.anders-design .advs-trigger .advs-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anders-design .advs-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, 92vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 1320;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}

.anders-design .advs-panel[hidden] {
  display: none;
}

.anders-design .advs-panel.advs-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.anders-design .advs-panel.advs-in {
  opacity: 0;
  transform: translateY(4px);
}

.anders-design .advs-panel.advs-up.advs-in {
  transform: translateY(-4px);
}

.anders-design .advs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  flex: none;
}

.anders-design .advs-search[hidden] {
  display: none;
}

.anders-design .advs-search svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
}

.anders-design .advs-search input,
.anders-design .advs-search input[type="text"] {
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  flex: 1;
  min-width: 0;

  /* A .field ancestor (this component is often nested inside one, e.g. a
     floating-label select field) sets a blanket `.field input{min-height:52px}`
     for its own real inputs. That rule and this one tie on specificity, and
     since neither used to redeclare min-height the ancestor's 52px silently
     won here, bloating this compact filter box. Reset it explicitly. */
  min-height: 0;
  height: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  padding: 2px 0;
}

.anders-design .advs-search input:focus,
.anders-design .advs-search input[type="text"]:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.anders-design .advs-search input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.anders-design .advs-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  max-height: 296px;
  overscroll-behavior: contain;
  outline: none;
}

.anders-design .advs-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 10px 4px;
}

.anders-design .advs-group:first-child {
  padding-top: 6px;
}

.anders-design .advs-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}

/* The class above sets display, which beats the UA [hidden] rule, so filtered
   options must be hidden explicitly. */
.anders-design .advs-opt[hidden] {
  display: none;
}

.anders-design .advs-opt.is-placeholder {
  color: var(--muted);
  font-weight: 500;
}

.anders-design .advs-opt svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
  opacity: 0;
}

.anders-design .advs-opt.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.anders-design .advs-opt.is-selected {
  color: var(--accent);
  font-weight: 700;
}

.anders-design .advs-opt.is-selected svg {
  opacity: 1;
}

.anders-design .advs-empty {
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .anders-design .advs-panel {
    transition: none;
  }
}