/* ============================================================================
   new-ui/search-v2.css — the results state's SEARCH v2 marks (2026-10-22; live 2026-10-23).
   Doc: docs/features/search-v2.md · loaded by index.php in the results state only.
     - an excluded condition's chip ("Jo: Pejë");
     - the notes: what the request asked for but was NOT applied (never hidden);
     - the possible matches: their count in the header, their group's head and
       the pill on each card (with the reason for a screen reader / the title).
   Colours are the house tokens (tokens.css), with their own fallbacks.
   ============================================================================ */

/* an excluded condition ("Jo: Pejë"): the same chip on the house's pale coral */
.kj-chip--read.kj-chip--neg { border-color: var(--kj-coral-200, #FFC9C4); background: var(--kj-coral-50, #FFF1EF); }

/* the positions behind a group chip («Marketing» · "28 pozita", 2026-10-23): a long name ("Bashkëpunëtor në Ekipin e
   Komunikimit në Marketing") wraps inside the card on a phone — never past its edge */
.kj-srch__xroles[open], .kj-srch__xchips { min-width: 0; max-width: 100%; }
.kj-srch__xchips .kj-chip--read { height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; white-space: normal; line-height: 1.3; }

/* what was not applied — one line each, under the chips */
.kj-srch__notes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kj-srch__note {
  position: relative;
  padding: 8px 12px 8px 30px;
  border-radius: 10px;
  background: var(--kj-b3-warning-bg, #FFF6E5);
  color: var(--kj-b3-body, #313C53);
  font-size: 13.5px;
  line-height: 1.45;
}
.kj-srch__note::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kj-b3-warning, #E8A33D);
}
.kj-srch__note--keyword { background: var(--kj-b3-info-bg, #EEF4FF); }
.kj-srch__note--keyword::before { background: var(--kj-b3-info, #3D6FE8); }
.kj-srch__note--impossible,
.kj-srch__note--ai { background: var(--kj-b3-danger-bg, #FFF0F0); }
.kj-srch__note--impossible::before,
.kj-srch__note--ai::before { background: var(--kj-b3-danger, #E5484D); }

/* the header: "12 shpallje të gjetura · 3 mund të përputhen" */
.kj-srch__maybe-n { font-weight: 600; color: var(--kj-b3-muted, #6B7890); }

/* the possible group's head, before its first card */
.kj-srch__maybehead {
  margin: 18px 0 10px;
  padding: 10px 14px;
  border: 1px dashed var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 12px;
  color: var(--kj-b3-body, #313C53);
  font-size: 13.5px;
  line-height: 1.45;
}
.kj-srch__maybehead strong { color: var(--kj-b3-title, #1B2437); margin-right: 4px; }
.kj-srch__maybehead[hidden] { display: none; }

/* the pill on a possible match: quiet, outlined — never the gradient of "Rekomanduar" */
.kj-jc__maybe {
  height: 21px;
  padding: 0 9px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  color: var(--kj-b3-muted, #6B7890);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
}
/* the reason: read out, not drawn (the title shows it on hover; the group's head explains it) */
.kj-jc__maybe-why {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}