/* ══════════════════════════════════════════════════
   PREDICTIONS (js/18-predict.js) — every account
   The client list that hangs under the name box, and
   the brand buttons on top of the price-list results.
   ══════════════════════════════════════════════════ */

/* the typed start of a word, in bold */
.p-hit { font-weight: 700; color: var(--ink); }

/* ── Clients we already know: a list under the name (or phone) box ── */
.lookup-host { position: relative; }
.lookup {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 260px; max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(22,21,15,.16);
}
.lookup.show { display: block; }
.lk-row {
  display: block; width: 100%; text-align: left; min-height: 54px; padding: 9px 14px;
  border: none; border-bottom: 1px solid var(--line-soft); background: none; cursor: pointer;
  touch-action: manipulation; font: inherit; color: inherit;
}
.lk-row:last-of-type { border-bottom: none; }
.lk-row:hover, .lk-row.on, .lk-row:active { background: var(--gold-soft); }
.lk-name { display: block; font-size: 15.5px; line-height: 1.3; color: var(--text); }
.lk-meta { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.lk-more { padding: 10px 14px 12px; font-size: 12px; color: var(--faint); text-align: center; border-top: 1px solid var(--line-soft); }

/* ── Price list: brand buttons, then the bunches ── */
.p-chips {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 12px;
  background: var(--card-2); border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 1;
}
.p-chip {
  height: 38px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; font-size: 13.5px;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.p-chip:hover { border-color: var(--gold); }
.p-chip:active { background: var(--gold-soft); }
.p-chip .p-n { color: var(--faint); font-size: 12px; margin-left: 3px; }
.p-chip.cat { border-style: dashed; color: var(--muted); }
.p-empty, .p-more { padding: 14px; font-size: 12.5px; color: var(--faint); text-align: center; }
@media (hover: none), (any-pointer: coarse) {
  .p-chip { height: 44px; padding: 0 16px; font-size: 14px; }
  .lk-row { min-height: 56px; }
}

/* a phone: the brand buttons in one row that slides sideways, not a stack */
@media (max-width: 620px) {
  .p-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .p-chips::-webkit-scrollbar { display: none; }
  .p-chip { flex: none; }
}