/*--------------------------------------------------------------
# BetTrackr TagPicker v1 (token-driven)
#
# Companion to tagpicker_v1.js. Requires tokens + theme css first.
# One pill: tag icon, picked tags as colour dot + name (never wraps,
# fades at the cap with a count badge), caret. The sheet follows the
# multiselect_v1.1 recipe: surface bg, hairline border, input radius,
# token shadow, checkbox rows with a colour swatch.
--------------------------------------------------------------*/

.tagpicker {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

/* -- pill -- */
.tagpicker-pill {
  font: inherit;
  font-size: 0.9rem;
  color: var(--bettrackr-text);
  background: transparent;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(100%, 22rem);
  min-width: 0;
  border: 1px solid var(--bettrackr-input-border, var(--bettrackr-border));
  border-radius: var(--bettrackr-r-pill, 9999px);
  padding: 0.3rem 0.55rem 0.3rem 0.7rem;
  line-height: 1.5;
  transition: border-color 0.15s, background-color 0.15s;
}
.tagpicker-pill:hover {
  background: var(--bettrackr-surface-alt);
}
.tagpicker-pill:focus-visible,
.tagpicker-open .tagpicker-pill {
  outline: 0;
  border-color: var(--bettrackr-primary);
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}
.tagpicker-ico {
  color: var(--bettrackr-text-muted);
  font-size: 1rem;
  flex: 0 0 auto;
}
.tagpicker.has-tags .tagpicker-ico {
  color: var(--bettrackr-primary);
}
.tagpicker-caret {
  color: var(--bettrackr-text-muted);
  font-size: 0.75rem;
  flex: 0 0 auto;
  margin-left: 0.1rem;
}
.tagpicker-placeholder {
  color: var(--bettrackr-text-muted);
  white-space: nowrap;
}

/* the picked tags: one line, hidden overflow, faded right edge when clipped */
.tagpicker-chips {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.tagpicker-chips.fits {
  -webkit-mask-image: none;
  mask-image: none;
}
.tagpicker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--bettrackr-text);
}
.tagpicker-chip + .tagpicker-chip::before {
  content: "";
  width: 1px;
  height: 0.8rem;
  background: var(--bettrackr-input-border, var(--bettrackr-border));
  margin-right: 0.15rem;
}
.tagpicker-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tagpicker-count {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: var(--bettrackr-r-pill, 9999px);
  background: var(--bettrackr-primary);
  color: var(--bettrackr-on-primary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3rem;
  flex: 0 0 auto;
}

/* compact pill (bookmaker header, beside the btn-sm star) */
.tagpicker-sm .tagpicker-pill {
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
  gap: 0.3rem;
  max-width: min(100%, 16rem);
}
.tagpicker-sm .tagpicker-chip { font-size: 0.78rem; }
.tagpicker-sm .tagpicker-ico { font-size: 0.9rem; }
.tagpicker-sm .tagpicker-count { line-height: 1.15rem; font-size: 0.68rem; }

/* -- sheet -- */
.tagpicker-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1060; /* above the offcanvas (1045) and its backdrop */
  min-width: 16rem;
  max-width: 20rem;
  padding: 0.3rem 0;
  border: 1px solid var(--bettrackr-border);
  border-radius: var(--bettrackr-r-input, 12px);
  background: var(--bettrackr-surface);
  color: var(--bettrackr-text);
  box-shadow: var(--bettrackr-shadow);
  font-size: 0.875rem;
  font-weight: normal;
  text-align: left;
  white-space: normal;
}
.tagpicker-open .tagpicker-menu { display: block; }
.tagpicker-menu-right,
.tagpicker-menu-flip { left: auto; right: 0; }
.tagpicker-menu-full { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; max-width: none; }

@media (prefers-reduced-motion: no-preference) {
  .tagpicker-open .tagpicker-menu { animation: tagpicker-pop 0.12s ease-out; }
}
@keyframes tagpicker-pop {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* -- search (input recipe) -- */
.tagpicker-search {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--bettrackr-border);
}
.tagpicker-search input {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--bettrackr-text);
  background: var(--bettrackr-input-bg, var(--bettrackr-surface-alt));
  border: 1px solid var(--bettrackr-input-border, var(--bettrackr-border));
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
}
.tagpicker-search input:focus {
  outline: 0;
  border-color: var(--bettrackr-primary);
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}

/* -- options -- */
.tagpicker-list {
  max-height: 15.5rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.tagpicker-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  color: var(--bettrackr-text);
  user-select: none;
  -webkit-user-select: none;
}
.tagpicker-opt:hover { background: var(--bettrackr-surface-alt); }
.tagpicker-opt input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
.tagpicker-opt input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}
.tagpicker-txt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tagpicker-hide { display: none; }
.tagpicker-empty,
.tagpicker-nomatch {
  padding: 0.6rem 0.85rem;
  color: var(--bettrackr-text-muted);
}
.tagpicker-swatch {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}

/* -- "Add" row: shown when the typed name is a new tag -- */
.tagpicker-create {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem 0.45rem;
  border-top: 1px solid var(--bettrackr-border);
  margin-top: 0.25rem;
}
.tagpicker-create.is-busy { opacity: 0.6; pointer-events: none; }
.tagpicker-create-btn {
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bettrackr-primary);
}
.tagpicker-create-btn:hover { background: var(--bettrackr-surface-alt); }
.tagpicker-create-btn:disabled {
  color: var(--bettrackr-text-muted);
  font-weight: 500;
  cursor: default;
  background: transparent;
}
.tagpicker-create-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}
.tagpicker-create-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tagpicker-colours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.5rem;
}
.tagpicker-colour {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--bettrackr-border);
}
.tagpicker-colour.is-picked {
  border-color: var(--bettrackr-surface);
  box-shadow: 0 0 0 2px var(--bettrackr-text);
}
.tagpicker-colour:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}

/* -- footer: New tag (left), Clear (right) -- */
.tagpicker-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.3rem;
  border-top: 1px solid var(--bettrackr-border);
}
.tagpicker-new {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  margin-right: auto;
  padding: 0.3rem 0.1rem;
  border: 0;
  background: transparent;
  color: var(--bettrackr-primary);
  border-radius: 0.25rem;
}
.tagpicker-new:hover { text-decoration: underline; }
.tagpicker-new:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}
.tagpicker-clear {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: var(--bettrackr-r-pill, 9999px);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--bettrackr-border);
  background: transparent;
  color: var(--bettrackr-text-muted);
}
.tagpicker-clear:hover {
  background: var(--bettrackr-surface-hover, var(--bettrackr-surface-alt));
  color: var(--bettrackr-text);
}
.tagpicker-clear:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
}

/* phones: the sheet spans the panel rather than hanging off the pill */
@media (max-width: 767.98px) {
  .tagpicker-menu { min-width: min(18rem, calc(100vw - 1.5rem)); }
  .tagpicker-pill { max-width: 100%; }
}