.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 { opacity: 0; pointer-events: none; }
:where(.pick.on, .pick.editing, .pick.wrap:hover, .repo-settings .pick) .hit { opacity: .5; pointer-events: auto; }
.pick.editing { animation: card-dance .45s ease-in-out infinite alternate; }
.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 {
  flex: 1;
  min-width: 0;
  unicode-bidi: plaintext;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick.open { align-items: flex-start; }
.pick.wrap { flex-wrap: wrap; align-items: 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: 2px; }

.pick-value {
  flex: 1;
  min-width: 0;
  max-width: calc(var(--base-size) * 56);
  unicode-bidi: plaintext;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick:has(.pick-value) .pick-label, .pick:has(.chat-when) .pick-label, .pick:has(.chat-place) .pick-label { flex: 0 1 auto; }
.pick.wrap .pick-label { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.pick.wrap .chat-when { display: none; }
.pick.wrap .chat-place { flex: 0 0 100%; padding-left: calc(var(--base-size) * 5); font-size: calc(var(--base-size) * 3); line-height: calc(var(--base-size) * 3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pick-text {
  flex: 1;
  min-width: 0;
  max-width: calc(var(--base-size) * 56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}
.pick-text:focus { white-space: normal; }
.pick-entry { flex: 0 0 auto; width: auto; min-width: 1ch; field-sizing: content; background: transparent; border: none; padding: 0; outline: none; font: inherit; color: inherit; }
.pick-address { display: flex; align-items: center; min-width: 0; }
.json-doc .pick-text { white-space: normal; max-width: none; overflow: visible; }
.pick:has(.pick-text) .pick-label { flex: 0 1 auto; }
.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; }

.mono { font-family: Source Code Pro, monospace; }
.bike-inspector { max-height: 50vh; padding: calc(var(--base-size) * 3); }