/* ============================================================================
   SEARCH-SELECT — choosing one record out of very many
   ----------------------------------------------------------------------------
   Specification: docs/modules/accounts.md §6.8 · Contract: BC-121

   Replaces the captured client picker: a dialogue holding five rows at a time
   and a page strip ending at 13084. The layout below is built around one
   requirement that the paged dialogue could not meet — the operator must be
   able to tell two similar records apart WITHOUT opening either. So every
   result carries three lines: what it is, what identifies it, and how to
   reach it.
   ========================================================================== */

.ss { position: relative; }

/* --- The input ------------------------------------------------------------ */

.ss__box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  block-size: var(--ctl-h-md);
}
.ss__box:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
/* A failed field is red, like every other control (form.css, ADR-0070). */
.field.is-invalid .ss__box { border-color: var(--color-danger); }
.field.is-invalid .ss__box:focus-within { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-subtle); }
.ss__box > svg {
  inline-size: 15px; block-size: 15px;
  color: var(--color-text-tertiary);
  flex: none;
}

.ss__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--color-text-primary);
  outline: none;
}
.ss__input::placeholder { color: var(--color-text-tertiary); }

.ss__spin {
  flex: none;
  display: inline-flex;
  color: var(--color-text-tertiary);
}
.ss__spin svg { inline-size: 14px; block-size: 14px; animation: ss-spin 900ms linear infinite; }

@keyframes ss-spin { to { transform: rotate(360deg); } }

/* Motion is suppressed where the operator has asked for it to be —
   docs/03-UX-PATTERNS.md §14. A spinner is the one place this matters least
   and the one place it is most often forgotten. */
@media (prefers-reduced-motion: reduce) {
  .ss__spin svg { animation-duration: 2.4s; }
}

.ss__hint {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
}

/* --- The results ---------------------------------------------------------- */

/* Anchored to the field rather than floated in a layer. This control is used
   INSIDE a form, and docs/03-UX-PATTERNS.md §12 caps the product at two
   layers — spending one of them on a picker inside a page would leave nothing
   for the confirmation the form actually needs. */
.ss__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--ctl-h-md) + 4px);
  z-index: 40;
  max-block-size: 320px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-3);
  padding: var(--space-2);
}

.ss__opt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-4);
  inline-size: 100%;
  text-align: start;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  cursor: pointer;
}
.ss__opt:hover { background: var(--color-surface-hover); }

/* The highlighted result is the one Enter will choose, so it must be
   unmistakable — the keyboard path is the fast path for this control and an
   operator who cannot see where they are will reach for the mouse. */
.ss__opt.is-active { background: var(--color-surface-selected); }
.ss__opt.is-active .ss__opt-t { color: var(--color-primary); }

.ss__opt-t {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

/* The identifier, right-aligned so identifiers line up down the list and can
   be compared at a glance — the same reasoning as tabular figures in a grid. */
.ss__opt-m {
  font-size: var(--fs-2xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: end;
  white-space: nowrap;
}

.ss__opt-s {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss__empty,
.ss__more {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
}
.ss__more { border-block-start: 1px solid var(--color-border-subtle); }

/* --- The chosen record ---------------------------------------------------- */

/* Shown as a RESULT, not as text in a box. After choosing, the operator still
   needs to be able to confirm they picked the right one of several similar
   names — which is exactly what the paged dialogue made impossible, because
   it closed the moment Select was pressed. */
.ss--chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-block-size: var(--ctl-h-md);
}

.ss__pick { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.ss__pick-t { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.ss__pick-m { font-size: var(--fs-2xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums slashed-zero; }
.ss__pick-s { font-size: var(--fs-2xs); color: var(--color-text-tertiary); }

.ss__clear {
  flex: none;
  display: inline-flex;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.ss__clear:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.ss__clear svg { inline-size: 14px; block-size: 14px; }

/* A locked choice shows a padlock instead of a clear button. It is locked
   because the PAGE that opened the form already decided — arriving from a
   client's own Accounts tab, the owner is not a question. */
.ss--chosen.is-locked { background: var(--color-surface); border-style: dashed; }
.ss__lock { flex: none; display: inline-flex; color: var(--color-text-tertiary); padding: var(--space-2); }
.ss__lock svg { inline-size: 14px; block-size: 14px; }