/* VENDORED THIRD-PARTY ASSET — DO NOT EDIT THIS FILE IN PLACE.
 *
 * upstream: https://github.com/pigfox/unselect2
 * commit:   419ba672d561a6551f576b55536111443f04bfea
 * file:     unselect2.css
 * license:  MIT (see the upstream LICENSE)
 *
 * A fix belongs upstream and then comes back here as a fresh copy with this
 * header's commit and the recorded digest both updated in the same patch.
 * TestVendoredUnselect2MatchesRecordedCommit hashes everything below the
 * END-PROVENANCE line and fails the build when it stops matching, so an edit
 * made here instead of upstream cannot ship silently.
 *
 * END-PROVENANCE */
/* unselect2 — styling for the enhanced <select>.
 *
 * Every value the component paints comes from a --us2-* custom property, and
 * every one of those is declared as `var(--host-token, <literal>)`. Dropped into
 * a page that already publishes a design system (pigfox.com publishes --surface,
 * --ink, --accent and friends), the component inherits it and needs no
 * configuration. Served standalone, the literals take over. Nothing here is
 * hardcoded twice.
 *
 * Typography is deliberately absent: the component uses `font: inherit`
 * throughout, so the host page owns the type stack.
 */

:root {
  --us2-surface:      var(--surface, #ffffff);
  --us2-surface-alt:  var(--surface-alt, #f5f5f7);
  --us2-ink:          var(--ink, #1d1d1f);
  --us2-ink-muted:    var(--ink-muted, #6e6e73);
  --us2-accent:       var(--accent, #0071e3);
  --us2-accent-hover: var(--accent-hover, #0077ed);
  --us2-hairline:     var(--hairline, #d2d2d7);
  --us2-field-bg:     var(--field-bg, #ffffff);
  --us2-on-accent:    var(--on-accent, #ffffff);
  --us2-focus-ring:   var(--focus-ring, rgba(0, 113, 227, 0.15));
  --us2-focus-anchor: var(--focus-ring-anchor, #0071e3);
  --us2-shadow:       var(--shadow, rgba(0, 0, 0, 0.12));
  --us2-error:        var(--error, #d70015);
  --us2-radius:       12px;
  --us2-transition:   0.15s ease;
}

/* Explicit dark toggle. Matches how the host sets it: a head script writes
   data-theme on <html> before first paint. */
:root[data-theme="dark"] {
  --us2-surface:      var(--surface, #000000);
  --us2-surface-alt:  var(--surface-alt, #1c1c1e);
  --us2-ink:          var(--ink, #f5f5f7);
  --us2-ink-muted:    var(--ink-muted, #a1a1a6);
  --us2-accent:       var(--accent, #0a84ff);
  --us2-accent-hover: var(--accent-hover, #409cff);
  --us2-hairline:     var(--hairline, #48484a);
  --us2-field-bg:     var(--field-bg, #1c1c1e);
  --us2-on-accent:    var(--on-accent, #ffffff);
  --us2-focus-ring:   var(--focus-ring, rgba(10, 132, 255, 0.35));
  --us2-focus-anchor: var(--focus-ring-anchor, #0a84ff);
  --us2-shadow:       var(--shadow, rgba(0, 0, 0, 0.6));
  --us2-error:        var(--error, #ff453a);
}

/* Standalone dark support. The :not([data-theme]) qualifier is load-bearing, not
   defensive tidiness: the host page ALWAYS writes data-theme explicitly and has
   no prefers-color-scheme rule of its own, so an unqualified media query here
   would let the OS preference override a user who has just clicked the site's
   own light/dark toggle. This block may only speak when nobody else has. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --us2-surface:      var(--surface, #000000);
    --us2-surface-alt:  var(--surface-alt, #1c1c1e);
    --us2-ink:          var(--ink, #f5f5f7);
    --us2-ink-muted:    var(--ink-muted, #a1a1a6);
    --us2-accent:       var(--accent, #0a84ff);
    --us2-accent-hover: var(--accent-hover, #409cff);
    --us2-hairline:     var(--hairline, #48484a);
    --us2-field-bg:     var(--field-bg, #1c1c1e);
    --us2-on-accent:    var(--on-accent, #ffffff);
    --us2-focus-ring:   var(--focus-ring, rgba(10, 132, 255, 0.35));
    --us2-focus-anchor: var(--focus-ring-anchor, #0a84ff);
    --us2-shadow:       var(--shadow, rgba(0, 0, 0, 0.6));
    --us2-error:        var(--error, #ff453a);
  }
}

/* ------------------------------------------------------------------ helpers */

/* Visually hidden, still announced and still validated. */
.us2__sr,
.us2__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ wrapper */

.us2,
.us2 *,
.us2 *::before,
.us2 *::after {
  box-sizing: border-box;
}

/* No fixed width anywhere in this file. The component fills whatever the host
   gives it and the panel is measured against the wrapper, so it tracks the
   field at any size. */
.us2 {
  position: relative;
  width: 100%;
  font: inherit;
  color: var(--us2-ink);
}

/* -------------------------------------------------------------------- field */

/* The field is styled as a form control, not a call to action: it borrows the
   host's input idiom (hairline border, 12px radius, field background) rather
   than the pill-shaped button idiom, because that is what it is. */
.us2__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--us2-ink);
  background: var(--us2-field-bg);
  border: 1px solid var(--us2-hairline);
  border-radius: var(--us2-radius);
  cursor: pointer;
  transition: border-color var(--us2-transition), box-shadow var(--us2-transition);
}

.us2__field:hover {
  border-color: var(--us2-accent);
}

.us2__field:focus-visible {
  outline: 3px solid var(--us2-focus-anchor);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--us2-focus-ring);
}

.us2__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.us2__value--placeholder {
  color: var(--us2-ink-muted);
}

.us2__caret {
  flex: none;
  color: var(--us2-ink-muted);
  transition: transform var(--us2-transition);
}

.us2--open .us2__caret {
  transform: rotate(180deg);
}

.us2--disabled .us2__field,
.us2__field:disabled {
  color: var(--us2-ink-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* -------------------------------------------------------------------- panel */

/* Popover idiom: soft shadow, hairline edge, own surface. Matches the host's
   existing dropdown treatment rather than inventing a second one. */
.us2__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 18rem;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
  background: var(--us2-surface);
  border: 1px solid var(--us2-hairline);
  border-radius: var(--us2-radius);
  box-shadow: 0 8px 30px var(--us2-shadow);
}

.us2__list[hidden] {
  display: none;
}

/* Flipped above the field when the viewport has no room below. The class is
   toggled from script; only the geometry lives here. */
.us2--flip .us2__list {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

/* ------------------------------------------------------------------ options */

.us2__group {
  display: block;
  padding: 0;
  list-style: none;
}

/* The nested list that carries role="group". Stripped of every default list
   affordance, so grouping costs no indentation and shows no markers. */
.us2__group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The group's visible name. It is aria-hidden in the markup — the accessible
   name reaches AT through aria-labelledby on .us2__group-list, so the label
   exists exactly once in the accessibility tree. */
.us2__group-label {
  display: block;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--us2-ink-muted);
}

.us2__option {
  position: relative;
  display: block;
  padding: 0.55rem 2.25rem 0.55rem 0.75rem;
  border-radius: calc(var(--us2-radius) - 4px);
  cursor: pointer;
  transition: background-color var(--us2-transition), color var(--us2-transition);
}

.us2__option:hover,
.us2__option--active {
  background: var(--us2-surface-alt);
}

/* Selection is signalled twice: colour AND a check glyph. The glyph is the
   channel that survives greyscale, low vision and monochrome displays, so the
   state never rests on hue alone (WCAG 1.4.1). */
.us2__option[aria-selected="true"] {
  color: var(--us2-accent);
  font-weight: 600;
}

.us2__option[aria-selected="true"]::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  font-weight: 700;
}

.us2__option[aria-disabled="true"] {
  color: var(--us2-ink-muted);
  cursor: default;
}

.us2__option[aria-disabled="true"]:hover {
  background: none;
}

/* ------------------------------------------------------------------- states */

/* The border is the supporting signal only. The demo renders a text message and
   wires it with aria-describedby; colour is never the sole carrier of the
   error. */
.us2--invalid .us2__field {
  border-color: var(--us2-error);
}

.us2--invalid .us2__field:focus-visible {
  outline-color: var(--us2-error);
}

/* ------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}
