/* One editable team name, with saved-team suggestions. */
.create-form .team-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}
.team-picker > input[type="hidden"],
.team-picker-popup[hidden] {
  display: none !important;
}
.create-form .team-picker > input.saved-name {
  cursor: text;
}
.team-picker-popup {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  inset-inline: 0;
  min-width: 0;
  max-height: min(340px, 48vh);
  max-height: min(340px, 48dvh);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 5px;
  border: 1px solid var(--input-border, var(--line));
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--dialog-shadow, 0 16px 40px rgba(0, 0, 0, .24));
}
.team-picker-list {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.team-picker-option {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.team-picker-option:hover:not([aria-disabled="true"]),
.team-picker-option.is-active {
  background: var(--hover-surface, var(--surface-raised));
  border-color: var(--accent);
}
.team-picker-option.is-current:not(.is-active) {
  background: var(--surface-raised);
}
.team-picker-option[aria-disabled="true"] {
  cursor: default;
  background: transparent;
}
.team-picker-option[aria-disabled="true"] .team-picker-name {
  color: var(--body-muted, var(--muted));
}
.team-picker-swatch {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--option-color);
  border: 1px solid var(--input-border, var(--line));
  box-shadow: inset 0 0 0 2px var(--surface);
}
.team-picker-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.team-picker-name {
  font: 600 16px/1.35 var(--font);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.team-picker-meta,
.team-picker-message {
  font: 400 14px/1.45 var(--font);
  color: var(--body-muted, var(--muted));
  overflow-wrap: anywhere;
}
.team-picker-message {
  margin: 0;
  padding: 10px;
}
.team-picker-list:not(:empty) + .team-picker-message {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
@media (max-width: 380px) {
  .team-picker-option {
    gap: 8px;
    padding: 9px 7px;
  }
}