.pk { position: relative; min-width: 0; }
.pk-field { position: relative; display: flex; align-items: center; min-width: 0; }
.pk-inp, .pk-btn {
  width: 100%; min-width: 0; min-height: var(--control-height); padding: 0 calc(var(--s3) + 16px + var(--s2)) 0 var(--s3);
  border: 1px solid var(--control); border-radius: var(--radius-nested); background: var(--field, var(--ground)); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font); text-align: left; transition: border-color var(--t-fast) var(--ease-out);
}
.pk-inp { padding-left: calc(var(--s3) + 14px + var(--s2)); }
.pk.inline .pk-inp { padding-right: var(--s3); }
.pk-inp::placeholder { color: var(--faint); }
.pk-inp::-webkit-search-cancel-button { display: none; }
.pk-inp:hover, .pk-btn:hover { border-color: var(--control-hover); }
.pk-inp:focus-visible, .pk-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: transparent; }
.pk-lead { position: absolute; left: calc(var(--s3) + 1px); width: 14px; height: 14px; color: var(--faint); pointer-events: none; }
.pk-btn { display: flex; align-items: center; cursor: pointer; }
.pk-val { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-val.ph { color: var(--faint); }
.pk-chev { position: absolute; right: calc(var(--s3) + 1px); display: grid; place-items: center; width: 16px; height: 16px; color: var(--muted); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.pk-chev svg { width: 16px; height: 16px; }
.pk-field:hover .pk-chev { color: var(--text); }
.pk.open .pk-chev { transform: rotate(180deg); color: var(--text); }
.pk.off .pk-inp, .pk.off .pk-btn { color: var(--muted); background: transparent; border-style: dashed; cursor: default; }
.pk.off .pk-chev { visibility: hidden; }

.pk-list {
  position: absolute; z-index: 45; top: calc(100% + var(--s1)); left: 0; right: 0; max-height: calc(7 * 36px + 14px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--raised); color: var(--text);
  box-shadow: var(--shadow-float);
  scrollbar-width: thin; scrollbar-color: var(--control) transparent;
}
.pk-list.up { top: auto; bottom: calc(100% + var(--s1)); }
.pk-list { container-type: inline-size; }
@container (max-width: 400px) { .pk-opt .pk-chips-in, .pk-opt .pk-more { display: none; } }
.pk-list[hidden] { display: none; }
.pk-list.inline {
  position: static; height: calc(var(--pk-rows, 5) * 36px + 14px); max-height: none; margin-top: var(--s2);
  border-radius: var(--radius-nested); background: var(--ground); box-shadow: none;
}
.pk-opt {
  display: flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 10px; border-radius: var(--radius-small);
  font-weight: 500; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out);
}
.pk-opt.pk-act { background: var(--active); }
.pk-opt[aria-disabled="true"] { color: var(--muted); cursor: default; }
.pk-opt[aria-disabled="true"].pk-act { background: var(--panel); }
.pk-t { display: flex; align-items: baseline; min-width: 64px; flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
.pk-t > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pk-t .twin { margin-left: var(--s1); }
.pk-why { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; }
.pk-hash { flex: none; width: 16px; color: var(--muted); text-align: center; font-weight: 500; }
.pk-emo { flex: none; display: grid; place-items: center; width: 20px; height: 20px; font-size: 18px; line-height: 1; object-fit: contain; }
.pk-opt .role-dot { margin: 0 3px; }
.pk-opt .pic.s24 { margin-left: -2px; }
.pk-chips-in { display: flex; flex: none; gap: var(--s1); max-width: 45%; overflow: hidden; }
.pk-chips-in .pill.role { height: 20px; padding: 0 var(--s2); font-weight: 400; }
.pk-chips-in .pill.role .role-dot { width: 8px; height: 8px; margin: 0; }
.pk-more { flex: none; color: var(--faint); font-size: var(--fs-small); line-height: 20px; font-variant-numeric: tabular-nums; }
.pk-tick { flex: none; width: 16px; height: 16px; margin-left: auto; position: relative; }
.pk-tick::before { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 6px; border: solid var(--text); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.pk-box { position: relative; flex: none; width: 16px; height: 16px; border: 1px solid var(--control); border-radius: 4px; background: var(--field, var(--ground)); transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.pk-opt.chosen .pk-box { border-color: var(--text); background: var(--text); }
.pk-opt.chosen .pk-box::before { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 4px; border: solid var(--ground); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.pk-opt[aria-disabled="true"] .pk-box { border-style: dashed; }
.pk-g { padding: var(--s2) 10px var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.pk-g:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--rule); padding-top: var(--s3); }
.pk-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); min-height: 36px; padding: 0 10px; color: var(--muted); }
.pk-state.err { color: var(--pill-negative-ink); }
.pk-state.more { min-height: 28px; font-size: var(--fs-small); line-height: var(--lh-small); }

.pk-sel.on { padding-top: var(--s2); }
.pk-sel:not(.on) > * { display: none; }
.pk-sel-h { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.pk-chips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s1); padding: 0; list-style: none; }
.pk-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 2px 0 var(--s2);
  border: 1px solid var(--control); border-radius: var(--round); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500;
}
.pk-chip.k-member { padding-left: 3px; }
.pk-chip > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-chip .role-dot { width: 8px; height: 8px; }
.pk-chip .twin { margin-left: -2px; }
.pk-chip .pic.s20 { width: 20px; height: 20px; font-size: 10px; }
.pk-x { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 0; border-radius: var(--round); background: none; color: var(--muted); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.pk-x svg { width: 14px; height: 14px; }
.pk-x:hover { background: var(--active); color: var(--text); }
.pk-x:focus-visible { outline: 2px solid var(--text); outline-offset: 0; }

.ctx.panel:has(.pk-list:not([hidden]):not(.inline)) { overflow: visible; }
.rv.open > .rv-in:has(.pk-list:not([hidden]):not(.inline)) { overflow: visible; }

.seg { --seg-pad: 2px; display: flex; width: 100%; min-width: 0; padding: var(--seg-pad); gap: var(--seg-pad); border: 1px solid var(--control); border-radius: var(--radius-nested); background: var(--field, var(--ground)); }
.seg-b {
  flex: 1 1 auto; min-width: 0; height: calc(var(--control-height) - 2 * var(--seg-pad) - 2px); padding: 0 var(--s3); border: 0; border-radius: calc(var(--radius-nested) - var(--seg-pad) - 1px); background: none; color: var(--muted);
  font: 500 var(--fs-body)/var(--lh-body) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seg-b:hover { color: var(--text); }
.seg-b[aria-checked="true"] { background: var(--active); color: var(--text); }
.seg-b:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

@media (max-width: 760px), (pointer: coarse) {
  .pk-inp, .pk-btn { font-size: 16px; }
  .pk-opt { min-height: 44px; }
  .pk-list { max-height: calc(6 * 44px + 14px); }
  .pk-list.inline { height: calc(var(--pk-rows, 5) * 44px + 14px); }
  .pk-chip { height: 36px; padding-left: var(--s3); }
  .pk-chip.k-member { padding-left: 7px; }
  .pk-x { width: 32px; height: 32px; }
  .seg { --seg-pad: 1px; }
}
@media (prefers-reduced-motion: reduce) { .pk-chev, .pk-opt, .pk-x, .pk-box, .seg-b, .pk-inp, .pk-btn { transition: none; } }