/* listsearch.css — styling for the list filter (see listsearch.js).
 *
 * CANONICAL SOURCE. The product-site generator copies this file into its own
 * output; edit here and rebuild.
 *
 * It borrows whichever design system it lands in: the platform's spatial
 * tokens (--surface/--ink-3/--hair/--royal) if they exist, the product site's
 * (--card/--muted/--line/--teal) if they don't, and plain values if neither.
 * One file, two houses, no fork.
 */

.ls {
  --ls-surface: var(--surface, var(--card, #ffffff));
  --ls-ink:     var(--ink, #16232e);
  --ls-mute:    var(--ink-3, var(--muted, #5b6b7a));
  --ls-line:    var(--hair, var(--line, #e3e9ed));
  --ls-accent:  var(--royal, var(--teal, #1C6E68));
  margin: 18px 0 6px;
  display: grid;
  gap: 10px;
}

/* ---- the field ---------------------------------------------------------- */
.ls-field {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 30rem;
}
.ls-mag {
  position: absolute; left: 13px;
  width: 17px; height: 17px;
  fill: none; stroke: var(--ls-mute); stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}
.ls-input {
  width: 100%;
  /* right padding keeps the text and placeholder clear of the × button */
  padding: .62rem 2.3rem .62rem 2.35rem;
  font: inherit;
  font-size: .94rem;
  color: var(--ls-ink);
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.ls-input::placeholder { color: var(--ls-mute); }
.ls-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ls-accent) 55%, var(--ls-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ls-accent) 16%, transparent);
}
/* the browser's own clear widget would sit beside ours */
.ls-input::-webkit-search-decoration,
.ls-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ls-clear {
  position: absolute; right: 6px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  color: var(--ls-mute);
  background: none; border: 0; border-radius: 7px;
  cursor: pointer;
}
.ls-clear:hover { color: var(--ls-ink); background: color-mix(in srgb, var(--ls-ink) 7%, transparent); }
/* display:grid above would otherwise beat the UA rule for [hidden] */
.ls-clear[hidden] { display: none; }

/* ---- section chips ------------------------------------------------------ */
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-chip {
  font: inherit;
  font-size: .82rem;
  font-weight: 560;
  color: var(--ls-mute);
  background: none;
  border: 1px solid var(--ls-line);
  border-radius: 999px;
  padding: .3rem .7rem;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.ls-chip:hover { color: var(--ls-ink); border-color: color-mix(in srgb, var(--ls-ink) 22%, transparent); }
.ls-chip.on {
  color: var(--ls-accent);
  border-color: color-mix(in srgb, var(--ls-accent) 42%, transparent);
  background: color-mix(in srgb, var(--ls-accent) 9%, transparent);
}
.ls-chip .ls-n {
  font-variant-numeric: tabular-nums;
  opacity: .62;
  margin-left: .18rem;
  font-weight: 600;
}
.ls-chip.ls-empty-chip { opacity: .38; }

/* ---- count / empty state ------------------------------------------------ */
.ls-count {
  margin: 0;
  font-size: .84rem;
  color: var(--ls-mute);
  min-height: 1.2em;          /* no jump when the line appears */
  font-variant-numeric: tabular-nums;
}

/* ---- filtering ---------------------------------------------------------- */
/* !important because rows are display:flex/grid in both design systems */
.ls-off { display: none !important; }

mark.ls-hit {
  background: color-mix(in srgb, var(--royal, var(--teal, #1C6E68)) 17%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 .08em;
}

@media (max-width: 640px) {
  .ls-field { max-width: none; }
  .ls-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; scrollbar-width: none; }
  .ls-chips::-webkit-scrollbar { display: none; }
  .ls-chip { white-space: nowrap; flex: 0 0 auto; }
}