/* ── dv-select ─────────────────────────────────────────────────────────────
   Custom design-system dropdown. Progressive enhancement of a native <select>:
   the native element stays in the DOM (source of truth for submit/validation)
   and is visually hidden; this UI is layered on top and kept in sync.
   Ported from tmp/form-elements-preview.html (.dv-field / .dv-pop / .dv-opt /
   .dv-search). Token-only.
   ────────────────────────────────────────────────────────────────────────── */

/* Visually-hidden native select — stays focusable + submittable (NOT display:none) */
.dv-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dv-select { position: relative; }

/* Trigger */
.dv-field {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  user-select: none;
}
.dv-field:hover { border-color: var(--accent); }
.dv-field.is-open,
.dv-field:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.dv-field__val { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-field__val.is-placeholder { color: var(--text-muted); }
.dv-field__icon { color: var(--text-muted); flex-shrink: 0; display: inline-flex; }

/* Menu */
.dv-pop {
  position: absolute;
  z-index: 30;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
  padding: 6px;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
}

/* Option */
.dv-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
}
.dv-opt:hover,
.dv-opt.is-active { background: var(--surface-alt); }
.dv-opt[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
}
.dv-opt__check { margin-left: auto; color: var(--accent); opacity: 0; display: inline-flex; flex-shrink: 0; }
.dv-opt[aria-selected="true"] .dv-opt__check { opacity: 1; }
.dv-opt.is-disabled { color: var(--text-muted); cursor: not-allowed; opacity: .6; }

/* Search header */
.dv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.dv-search svg { color: var(--text-muted); flex-shrink: 0; }
.dv-search input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--text-sm);
  width: 100%;
  color: var(--text-primary);
  background: transparent;
}

/* Empty state for search */
.dv-pop__empty {
  padding: 10px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}