/* searchselect.css - THE DARK SEARCHABLE DROPDOWN's sheet (js/searchselect.mjs).
 *
 * TOKEN-ONLY. Every colour, radius and shadow is a role token from theme.css, so
 * the list wears each owner's own palette - a dark console gets a dark list, a
 * light one a light list - and never the operating system's white menu sheet.
 *
 * READABLE STATES, BY CONSTRUCTION: the row under the pointer or the keyboard is
 * an accent WASH behind unchanged ink (the text colour never drops toward the
 * ground), and the chosen row carries an accent BAR and bold ink - two different
 * marks, so "where am I" and "what is picked" never read as one state.
 *
 * NEVER A FIELD ON A FIELD: the trigger fills its own grid cell and truncates
 * (min-width: 0 on every flex child), and the list lives in its own fixed layer
 * placed by the script, above the page rather than inside a card's overflow.
 */

.ss { position: relative; display: block; min-width: 0; }

.ss-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  margin: 0;
  padding: .45rem .7rem;
  font: inherit;
  font-size: .9rem;
  line-height: 1.3;
  text-align: left;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-s);
  cursor: pointer;
}
.ss-trigger:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2)); }
.ss-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-trigger[aria-expanded="true"] { border-color: var(--accent); }
.ss-trigger[disabled] { opacity: .55; cursor: not-allowed; }
.ss-trigger.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }

.ss-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-value.is-placeholder { color: var(--fg-mute); }
.ss-meta {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--fg-mute);
}
.ss-caret {
  flex: none;
  width: .45rem;
  height: .45rem;
  margin: 0 .15rem 0 .1rem;
  border-right: 2px solid var(--fg-mute);
  border-bottom: 2px solid var(--fg-mute);
  transform: translateY(-25%) rotate(45deg);
}
.ss-trigger[aria-expanded="true"] .ss-caret { transform: translateY(25%) rotate(225deg); }

/* ---------------------------------------------------------------- the list */

.ss-pop {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  max-height: 380px;
  overflow: hidden;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-s);
  box-shadow: var(--lift-2);
}

.ss-search {
  flex: none;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: .5rem;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .88rem;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
}
.ss-search::placeholder { color: var(--fg-mute); }
.ss-search:focus { outline: 2px solid var(--accent); outline-offset: 0; }

.ss-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 .35rem .35rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ss-group {
  padding: .55rem .5rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.ss-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1px 0;
  padding: .5rem .6rem;
  border-radius: var(--r-s);
  color: var(--fg);
  font-size: .9rem;
  line-height: 1.3;
  cursor: pointer;
}
.ss-opt-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ss-opt-meta {
  flex: 0 1 auto;
  min-width: 0;
  font-size: .78rem;
  color: var(--fg-mute);
  text-align: right;
}
.ss-opt.is-active { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.ss-opt[aria-selected="true"] {
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--accent);
}
.ss-opt[aria-selected="true"] .ss-opt-meta { color: var(--fg-dim); }
.ss-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.ss-tag {
  flex: none;
  padding: .08rem .42rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
}
.ss-tag.is-warn { color: var(--warn); }
.ss-tag.is-ok { color: var(--ok); }
.ss-tag.is-bad { color: var(--bad); }
.ss-tag.is-accent { color: var(--accent-hi); }

.ss-empty {
  margin: 0;
  padding: .6rem 1rem .9rem;
  font-size: .88rem;
  color: var(--fg-mute);
}
.ss-empty[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ss-trigger { transition: border-color .15s ease; }
}