.pick {
  display: flex;
  align-items: center;
  gap: calc(var(--base-size) * 2);
  padding: calc(var(--base-size) * 1) 0;
  font-size: calc(var(--base-size) * 3.5);
  line-height: calc(var(--base-size) * 3.5);
  cursor: pointer;
}
.bike-tree .pick { padding: calc(var(--base-size) * 2) calc(var(--base-size) * 3); }
.bike-tree .pick:hover { background: var(--color-secondary-background); }
.bike-tree .pick.on    { background: var(--color-tertiary-background); }
.bike-tree .pick.on + .tree-kids { background: var(--color-secondary-background); }
.bike-tree .pick.on + .tree-kids .pick:hover { background: var(--color-tertiary-background); }

.hit { cursor: pointer; opacity: .5; }
:where(.pick) .hit { display: none; }
:where(.pick.on, .hits .pick) .hit, .pick .chat-box { display: block; }
.hit.off { opacity: .2; }
.hit:hover { opacity: 1; }
.hit-box {
  position: fixed;
  z-index: 10005;
  pointer-events: none;
  border-radius: var(--base-size);
  background: color-mix(in srgb, var(--color-primary-foreground) 9%, transparent);
}
svg.hit { box-sizing: content-box; padding: var(--base-size); margin: calc(-1 * var(--base-size)); }

.pick-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--base-size) * 2.5);
}

.pick-label, .pick-value, .pick-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-label, .pick-value { unicode-bidi: plaintext; }
.pick-value, .pick-text { max-width: calc(var(--base-size) * 56); }
.pick:has(.pick-value, .pick-text) .pick-label { flex: 0 1 auto; }
.chat-words { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--base-size) * 2); flex: 1 1 auto; min-width: 0; max-height: calc(var(--base-size) * 3.5); overflow: hidden; }
.chat-words .pick-label { flex: 0 0 auto; max-width: 100%; }
.chat-draft, .chat-place { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-draft { flex: 1 1 0; min-width: 8ch; }
.chat-place { flex: 0 0 auto; }

.pick.open { align-items: flex-start; }
.pick.done { opacity: .5; }
.pick.wrap { box-sizing: border-box; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; row-gap: 2px; padding: 3px 5px; background: var(--color-primary-background); border: 1px solid var(--color-secondary-background); border-radius: var(--radius-xs, 6px); }
.pick.wrap.on { background: var(--color-secondary-background); }
.pick.wrap .chat-box { margin-top: 1px; }

.pick.wrap .chat-words { max-height: none; flex: 1 1 0; }
.pick.wrap .pick-label { flex: 1 1 auto; }
.pick.wrap .chat-draft { flex: 0 1 auto; }
.pick.wrap .chat-place { order: 1; flex: 0 0 100%; font-size: calc(var(--base-size) * 3); line-height: calc(var(--base-size) * 3); }

.pick-text { outline: none; }
.pick-text:focus { white-space: normal; }
.json-doc .pick-text { white-space: normal; max-width: none; overflow: visible; }
.pick-token { border-bottom: 1px dotted var(--color-tertiary-background); }
.pick-token.on { border-bottom-color: currentColor; }
.pick-ref { border-bottom-style: solid; cursor: pointer; }
.pick-ref:hover { border-bottom-color: currentColor; }

.bike-inspector { max-height: 50vh; padding: calc(var(--base-size) * 3); }